@charset 'UTF-8';
/* #####################################################
 * common.css
 * - Core
 * - Layout
 * - Modules
 * - Pages
 * ################################################## */
/* =====================================================
 * Base
 * ================================================== */
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
@import url(//fonts.googleapis.com/css?family=Kosugi|Roboto:400,500,700,900);

@import url(//use.fontawesome.com/releases/v5.4.1/css/all.css);

html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: sans-serif;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	margin: 0.67em 0;
	font-size: 2em;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	color: inherit;
	font: inherit;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
	cursor: pointer;
	-webkit-appearance: button;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

input {
	line-height: normal;
}

input[type='checkbox'],
input[type='radio'] {
	box-sizing: border-box;
	padding: 0;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
	height: auto;
}

input[type='search'] {
	box-sizing: content-box;
	-webkit-appearance: textfield;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
	border: 1px solid #c0c0c0;
}

legend {
	padding: 0;
	border: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/* -----------------------------------------------------
 * Font
 * -------------------------------------------------- */
/* -----------------------------------------------------
 * Init
 * -------------------------------------------------- */
*,
*:before,
*:after {
	box-sizing: border-box;
}

/* normalize overwrite */
html {
	position: relative;
	min-height: 100%;
	font-family: Roboto, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', Meiryo, sans-serif;
	font-size: 62.5%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
	color: #000;
	line-height: 1.5;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: unset;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

a {
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
}

a:hover {
	color: #262626;
}

a:active,
a:focus {
	color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
figure,
figcaption,
small {
	margin: 0;
	font-size: 100%;
	font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.2;
}

img {
	vertical-align: bottom;
}

ul {
	list-style-type: none;
	padding: 0;
}

ol {
	padding: 0;
}

th {
	font-weight: normal;
	text-align: left;
}

/* =====================================================
 * Layout
 * ================================================== */
/**
 * Header module
 */
/* =====================================================
 * Base
 * ================================================== */
.l-header {
	position: fixed;
	z-index: 20;
	width: 100%;
	background: rgba(255, 255, 255, 0.8);
	transition: all 1s ease-in-out;
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

.is-loadend2 .l-header {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.l-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 70px;
	margin: 0 auto;
	padding: 0 20px;
}

/* =====================================================
 * Logo
 * ================================================== */
.unit-header-logo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 70px;
}

.unit-header-logo a {
	padding: 15px 0 15px 68px;
	background: url(/img/common/logo_01.svg) no-repeat 0 50%;
	background-size: 58px auto;
	transition: opacity 0.2s ease-in-out;
}

.unit-header-logo a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.unit-header-logo .header-logo {
	font-size: 1.4rem;
	font-weight: bold;
}

.unit-header-logo .header-tagline {
	font-size: 1.1rem;
}

@media print, screen and (max-width: 979px) {
	.unit-header-logo .header-tagline {
		display: none;
	}
}

/* =====================================================
 * Nav Button
 * ================================================== */
.nav-btn {
	display: none;
}

@media print, screen and (max-width: 979px) {
	.nav-btn {
		outline: 0;
		display: block;
		position: fixed;
		z-index: 30;
		top: 0;
		right: 0;
		overflow: hidden;
		box-sizing: border-box;
		width: 70px;
		height: 0;
		margin: 0;
		padding: 0;
		padding: 70px 0 0;
		border: 0;
		border-radius: 0;
		background: none transparent;
		background: #fff;
		color: inherit;
		font-size: inherit;
		vertical-align: middle;
		appearance: none;
		-moz-appearance: none;
		-webkit-appearance: none;
	}

	.nav-btn::-ms-clear {
		display: none;
	}

	.nav-btn::-ms-reveal {
		display: none;
	}

	.nav-btn::-ms-expand {
		display: none;
	}

	.nav-btn:after {
		content: '\f0c9';
		position: absolute;
		top: 0;
		left: 0;
		width: 70px;
		margin: 0 auto;
		font-family: 'Font Awesome 5 Free';
		font-size: 3.5rem;
		font-weight: 900;
		line-height: 70px;
		text-align: center;
	}

	.nav-btn.is-open:after {
		content: '\f00d';
	}

	.nav-btn.is-open + .l-header-nav {
		right: 0;
	}
}

/* =====================================================
 * Nav (SP)
 * ================================================== */
.l-header-nav {
	position: fixed;
	top: 0;
	right: 0;
	padding: 12px 20px 0;
}

@media print, screen and (max-width: 979px) {
	.l-header-nav {
		z-index: 25;
		right: -100%;
		overflow-y: scroll;
		width: 100%;
		height: calc( 100vh - 70px);
		margin: 70px 0 0;
		padding: 20px 20px 80px;
		background: #333;
		transition: all 0.2s ease-in-out;
		-webkit-overflow-scrolling: touch;
	}
}

.unit-header-nav {
	display: none;
}

@media print, screen and (max-width: 979px) {
	.unit-header-nav {
		display: block;
	}

	.unit-header-nav ul {
		text-align: center;
	}

	.unit-header-nav a {
		display: block;
		padding: 20px;
		border-bottom: 1px #fff solid;
		color: #fff;
		font-size: 1.4rem;
		font-weight: bold;
		text-transform: uppercase;
	}
}

/* =====================================================
 * Contact
 * ================================================== */
.unit-header-contact .header-tel {
	padding: 4px 20px 4px 50px;
	background: url(/img/common/ico_freedial_01.svg) no-repeat 0 0;
	background-size: 44px auto;
	font-size: 2.2rem;
	font-weight: 500;
	line-height: 1.1;
}

.unit-header-contact .header-tel span {
	display: block;
	color: #666;
	font-size: 1.0rem;
}

@media print, screen and (min-width: 768px) {
	.unit-header-contact {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.unit-header-contact .header-tel {
		pointer-events: none;
	}
}

@media print, screen and (max-width: 979px) {
	.unit-header-contact {
		display: block;
		margin: 20px;
		text-align: center;
	}

	.unit-header-contact .header-tel {
		display: inline-block;
		margin: 0 0 20px;
	}

	.unit-header-contact .header-tel span {
		color: #fff;
	}

	.unit-header-contact .header-tel a {
		color: #fff;
	}
}

/**
 * Footer module
 */
/* =====================================================
 * Base
 * ================================================== */
.l-footer {
	position: relative;
	z-index: 0;
	padding: 100px 0 60px;
	background: #ededed;
}

@media print, screen and (max-width: 767px) {
	.l-footer {
		padding: 50px 0 30px;
	}
}

.l-footer-inner {
	display: flex;
	align-items: center;
	padding: 40px 0;
}

@media print, screen and (max-width: 767px) {
	.l-footer-inner {
		padding: 20px 0;
	}
}

/* =====================================================
 * Sns
 * ================================================== */
.unit-footer-sns {
	text-align: center;
}

.unit-footer-sns ul {
	display: flex;
	justify-content: center;
}

.unit-footer-sns ul li {
	margin: 0 10px;
}

/* =====================================================
 * Pagetop
 * ================================================== */
.mod-pagetop {
	position: fixed;
	z-index: 20;
	right: 20px;
	bottom: 20px;
}

.mod-pagetop a {
	display: block;
	overflow: hidden;
	width: 70px;
	height: 0;
	padding: 60px 0 0;
	border: 5px #32a238 solid;
	border-radius: 50%;
	background: #fff;
	transition: opacity 0.2s ease-in-out;
}

.mod-pagetop a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.mod-pagetop a:after {
	content: '\f106';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color: #32a238;
	font-family: 'Font Awesome 5 Free';
	font-size: 2.0rem;
	font-weight: 900;
	line-height: 70px;
	text-align: center;
	transition: all 0.2s ease-in-out;
}

.mod-pagetop a:active:after {
	top: 5px;
}

@media print, screen and (max-width: 767px) {
	.mod-pagetop {
		right: 10px;
		bottom: 20px;
	}

	.mod-pagetop a {
		width: 40px;
		padding: 36px 0 0;
		border: 2px #32a238 solid;
	}

	.mod-pagetop a:after {
		line-height: 40px;
	}
}

/* =====================================================
 * Copyright
 * ================================================== */
.mod-copyright {
	padding: 30px 20px;
	font-size: 1.4rem;
	text-align: center;
}

/* =====================================================
 * Base
 * ================================================== */
.l-main {
	position: relative;
	z-index: 0;
}

/**
 * Nav module
 */
/* =====================================================
 * Base
 * ================================================== */
.l-nav {
	display: flex;
	position: fixed;
	z-index: 15;
	top: 80px;
	right: 10px;
	flex-direction: column;
	align-items: flex-end;
	transition: all 1s ease-in-out;
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

.is-loadend2 .l-nav {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.l-nav ul {
	padding: 20px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.8);
}

.l-nav ul li {
	position: relative;
	margin: 0;
	padding: 0 0 30px;
	font-size: 1.2rem;
	line-height: 1.0rem;
	text-align: right;
	text-transform: uppercase;
	transition: all 0.2s ease-in-out;
}

.l-nav ul li:last-child {
	padding: 0;
}

.l-nav ul li:after {
	content: '';
	display: inline-block;
	width: 1.0rem;
	height: 1.0rem;
	margin: 0 -0.4rem 0 0.5em;
	border-radius: 50%;
	background: #000;
	vertical-align: top;
	transition: all 0.2s ease-in-out;
}

.l-nav ul li a {
	transition: opacity 0.2s ease-in-out;
}

.l-nav ul li a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.l-nav ul li.is-current a {
	color: #32a238;
}

.l-nav ul li.is-current:after {
	background: #32a238;
}

.l-nav ul li .line {
	position: absolute;
	top: 1.0rem;
	right: 0;
	width: 0.2rem;
	height: 30px;
	background: #000;
}

.l-nav ul li .line-active {
	position: absolute;
	top: 1.0rem;
	right: 0;
	width: 0.2rem;
	height: 0;
	background: #32a238;
}

@media print, screen and (max-width: 767px) {
	.l-nav {
		display: none;
	}
}

/**
 * Loading module
 */
/* =====================================================
 * Base
 * ================================================== */
.l-loading {
	display: flex;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: opacity 1s ease-in-out, visibility 1s ease-in-out 1s;
}

.is-loadend .l-loading {
	visibility: hidden;
	opacity: 0;
}

.l-loading .bg {
	z-index: 1003;
	width: 18.66667vw;
	height: 18.66667vw;
	transition: all 2.5s ease-in-out;
}

.is-loading .l-loading .bg {
	width: 230vh;
	height: 230vh;
	background: #32a238;
}

/* =====================================================
 * Module
 * ================================================== */
/*
#styleguide
Buttons

```
<a href="" class="mod-btn">Button1</a>
<button class="mod-btn btn-secondary">Button2</button>
```
*/
/*
#styleguide
Button group

```
<div class="mod-btn-group">
<a href="" class="mod-btn">Button1</a>
<button class="mod-btn btn-secondary">Button2</button>
</div>
```
*/
/* =====================================================
 * Base
 * ================================================== */
.mod-btn {
	display: inline-block;
	position: relative;
	padding: 10px 60px;
	border: 4px #32a238 solid;
	border-radius: 100px;
	background: #fff;
	color: #32a238;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	text-decoration: none !important;
	transition: all 0.2s ease-in-out;
}

.mod-btn:visited {
	color: #32a238;
}

.mod-btn:hover {
	background: #32a238;
	color: #fff;
}

.mod-btn[target='_blank']:after {
	content: '\f24d';
	position: absolute;
	top: 50%;
	right: 10px;
	margin: -0.95rem 0 0;
	font-family: 'Font Awesome 5 Free';
	font-size: 1.4rem;
	font-weight: normal;
}

.mod-btn:after {
	content: '\f054';
	position: absolute;
	top: 50%;
	right: 10px;
	margin: -0.95rem 0 0;
	font-family: 'Font Awesome 5 Free';
	font-size: 1.4rem;
	transition: all 0.2s ease-in-out;
}

@media print, screen and (max-width: 767px) {
	.mod-btn {
		width: 100%;
		padding: 15px 0;
		font-size: 1.4rem;
	}
}

.mod-btn-solid {
	border: none;
	background: #32a238;
	color: #fff;
}

.mod-btn-solid:visited {
	color: #fff;
}

.mod-btn-solid:hover {
	background: #40bf47;
}

.mod-btn-sns {
	display: inline-block;
	position: relative;
	width: 60px;
	height: 60px;
	border: 4px #32a238 solid;
	border-radius: 100px;
	background: #fff;
	color: #32a238;
	font-size: 20px;
	line-height: 52px;
	text-align: center;
	transition: all 0.2s ease-in-out;
}

.mod-btn-sns:visited {
	color: #32a238;
}

.mod-btn-sns:hover {
	background: #32a238;
	color: #fff;
}

/* =====================================================
 * Base
 * ================================================== */
/* -----------------------------------------------------
 * Alignment classes
 * -------------------------------------------------- */
.mod-left {
	text-align: left !important;
}

.mod-center {
	text-align: center !important;
}

.mod-right {
	text-align: right !important;
}

/* -----------------------------------------------------
 * Status
 * -------------------------------------------------- */
@media print, screen and (min-width: 768px) {
	.is-pc-hide {
		display: none !important;
	}
}

@media print, screen and (min-width: 768px) {
	.is-pc-show {
		display: block !important;
	}
}

@media print, screen and (max-width: 767px) {
	.is-sp-show {
		display: block !important;
	}
}

@media print, screen and (max-width: 767px) {
	.is-sp-hide {
		display: none !important;
	}
}

/* -----------------------------------------------------
 * Animate State Classes
 * -------------------------------------------------- */
.invisible {
	opacity: 0.0;
	transition: all 0.5s ease;
	-webkit-transform: translate3d(0, 20%, 0);
	transform: translate3d(0, 20%, 0);
}

.visible {
	opacity: 1.0;
	transition: all 0.5s ease;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* =====================================================
 * Pages
 * ================================================== */
/* =====================================================
 * Base
 * ================================================== */
@media print, screen and (min-width: 768px) {
	body {
		font-size: 1.6rem;
	}
}

@media print, screen and (max-width: 767px) {
	body {
		font-size: 1.4rem;
	}
}

/* ----- Heading ----- */
.mod-heading1 {
	font-weight: bold;
	line-height: 1;
}

.mod-heading1:after {
	display: block;
	font-weight: bold;
	line-height: 1;
	text-transform: uppercase;
}

.block-philosophy .mod-heading1:after {
	content: 'Philosophy';
}

.block-service .mod-heading1:after {
	content: 'Service';
}

.block-company .mod-heading1:after {
	content: 'Company';
}

.block-recruit .mod-heading1:after {
	content: 'Recruit';
}

.block-contact .mod-heading1:after {
	content: 'Contact';
}

.block-privacy .mod-heading1:after {
	content: 'Privacy Policy';
}

@media print, screen and (min-width: 768px) {
	.mod-heading1:after {
		font-size: 6.0rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-heading1:after {
		font-size: 4.5rem;
	}
}

.mod-heading2 {
	margin: 0 0 40px;
	font-size: 3.8rem;
	font-weight: bold;
}

/* ----- Table ----- */
.mod-table {
	width: 100%;
	border-bottom: 1px #000 solid;
}

.mod-table a {
	text-decoration: underline;
	transition: opacity 0.2s ease-in-out;
}

.mod-table a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.mod-table th {
	border-top: 1px #000 solid;
	font-weight: bold;
	vertical-align: top;
	white-space: nowrap;
}

.mod-table td {
	border-top: 1px #000 solid;
	vertical-align: top;
}

.mod-table td p {
	margin: 0 0 10px;
}

.mod-table td dl {
	margin: 0 0 10px;
}

.mod-table td dt {
	font-weight: bold;
}

.mod-table td dd {
	margin: 0 0 10px;
}

.mod-table td ul {
	margin: 0 0 10px;
}

.mod-table td ul li {
	padding: 0 0 5px 1em;
	text-indent: -1em;
}

.mod-table td ul li:before {
	content: '・';
	color: #ccc;
}

.mod-table td ol {
	margin: 0 0 10px;
}

.mod-table td ol li {
	margin: 0 0 5px 2em;
}

@media print, screen and (min-width: 768px) {
	.mod-table {
		font-size: 1.5rem;
	}

	.mod-table th {
		padding: 20px 20px 20px 0;
	}

	.mod-table td {
		padding: 20px;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-table {
		font-size: 1.2rem;
	}

	.mod-table th {
		padding: 10px 0;
	}

	.mod-table td {
		padding: 10px;
	}
}

/* ----- Background ----- */
@-webkit-keyframes bg-anime {
	0% {
		border-radius: 50% 49% 52% 49% / 52% 50% 47% 49%;
	}

	50% {
		border-radius: 52% 49% 57% 41% / 43% 57% 47% 55%;
	}

	100% {
		border-radius: 57% 48% 45% 59% / 53% 50% 53% 53%;
	}
}

@keyframes bg-anime {
	0% {
		border-radius: 50% 49% 52% 49% / 52% 50% 47% 49%;
	}

	50% {
		border-radius: 52% 49% 57% 41% / 43% 57% 47% 55%;
	}

	100% {
		border-radius: 57% 48% 45% 59% / 53% 50% 53% 53%;
	}
}

.bg {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	background: #eaeaea;
	opacity: 0.5;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.bg-01 {
	-webkit-animation: bg-anime 3s ease 0s infinite alternate;
	animation: bg-anime 3s ease 0s infinite alternate;
}

.bg-02 {
	-webkit-animation: bg-anime 3s ease -0.8s infinite alternate;
	animation: bg-anime 3s ease -0.8s infinite alternate;
}

.bg-03 {
	-webkit-animation: bg-anime 3s ease -1.6s infinite alternate;
	animation: bg-anime 3s ease -1.6s infinite alternate;
}

.bg-04 {
	-webkit-animation: bg-anime 3s ease -2.4s infinite alternate;
	animation: bg-anime 3s ease -2.4s infinite alternate;
}

.bg-05 {
	-webkit-animation: bg-anime 3s ease -3.2s infinite alternate;
	animation: bg-anime 3s ease -3.2s infinite alternate;
}

/* =====================================================
 * Top
 * ================================================== */
.block-top {
	display: flex;
	position: relative;
	z-index: 10;
	flex-direction: column;
	width: 100%;
	padding: 0 20px;
}

@media print, screen and (min-width: 768px) {
	.block-top {
		justify-content: center;
		height: 100vh;
		margin: 0 0 200px;
	}
}

@media print, screen and (max-width: 767px) {
	.block-top {
		justify-content: flex-start;
		margin: 0 0 100px;
	}
}

.unit-top-service {
	display: flex;
	position: relative;
}

.unit-top-service.is-hover .bg {
	-webkit-transform: translate(-50%, -50%) scale(1.1);
	transform: translate(-50%, -50%) scale(1.1);
}

.unit-top-service ul {
	position: relative;
	z-index: 10;
}

.unit-top-service ul:before {
	content: '';
	position: absolute;
	background: url(/img/common/logo_02.svg) no-repeat;
}

.unit-top-service ul li {
	position: relative;
	opacity: 0;
	font-weight: 900;
	line-height: 1;
	-webkit-transform: translateX(-10%);
	transform: translateX(-10%);
}

.is-loadend2 .unit-top-service ul li {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.unit-top-service ul li:before {
	content: '';
	position: absolute;
	left: 0;
	width: 2.66667vw;
	height: 2.66667vw;
	background: url(/img/common/arrow_01.png) no-repeat 50% 50%;
	background-size: 100% auto;
}

.unit-top-service ul li:nth-child(1) {
	transition: all 1s ease-in-out;
}

.unit-top-service ul li:nth-child(2) {
	transition: all 1s ease-in-out 0.3s;
}

.unit-top-service ul li:nth-child(3) {
	transition: all 1s ease-in-out 0.6s;
}

.unit-top-service ul li a {
	display: inline-block;
	color: #000;
	transition: all 0.2s ease-in-out;
	transition-property: color;
}

.unit-top-service ul li a:hover {
	color: #32a238;
}

.unit-top-service ul li a:before {
	display: block;
	color: #32a238;
	letter-spacing: normal;
}

.unit-top-service ul li:nth-of-type(1) a:before {
	content: 'Web制作サービス';
}

.unit-top-service ul li:nth-of-type(2) a:before {
	content: 'マニュアル制作サービス';
}

.unit-top-service ul li:nth-of-type(3) a:before {
	content: '英日翻訳サービス';
}

.unit-top-service .bg {
	width: 50%;
	padding-top: 50%;
	transition: all 0.5s ease;
}

@media print, screen and (min-width: 768px) {
	.unit-top-service {
		justify-content: center;
		margin: 0 0 0 21.33333vw;
	}

	.unit-top-service ul:before {
		top: 0;
		left: -21.33333vw;
		width: 21.33333vw;
		height: 100%;
		background-position: 0 50%;
		background-size: 18.66667vw auto;
	}

	.unit-top-service ul li {
		padding: 15px 0;
		font-size: 7.46667vw;
		letter-spacing: -4px;
	}

	.unit-top-service ul li:before {
		top: 1.5em;
		font-size: 3.2vw;
	}

	.unit-top-service ul li a {
		padding: 0 0 0 4.26667vw;
	}

	.unit-top-service ul li a:before {
		font-size: 1.06667vw;
	}
}

@media print, screen and (max-width: 767px) {
	.unit-top-service {
		justify-content: flex-start;
		margin: 80px 0 0;
	}

	.unit-top-service ul {
		padding: 0;
	}

	.unit-top-service ul:before {
		display: none;
	}

	.unit-top-service ul li {
		padding: 10px 0;
		font-size: 9.06667vw;
	}

	.unit-top-service ul li:before {
		top: 1.5em;
		font-size: 5.6vw;
	}

	.unit-top-service ul li a {
		padding: 0 0 0 4.26667vw;
	}

	.unit-top-service ul li a:before {
		font-size: 3.2vw;
	}
}

.unit-top-topics {
	padding: 0 40px 5px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.unit-top-topics h2 {
	margin: -1.4rem 0 10px;
	font-size: 2.4rem;
	font-weight: bold;
}

.unit-top-topics article {
	margin: 0 0 15px;
}

.unit-top-topics article a {
	text-decoration: underline;
	transition: opacity 0.2s ease-in-out;
}

.unit-top-topics article a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.unit-top-topics article .item-topic-update {
	display: inline-block;
	margin: 0 5px 10px 0;
	font-size: 1.4rem;
	font-weight: bold;
}

.unit-top-topics article .item-topic-category {
	display: inline-block;
	padding: 0.1rem 10px;
	background: #000;
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
}

.unit-top-topics article .item-topic-summary {
	font-size: 1.2rem;
}

@media print, screen and (min-width: 768px) {
	.unit-top-topics {
		position: fixed;
		z-index: 10;
		bottom: 20px;
		left: 20px;
		width: calc( 100% - 40px);
		max-width: calc( 50% - 100px);
	}
}

@media print, screen and (max-width: 767px) {
	.unit-top-topics {
		position: relative;
		width: 100%;
		max-width: 100%;
		margin: 50px auto 70px;
	}

	.unit-top-topics .item-topic-summary {
		overflow: hidden;
		white-space: nowrap !important;
		text-overflow: ellipsis !important;
	}
}

.unit-top-topics .unit-more-btn {
	position: absolute;
	right: 10px;
	bottom: -10px;
}

.unit-top-topics .unit-more-btn .mod-btn {
	padding: 0 20px;
	border-width: 2px;
	font-size: 1.2rem;
}

.unit-top-topics .unit-more-btn .mod-btn:after {
	top: 50%;
	right: 2px;
	margin: -0.65rem 0 0;
	font-size: 1.0rem;
}

@-webkit-keyframes scroll-anime {
	0% {
		height: 0;
	}

	100% {
		height: 40px;
	}
}

@keyframes scroll-anime {
	0% {
		height: 0;
	}

	100% {
		height: 40px;
	}
}

@-webkit-keyframes scroll-anime-sp {
	0% {
		height: 0;
	}

	100% {
		height: 20px;
	}
}

@keyframes scroll-anime-sp {
	0% {
		height: 0;
	}

	100% {
		height: 20px;
	}
}

.unit-top-scroll {
	width: 100%;
	text-align: center;
}

.unit-top-scroll p {
	right: 0;
	left: 0;
	margin: 0 auto;
}

.unit-top-scroll p a {
	color: #666;
	font-size: 1.2rem;
	font-weight: bold;
	transition: opacity 0.2s ease-in-out;
}

.unit-top-scroll p a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.unit-top-scroll p:before,
.unit-top-scroll p:after {
	content: '';
	position: absolute;
	top: 2em;
	left: 50%;
	width: 2px;
	-webkit-transform: translateX(-1px);
	transform: translateX(-1px);
}

.unit-top-scroll p:before {
	height: 40px;
	background: #ccc;
}

.unit-top-scroll p:after {
	height: 0;
	background: #666;
}

@media print, screen and (min-width: 768px) {
	.unit-top-scroll p {
		position: fixed;
		bottom: 40px;
	}

	.unit-top-scroll p a {
		padding: 0 0 40px;
	}

	.unit-top-scroll p:before {
		height: 40px;
	}

	.unit-top-scroll p:after {
		-webkit-animation: scroll-anime 1.3s ease-out infinite;
		animation: scroll-anime 1.3s ease-out infinite;
	}
}

@media print, screen and (max-width: 767px) {
	.unit-top-scroll p {
		position: absolute;
		bottom: 20px;
	}

	.unit-top-scroll p a {
		padding: 0 0 20px;
	}

	.unit-top-scroll p:before {
		height: 20px;
	}

	.unit-top-scroll p:after {
		-webkit-animation: scroll-anime-sp 1.3s ease-out infinite;
		animation: scroll-anime-sp 1.3s ease-out infinite;
	}
}

/* =====================================================
 * Philosophy
 * ================================================== */
.block-philosophy {
	width: 100%;
	max-width: 1160px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 20px;
	padding-left: 20px;
}

.block-philosophy p {
	line-height: 2.25;
}

.block-philosophy p.item-philosophy-copy {
	font-family: 'Hiragino Mincho ProN', 'Yu Mincho', HG明朝E, 'ＭＳ Ｐ明朝', serif;
	font-weight: bold;
	line-height: 1.2;
}

@media print, screen and (min-width: 768px) {
	.block-philosophy {
		margin: 0 auto 200px;
	}

	.block-philosophy p {
		margin: 0 0 100px;
	}

	.block-philosophy p.item-philosophy-copy {
		margin: 150px 0;
		font-size: 4.0rem;
	}
}

@media print, screen and (max-width: 767px) {
	.block-philosophy {
		margin: 0 auto 150px;
	}

	.block-philosophy p {
		margin: 0 0 50px;
	}

	.block-philosophy p.item-philosophy-copy {
		margin: 75px 0;
		font-size: 1.8rem;
	}
}

.unit-philosophy-box dl {
	width: calc( 50% - 90px /2);
}

.unit-philosophy-box dl dt {
	margin: 0 0 30px;
	font-size: 2.0rem;
	font-weight: bold;
}

.unit-philosophy-box dl dt:before {
	content: 'ー';
	margin: 0 0.5rem 0 0;
}

.unit-philosophy-box dl dd {
	margin: 0 0 80px 2.5rem;
	font-size: 1.5rem;
}

.unit-philosophy-box dl dd ol {
	margin: 0 0 0 1.5em;
}

.unit-philosophy-box dl dd ol li {
	margin: 0 0 5px;
}

@media print, screen and (min-width: 768px) {
	.unit-philosophy-box {
		display: flex;
		justify-content: space-between;
	}

	.unit-philosophy-box dl {
		width: calc( 50% - 90px / 2);
	}

	.unit-philosophy-box dl dd:last-child {
		margin: 0 0 0 2.5rem;
	}
}

@media print, screen and (max-width: 767px) {
	.unit-philosophy-box dl {
		width: 100%;
	}
}

/* =====================================================
 * Service
 * ================================================== */
.block-service {
	width: 100%;
	max-width: 1160px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 20px;
	padding-left: 20px;
	text-align: right;
}

@media print, screen and (min-width: 768px) {
	.block-service {
		margin: 0 auto 200px;
	}

	.block-service h2 {
		margin: 0 0 70px;
	}
}

@media print, screen and (max-width: 767px) {
	.block-service {
		margin: 0 auto 150px;
	}

	.block-service h2 {
		margin: 0 0 40px;
	}
}

.unit-service-list {
	text-align: center;
}

.unit-service-list ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.unit-service-list ul li {
	position: relative;
	z-index: 10;
}

.unit-service-list ul li h3 {
	position: relative;
	font-weight: bold;
}

.unit-service-list ul li h3 a {
	display: flex;
	position: relative;
	z-index: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 300px;
	color: #000;
	transition: all 0.2s ease-in-out;
}

.unit-service-list ul li h3 a:before {
	display: block;
	color: #32a238;
	font-size: 1.4rem;
}

.unit-service-list ul li h3 a:hover {
	color: #32a238;
}

.unit-service-list ul li h3 a:hover ~ .bg {
	-webkit-transform: translate(-50%, -50%) scale(1.2);
	transform: translate(-50%, -50%) scale(1.2);
}

.unit-service-list ul li h3 .bg {
	z-index: 0;
	width: 80%;
	padding-top: 80%;
	transition: all 0.5s ease;
}

.unit-service-list ul li:nth-of-type(1) h3 a:before {
	content: 'Web制作サービス';
}

.unit-service-list ul li:nth-of-type(2) h3 a:before {
	content: 'マニュアル制作サービス';
}

.unit-service-list ul li:nth-of-type(3) h3 a:before {
	content: '英日翻訳サービス';
}

.unit-service-list ul li p {
	margin: 0 0 40px;
	font-size: 1.3rem;
	line-height: 2.0;
	text-align: left;
}

@media print, screen and (min-width: 768px) {
	.unit-service-list {
		margin: 80px auto 100px;
	}

	.unit-service-list ul li {
		width: 300px;
		margin: 0 25px;
	}

	.unit-service-list ul li h3 {
		font-size: 5.0rem;
	}
}

@media print, screen and (max-width: 767px) {
	.unit-service-list {
		margin: 40px auto 50px;
	}

	.unit-service-list ul li {
		width: 100%;
		margin: 0 25px 50px;
	}

	.unit-service-list ul li h3 {
		font-size: 4.0rem;
	}
}

.unit-service-blog {
	text-align: center;
}

.unit-service-blog ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 650px;
	margin: 0 auto;
}

.unit-service-blog ul li {
	max-width: 290px;
	margin: 0 15px 30px;
}

.unit-service-blog ul li a {
	transition: opacity 0.2s ease-in-out;
}

.unit-service-blog ul li a:hover {
	opacity: 0.7;
	text-decoration: none;
}

@media print, screen and (max-width: 767px) {
	.unit-service-blog ul {
		width: 100%;
	}

	.unit-service-blog ul li {
		width: calc( 50% - 20px);
		margin: 0 10px 20px;
	}

	.unit-service-blog ul li img {
		width: 100%;
		height: auto;
	}
}

/* =====================================================
 * Company
 * ================================================== */
.block-company {
	width: 100%;
	max-width: 1160px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 20px;
	padding-left: 20px;
}

@media print, screen and (min-width: 768px) {
	.block-company {
		margin: 0 auto 200px;
	}

	.block-company h2 {
		margin: 0 0 140px;
	}
}

@media print, screen and (max-width: 767px) {
	.block-company {
		margin: 0 auto 150px;
	}

	.block-company h2 {
		margin: 0 0 70px;
	}
}

.unit-company-message .l-company-message p {
	margin: 0 0 30px;
	font-size: 1.5rem;
}

.unit-company-message .l-company-message p.mod-signature {
	text-align: right;
}

.unit-company-message figure {
	border: 4px #000 solid;
}

.unit-company-message figure img {
	position: relative;
	top: 10px;
	left: -10px;
}

@media print, screen and (min-width: 768px) {
	.unit-company-message {
		display: flex;
		align-items: flex-start;
		margin: 0 0 120px;
	}

	.unit-company-message figure {
		position: relative;
		margin: -80px 0 0 50px;
	}
}

@media print, screen and (max-width: 767px) {
	.unit-company-message {
		position: relative;
		margin: 0 0 60px;
	}

	.unit-company-message .l-company-message h3 {
		line-height: 180px;
	}

	.unit-company-message figure {
		position: absolute;
		top: 0;
		right: 0;
		width: 145px;
		height: 180px;
	}

	.unit-company-message figure img {
		width: 100%;
		height: 100%;
	}
}

@media print, screen and (min-width: 768px) {
	.l-company-outline {
		display: flex;
		justify-content: space-between;
		margin: 0 0 100px;
	}

	.l-company-outline section {
		width: calc( 50% - 80px / 2);
	}
}

@media print, screen and (max-width: 767px) {
	.l-company-outline {
		margin: 0 0 50px;
	}

	.l-company-outline section {
		margin: 0 0 50px;
	}
}

.unit-company-map {
	text-align: center;
}

.unit-company-map .item-map iframe {
	width: 100%;
}

@media print, screen and (max-width: 767px) {
	.unit-company-map .item-map {
		height: 210px;
	}

	.unit-company-map .item-map iframe {
		height: 100%;
	}
}

.l-access-address .item-address {
	border: 4px #000 solid;
	line-height: 1.75;
	text-align: left;
}

.l-access-address .item-address h4 {
	font-size: 2.0rem;
	font-weight: bold;
}

.l-access-address .item-address h4:before {
	content: 'ー';
	margin: 0 1.0rem 0 0;
}

.l-access-address .item-address address,
.l-access-address .item-address p {
	margin: 0 0 0 3.0rem;
	font-style: normal;
}

@media print, screen and (min-width: 768px) {
	.l-access-address {
		display: flex;
		justify-content: center;
		margin: 40px auto 0;
	}

	.l-access-address .item-address {
		width: 50%;
		max-width: 460px;
		margin: 0 10px;
		padding: 40px;
	}

	.l-access-address .item-address h4 {
		margin: 0 0 30px;
	}

	.l-access-address .item-address address,
	.l-access-address .item-address p {
		font-size: 1.5rem;
	}
}

@media print, screen and (max-width: 767px) {
	.l-access-address .item-address {
		width: 100%;
		margin: 20px 0 0;
		padding: 20px;
	}

	.l-access-address .item-address h4 {
		margin: 0 0 15px;
	}

	.l-access-address .item-address address,
	.l-access-address .item-address p {
		font-size: 1.2rem;
	}
}

/* =====================================================
 * Recruit
 * ================================================== */
.block-recruit {
	width: 100%;
	max-width: 1160px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 20px;
	padding-left: 20px;
	text-align: right;
}

@media print, screen and (min-width: 768px) {
	.block-recruit {
		margin: 0 auto 200px;
	}

	.block-recruit h2 {
		margin: 0 0 70px;
	}
}

@media print, screen and (max-width: 767px) {
	.block-recruit {
		margin: 0 auto 150px;
	}

	.block-recruit h2 {
		margin: 0 0 40px;
	}
}

.unit-recruit {
	text-align: left;
}

.unit-recruit:last-child {
	margin: 0;
}

.unit-recruit > dl {
	border-top: 4px #32a238 solid;
	border-bottom: 4px #32a238 solid;
}

.unit-recruit > dl > dt {
	position: relative;
	font-size: 2.0rem;
	font-weight: bold;
	transition: all 0.2s ease-in-out;
}

.unit-recruit > dl > dt:before {
	content: 'ー';
	margin: 0 1.0rem 0 0;
}

.unit-recruit > dl > dt:after {
	content: '\f055';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto 0;
	color: #32a238;
	font-family: 'Font Awesome 5 Free';
	font-weight: bold;
	transition: all 0.2s ease-in-out;
}

.unit-recruit > dl > dt:hover {
	cursor: pointer;
	color: #40bf47;
}

.unit-recruit > dl > dt:hover:after {
	color: #40bf47;
}

.unit-recruit > dl > dt.is-open:after {
	content: '\f056';
}

.unit-recruit > dl > dt.is-open + dd {
	display: block;
}

.unit-recruit > dl > dd {
	display: none;
}

.unit-recruit > dl > dd table {
	border: 0;
}

@media print, screen and (min-width: 768px) {
	.unit-recruit {
		margin: 60px 0 100px;
	}

	.unit-recruit > dl > dt {
		padding: 3.0rem 0;
	}

	.unit-recruit > dl > dt:after {
		height: 6.0rem;
		font-size: 4.0rem;
	}
}

@media print, screen and (max-width: 767px) {
	.unit-recruit {
		margin: 30px 0 50px;
	}

	.unit-recruit > dl > dt {
		padding: 2.0rem 0;
	}

	.unit-recruit > dl > dt:after {
		height: 3.0rem;
		font-size: 2.0rem;
	}
}

/* =====================================================
 * Contact
 * ================================================== */
.block-contact {
	margin: 0 0 100px;
	text-align: center;
}

.block-contact h2 {
	margin: 0 0 70px;
}

@media print, screen and (max-width: 767px) {
	.block-contact {
		margin: 0 0 50px;
	}

	.block-contact h2 {
		margin: 0 0 40px;
	}
}

.l-contact p {
	font-weight: bold;
}

.l-contact p span {
	display: block;
	font-size: 1.4rem;
	font-weight: normal;
}

@media print, screen and (min-width: 768px) {
	.l-contact {
		display: flex;
		justify-content: center;
		margin: 0 auto 60px;
	}

	.l-contact section {
		padding: 0 50px;
	}

	.l-contact section h3 {
		font-size: 1.8rem;
	}

	.l-contact section p {
		font-size: 4.6rem;
	}

	.l-contact section.unit-contact-tel {
		border-right: 1px #000 solid;
		pointer-events: none;
	}

	.l-contact section.unit-contact-tel p {
		padding: 0 0 0 52px;
		background: url(/img/common/ico_freedial_01.svg) no-repeat 0 0.3em;
		background-size: 46px auto;
	}
}

@media print, screen and (max-width: 767px) {
	.l-contact {
		margin: 0 auto 30px;
	}

	.l-contact section {
		width: calc( 100% - 40px);
		margin: 0 20px;
		padding: 20px 0;
	}

	.l-contact section h3 {
		font-size: 1.4rem;
	}

	.l-contact section p {
		font-size: 3.6rem;
	}

	.l-contact section.unit-contact-tel {
		border-bottom: 1px #000 solid;
	}

	.l-contact section.unit-contact-tel p {
		display: inline-block;
		padding: 0 0 0 42px;
		background: url(/img/common/ico_freedial_01.svg) no-repeat 0 0.3em;
		background-size: 36px auto;
	}
}

.unit-contact-btn {
	padding: 0 20px;
}

.unit-contact-btn .mod-btn {
	padding: 15px 120px;
	font-size: 2.8rem;
}

.unit-contact-btn .mod-btn:after {
	font-size: 1.8rem;
}

.mod-privacy-link {
	margin: 40px 0 0;
	text-align: center;
}

.mod-privacy-link a {
	text-decoration: underline;
	transition: opacity 0.2s ease-in-out;
}

.mod-privacy-link a:hover {
	opacity: 0.7;
	text-decoration: none;
}

/* =====================================================
 * Privacy
 * ================================================== */
.block-privacy {
	width: 100%;
	max-width: 1160px;
	margin-right: auto;
	margin-left: auto;
	padding: 150px 20px;
	padding-right: 20px;
	padding-left: 20px;
}

.block-privacy h1 {
	margin: 0 0 100px;
}

.block-privacy h2 {
	margin: 0 0 30px;
	font-size: 2.0rem;
	font-weight: bold;
}

.block-privacy h2:before {
	content: 'ー';
	margin: 0 1.0rem 0 0;
}

.block-privacy p {
	margin: 0 0 60px 3.0rem;
}

.block-privacy ul {
	margin: 0 0 60px 3.0rem;
}

.block-privacy ul li {
	padding: 0 0 5px 1em;
	text-indent: -1em;
}

.block-privacy ul li:before {
	content: '・';
	color: #ccc;
}

/* =====================================================
 * 404
 * ================================================== */
.block-404 {
	width: 100%;
	max-width: 1160px;
	max-width: 740px;
	margin-right: auto;
	margin-left: auto;
	padding: 150px 20px;
	padding-right: 20px;
	padding-left: 20px;
}

.block-404 h1 {
	margin: 0 0 100px;
}

.block-404 h1:after {
	content: '404 Not Found';
}

.block-404 h2 {
	margin: 0 0 30px;
	font-size: 2.0rem;
	font-weight: bold;
}

.block-404 h2:before {
	content: 'ー';
	margin: 0 1.0rem 0 0;
}

.block-404 p {
	margin: 0 0 60px 3.0rem;
	line-height: 2;
}

.block-404 .unit-btn {
	text-align: center;
}