@charset "utf-8";

:root {
	--color-blue: #246cc6;
	--font-g:"itc-avant-garde-gothic-pro", sans-serif;
	--font-s:"'M PLUS 2', sans-serif;";
	--font-k:"kozuka-gothic-pr6n", sans-serif;
	--font-f:futura-pt, sans-serif;
	--weight-3:300;
	--weight-5:500;
	--weight-7:700;
}

html { scroll-behavior: smooth;}
html,
body {
	width: 100%;
	height: 100%;
}

body {
	font-family: 'Noto Sans Japanese', "游ゴシック", "Yu Gothic", YuGothic, 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-weight: normal;
	line-height: 1.2;
	overflow-x: hidden;
	color: #535353;
	line-break: strict;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	font-size: 0;
	line-height: 0;
	border: 0;
}

.elps {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.clamp_2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
/************************************************

common

**************************************************/

.inner {
	max-width: 1200px;
	margin: 0 auto;
}
section {
	margin-bottom: 100px;
}

.key, .inner_block {
	margin-bottom: 100px;
}
.u-ttl {
	text-align: center;
	font-size: 30px;
	margin-bottom: 80px;
	font-weight: bold;
}
.map {
	width: 50%;
}
.map iframe {
	width: 100%;
	height: 100%;
}
.map {
	position: relative;
	width: 50%;
}
.map iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.main {
	padding-top: 100px;
}
/************************************************

header

**************************************************/

.nav_list {
	display: flex;
	align-items: center;
	gap: 0px 40px;
}
.nav_list-item {
	text-align: center;
}
.nav_list-item a {
	font-size: 18px;
	color: var(--color-blue);
}

.nav_list-item span {
	font-size: 12px;
	display: block;
	margin-top: 5px;
	font-weight: normal;
	font-family: initial;
}
.header .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
}
.nav_list-item a {
	letter-spacing: 0.2em;
	font-weight: 600;
	font-family:var(--font-f);
}

.nav_list-item.contact a {
	background: #01479d;
	background: -moz-linear-gradient(left, #01479d 0%, #1172b7 50%, #239fd5 100%);
	background: -webkit-linear-gradient(left, #01479d 0%,#1172b7 50%,#239fd5 100%);
	background: linear-gradient(to right, #01479d 0%,#1172b7 50%,#239fd5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01479d', endColorstr='#239fd5',GradientType=1 );
	color: #fff;
	padding: 15px 30px;
	box-sizing: border-box;
	font-size: 14px;
}
.logo {
	max-width: 15%;
}
.header_inner {
	display: flex;
	align-items: center;
	padding: 0px 20px;
	height: 100px;
}
.header_inner-right {
	flex: 1;
	display: flex;
	justify-content: right;
	align-items: center;
	gap: 0 20px;
}

.name > span {
	display: block;
	font-size: clamp(0.8125rem, 0.6872rem + 0.2606vw, 1rem);
	letter-spacing: -1px;
}
.name {
	text-align: right;
	font-family: var(--font-g);
}
.name em {
	font-weight: 600;
	font-size: clamp(1.125rem, 0.7074rem + 0.8688vw, 1.75rem);
	display: flex;
	align-items: center;
	gap: 0 5px;
}
.name .com {
	font-size: 21px;
}
/************************************************

title

**************************************************/
.c_ttl {
	text-align: center;
	color: var(--color-blue);
	margin-bottom: 50px;
	font-family: var(--font-g);
	font-weight: 700;
	letter-spacing: 0.05em;
	font-size: clamp(1.125rem, -0.4539rem + 5.5866vw, 6.25rem);
	position: relative;
}
.c_ttl span {
	display: block;
	color: #000;
	font-family: var(--font-s);
	font-size: clamp(1.25rem, 0.8205rem + 0.6704vw, 1.625rem);
}
.c_ttl em {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	line-height: 1;
}

/************************************************

footer

**************************************************/

.footer {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#01479d+0,1172b7+50,239fd5+100 */
	background: #01479d; /* Old browsers */
	background: -moz-linear-gradient(left, #01479d 0%, #1172b7 50%, #239fd5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #01479d 0%,#1172b7 50%,#239fd5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #01479d 0%,#1172b7 50%,#239fd5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01479d', endColorstr='#239fd5',GradientType=1 ); /* IE6-9 */
	padding: 60px 0 20px;
}
.footer .nav_list {
	justify-content: center;
	margin-bottom: 60px;
}
.footer .nav_list-item a {
	color: #fff;
	display: block;
}
.footer .nav_list-item.contact a {
	color: #000;
	background: #fff;
}
.copyrights {
	color: #fff;
	text-align: center;
	font-size: 12px;
}
.footer .nav_list-item.contact a {
	border-radius: 10px;
}
@media screen and (min-width: 1024px) {
	.pc {display: none !important;}
	.header {
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}
	.spo_list-item a:hover, .news_list-item a:hover, .nav_list-item a:hover, .center_list-item a:hover {
		opacity: .7;
		transition: .2s;
	}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
	.pc {display: none !important;}
	.main {
		padding-top: 0;
	}
	.name {
	display: none;
}
}
@media screen and (max-width: 768px) {
	.sp {display: none !important;}
	html {
		font-size: 62.5%;
		}
	body {line-height: 1.2;}
	.name {
		display: none;
	}

	.header {
		display: none;
		background: #fff;
		position: fixed;
		width: 100%;
		z-index: 1;
	}
	.header .inner {
		padding: 5px 0;
	}
	.header_inner {
		padding: 10px 20px;
		height: auto;
	}
	.logo {
		text-align: center;
		margin: 0 auto;
		max-width: 40%;
	}
	.c_ttl {
		font-size: 5rem;
	}
	.c_ttl span {
		font-size: 1.6rem;
		margin-top: .5rem;
		font-family: 'M PLUS 2', sans-serif;
	}
	.c_ttl em::before {
		height: 85%;
	}
	.main {
		padding-top:0;
	}
	
	.map {
		width: 100%;
		padding-top: 100%;
	}
	section {
		margin-bottom: 5rem;
		scroll-margin-top: 80px;
	}
	
	.footer .nav_list {
		flex-wrap: wrap;
		gap: 40px 30px;
	}
	.footer .nav_list-item a {
		font-size: 1.4rem;
	}
	.nav_list-item span {
		font-size: 1rem;
	}
	.footer .nav_list-item.contact a {
		display: block;
		border-radius: 5px;
		padding: 10px 4rem;
		font-size: 1.3rem;
	}
	.ft_fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.fixed_menu {
		background: #fff;
		display: flex;
		align-items: stretch;
	}
	.fixed_menu-item {
		width: calc(100% / 4);
		text-align: center;
	}
	.fixed_menu-item.active {
		background: #fff;
	}
	.fixed_menu-item a {
		display: flex;
		padding: 10px 0 5px;
		color: #000;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.fixed_menu-item span {
		display: block;
		font-size: 13px;
		font-weight: 500;
	}
	.fixed_menu-item img {
		max-width: 35%;
		margin-bottom: 5px;
	}

	/****************************
	ヘッダーメニュー　SP

	*****************************/
	#toggle-box {
		position: relative;
		width: 30px;
		height: 22px;
		cursor: pointer;
		z-index: 999999;
	}

	#toggle-box {
		position: relative;
		width: 30px;
		height: 27px;
		cursor: pointer;
	}

	#toggle-box > span {
		width: 100%;
		height: 4px;
		left: 0;
		display: block;
		background: var(--color-blue);
		position: absolute;
		transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;
		border-radius: 10px;
	}

	#toggle-box>span:nth-child(1) {
		top: 0;
	}

	#toggle-box>span:nth-child(2) {
		top: 50%;
		transform: translatey(-50%);
	}

	#toggle-box>span:nth-child(3) {
		bottom: 0;
	}

	.is-open #toggle-box > span {
		background: var(--color-blue);
	}
	.is-open #toggle-box > span:nth-child(1) {
		top: 50%;
		transform: rotate(40deg) translatey(-50%);
	}
	.is-open #toggle-box>span:nth-child(2) {
		width: 0;
	}

	.is-open #toggle-box > span:nth-child(3) {
		top: 50%;
		transform: rotate(-40deg) translatey(-50%);
	}

	/* z-index */
	#toggle {
		position: absolute;
		right: 15px;
		top: 30%;
	}
	.header_inner {
	display: block;
	}
	#main {
		position: relative;
		z-index: 990;
	}

	#nav-content {
		display: none;
		z-index: 900;
		overflow: auto;
		width: 100%;
		height: 100%;
		background: #fff;
		color: #000;
		position: fixed;
		top: 0;
		left: 0;
		font-size: 1.4rem;
	}

	#nav-content ul {
		list-style: none;
	}

	#nav-content a {
		display: block;
		color: #000;
		text-decoration: none;
		padding: 20px 10px 20px 10px;
		transition: opacity .6s ease;
		pointer-events: none;
		text-align: left;
		border-bottom: 1px solid #444;
	}

	#nav-content a:hover {
		opacity: 0.6;
	}

	.is-open {
		overflow: hidden;
	}

	.is-open #nav-content {
		z-index: 999;
		visibility: visible;
		opacity: 1;
		background: #fff;
	}

	.is-open #nav-content a {
		pointer-events: auto;
		font-size: 1.4rem;
		text-align: left;
		padding: 20px 10px 20px 10px;
		border-bottom: 1px solid #444;
	}
	#nav-content .inner {
		display: block;
	}

}