@charset "utf-8";



/* --------------------------------------------------------------------------------
reset
-------------------------------------------------------------------------------- */

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;
}
article, aside, details, figcaption, figure,
footer, header, main, 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;
}



/* --------------------------------------------------------------------------------
essential
-------------------------------------------------------------------------------- */

body {
	text-align: justify;
  font-family: YakuHanJP, "Noto Sans JP", "Yu Gothic", YuGothic, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 30px;
	color: #000000;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a {
	text-decoration: none;
	color: inherit;
}



/* --------------------------------------------------------------------------------
misc
-------------------------------------------------------------------------------- */

img {
	display: block;
	max-width: 100%;
	height: auto;
}
br.small {
	display: none;
}
br.large {
	display: inline;
}



/* --------------------------------------------------------------------------------
page
-------------------------------------------------------------------------------- */

div#page {
	position: relative;
}
div#page p.background {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: url(../../images/background.jpg) no-repeat center;
	background-size: cover;
	opacity: 0;
	transition: 1s opacity 0.25s ease-in-out;
}
div#page.active p.background {
	opacity: 1;
}



/* --------------------------------------------------------------------------------
header
-------------------------------------------------------------------------------- */

header#header {
	position: relative;
}
header#header h1 {
	position: absolute;
	left: 30px;
	top: 30px;
	z-index: 40;
}
header#header h1 img {
	width: auto;
	height: 23px;
}
header#header nav#navi {
	position: absolute;
	right: 90px;
	top: 30px;
	z-index: 30;
}
header#header nav#navi ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
header#header nav#navi ul li {
	font-size: 16px;
	font-weight: 700;
	margin-right: 80px;
}
header#header nav#navi ul li:last-child {
	margin-right: 0px;
}
header#header nav#navi ul li.top {
	display: none;
}
header#header nav#navi ul li a {
	transition: 0.25s color ease;
}
header#header nav#navi ul li a:hover {
	color: #0070ac;
}
header#header nav#navi ul li span.main {
	letter-spacing: 0.05em;
}
header#header nav#navi ul li span.sub {
	display: none;
}



/* --------------------------------------------------------------------------------
cover
-------------------------------------------------------------------------------- */

div#cover {
	position: relative;
	height: 100vh;
}
div#cover {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	left: 0px;
	top: 0px;
	z-index: 10;
}
div#cover div.text {
	position: relative;
	text-indent: 0.05em;
	letter-spacing: 0.05em;
	padding-bottom: 50px;
	opacity: 0;
	transition: 1s opacity 1s ease-in-out;
}
div.active div#cover div.text {
	opacity: 1;
}
div#cover div.text p.logo {
	margin-bottom: 55px;
}
div#cover div.text p.logo img {
	width: auto;
	height: 220px;
	margin: auto;
}
div#cover div.text p.description {
	text-align: center;
	font-size: 20px;
	line-height: 45px;
}
div#cover p.button-scroll {
	position: absolute;
	width: 40px;
	height: 20px;
	left: calc(50% - 20px);
	bottom: 65px;
	opacity: 0;
	transition: 1s opacity 1s ease-in-out;
}
div.active div#cover p.button-scroll {
	opacity: 1;
}
div#cover p.button-scroll a {
	display: block;
	height: 100%;
	background: url(../../images/arrow-scroll.png) no-repeat center;
	background-size: auto 20px;
}



/* --------------------------------------------------------------------------------
content
-------------------------------------------------------------------------------- */

div#content {
	position: relative;
	z-index: 20;
}
div#content section div.inner-section {
	padding: 140px 0px 200px 0px;
}
div#content section header {
	text-align: center;
	text-indent: 0.05em;
	letter-spacing: 0.05em;
	margin-bottom: 120px;
}
div#content section header h2 {
	font-size: 38px;
	font-weight: 700;
	margin-bottom: 15px;
}
div#content section header h2 span {
	display: inline-block;
	border-bottom: 3px solid #0070ac;
	padding: 0px 15px 20px 15px;
}
div#content section header p.sub {
	font-size: 20px;
	font-weight: 700;
}
section#about,
section#message {
	background-color: rgba(255, 255, 255, 0.7);
}
section#about p.description {
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	line-height: 40px;
}
section#about p.description span {
	display: block;
}
section#group,
section#profile {
	background-color: rgba(242, 249, 255, 0.7);
}
section#group div.list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 1080px;
	margin: auto;
}
section#group div.list div.row {
	width: 33.33%;
	text-align: center;
}
section#group div.list div.row h3 {
	margin-bottom: 45px;
}
section#group div.list div.row h3 a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	height: 180px;
}
section#group div.list div.row h3 img {
	width: auto;
	margin: auto;
}
section#group div.list div.row:nth-child(1) h3 img {
	height: 90px;
}
section#group div.list div.row:nth-child(2) h3 img {
	height: 67px;
}
section#group div.list div.row:nth-child(3) h3 img {
	height: 140px;
}
section#group div.list div.row p.button {
	width: 240px;
	text-align: center;
	margin: auto;
}
section#group div.list div.row p.button a {
	display: block;
	color: #0070ac;
	border: 1px solid #0070ac;
	padding: 10px;
	transition: 0.25s background-color ease;
}
section#group div.list div.row p.button a:hover {
	color: #ffffff;
	background-color: #0070ac;
}
section#group div.list div.row p.button a::after {
	display: inline-block;
	width: 15px;
	height: 15px;
	vertical-align: -1px;
	margin-left: 15px;
	background: url(../../images/icon-new-window.png) no-repeat left top;
	background-size: auto 15px;
	content: "";
}
section#group div.list div.row p.button a:hover::after {
	background-image: url(../../images/icon-new-window-active.png);
}
section#message div.image-text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 1020px;
	margin: auto;
}
section#message div.image-text p.image {
	width: 470px;
	margin-right: 60px;
}
section#message div.image-text p.image img.small {
	display: none;
}
section#message div.image-text div.text {
	width: calc(100% - 530px);
	font-weight: 400;
}
section#message div.image-text div.text p.description {
	font-size: 15px;
	line-height: 37.5px;
	margin-bottom: 40px;
}
section#message div.image-text div.text p.description span {
	display: block;
	margin-bottom: 20px;
}
section#message div.image-text div.text p.company {
	margin-bottom: 10px;
}
section#message div.image-text div.text p.name span.sub {
	margin-right: 20px;
}
section#message div.image-text div.text p.name span.main {
	font-size: 26px;
}
section#profile div.list {
	width: 760px;
	margin: auto;
}
section#profile div.list div.row {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid #0070ac;
	margin-bottom: 20px;
}
section#profile div.list div.row:last-child {
	margin-bottom: 0px;
}
section#profile div.list div.row p.label {
	width: 145px;
	text-align: center;
	color: #ffffff;
	padding: 18px 0px 17px 0px;
	background-color: #0070ac;
}
section#profile div.list div.row p.body {
	box-sizing: border-box;
	width: calc(100% - 145px);
	padding: 18px 30px 17px 30px;
}



/* --------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------- */

footer#footer {
	position: relative;
	z-index: 30;
	line-height: 25px;
	color: #ffffff;
	padding: 25px 0px;
	background-color: #0070ac;
}
footer#footer p#button-page-top {
	position: absolute;
	width: 95px;
	height: 50px;
	right: 20px;
	top: -75px;
	text-align: center;
	font-size: 16px;
	line-height: 25px;
}
footer#footer p#button-page-top a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	height: 100%;
	color: #0070ac;
	background: url(../../images/arrow-page-top.png) no-repeat center top;
	background-size: auto 25px;
}
footer#footer div.information {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 760px;
	margin: auto;
}
footer#footer div.information p.logo {
	margin-right: 35px;
}
footer#footer div.information p.logo img {
	width: auto;
	height: 61px;
}
footer#footer p.copyright {
	position: absolute;
	right: calc(50% - 380px);
	bottom: 25px;
	font-size: 12px;
	font-weight: 400;
}