@charset "UTF-8";

html {
	font-size: 62.5%;
	/* ブラウザ既定16px × 62.5% = 10px → 1rem = 10px */
	/* 
	html,body 以外の個所ではfont-sizeは下記の用にremで指定
	14px = 1.4rem
	15px = 1.5rem
	16px = 1.6rem
	17px = 1.7rem 
	*/
}

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

	body {
		/* font-size: 100%; */
		font-size: 1.4rem;
		color: #000;
		background: #ffffff;
		line-height: 1.86666667;
		word-wrap: break-word;
		overflow-x: hidden;
	}

	a,
	span,
	img {
		transition-duration: 0.3s;
		-webkit-transition-duration: 0.3s;
		-moz-transition-duration: 0.3s;
		-o-transition-duration: 0.3s;
		-ms-transition-duration: 0.3s;
	}

	a,
	a:link,
	a:visited {
		color: var(--color-secondary);
	}

	a:hover {
		color: var(--color-secondary);
	}

	#top {
		position: relative;
	}

	/* #md-site {
		padding-top: 60px !important;
	} */

	.container-inner {
		width: auto;
		padding: 0 20px;
	}

	.fade-in {
		opacity: 0.0;
		-webkit-transform: translate(0, 50px);
		-moz-transform: translate(0, 50px);
		-o-transform: translate(0, 50px);
		-ms-transform: translate(0, 50px);
		transform: translate(0, 50px);
		-webkit-transition: all 500ms;
		-moz-transition: all 500ms;
		-o-transition: all 500ms;
		-ms-transition: all 500ms;
		transition: all 500ms;
	}

	.scroll-in {
		opacity: 1;
		-webkit-transform: translate(0, 0);
		-moz-transform: translate(0, 0);
		-o-transform: translate(0, 0);
		-ms-transform: translate(0, 0);
		transform: translate(0, 0);
	}



	/* HEADER */


	#header {
		position: absolute;
		top: 8px;
		left: 0;
		width: 100%;
		height: 70px;
		z-index: 3000;

		&.sp-nav {
			position: fixed;

			&::before {
				height: 50px;
				background: #fff0;
			}

			.primary {
				.h-logo {
					padding-top: 45px;
					text-align: center;

					a {
						color: #fff;
						transform: scale(1.2);
					}
				}
			}
		}


		.primary {
			.h-logo {
				width: 280px;
				margin: auto;

				a {
					color: var(--color-body);
					display: inline-block;
					text-decoration: none;

					&:hover,
					&:active {
						filter: alpha(opacity=60);
						/* IE 6,7*/
						-ms-filter: "alpha(opacity=60)";
						/* IE 8,9 */
						-moz-opacity: 0.6;
						/* FF , Netscape */
						-khtml-opacity: 0.6;
						/* Safari 1.x */
						opacity: 0.6;
						zoom: 1;
						/*IE*/
					}
				}
			}
		}



		.secondary {
			display: none;
		}

	}



	/* FOOTER */
	#footer {
		color: #fff;
		background: linear-gradient(150deg, rgb(92 105 255) 12%, rgb(5 61 155) 60%, rgb(5 72 126) 95% 72%);

		.container-inner {
			padding: 20px;
			display: flex;
			flex-direction: column;
			gap: 25px;
		}

		a {
			color: #ffffff;
			text-decoration: none !important;
		}

		.f-logo {
			width: 325px;


			.ja {
				display: block;
				font-family: var(--font-mincho);
				font-size: 1.9rem;

				span {
					font-size: 3.0rem;
					margin-left: 10px;
				}
			}

			.en {
				font-family: var(--font-bona);
				font-size: 1.6rem;
				line-height: 1.4;
				display: inline-block;
			}

			a {
				&:hover {
					text-decoration: none !important;
					filter: alpha(opacity=60);

					/* IE 6,7*/
					-ms-filter: "alpha(opacity=60)";

					/* IE 8,9 */
					-moz-opacity: 0.6;

					/* FF , Netscape */
					-khtml-opacity: 0.6;

					/* Safari 1.x */
					opacity: 0.6;
					zoom: 1;

					/*IE*/
				}
			}
		}

		.f-address {
			margin-bottom: 20px;

			.f-place,
			.f-tel,
			.f-fax {
				display: block;
				margin-bottom: 0;
				text-align: center;
			}

			.f-map {
				display: block;
				text-align: center;

				a {
					display: inline-block;
					padding: 2px 10px;
					text-decoration: none;
					border: 1px solid #ffffff;

					&:hover {
						background-color: rgba(255, 255, 255, 0.3);
					}
				}
			}
		}

		.f-details {
			flex-grow: 1;
			color: #fff;

			.f-btn {
				display: flex;
				flex-direction: column;
				gap: 10px;
				align-items: center;
				margin-bottom: 30px;
			}

			.btn-type02 {
				a {
					border-color: #fff;
					min-width: 250px;
					text-align: center;

					&::after {
						background-image: url(../images/common/anchor-arrow_white.svg);
					}
				}
			}

		}

		.copyright {
			margin: 0;
			padding: 0;
			font-size: 85.7142%;
			text-align: center;
		}
	}






	/* NAVIGATION */

	#nav {
		display: none;
	}

	#sp-menu {
		position: fixed;
		top: 15px;
		right: 15px;
		z-index: 3500;
		margin-bottom: 0;

		&.open {
			position: fixed;
			top: auto;
			bottom: 25px;
			right: auto;
			left: 50%;
			transform: translateX(-50%);
			z-index: 3500;
			margin-bottom: 0;
			box-shadow: 0 0 6px #8494af;
			border-radius: 50%;
			padding: 10px;
		}

		.menu {
			float: right;
			width: 35px;
			height: 35px;
			background: url(../images/common/anchor-circle.png)no-repeat center/contain;

			button {
				display: block;
				width: 100%;
				height: 100%;
				position: relative;
				background: rgb(0 0 0 /0);
				border: none;

				.icon {
					display: block;
					position: absolute;
					top: 35%;
					left: 0;
					right: 0;
					margin: auto;
					width: 35px;
					height: 3px;
					background: var(--color-primary);
					transition: .2s;

					&:before,
					&:after {
						display: block;
						content: "";
						position: absolute;
						top: 35%;
						left: 0;
						right: 0;
						margin: auto;
						width: 35px;
						height: 3px;
						background: var(--color-primary);
						transition: .3s;
					}

					&:before {
						margin-top: -10px;
					}

					&:after {
						margin-top: 8px;
					}

				}

				&.close {
					.icon {
						background: transparent;

						&::before {
							margin-top: 0;
							background: #fff;
							top: 3px;
						}

						&::after {
							margin-top: 0;
							background: #fff;
							top: 3px;
						}

						&::before {
							transform: rotate(-45deg);
							-webkit-transform: rotate(-45deg);
						}

						&::after {
							transform: rotate(-135deg);
							-webkit-transform: rotate(-135deg);
						}
					}

				}

			}
		}


	}

	#md-nav {
		position: fixed;
		top: 10px;
		right: 10px;
		bottom: 10px;
		left: 10px;
		overflow: auto;
		margin: auto;
		z-index: 2000;
		display: none;
		background: rgb(3 46 123 / 0.95);
		padding-top: 100px;
		/* background: rgb(0 145 219 / 0.95) */
		border-radius: 10px;
	}


	#sp-nav {
		margin: 30px;

		li {
			display: block;
			width: 100%;
			font-weight: bold;
			line-height: 1.4;
			/* border-bottom: 1px solid #ffffff; */
			color: #1eb5e1;

			&.separater {
				border-bottom: 3px solid #ffffff;
			}

			a,
			span.parent {
				display: block;
				padding: 12px 12px 12px 24px;
				text-decoration: none;
				color: #FFF;
				background-image: url(../images/common/anchor-w01.png);
				background-repeat: no-repeat;
				background-position: 10px 16px;
				background-size: 6px 10px;
				cursor: pointer;
			}

			a span.sub,
			span.parent span.sub {
				font-size: 10px;
			}

			ul {
				display: none;
				/* border-top: 1px solid #ffffff; */
				padding-top: 1px;
				margin: 0 0 10px 15px;
			}

			li {
				/* border-bottom: 1px dotted #ffffff; */

				&:last-child {
					border-bottom: none;
				}

				a,
				span.parent {
					display: block;
					font-size: 14px;
					background-image: url(../images/common/anchor-w02.png);
					background-position: 10px 14px !Important;
					background-repeat: no-repeat !Important;
					background-size: 6px 10px !Important;
					padding: 10px 10px 8px 24px;
				}
			}

			span.parent {
				span {
					display: block;
					min-height: 20px;
					background: url(../images/common/sp_nav_open.png) center right no-repeat;
					background-size: 20px 20px;
				}

				&.open {
					span {
						background: url(../images/common/sp_nav_close.png) center right no-repeat;
						background-size: 20px 20px;
					}

					background-color: rgba(255, 255, 255, 0.2);
				}
			}

			li {

				&.on a,
				a:hover {
					background-color: rgba(255, 255, 255, 0.2);
				}
			}

			span.cnst,
			li span.cnst {
				filter: alpha(opacity=50);
				-moz-opacity: 0.5;
				opacity: 0.5;
			}
		}

		>li {
			a:hover {
				background-color: rgba(255, 255, 255, 0.2);
			}

			&.on {

				>a,
				span.parent {
					background-color: rgba(255, 255, 255, 0.2);
				}
			}

			>a:hover {
				background-color: rgba(255, 255, 255, 0.2);
			}
		}
	}


	/* TITLE */
	#title {
		margin: 0;
		width: auto;
		height: 200px;
		background-image: url(../images/common/title-bg.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: relative;

		.container-inner {
			padding: 20px;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-align-items: flex-end;
			align-items: flex-end;
			text-align: center;
		}

		.title-box {
			display: inline-block;
			padding: 15px 30px;
		}

		.title {
			margin-bottom: 0;
			color: #FFF;
			font-weight: bold;
			letter-spacing: 0.5pt;
			text-indent: 0.5pt;
			line-height: 1.5;
			padding-top: 40px;

			.ja {
				font-size: 2.4rem;
				z-index: 1;
				position: relative;
				font-family: var(--font-mincho);

			}
		}
	}



	/* CONTENT */
	#content {
		color: #fff;

		.container-inner {
			padding: 0 20px;
		}
	}


	#breadcrumb li {
		display: inline-block;
		vertical-align: middle;
		font-size: 85.7142%;

		li a {
			color: #000000;
		}

		li.on {
			color: #000000;
			font-weight: bold;
		}
	}


	#c-wrapper {}

	#main {
		margin-bottom: 50px;
	}

	#side {
		padding: 10px;
	}

	#content #side #snav {
		padding: 0 10px;
	}

	.section {
		margin-bottom: 60px;
	}

	.section-s {
		margin-bottom: 40px;
	}

	.section-ss {
		margin-bottom: 20px;
	}

	.section-sss {
		margin-bottom: 10px;
	}

	.section-ssss {
		margin-bottom: 5px;
	}

	.pagetop {
		position: fixed;
		bottom: 2px;
		right: 0;
		text-align: right;
		margin: 0;
		z-index: 5000;

		a {
			display: block;
			width: 48px;
			height: 48px;
			line-height: 0;
			text-decoration: none;
			background-color: var(--color-primary);
			position: relative;

			&::before {
				position: absolute;
				content: '';
				left: 16px;
				top: 20px;
				width: 15px;
				height: 15px;
				border-top: 2px solid #fff;
				border-left: 2px solid #fff;
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			&:hover {
				filter: alpha(opacity=60);

				/* IE 6,7*/
				-ms-filter: "alpha(opacity=60)";

				/* IE 8,9 */
				-moz-opacity: 0.6;

				/* FF , Netscape */
				-khtml-opacity: 0.6;

				/* Safari 1.x */
				opacity: 0.6;
				zoom: 1;

				/*IE*/
			}

			img {
				display: none;
				// position: absolute;
				// top: 0;
				// right: 0;
				// bottom: 0;
				// left: 0;
				// margin: auto;
			}
		}
	}

	.inlink {
		margin-top: -65px;
		padding-top: 65px;
	}


	/* SNAV */
	#snav {
		.title-snav {
			padding: 5px 5px 3px;
			color: #ffffff;
			font-size: 1.2em;
			letter-spacing: 4pt;
			text-indent: 4pt;
			text-align: center;
			background-color: #f18c27;
		}

		.snav-list>li {
			>a {
				display: block;
				padding: 10px 10px 6px 36px;
				color: #000000;
				font-weight: bold;
				background-image: url(../images/common/anchor-type02.png);
				background-position: 24px 16px;
				background-repeat: no-repeat;
				background-size: 7px 12px;
				border-bottom: 1px solid #969696;
			}

			&.on>a,
			>a:hover {
				color: #f08b26;
				background-image: url(../images/common/anchor-type01.png);
			}
		}
	}

}