@charset "utf-8";



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

html {
	font-size: 16px;
}
body {
	font-size: 0.875rem;
	line-height: 1.5rem;
}
p.note {
	font-size: 0.8125rem;
	line-height: 1.375rem;
}



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

br.large {
	display: none;
}
br.small {
	display: inline;
}
span.no-small {
	display: none;
}
span.no-large {
	display: inline;
}



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

header.header {
	width: auto;
	height: auto;
	left: auto;
}
header#header {
	position: relative;
	top: auto;
}
header#header nav.navi-working-campaign {
	display: block;
	width: calc(100% - 60px);
	margin: 0px auto 40px auto;
}
header#header-alternate {
  display: none;
}
header.header h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
	position: fixed;
  width: 100%;
  height: 60px;
	left: 0px;
	top: 0px;
  z-index: 10;
  border-bottom: 1px solid transparent;
  padding-left: 20px;
  transition: 0.25s border-bottom-color ease,  0.25s background-color ease;
}
div.scroll-01 header.header h1,
div.scroll-01 header.header h1,
div.scroll-01 header.header h1 {
  border-bottom-color: #f4f4f4;
	background-color: #ffffff;
}
header.header h1 a {
  display: block;
  position: relative;
  width: calc(312px * 0.625);
  height: calc(47px * 0.625);
}
header.header h1 a::before {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: url(../images/logo.svg) no-repeat center;
  background-size: auto 100%;
  content: "";
  opacity: 0;
  transition: 0.25s opacity ease;
}
div.scroll-01 header.header h1 a::before {
  opacity: 1;
}
header.header p.button-menu {
  position: fixed;
  width: 60px;
  height: 60px;
  right: 0px;
  top: 0px;
  z-index: 30;
  cursor: pointer;
}
header.header p.button-menu i {
  display: block;
  position: absolute;
  background-color: #ffffff;
  width: 32px;
  height: 2px;
  left: 14px;
  top: 29px;
  transform-origin: 50% 50%;
  transition: 0.25s background-color ease;
}
div.scroll-01 header.header p.button-menu i {
  background-color: #000000;
}
div.scroll-01 header.header.menu p.button-menu i {
  background-color: #ffffff;
}
header.header p.button-menu i:nth-child(1) {
	transform: translateY(-5px) rotate(0deg);
}
header.header p.button-menu i:nth-child(2) {
	transform: translateY(5px) rotate(0deg);
}
header.header.menu p.button-menu i:nth-child(1) {
  animation: button-menu-row-01 0.25s 1 forwards;
}
header.header.close p.button-menu i:nth-child(1) {
  animation: button-menu-row-01-close 0.25s 1 forwards;
}
header.header.menu p.button-menu i:nth-child(2) {
  animation: button-menu-row-02 0.25s 1 forwards;
}
header.header.close p.button-menu i:nth-child(2) {
  animation: button-menu-row-02-close 0.25s 1 forwards;
}
@keyframes button-menu-row-01 {
	0% { transform: translateY(-5px) rotate(0deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(0px) rotate(-20deg); }
}
@keyframes button-menu-row-01-close {
	0% { transform: translateY(0px) rotate(-20deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(-5px) rotate(0deg); }
}
@keyframes button-menu-row-02 {
	0% { transform: translateY(5px) rotate(0deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(0px) rotate(20deg); }
}
@keyframes button-menu-row-02-close {
	0% { transform: translateY(0px) rotate(20deg); }
	50% { transform: translateY(0px) rotate(0deg); }
	100% { transform: translateY(5px) rotate(0deg); }
}
header.header div.menu {
	position: fixed;
  width: 100%;
  height: 100%;
	right: 0px;
	top: 0px;
  overflow: auto;
	z-index: 20;
	background-color: #000000;
	transform: translateX(100%);
	transition: 0.25s transform ease;
	-webkit-overflow-scrolling: touch;
}
header.header.menu div.menu {
	transform: translateX(0%);
}
header.header div.menu div.inner-menu {
  padding: 60px 0px 30px 0px;
}
header.header nav.navi {
  margin-bottom: 30px;
	padding: 0px;
}
header.header nav.navi > ul {
	display: block;
}
header.header nav.navi > ul > li {
	display: block;
  border-bottom: 1px solid #808080;
  padding: 30px 0px;
}
header.header nav.navi > ul > li:first-child {
  border-top: 1px solid #808080;
}
header.header nav.navi > ul > li:not(:last-child) {
	margin-right: 0px;
}
header.header nav.navi > ul > li > a {
  width: 240px;
  margin: auto;
}
header.header nav.navi > ul > li > a::before,
header.header nav.navi > ul > li > a::after {
  display: none;
}
header.header nav.navi > ul > li span.main {
	display: inline-block;
  font-size: 1.5rem;
  margin-right: 10px;
}
header.header nav.navi > ul > li span.sub {
	display: inline-block;
  font-size: 0.8125rem;
  transform: translateY(-4px);
}
header.header p.tel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
	position: static;
	right: auto;
	top: auto;
	font-size: 1.375rem;
	line-height: 2rem;
}
header.header p.tel a {
	width: 240px;
	height: 46px;
}
header.header nav.navi div.nest {
	display: block;
  box-sizing: border-box;
	position: static;
	width: 240px;
	left: auto;
	top: auto;
  margin: auto;
  padding-left: 25px;
}
header.header nav.navi div.nest ul {
	display: block;
}
header.header nav.navi div.nest ul li {
	width: auto;
	font-size: 0.875rem;
	font-weight: 400;
  padding-top: 5px;
}
header.header nav.navi div.nest ul li a {
	display: block;
	height: auto;
  padding-left: 15px;
  background: url(../images/arrow-more-white.svg) no-repeat left 0.9em;
  background-size: auto 10px;
  transition: none;
}
header.header nav.navi div.nest ul li a:hover,
div.services-01 header.header nav.navi div.nest ul li.services-01 a,
div.services-02 header.header nav.navi div.nest ul li.services-02 a,
div.services-03 header.header nav.navi div.nest ul li.services-03 a,
div.services-04 header.header nav.navi div.nest ul li.services-04 a,
div.services-05 header.header nav.navi div.nest ul li.services-05 a {
	color: #ffffff;
	background-color: transparent;
}
div.services-02 header.header nav.navi div.nest ul li.services-01 a,
div.services-03 header.header nav.navi div.nest ul li.services-02 a,
div.services-04 header.header nav.navi div.nest ul li.services-03 a,
div.services-05 header.header nav.navi div.nest ul li.services-04 a {
	background-color: transparent;
}
header.header nav.navi div.nest ul li a::before {
	display: none;
}



/* --------------------------------------------------------------------------------
cover, title
-------------------------------------------------------------------------------- */

div#cover p.image {
	background-size: cover;
}
@media (orientation: portrait) {
div#cover p.image {
  background-image: url(../images/cover-image-small.jpg)
}
}
div.active div#cover p.image {
	transform: scale(1);
}
div#cover h1 {
	font-size: 1.875rem;
	line-height: 2rem;
}
div#cover nav.navi-working-campaign {
	display: none;
}
div#title p.image {
	height: 400px;
}
@media (orientation: portrait) {
div.services div#title p.image {
	background-image: url(../images/title-image-services-small.jpg);
}
div.about div#title p.image {
	background-image: url(../images/title-image-about-small.jpg);
}
div.recruit div#title p.image {
	background-image: url(../images/title-image-recruit-small.jpg);
}
}
div#title div.text {
	position: relative;
	text-align: center;
	margin-bottom: 45px;
	transform: translateY(-35px);
}
div#title div.text h1 {
	font-size: 3.75rem;
	line-height: 4rem;
	margin-bottom: 15px;
}
div#title div.text p.sub {
	font-size: 1.25rem;
	margin-bottom: 40px;
}
div#title div.text p.description {
	font-size: 0.9375rem;
	line-height: 1.75rem;
}



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

div#content section div.inner-section {
	width: auto;
	padding: 80px 30px;
}
div#content section header {
	margin-bottom: 40px;
}
div#content section header h2 {
	font-size: 3rem;
	line-height: 3.25rem;
	margin-bottom: 15px;
}
div#content section header p.sub {
	font-size: 1.0625rem;
}
div#content section div.block:not(:last-child) {
	margin-bottom: 40px;
}
div#content section div.block div.inner-block {
	padding: 30px;
}
div#content section div.block div.header {
	margin-bottom: 40px;
}
div#content section div.block div.header h2 {
	font-size: 2.25rem;
	line-height: 2rem;
	margin: 0px -30px;
}
div#content section div.block div.header p.sub {
	font-size: 1.125rem;
	line-height: 1.5rem;
	transform: translateY(-10px);
}
div#content section div.block div.list div.row {
	display: block;
}
div#content section div.block div.list div.row p.label {
	width: auto;
	padding: 10px 0px;
}
div#content section div.block div.list div.row:last-child p.label {
	border-bottom: none;
}
div#content section div.block div.list div.row div.body {
	width: auto;
  text-align: center;
  border-top-color: #000000;
	padding: 15px 0px 45px 0px;
}
div#content section div.block div.list div.row:last-child div.body {
  border-bottom: none;
  padding-bottom: 30px;
}
div#content section div.block div.list div.row div.body p.map {
  text-align: left;
}
div#content section div.block div.list div.row div.body div.map {
	height: 220px;
}
div#content section div.block div.list div.row div.body div.map iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}
div#content section#contact div.inner-section {
  width: auto;
	padding-top: 0px;
}
div#content section#contact header h2 {
	font-size: 2.375rem;
	line-height: 2.5rem;
}
div#content section#contact header p.sub {
	font-size: 1rem;
}
div#content section#contact p.description {
	margin-bottom: 20px;
}
div#content section#contact p.tel {
	font-size: 2rem;
	line-height: 2.25rem;
}
div#content section#contact p.tel a::before {
	font-size: 1.875rem;
	transform: translateY(2px);
}
div#content section#contact p.time {
	font-size: 0.875rem;
}
div#content nav#navi-footer {
	padding: 80px 0px;
}
@media (orientation: portrait) {
div#content nav#navi-footer {
  background-image: url(../images/navi-footer-image-small.jpg);
}
}
div#content nav#navi-footer ul {
	display: block;
}
div#content nav#navi-footer ul li {
  justify-content: center;
	font-size: 0.9375rem;
	margin: 0px;
}
div#content nav#navi-footer ul li:not(:last-child) {
  margin-bottom: 20px;
}
div#content nav#navi-footer ul li a {
	width: 260px;
	height: 100px;
}

/* home
-------------------------------------------------------------------------------- */

div#content section#campaign p.banner img.large {
	display: none;
}
div#content section#campaign p.banner img.small {
	display: block;
}
div#content section#home-services {
	color: #ffffff;
	background: url(../images/home-image-services.jpg) no-repeat center;
	background-size: cover;
}
div#content section#home-services p.description {
	font-size: 0.875rem;
	line-height: 1.5rem;
	margin-bottom: 30px;
}
div#content section#home-services p.description-large {
	display: none;
}
div#content section#home-services p.description-small {
	display: block;
}
div#content section#home-services p.button a {
	width: 140px;
}
div.home div#content section#contact div.inner-section {
	padding-top: 80px;
}

/* services
-------------------------------------------------------------------------------- */

div#content nav#navi-services {
	width: auto;
	border-bottom: none;
}
div#content nav#navi-services::before {
  display: none;
}
div#content nav#navi-services ul {
	display: block;
}
div#content nav#navi-services ul li {
	width: 300px;
	text-align: left;
  font-size: 1rem;
  margin: auto;
}
div#content nav#navi-services ul li:not(:last-child) {
  margin-bottom: 15px;
}
div#content nav#navi-services ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 2px solid #000000;
	padding: 20px 0px 20px 30px;
}
div#content nav#navi-services ul li i.icon {
	display: block;
	width: 22px;
	height: 22px;
	font-size: 22px;
	color: #d0d0d0;
  margin: 0px 10px 0px 0px;
	border-radius: 2.5px;
}
div#content nav#navi-services ul li span.outer {
	display: block;
	height: auto;
}
div#content section#services div.inner-section {
  padding-left: 20px;
  padding-right: 20px;
}
div#content section#services div.block div.segment:not(:last-child) {
	margin-bottom: 60px;
	padding-bottom: 60px;
}
div#content section#services div.block div.slide {
	margin-bottom: 20px;
}
div#content section#services div.block div.slide div.image {
	margin-bottom: 5px;
}
div#content section#services div.block div.slide div.image p.row {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}
div#content section#services div.block div.slide.active div.image p.row {
	opacity: 0;
}
div#content section#services div.block div.slide div.navi {
	margin-right: -5px;
}
div#content section#services div.block div.slide div.navi p.row {
	width: calc(20% - 5px);
  margin-right: 5px
}
div#content section#services div.block h3 {
  text-align: left;
font-size: 1.625rem;
line-height: 1.75rem;
margin-bottom: 5px;
}
div#content section#services div.block h4 {
	font-size: 0.9375rem;
	margin-bottom: 15px;
}
div#content section#services div.block h4 i.icon {
	width: 16px;
	height: 16px;
	font-size: 16px;
}
div#content section#services div.block p.price span.label {
	font-size: 0.75rem;
	line-height: 1.125rem;
	transform: translateY(-1px);
}
div#content section#services div.block p.price sup {
	font-size: 0.5rem;
}
div#content section#services div.block p.price span.number {
	font-size: 1.5rem;
}
div#content section#services div.block p.price span.unit {
	font-size: 0.875rem;
}
div#content section#services div.block p.price span.suffix {
	font-size: 0.75rem;
	margin-right: 0px;
}
div#content section#services div.block p.headline {
	font-size: 0.9375rem;
}

/* about, recruit
-------------------------------------------------------------------------------- */

div#content section#about div.inner-section,
div#content section#recruit div.inner-section {
  padding-left: 20px;
  padding-right: 20px;
}
div#content section#about p.image {
	margin: 0px -20px;
}
div#content section#about p.image img.large {
	display: none;
}
div#content section#about p.image img.small {
	display: block;
}
div#content section#about div#about-01 {
	transform: translateY(-40px);
	margin-bottom: 0px;
}
div#content section#about div#about-01 p.description {
	width: auto;
	padding-bottom: 30px;
}



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

footer#footer {
	font-size: 0.875rem;
	line-height: 1.75rem;
	padding: 80px 0px 20px 0px;
}
footer#footer p#button-page-top {
	width: 40px;
	height: 40px;
	right: 10px;
	bottom: 10px;
  font-size: 0.75rem;
	line-height: 1.125rem;
}
footer#footer p#button-page-top a {
	padding-top: 8px;
}
footer#footer p#button-page-top a::before {
	width: 12px;
	height: 6px;
}
footer#footer div.information {
	margin-bottom: 50px;
}
footer#footer div.information h3 {
	margin-bottom: 30px;
}
footer#footer div.information h3 img {
	height: calc(47px * 0.75);
}
footer#footer div.information p.company-address span.company {
  display: block;
	margin-right: 0px;
}
footer#footer p.button {
  font-size: 0.8125rem;
	margin-bottom: 70px;
}
footer#footer p.button a {
	width: 260px;
	height: 48px;
}
footer#footer p.button span::after {
	font-size: 1rem;
}