@charset "UTF-8";

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

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

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

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

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

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

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

/*-----------------------------------------------------------------------------------------
00001 TYPO


10000 ----------
10001 .area-hero
10002 .area-service
10003 .area-content
10004 .area-info
10005 .area-banner
10006 .area-station
10007 .area-gallery

----------------------------------------------------------------------------------------- */









/*-----------------------------------------------------------------------------------------
00001 TYPO
----------------------------------------------------------------------------------------- */
h2 {
	border: 0pt solid red;
	padding: 0;
	margin: 0 0 9.0rem 0;
	width: auto;
	justify-content: flex-start;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

h2 span {
	text-align: center;
	width: 28%;
	min-width: 51.0rem;
	height: 100%;
	background: var(--color-key);
	color: White;
	font-size: 7.0rem;
	font-family: "Jost", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	padding: 0.1em 0;
	margin: 0;
	background: linear-gradient(15deg, var(--color-key) 0%, var(--color-blue) 100%);
}

h2 small {
	font-size: 2.0rem;
	line-height: 1;
	width: auto;
	color: #999;
	font-weight: 600;
	padding: 0 0 0 2em;
	margin: 0;
}

h2.hanten {
	justify-content: flex-end;
}

h2.hanten span {
	background: white;
	color: var(--color-key);
	order: 2;
}

h2.hanten small {
	color: white;
	order: 1;
	padding: 0 2em 0 0;
}

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

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

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

@media screen and (max-width: 840px) {
	h2 {
		display: block;
		margin-bottom: 1.5rem;
	}

	h2 span {
		width: fit-content;
		min-width: initial;
		font-size: 7.0rem;
		font-size: calc(7.0vw * 1.5);
		padding: 0 !important;
		margin: 0 auto;
		display: block;
		background: transparent;
		color: var(--color-key);
	}

	h2 small {
		font-size: 2.0rem;
		padding: 1em 0 !important;
		width: 100%;
		display: block;
		text-align: center;
	}

	h2.hanten {}

	h2.hanten span {
		background: transparent;
		color: white;
	}

	h2.hanten small {}
}

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

@media screen and (max-width: 500px) {
	h2 span {
		font-size: calc(7.0vw * 1.8);
	}
}

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





h3 {
	font-size: 12.0rem;
	font-weight: 500;
	line-height: 0.9;
	color: var(--color-key);
	padding: 0;
	margin: 0 0 0.5em;
}

h3 span,
h3 small {
	display: block;
	padding: 0;
	margin: 0;
}

h3 small {
	color: var(--color-blue);
	font-size: 0.42em;
	letter-spacing: 0.1em;
	margin-top: 0.5em;
}

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

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

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

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

@media screen and (max-width: 670px) {
	h3 {
		font-size: calc(12.0vw * 1.3);
	}

	h3 span,
	h3 small {}

	h3 small {
		font-size: 0.42em;
	}
}

@media screen and (max-width: 500px) {
	h3 {
		font-size: calc(12.0vw * 1.2);
	}
}

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









/*-----------------------------------------------------------------------------------------
10001 .area-hero
----------------------------------------------------------------------------------------- */
.area-hero {
	border: 0pt solid red;
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 1;
}

.overray {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: auto;
	background: rgba(2, 23, 83, 0.8);
	padding: 0;
	margin: 0;
}

.overray ul {
	border: 0pt solid blue;
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	padding: 0.75rem;
	margin: 0 auto;
	width: auto;
}

.overray ul li {
	border: 0pt solid orange;
	padding: 0.75rem;
	margin: 0;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 3.0rem;
	font-weight: 600;
	line-height: 1;
	min-width: 33.0rem;
}

.overray ul li img {
	width: auto;
	max-height: 5.2rem;
}

.overray ul li i {
	margin-left: 0.4em;
}

.overray ul li a {
	border: 0pt solid pink;
	padding: 0.5em;
	margin: 0;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: inherit;
	font0-weight: inherit;
	line-height: inherit;
	color: var(--color-blue);
	background: white;
	texrt-align: center;
	width: 100%;
	height: 100%;
}

.overray ul li:last-child a {
	color: var(--color-key);
}

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

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

@media screen and (max-width: 1133px) {
	.area-hero {
		border: 0pt solid red;
	}

	.overray {}

	.overray ul {}

	.overray ul li {
		font-size: 3.0rem;
		font-size: calc(3.0vw * 0.9);
		min-width: initial;
		width: 30%
	}

	.overray ul li img {
		width: auto;
		max-height: 5.2rem;
		width: 90%;
		height: auto;
		max-height: initial;
	}

	.overray ul li i {}

	.overray ul li a {}

	.overray ul li:last-child a {}

}

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

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

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

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









/*-----------------------------------------------------------------------------------------
10002 .area-service
----------------------------------------------------------------------------------------- */
.area-service {
	border: 0pt solid red;
	padding: 12.0rem 0 15.0rem;
	margin: 0;
	position: relative;
	z-index: 1;
}

.area-service ul {
	border: 0pt solid green;
	position: relative;
	z-index: 1;
}

.area-service ul li {
	font-size: 2.7rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--color-font);
}

.area-service ul li a {
	display: block;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.area-service ul li span {
	display: block;
	padding: 0;
	margin: 0.5em 0 6.0rem;
}

.area-service ul li i {
	color: var(--color-key);
	margin-left: 0.4em;
}

.area-service ul li a img {
	border: 2px solid var(--color-key);
	padding: 4px;
	background: white;
}

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

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

@media screen and (max-width: 1133px) {
	.area-service {
		padding: 6.0rem 0 7.5rem;
	}
}

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

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

@media screen and (max-width: 500px) {
	.area-service {
		border: 0pt solid red;
		padding: 6.0rem 0;
		margin: 0;
		position: relative;
		z-index: 1;
	}

	.area-service ul {}

	.area-service ul li {
		font-size: 2.7rem;
		font-size: calc(2.7vw * 2.0);
		width: 100%;
	}

	.area-service ul li a {
		text-align: center;
	}

	.area-service ul li span {
		margin-bottom: 3.0rem;
	}

	.area-service ul li i {}

	.area-service ul li a img {}
}

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









/*-----------------------------------------------------------------------------------------
10003 .area-content
----------------------------------------------------------------------------------------- */
.area-content {
	border: 0pt solid green;
	padding: 0;
	margin: -6.0rem 0 0 0;
	background: #F3F5F9
}

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

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

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

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

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

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

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









/*-----------------------------------------------------------------------------------------
10004 .area-info
----------------------------------------------------------------------------------------- */
.area-info {
	border: 00pt solid red;
	padding: 12.0rem 0 15.0rem;
	margin: 0;
}

.area-info ul {
	border: 0pt solid green;
	padding: 0 calc(100% / 12 * 0.5);
	margin: 0;
}

.area-info ul li {
	padding: 0 0;
	margin: 0;
}

.area-info ul li a {
	border-bottom: 1pt solid #bbb;
	display: block;
	padding: 1.5rem 0;
	margin: 0;
}

.area-info ul li a:hover {
	background: #f9f9f9;
	opacity: 1;
}

.area-info ul li:first-child {
	border-top: 1pt solid #ddd;
}

dl.entry {
	border: 0pt solid blue;
	padding: 0;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

dl.entry dt,
dl.entry dd {
	padding: 0;
	margin: 0;
	font-size: 1.8rem;
	line-height: 1.6;
}

dl.entry dt {
	width: 13em;
}

dl.entry dd {
	padding: 0.25em 0.25em 0.25em 2em;
	border-radius: 3px;
	width: calc(100% - 13em);
	color: var(--color-font);

}

dl.entry time {
	background: var(--color-blue);
	color: white;
	padding: 0.25em;
	border-radius: 3px;
	text-align: center;
	width: 100%;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

dl.entry .cate {
	display: none;
}

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

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

@media screen and (max-width: 1133px) {
	.area-info {
		padding: 6.0rem 0;
	}
}

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

@media screen and (max-width: 670px) {
	.area-info {
		border: 0pt solid red;
	}

	.area-info ul {
		padding: 0;
	}

	.area-info ul li {}

	.area-info ul li a {}

	.area-info ul li a:hover {}

	.area-info ul li:first-child {}

	dl.entry {}

	dl.entry dt,
	dl.entry dd {
		padding: 0;
		margin: 0;
		font-size: 1.8rem;
		line-height: 1.6;
	}

	dl.entry dt {
		width: 11em;
	}

	dl.entry dd {
		padding: 0.75em 0 0 0;
		width: 100%;
	}

	dl.entry time {}

	dl.entry .cate {}
}

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

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









/*-----------------------------------------------------------------------------------------
10005 .area-banner
----------------------------------------------------------------------------------------- */
.area-banner {
	border: 0pt solid green;
	padding: 15.0rem 0 15.0rem;
	margin: 0;
	background: #F3F5F9
}

.area-banner a {
	border: 0pt solid blue;
	padding: 0;
	margin: 0;
	display: block;
}

.area-banner li:first-child {
	margin-bottom: 3.0rem;
}

.area-banner figure {
	border: 4px solid var(--color-key)
}

dl.banner {
	border: 0pt solid red;
	background: linear-gradient(15deg, var(--color-key) 0%, var(--color-blue) 100%);
	width: 100%;
	height: auto;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: 600;
}

dl.banner dt,
dl.banner dd {
	border: 0pt solid orange;
	padding: 1.75rem;
	margin: 0;
	color: white;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}

dl.banner.touyu dt {
	font-size: 1.5em;
	line-hegiht: 1;
	width: 33%;
	height: 2em;
	padding: 0;
	margin-left: -0.25em;
	background: var(--color-blue);
	text-align: center;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

dl.banner.touyu dt::after {
	content: '';
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid var(--color-blue);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(100%, -50%);
}

dl.banner.touyu dd {
	width: 67%;
	justify-content: flex-start;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
	padding-left: 1.5em;
	padding-right: calc(4.0rem + 1.75rem + 0.25rem)
}

dl.banner.touyu dd span {
	font-size: 2.9em;
	justify-content: flex-start;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
}

dl.banner.touyu dd span img {
	width: auto;
	height: 100%;
	margin-right: 0.2em;
	margin-bottom: -0.1em
}

dl.banner.touyu dd small {
	font-size: 0.65em;
	dipslay: block;
}


dl.banner.touyu dd i {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 2;
	font-size: 4.0rem;
	line-height: 1;
	transform: translate(-1.75rem, -50%);
}

dl.banner.saiyou dt {
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 2.7em;
	line-hegiht: 1;
	width: 33%;
}

dl.banner.saiyou dd {
	width: 67%;
	justify-content: flex-start;
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
	padding-right: calc(4.0rem + 1.75rem + 0.25rem)
}

dl.banner.saiyou dd i {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 2;
	font-size: 4.0rem;
	line-height: 1;
	transform: translate(-1.75rem, -50%);
}


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

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

@media screen and (max-width: 1133px) {
	.area-banner {
		padding: 6.0rem 0;
	}

	.area-banner .col-07,
	.area-banner .col-05 {
		width: 100%;
	}

	.area-banner .col-05 {
		text-align: center;
	}

	.area-banner a {}

	.area-banner li:first-child {}

	.area-banner figure {}

	dl.banner {
		font-size: calc(1.8vw * 1.0);
	}

	dl.banner dt,
	dl.banner dd {}

	dl.banner.touyu dt {
		font-size: 1.5em;
		font-size: calc(1.5vw * 2.0);
	}

	dl.banner.touyu dt::after {}

	dl.banner.touyu dd {}

	dl.banner.touyu dd span {
		font-size: 2.9em;
		font-size: calc(2.9vw * 2.1);
	}

	dl.banner.touyu dd span img {
		height: 90%;
		margin-bottom: 0.1em
	}

	dl.banner.touyu dd small {
		font-size: 0.75em;
	}

	dl.banner.touyu dd i {
		font-size: 4.0rem;
		font-size: calc(4.0vw * 1.0);
	}

	dl.banner.saiyou dt {
		font-size: 2.7em;
		font-size: calc(2.7vw * 2.0);
	}

	dl.banner.saiyou dd {
		font-size: calc(1.8vw * 1.1);
	}

	dl.banner.saiyou dd i {
		font-size: 4.0rem;
		font-size: calc(4.0vw * 1.0);
	}
}

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

@media screen and (max-width: 670px) {
	.area-banner {}

	.area-banner .col-07,
	.area-banner .col-05 {}

	.area-banner .col-05 {}

	.area-banner a {}

	.area-banner li:first-child {}

	.area-banner figure {}

	dl.banner {
		font-size: calc(1.8vw * 1.0);
	}

	dl.banner dt,
	dl.banner dd {}

	dl.banner.touyu dt {
		font-size: 1.5em;
		font-size: calc(1.5vw * 2.0);
		width: 30%;
		height: 3em;
	}

	dl.banner.touyu dt::after {
		border-top: 6px solid transparent;
		border-bottom: 6px solid transparent;
		border-left: 6px solid var(--color-blue);
	}

	dl.banner.touyu dd {
		width: 70%;
		padding-left: 1.5rem
	}

	dl.banner.touyu dd span {
		font-size: 2.9em;
		font-size: calc(2.9vw * 2.5);
	}

	dl.banner.touyu dd span img {
		display: none;
	}

	dl.banner.touyu dd small {}


	dl.banner.touyu dd i {
		font-size: calc(4.0vw * 1.25);
	}

	dl.banner.saiyou dt {
		width: 30%;
		font-size: calc(2.7vw * 1.75);
	}

	dl.banner.saiyou dd {
		width: 70%;
		font-size: calc(1.8vw * 1.4);
	}

	dl.banner.saiyou br {
		display: none;
	}

	dl.banner.saiyou dd i {
		font-size: calc(4.0vw * 1.25);
	}
}

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

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









/*-----------------------------------------------------------------------------------------
10006 .area-station
----------------------------------------------------------------------------------------- */
.area-station {
	border: 0pt solid red;
	padding: 12.0rem 0 15.0rem;
	margin: 0;
}

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

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

@media screen and (max-width: 1133px) {
	.area-station {
		padding: 6.0rem 0;
	}
}

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

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

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

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









/*-----------------------------------------------------------------------------------------
10007 .area-gallery
----------------------------------------------------------------------------------------- */
.area-gallery {
	border: 0pt solid red;
	padding: 12.0rem 0;
	margin: 0;
	background: linear-gradient(15deg, #034798 0%, #1960a2 100%);
}

ul.gallery {
	background:transparent;
}

ul.gallery li a {
	border: 0.4rem solid white;
}

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

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

@media screen and (max-width: 1133px) {
	.area-gallery {
		padding: 6.0rem 0;
	}

	ul.gallery li a {
	}
}

@media screen and (max-width: 840px) {
	ul.gallery li {
		width:33.33333%;
	}
}

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

@media screen and (max-width: 500px) {
	ul.gallery li {
		width:50%;
	}
}

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


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

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

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

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

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

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

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