@charset "utf-8";



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

br.large {
	display: none;
}
br.small {
	display: inline;
}
@media screen and (orientation:landscape) {
br.small {
	display: none;
}
}



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

div#page p.background {
	background-image: url(../../images/background-small.jpg);
}



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

div.scroll header#header h1,
div.scroll header#header p#button-navi {
	transform: translateY(-60px);
}
div.scroll header#header.navi h1,
div.scroll header#header.navi p#button-navi,
div.scroll-up header#header h1,
div.scroll-up header#header p#button-navi {
  transform: translateY(0px);
}
header#header h1 {
	position: fixed;
	box-sizing: border-box;
  width: 100%;
	height: 60px;
	left: 0px;
	top: 0px;
	padding: 18px 0px 0px 20px;
  transition: 0.25s background-color ease, 0.25s transform ease;
}
div.scroll header#header h1 {
	background-color: #ffffff;
}
header#header p#button-navi {
	position: fixed;
  width: 60px;
  height: 60px;
  right: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 50;
	transition: 0.25s transform ease;
}
header#header p#button-navi i {
  display: block;
  position: absolute;
  width: 24px;
  height: 4px;
  left: 18px;
  top: 28px;
  transform-origin: 50% 50%;
  transition: 0.25s background-color ease;
}
header#header p#button-navi i:nth-child(1) {
  background-color: #20a09b;
	transform: translateY(-8px) rotate(0deg);
}
header#header p#button-navi i:nth-child(2) {
  background-color: #007bb3;
	transform: translateY(0px) rotate(0deg);
}
header#header p#button-navi i:nth-child(3) {
  background-color: #005a85;
	transform: translateY(8px) rotate(0deg);
}
header#header.navi p#button-navi i:nth-child(1),
header#header.navi p#button-navi i:nth-child(2),
header#header.navi p#button-navi i:nth-child(3) {
  background-color: #007bb3;
}
header#header.navi p#button-navi i:nth-child(1) {
  animation: button-navi-row-01 0.25s 1 forwards;
}
header#header.close p#button-navi i:nth-child(1) {
  animation: button-navi-row-01-close 0.25s 1 forwards;
}
header#header.navi p#button-navi i:nth-child(2) {
  animation: button-navi-row-02 0.25s 1 forwards;
}
header#header.close p#button-navi i:nth-child(2) {
  animation: button-navi-row-02-close 0.25s 1 forwards;
}
header#header.navi p#button-navi i:nth-child(3) {
  animation: button-navi-row-03 0.25s 1 forwards;
}
header#header.close p#button-navi i:nth-child(3) {
  animation: button-navi-row-03-close 0.25s 1 forwards;
}
@keyframes button-navi-row-01 {
	0% { transform: translateY(-8px) rotate(0deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(0px) rotate(-45deg); }
}
@keyframes button-navi-row-01-close {
	0% { transform: translateY(0px) rotate(-45deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(-8px) rotate(0deg); }
}
@keyframes button-navi-row-02 {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes button-navi-row-02-close {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes button-navi-row-03 {
	0% { transform: translateY(8px) rotate(0deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(0px) rotate(45deg); }
}
@keyframes button-navi-row-03-close {
	0% { transform: translateY(0px) rotate(45deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(8px) rotate(0deg); }
}
header#header nav#navi {
	position: fixed;
	width: 100%;
  height: 100%;
	left: auto;
  right: 0px;
  top: 0px;
	z-index: 35;
	bottom: auto;
	background-color: #ffffff;
	transform: translateX(100%);
	transition: 0.25s transform ease;
	-webkit-overflow-scrolling: touch;
}
header#header.navi nav#navi {
	transform: translateX(0%);
}
header#header nav#navi ul {
	display: block;
	padding: 100px 0px 40px 0px;
}
header#header nav#navi ul li {
	position: relative;
	text-align: center;
	/* font-size: 16px;
	font-weight: 700; */
	margin-right: 0px;
	padding-bottom: 53px;
}
header#header nav#navi ul li:last-child {
	padding-bottom: 0px;
}
header#header nav#navi ul li::before {
	position: absolute;
	width: 130px;
	left: calc(50% - 65px);
	bottom: 25px;
	border-bottom: 3px solid #0070ac;
	content: "";
}
header#header nav#navi ul li:last-child::before {
	display: none;
}
header#header nav#navi ul li.top {
	display: block
}
header#header nav#navi ul li span.main,
header#header nav#navi ul li span.sub {
	display: block;
}
header#header nav#navi ul li span.main {
	font-size: 26px;
	margin-bottom: 10px;
}
header#header nav#navi ul li span.sub {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}



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

div#cover {
	height: 100vh;
}
div#cover div.text p.logo {
	margin-bottom: 45px;
}
div#cover div.text p.logo img {
	height: 158px;
}
div#cover div.text p.description {
	font-size: 15px;
	line-height: 27px;
}
div#cover p.button-scroll {
	width: 36px;
	height: 18px;
	left: calc(50% - 18px);
	top: auto;
	bottom: 60px;
}
div#cover p.button-scroll a {
	background-size: auto 18px;
}
@media screen and (orientation:landscape) {
div#cover div.text {
  padding: 10px 0px 0px 0px;
}
div#cover div.text p.logo {
	margin-bottom: 25px;
}
div#cover p.button-scroll {
  top: auto;
	bottom: 15px;
}
}



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

div#content section div.inner-section {
	padding: 80px 0px 160px 0px;
}
div#content section header {
	margin-bottom: 80px;
}
div#content section header h2 {
	font-size: 28px;
	margin-bottom: 10px;
}
div#content section header h2 span {
	padding: 0px 15px 15px 10px;
}
div#content section header p.sub {
	font-size: 15px;
}
section#about p.description {
	font-size: 14px;
	line-height: 30px;
}
section#about p.description span {
	margin-bottom: 10px;
}
section#group div.list {
	display: block;
	width: auto;
}
section#group div.list div.row {
	width: auto;
  margin-bottom: 80px;
}
section#group div.list div.row:last-child {
  margin-bottom: 0px;
}
section#group div.list div.row h3 {
	margin-bottom: 30px;
}
section#group div.list div.row h3 a {
	display: block;
	height: auto;
}
section#group div.list div.row:nth-child(1) h3 img {
	height: 105px;
}
section#group div.list div.row:nth-child(2) h3 img {
	height: 69px;
}
section#group div.list div.row:nth-child(3) h3 img {
	height: 155px;
}
section#group div.list div.row p.button {
	width: 220px;
}
section#message div.image-text {
	display: block;
	width: auto;
}
section#message div.image-text p.image {
	width: auto;
	margin: 0px 0px 40px 0px;
}
section#message div.image-text p.image img.large {
	display: none;
}
section#message div.image-text p.image img.small {
	display: block;
}
section#message div.image-text div.text {
	width: auto;
	padding: 0px 40px;
}
section#message div.image-text div.text p.description {
	font-size: 14px;
	line-height: 30px;
}
section#message div.image-text div.text p.description span {
	margin-bottom: 10px;
}
section#message div.image-text div.text p.company {
	text-align: center;
	margin-bottom: 0px;
}
section#message div.image-text div.text p.name {
	text-align: center;
}
section#message div.image-text div.text p.name span {
	display: block;
}
section#message div.image-text div.text p.name span.sub {
	margin: 0px 0px 10px 0px;
}
section#profile div.list {
	width: auto;
  padding: 0px 40px;
}
section#profile div.list div.row {
	display: block;
	margin-bottom: 0px;
}
section#profile div.list div.row p.label {
	width: auto;
	padding: 2px 0px;
}
section#profile div.list div.row p.body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
	width: auto;
  text-align: left;
	padding: 18px 0px;
}
section#profile div.list div.row p.body i {
  display: block;
}
section#profile div.list div.row p.body em {
  display: none;
}



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

footer#footer {
  padding-top: 45px;
}
footer#footer p#button-page-top {
  left: calc(50% - 48px);
	right: auto;
}
footer#footer div.information {
	display: block;
	width: auto;
  margin-bottom: 30px;
}
footer#footer div.information p.logo {
  margin: 0px 0px 15px 0px;
}
footer#footer div.information p.logo img {
	height: 87px;
  margin: auto;
}
footer#footer div.information p.body {
  text-align: center;
}
footer#footer p.copyright {
	position: static;
	right: auto;
	bottom: auto;
  text-align: center;
}