@charset "utf-8";
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-style:normal;font-weight: normal;font-size: 100%;vertical-align: baseline;}
body {font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', Meiryo, sans-serif;
color: #111;letter-spacing: .13em;font-feature-settings: "palt" 1;font-kerning: auto;-webkit-font-smoothing: antialiased;background: var(--color-bg);}
ul {list-style: none;}
a:link ,a:visited {color: #000;text-decoration: none;}
img {width: 100%;vertical-align: bottom;}

:root {
	--color-main: #3A7A9D;
	--color-sub: #fff;
	--color-bg: #F7F7F7;
	--color-border: #000;
}
.sp {display: none;}
.wrap {width: 100%;max-width: 1000px;margin: 0 auto;padding: 0 50px;position: relative;}
main.top h2 {
	font-size: 3.2rem;font-weight: 700;line-height: 1;
	margin: 0 0 50px;
}
main.top h2::before {
	content:attr(data-en);text-transform: uppercase;
	font-size: 5rem;font-weight: 700;line-height: 1;
	display: block;margin: 0 0 55px;
}
.back-wh {
	background: #fff;padding: 180px 0 60px;
}
section.access .back-wh {padding: 100px 0 20px}
.back-wh::before {
	content: "";width: calc((100vw - 1000px) / 2);height: 100%;background: var(--color-sub);
	position: absolute;left: calc((100vw - 1100px) / 2 * -1);top: 0;
}
header {padding: 55px 45px}
header .logo {width: 482px;height: 54px}
header .logo span {display: none}
header .logo svg {width: 482px;height: 54px}

footer {padding: 30px 0;text-align: center;}
footer small {font-size: 1rem;font-weight: 500;}
section.mv {
	position: relative;
	padding: 60px 0 0;
}
section.mv .wrap {
	padding: 0 50px 465px;z-index: 10;
}
section.mv::after {
	content: "";width: 100%;height: 500px;position: absolute;bottom: 0;left: 0;
	background: url(../img/mv01@2x.jpg) no-repeat center / cover;z-index: 1;
}
section.mv span.tt {
	font-size: 20px;font-weight: 300;line-height: 1;
	margin: 0 0 50px;position: relative;z-index: 11;
}
section.mv span.tt::after {
	content:attr(data-en);text-transform: uppercase;
	font-size: 80px;font-weight: 700;line-height: 1;
	display: block;margin: 5px 0 0;
}
section.mv ul.nav {
	position: absolute;bottom: -80px;left: 50px;z-index: 11;
	background: var(--color-main);width: calc(100% - 100px);height: 80px;
	display: flex;gap: 100px;
}
section.mv ul.nav::before {
	content: "";width: calc((100vw - 1000px) / 2);height: 80px;background: var(--color-main);
	position: absolute;left: calc((100vw - 1000px) / 2 * -1);top: 0;
}
section.mv ul.nav li {
	padding: 25px 0;
}
section.mv ul.nav li span {
	color: #fff;font-size: 1.6rem;line-height: 1;
	display: block;padding: 5px 10px;position: relative;
}
section.mv ul.nav li span::after {
	content: "";width: 0;height: 0;
	border-style: solid;border-right: 7px solid transparent;border-left: 7px solid transparent;border-top: 11px solid #ffffff;border-bottom: 0;
	position: absolute;top: 10px;right: -10px;
}

section.about .text {width: 600px}
section.about p {
	font-size: 2em;line-height: 2;
	margin: 0 0 40px;
}
section.about .img {
	width: 360px;height: 480px;position: absolute;bottom: 100px;right: 50px;
	background: url(../img/about@2x.jpg) no-repeat center / cover;
}

section.company {
	padding: 735px 0 100px;
	position: relative;
}
section.company::before {
	content: "";width: 100%;height: 500px;position: absolute;top: 0;left: 0;
	background: var(--color-main);
}
section.company::after {
	content: "";width: calc(1050px + (100vw - 1100px) / 2);height: 500px;position: absolute;top: 135px;right: 0;
	background: url(../img/company@2x.jpg) no-repeat center / cover;
}
section.company dl.detail {
	background: var(--color-sub);padding: 90px 110px 65px;
	display: flex;flex-wrap: wrap;font-size: 2em;line-height: 2;
}
section.company dl.detail dt {
	width: 210px;color: #494949;font-weight: 400;
	margin: 0 0 20px;
}
section.company dl.detail dd {
	width: 570px;margin: 0 0 20px;
	font-weight: 500;
}
section.company dl.detail dd a {font-weight: 500}

main.top section.access h2 {margin: 0 0 25px}
section.access iframe {
	width: 100%;height: 510px;
}
section.access p.link {
	font-size: 2rem;
	margin: 14px 0;
}
section.access p.link span {
	color: #494949;
	display: inline-block;width: 210px;
}
section.access p.link a {text-decoration: underline;font-weight: 500;}

@media all and (max-width:769px) {
	/* スマホ */
	html {font-size: calc(62.5% + 4 * (100vw - 390px) / 150);}
	.wrap {max-width: 100%;padding: 0 20px;position: relative;box-sizing: border-box;}
	main.top h2 {font-size: 2rem;margin: 0 0 40px}
	main.top h2::before {font-size: 40px;margin: 0 0 20px}
	.back-wh {padding: 160px 0 60px}
	section.access .back-wh {padding: 80px 0 20px}
	.back-wh::before {width: 20px;left: 0}
	.sp {display: block;}
	header {padding: 25px 20px}
	header .logo {width: 241px;height: 27px}
	header .logo svg {width: 241px;height: 27px}

	footer {padding: 30px 0;text-align: center;}
	footer small {font-size: 1rem;font-weight: 500;}
	section.mv {
		position: relative;
		padding: 50px 0 0;
	}
	section.mv .wrap {
		padding: 0 20px 50vh;
		padding-bottom: calc(50vh - 17px);
	}
	section.mv::after {
		height: 50vh;
		background: url(../img/mv01@2x.jpg) no-repeat center / cover;
	}
	section.mv span.tt {font-size: 16px}
	section.mv span.tt::after {font-size: 40px}
	section.mv ul.nav {
		left: 0;width: 100%;box-sizing: border-box;
		gap: 0;padding: 0 10px;
	}
	section.mv ul.nav::before {display: none}
	section.mv ul.nav li {
		padding: 0;flex: 1;display: table;
	}
	section.mv ul.nav li a {
		display: table-cell;vertical-align: middle;
	}
	section.mv ul.nav li span {
		font-size: 1.5rem;text-align: center;
		padding: 0 0 5px;
	}
	section.mv ul.nav li span::after {
		position: absolute;top: auto;bottom: -10px;right: calc(50% - 5px);
		border-style: solid;border-right: 5px solid transparent;border-left: 5px solid transparent;border-top: 9px solid #ffffff;border-bottom: 0;
	}

	section.about .text {width: 100%;box-sizing: border-box;padding: 0 20px 220px 0;}
	section.about p {
		font-size: 1.8em;line-height: 2;
		margin: 0 0 40px;
	}
	section.about .img {
		width: calc(100vw - 20px);height: 230px;position: absolute;bottom: 50px;right: 0;
		background: url(../img/about@2x.jpg) no-repeat center / cover;
	}

	section.company {
		padding: 320px 0 100px;
		position: relative;
	}
	section.company::before {
		content: "";width: 100%;height: 200px;position: absolute;top: 0;left: 0;
		background: var(--color-main);
	}
	section.company::after {
		content: "";width: calc(100vw - 20px);height: 200px;position: absolute;top: 50px;right: 0;
		background: url(../img/company@2x.jpg) no-repeat center / cover;
	}
	section.company dl.detail {
		padding: 30px 20px;
		display: flex;flex-wrap: wrap;font-size: 1.5em;line-height: 2;
	}
	section.company dl.detail dt {width: 100%;margin: 0}
	section.company dl.detail dd {width: 100%;margin: 0 0 25px;font-size: 1.8rem}
	section.company dl.detail dd a {font-weight: 500}

	main.top section.access h2 {margin: 0 0 25px}
	section.access iframe {
		width: 100%;height: 400px;
	}
	section.access p.link {
		font-size:1.5rem;
		margin: 14px 0;
	}
	section.access p.link span {width: 100%}
	section.access p.link a {text-decoration: underline;font-weight: 500;font-size: 1.8rem;}
}
@media all and (min-width:770px) and (max-width:979px) {
	/* タブレット */
}
@media all and (min-width:980px) {
	/* PC */
	html {font-size: 62.5%;}
}