@charset "UTF-8";

/*--------------------
COMMON
--------------------*/

img {
	height: auto;
}

section {
	padding-top: 80px;
	padding-bottom: 80px;
	margin-bottom: 0;
}

section:first-of-type {
	padding-top: 100px;
}

.inner {
	max-width: 850px;
	margin: 0 auto;
	width: 95%
}

.narrow {
	width: 75%;
	margin: 0 auto 60px;
}

.center {
	text-align: center;
}

#eyecatch {
	font-size: 0;
}

h1.eyecatch {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 200px;
	margin-bottom: 0;
	background-size: cover;
	background-position-y: bottom;
	color: white;
}

h1.eyecatch span {
	display: block;
	font-size: 70%;
}

.machines h1.eyecatch {
	background-image: url(../img/eye_machines.jpg);
}

.gallery h1.eyecatch {
	background-image: url(../img/eye_gallery.jpg);
}

.confirm h1.eyecatch,
.contact h1.eyecatch {
	background-image: url(../img/eye_contact.jpg);

	background-position: right;
}

h2 {
	font-size: 28px;
	text-align: center;
	color: #2c3b3a;
	position: relative;
	margin-bottom: 20px;
}

h2 span {
	display: block;
	margin-top: 20px;
	font-size: 70%;
	color: #54a052;
}

h2 span:empty {
	margin-bottom: 40px;
	display: block;
}

h2 span:before {
	margin-top: -10px;
	content: '';
	width: 20px;
	height: 5px;
	width: 80px;
	background: -webkit-gradient(linear, left top, right top, from(#30a24a), to(#207a30));
	background: linear-gradient(to right, #30a24a, #207a30);
	display: block;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	position: absolute;
}

h3 {
	text-align: center;
	color: #2c3b3a
}

#breadcrumbs {
	background: #2b3a3a;
	color: white
}

#breadcrumbs a:after {
	color: currentColor
}

a {
	color: currentColor
}

a[target="_blank"]:after {
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	vertical-align: baseline;
	content: "\f35d";
	padding-left: 10px;
}

a[target="_blank"].noicon:after {
	content: none !important;
}

.btn {
	margin-bottom: 0;
}

.btn a::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	display: block;
	border-radius: 3px;
	top: 0;
	left: 0;
	-webkit-box-shadow: 0 4px;
	box-shadow: 0 4px;
	z-index: -1;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: -webkit-transform .3s, -webkit-box-shadow .2s;
	transition: -webkit-transform .3s, -webkit-box-shadow .2s;
	transition: transform .3s, box-shadow .2s;
	transition: transform .3s, box-shadow .2s, -webkit-transform .3s, -webkit-box-shadow .2s;
	-webkit-transform-origin: right;
	transform-origin: right
}

.btn a:hover:before {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transform-origin: left;
	transform-origin: left;
	-webkit-box-shadow: 0 4px #ddd;
	box-shadow: 0 4px #ddd;
}

.btn a {
	position: relative;
	border: none;
	z-index: 200;
	color: white;
	-webkit-box-shadow: 0 4px #1f8e34,
		0px 6px 5px rgba(255, 255, 255, .3);
	box-shadow: 0 4px #1f8e34,
		0px 6px 5px rgba(255, 255, 255, .3);
	background-color: #4d9c4b;
	border-radius: 3px;
	padding: 13px 15px;
	min-width: 240px;
	font-size: 115%;
}


.btn a:hover {
	color: #4d9c4b;
}

.btn.white a::before {
	background-color: #2b3a3a;
	-webkit-box-shadow: 0 4px #212c2c;
	box-shadow: 0 4px #212c2c;
}


.btn.white a:hover {
	color: white;
	background-color: white;
}

.btn.white a {
	color: #4d9c4b;
	background-color: white;
	-webkit-box-shadow: 0 4px #ddd,
		0px 3px 5px rgba(255, 255, 255, .3);
	box-shadow: 0 4px #ddd,
		0px 3px 5px rgba(255, 255, 255, .3);
}


.btn a:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f054';
	margin-left: 5px;
}

aside a[href^="tel"],
.contact-box a[href^="tel"] {
	font-size: 32px;
	font-weight: bold;

}

aside a[href^="tel"] {
	padding-bottom: 20px;
	display: block;
}

aside a[href^="tel"]:before,
.contact-box a[href^="tel"]:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f879';
	margin-left: 5px;
	color: currentColor;
	margin-right: 5px;
}

.ul_nav a {
	background: #2b3a3a;
}


.flex2 div {
	margin-bottom: 40px;
}

@media screen and (max-width:700px) {
	h2 {
		font-size: 26px;
	}

	#eyecatch {
		padding-top: 80px;
	}
}

/*--------------------
TABLE
--------------------*/
table.dark {
	color: #2b3a3a;

}


table {
	width: 95%;
	border-top: 1px solid rgba(132, 143, 137, 0.5);
	margin: 0 auto 50px;
	font-size: 105%;
}

table th {
	background-color: transparent;
	width: 25%;
	padding: 20px;
	border-bottom: 1px solid rgba(132, 143, 137, 0.5);
	text-align: left;
}

table td {
	border-bottom: 1px solid rgba(132, 143, 137, 0.5);
	padding: 20px;
	line-height: 1.5;
}

table a.arrow {
	display: block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	color: currentColor
}

.machines table th,
.machines table td {
	padding: 10px;
	text-align: left;
	font-size: 90%;
}

.machines table {
	margin: 10px 0;
}

@media screen and (max-width:700px) {

	body:not(.machines) table th {
		width: 100%;
	}

	.tbl-sp-1 tr td:before,
	.tbl-sp-2 tr td:before {
		font-weight: bold;
		color: #b5bfb4;
	}

	.tbl-sp-1 tr td:nth-child(2):before,
	.tbl-sp-2 tr td:nth-child(1):before {
		content: 'テキスト1：';
	}

	.tbl-sp-1 tr td:nth-child(3):before,
	.tbl-sp-2 tr td:nth-child(2):before {
		content: 'テキスト2：';
	}

	.tbl-sp-2 tr td:nth-child(3):before {
		content: 'テキスト3：';
	}
}

/* HEADER */
#contents {
	position: relative;
}

.scroll {
	position: absolute;
	left: 50%;
	top: 0;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	z-index: 100;
	color: white;
	font-size: 40px;
	background: #212c2c;
	border-radius: 50%;
	text-align: center;
	width: 50px;
	height: 50px;
	line-height: 50px;
	-webkit-box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
	box-shadow: 0 0.2rem 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0.6rem 2rem 0 rgba(0, 0, 0, 0.19);
}

.scroll:hover {
	opacity: 1;
	line-height: 60px;
}

header {
	max-height: 95vh;
	overflow: hidden;
}

#pages header {
	padding-top: 140px;
}

.head {
	position: fixed;
	padding: 0;
	height: 140px;
	z-index: 999;
	top: 0
}

.head.fixed {
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
	box-shadow: 0 0 5px rgba(0, 0, 0, .1);
}

.head::before {
	background-color: rgba(43, 58, 58, 0.837);
	position: absolute;
	-webkit-transform: skewX(-33deg) translateX(-100%);
	transform: skewX(-33deg) translateX(-100%);
	top: 0;
	left: 0;
	content: '';
	height: 140px;
	width: 100vw;
	z-index: -1;
	-webkit-transition: -webkit-transform .5s;
	transition: -webkit-transform .5s;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s
}

.head.fixed:before,
#pages .head:before {
	-webkit-transform: translateX(0) skewX(-33deg);
	transform: translateX(0) skewX(-33deg);
	-webkit-box-shadow: 0 2px 5px rgba(92, 92, 92, 0.197);
	box-shadow: 0 2px 5px rgba(92, 92, 92, 0.197);
}

#pages .head:before {
	background-color: #4e5a5a
}

.head h1 {
	height: 140px;
	position: relative;
}

.head h1:before {
	position: absolute;
	background-color: white;
	top: 0%;
	left: -64px;
	content: '';
	height: 100%;
	width: 500px;
	z-index: -1;
	-webkit-transform: skewX(-33deg);
	transform: skewX(-33deg)
}

.head h1 a {
	margin-left: 50px;
	width: 345px;
}

.head li {
	margin: 0;
}

.head li i {
	margin-left: 5px;
}

.head li:not(:last-of-type) a {
	margin-top: 60px;
	padding-left: 12px;
	padding-right: 12px;
	/* padding: 60px 12px 0; */
	color: white;
	display: inline-block;
}

.head li:not(:last-of-type) a:hover {
	opacity: 1;
}

.head li:not(:last-of-type) a:after {
	height: 3px;
	width: 100%;
	content: '';
	background-color: #1f8e34;
	display: block;
	margin-top: 5px;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transform-origin: right;
	transform-origin: right;
	-webkit-transition: -webkit-transform .3s;
	transition: -webkit-transform .3s;
	transition: transform .3s;
	transition: transform .3s, -webkit-transform .3s;
}

.head li:not(:last-of-type) a:hover:after,
.head li a.active:after {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transform-origin: left;
	transform-origin: left;
}

.head li:last-of-type a {
	margin-left: 15px;
	color: white;
	height: 140px;
	padding: 60px 25px 0;
	display: block;
	position: relative;
	background-color: #4d9c4b;
}

.head li:last-of-type a:hover {
	color: #1f8e34;
	opacity: 1;
	background: white;
}


.head li span {
	display: block;
	text-transform: lowercase;
	font-size: 80%;
}


#contact {
	display: none;
}

/* content */

#services {
	background: linear-gradient(120deg, #ebf5ea 0%, #ebf5ea 59%, white 59%, white 100%)
}

#services .flex2 div div {
	height: 165px;
	margin-bottom: 15px;
	overflow: hidden;
}

#services .flex2 img {
	width: 100%;
}


#services .narrow {
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

#services .flex3 ul {
	margin-top: 0;
}

#services .flex3 ul li {
	margin-bottom: 0;
}

#services ul {
	margin-top: 20px;
}

#services ul li {
	margin-bottom: 10px;
	margin-left: 10px;
}


#machines {
	color: white;
	background-color: #2c3a3b;
}

#machines h2 {
	color: white;
}

#machines h2 span {
	color: white;
}

#machines table {
	width: 100%;
	border-top-color: rgb(107, 107, 107);
	font-size: 90%;
}

#machines table th,
#machines table td {
	padding: 10px;
	border-bottom-color: rgb(107, 107, 107);
}

#machines table td {
	width: 15%;
	text-align: center;
}

/* WORKS */

#works {
	padding-top: 100px;
}

#offices {
	background-color: #ebf5ea;
}

.machines .flex3:not(:last-of-type) {
	margin-bottom: 40px;
}

@media screen and (max-width:700px) {
	#pages header {
		padding-top: 80px;
	}

	#machines table th,
	#machines table td {
		width: auto;
		display: table-cell;
	}

	#works .flex2 div {
		margin-bottom: 0;
	}
}

/* ASIDE */

aside {
	background: linear-gradient(125deg, #68ab66 0%, #68ab66 35%, #4d9c4b 35%, #4d9c4b 100%);
	color: white;
	margin: 50px 0;
}

aside h2,
aside h2 span {
	color: white;
}

aside h2 span {
	margin: 0;
}

aside h2 span::before {
	display: none;
}

aside .flex2 {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

aside .flex2 div {
	margin-bottom: 0;
}

/* FOOTER */

footer {
	padding-top: 60px;
	background: transparent;
	background-color: #e9ebeb;
}

.foot {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.foot>div {
	width: auto;
}

.foot address {
	padding-bottom: 0;
}

.foot img {
	width: 220px;
	margin-bottom: 0;
	margin-right: 20px;
}

footer small {
	color: gray
}

#pagetop {
	background-color: #1f8e33b3
}

/* contents */

/* .machines {
	text-align: center;
}

@media screen and (max-width:700px) {
	.machines {
		text-align: left;
	}
} */

/*--------------------
CONTACT
--------------------*/

.contact-box {
	text-align: center;
	background-color: #eeeeee;
	margin-bottom: 50px;
	padding: 30px;
	font-size: 20px;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
	margin-bottom: 0;
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
	outline: none;
	color: white;
	border: 2px solid green;
	font-size: 115%;
	background-color: #4d9c4b;
	padding: 13px 15px;
	min-width: 240px;
	border-radius: 3px;
	-webkit-transition: .2s;
	transition: .2s
}

input[type="reset"] {
	border: 2px solid #bbb;
	color: #bbb;
	background-color: white;
}

input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: green;
	-webkit-transition: .3s;
	transition: .3s
}


input[type="reset"]:hover {
	background-color: rgb(243, 243, 243);
}

input[type="text"],
textarea,
input[type="email"] {
	padding: 10px;
	width: 100%;
	border: 1px solid lightgray;
	border-radius: 3px;
}

textarea {
	height: 100px;
}

form .buttons {
	text-align: center;
	margin-bottom: 40px;
}

form .buttons>*:nth-child(2) {
	margin-right: 10px;
}

input {
	/*-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;*/
}

.remodal-wrapper {
	z-index: 10000;
}

.remodal {
	background-color: #2b3a3a;
}

.remodal ul li {
	text-align: left;
}

.remodal img {
	display: block;
	width: 80%;
	margin: 0 auto 30px;
}

.remodal ul {
	width: 90%;
	margin: 30px auto 0;
}

.remodal ul ul {
	margin-top: 0;
	width: 100%;
}

.remodal li span {
	display: block;
	font-size: 80% !important;
	line-height: 1;
}

.remodal ul li {
	font-size: 16px;
	float: none;
}

.remodal ul.sub li {
	font-size: 80%;
}

.remodal ul.sub li a:before {
	content: '-';
	position: absolute;
	left: 15px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%)
}

.remodal li {
	position: relative;
}

.remodal li:after {
	content: '\f105';
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	position: absolute;
	right: 20px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 2em;
}

.remodal ul.sub li a {
	padding-left: 30px !important;
	position: relative;

}

.remodal ul.sub li:last-child a {
	border-bottom: none;

}

.remodal ul li a {
	border-top: solid 1px rgba(139, 139, 139, 0.135);
	border-bottom: solid 1px transparent;
	padding: 12px !important;
}

.remodal ul li:last-child a {
	border-bottom: solid 1px rgba(139, 139, 139, 0.135);
}

.remodal ul li a:hover {
	background-color: rgba(255, 255, 255, 0.102);
	border-top: solid 1px rgb(139, 139, 139);
	border-bottom: solid 1px rgb(139, 139, 139);
}

@media screen and (min-width:700px) and (max-width:1000px) {

	.head,
	.head h1 {
		height: 100px;
		font-size: 90%;
	}

	.head h1 a {
		width: 25vw;
		/* width: 200px; */
		margin-left: 20px;
		height: 100px;
	}

	.head h1:before {
		height: 100px;
		/* width: 300px; */
		width: 37vw;
	}

	.head::before {
		height: 100px;
	}

	.head li:not(:last-of-type) a {
		margin-top: 8px;
		padding-left: 10px;
		padding-right: 10px;

	}

	.head li:last-of-type a {
		height: 100px;
		padding: 35px 10px 0;
	}
}

@media screen and (min-width:700px) and (max-width:780px) {
	.head li:last-of-type a {
		margin: 0;
	}

	.head li:not(:last-of-type) a {
		margin-top: 8px;
		padding-left: 7px;
		padding-right: 7px;

	}
}

@media screen and (max-width:1000px) {
	.head h1 a {
		width: 150px;
		margin-left: 20px;
		background-image: url(../img/logo-sp.png)
	}
}

@media screen and (max-width:700px) {

	.inner {
		width: 85%;
	}

	.narrow {
		width: 100%;
		margin-bottom: 40px;
	}

	.flex2 div {
		margin-bottom: 20px;
	}

	table {
		width: 100%;
		margin-bottom: 0;
	}

	table {
		width: 100%;
	}

	td:last-child {
		border-bottom: 1px solid rgba(132, 143, 137, 0.5);
	}

	table,
	table td {
		padding: 15px 10px;
	}

	section,
	#works {
		padding-top: 60px;
	}

	#works {
		padding-bottom: 40px;
	}

	/* HEADER */



	h1.eyecatch {
		height: 250px;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	.head {
		padding: 0;
		height: 80px;
		z-index: 9999;
		background-color: #fff;
	}

	.head h1 {
		height: 80px;
	}


	header {
		background-color: transparent;
	}

	.head::before,
	.head h1:before {
		display: none;
	}

	#spnav,
	#contact>div {
		position: fixed;
		top: 0;
		right: 0;
		height: 80px;
		width: 80px;
	}

	#spnav {
		position: relative;
	}

	#spnav:before {
		content: 'メニュー';
		position: absolute;
		color: white;
		z-index: 99;
		font-size: 12px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		top: 12px;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	}

	#spnav a {
		background-color: #2b3a3a
	}

	#spnav>a span {
		top: 38px;
		margin: 0 25px;
	}

	#spnav>a span:before {
		top: 10px;
	}

	#spnav>a span:after {
		top: 20px;
	}

	#contact {
		display: inline-block;
	}

	#contact>div {
		background-color: #1f8e34;
		color: white;
		right: 85px;
	}

	#contact>div:before {
		content: 'お問合せ';
		position: absolute;
		color: white;
		z-index: 99;
		font-size: 12px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		top: 12px;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	}

	#contact>div:after {
		content: '\f095';
		font-family: "Font Awesome 5 Free";
		position: absolute;
		font-weight: 900;
		color: white;
		z-index: 99;
		font-size: 28px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		top: 35px;
		width: -webkit-fit-content;
		width: -moz-fit-content;
		width: fit-content;
	}

	form .buttons>*:not(:first-child) {
		margin-top: 20px;
		margin-right: 0;
	}

	form .buttons {
		margin-top: 50px;
	}

	section:first-of-type {
		padding-top: 60px;
	}

	#services {
		background: transparent;
		background: linear-gradient(120deg, #ebf5ea 0%, #ebf5ea 30%, white 30%, white 100%)
	}

	#offices img {
		width: 60%;
		margin: 0 auto;
		display: block;
	}

	.contact-box {
		padding: 25px;
	}

	a[href^="tel"] {
		font-size: 28px;
	}

	.contact section {
		padding-bottom: 40px;
	}


	aside p {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}


	.foot img {
		margin: 0;
	}
}