@charset "UTF-8";

/* 
 メニューからストーリーを一時的に非表示
========================================================= */
/* .gNavi li:nth-of-type(6),
.footer_nav02 ul:nth-of-type(4) li:nth-of-type(2) {
	display: none;
} */

/* 
 .coming_soon_text
========================================================= */
.coming_soon_text {
	padding: 64px 0 128px;
	text-align: center;
	font-size: 22px;
}

/* 
 .wrapType
========================================================= */
.wrapType01 {
	min-width: 960px;
	max-width: 1148px;
	margin: 0 auto;
	padding: 0 24px;
}

.wrapType02 {
	min-width: 960px;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 24px;
}

.wrapType03 {
	min-width: 960px;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 24px;
}



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

	.wrapType01,
	.wrapType02,
	.wrapType03 {
		padding: 0 64px 0 24px;
	}
}

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

	.wrapType01,
	.wrapType02,
	.wrapType03 {
		min-width: 100vw;
		padding: 0 16px;
	}
}

/* 
 .is-anim
========================================================= */
.is-anim {
	opacity: 0;
	transition: 800ms ease-in-out;
	transform: translateY(32px);
}

.is-anim.is-move {
	opacity: 1;
	transform: translateY(0);
}

.is-anim.is-list.is-move ul>li {
	opacity: 0;
}

/* 
 subpageHeadline
========================================================= */
.subpageHeadline {
	height: 166px;
	background-position: 50%;
	background-size: cover;
}

#about .subpageHeadline {
	background-image: url('../img/about/mainTitleBg.jpg');
}

#products .subpageHeadline {
	background-image: url('../img/products/mainTitleBg.jpg');
}

#company .subpageHeadline {
	background-image: url('../img/company/mainTitleBg.jpg');
}

#recruit .subpageHeadline {
	background-image: url('../img/company/mainTitleBg.jpg');
}

#price .subpageHeadline {
	background-image: url('../img/price/mainTitleBg.jpg');
}

#contact .subpageHeadline {
	background-image: url('../img/contact/mainTitleBg.jpg');
}

#order .subpageHeadline {
	background-image: url('../img/contact/mainTitleBg.jpg');
}



.subpageHeadline .inner {
	display: flex;
	align-items: center;
	height: 100%;
}

/* 
 headlineWrap
========================================================= */
.headlineWrap01 .headline {
	position: relative;
	margin: 0 0 40px;
	padding: 0 0 20px;
	color: #666666;
	text-align: center;
	letter-spacing: .1em;
	font-size: 36px;
}

@media screen and (max-width: 560px) {
	.headlineWrap01 .headline {
		font-size: 28px;
	}
}

.headlineWrap01 .headline::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 150px;
	height: 1px;
	content: '';
	background-color: #008080;
	transform: translateX(-50%);
}

.headlineWrap01 .headline.bold {
	font-weight: bold;
}

.headlineWrap01 .text {
	margin: 0 0 24px;
	text-align: center;
	line-height: 2;
}

.headlineWrap02 {
	position: relative;
	margin: 0 0 1em;
	padding: 0 0 0 1em;
	color: #4d4d4d;
	font-weight: bold;
	font-size: 26px;
}

@media screen and (max-width: 560px) {
	.headlineWrap02 {
		font-size: 18px;
	}
}

.headlineWrap02::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 3px;
	height: 1.3em;
	content: '';
	background-color: #008080;
	transform: rotate(15deg) translateX(100%);
}

.headlineWrap03 {
	position: relative;
	margin: 0 0 1.2em;
	padding: 0 0 1em;
	color: #4d4d4d;
	font-weight: bold;
	font-size: 36px;
}

@media screen and (max-width: 560px) {
	.headlineWrap03 {
		font-size: 28px;
	}
}

.headlineWrap03::before,
.headlineWrap03::after {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	content: '';
}

.headlineWrap03::before {
	width: 200px;
	height: 2px;
	background-color: #acbbc3;
}

.headlineWrap03::after {
	width: 60px;
	height: 2px;
	background-color: #008080;
}

#blog .headlineWrap03 {
	margin-top: 120px;
}

@media screen and (max-width: 560px) {
	#blog .headlineWrap03 {
		margin-top: 48px;
	}
}



.headlineType01 {
	color: #808080;
	font-weight: bold;
	font-size: 28px;
}

@media screen and (max-width: 560px) {
	.headlineType01 {
		font-size: 20px;
	}
}


/* 
 subMainImage
========================================================= */
.subMainImage {
	width: 100%;
	height: 200px;
	margin: 80px 0 0;
	padding: 0 24px;
	background-size: cover;
}

/* 
.btnWrap
========================================================= */
.btnWrap.center {
	display: flex;
	justify-content: center;
}

/* 
.btnWrap.type01 a
========================================================= */
.btnWrap.type01 a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-width: 200px;
	padding: 24px 64px 24px 0;
	color: #008080;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	border-bottom: 3px solid #008080;
	line-height: 1;
}

.btnWrap.type01 a::before,
.btnWrap.type01 a::after {
	position: absolute;
	top: 50%;
	right: 0;
	content: '';
}

.btnWrap.type01 a::before {
	width: 16px;
	height: 1px;
	background-color: #008080;
}

.btnWrap.type01 a::after {
	width: 10px;
	height: 1px;
	background-color: #008080;
	transform: rotate(45deg) translateY(-4px);
}

/* 
.btnWrap.type02 a
========================================================= */
.btnWrap.type02 a {
	min-width: 250px;
	padding: 24px 32px;
	border-radius: 6px;
	text-align: center;
	text-decoration: none;
	font-size: 15px;
	border: 2px solid #afafaf;
	line-height: 1;
}

/* 
.btnWrap.type03 a
========================================================= */
.btnWrap.type03>* {
	display: inline-block;
	min-width: 230px;
	padding: 8px 40px;
	border-radius: 6px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	background-color: #037F82;
	cursor: pointer;

	user-select: none;
}

.btnWrap.type03>*>* {
	position: relative;
	font-weight: bold;
}

.btnWrap.type03>*:active {
	transform: scale(.97);
}

.btnWrap.type03>* .icon.pdf::before {
	position: absolute;
	top: 0;
	right: 100%;
	width: 1em;
	height: 1em;
	margin-right: .5em;
	content: '';
	background-image: url('../img/price/icon_pdf.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transform: scale(1.5);
}


/* 
  .innerLink
========================================================= */
.innerLink {
	display: flex;
	margin: 0 -5px;
	padding: 0 0 32px;
}

@media screen and (max-width: 560px) {
	.innerLink {
		display: flex;
		flex-wrap: wrap;
		margin: -3px -3px 0;
		padding: 0 0 16px;
	}
}

.innerLink>li {
	flex: 1;
	padding: 0 5px;
}

@media screen and (max-width: 560px) {
	.innerLink>li {
		flex: none;
		width: 50%;
		padding: 3px 3px;
	}

	.innerLink>li:nth-of-type(odd):last-child {
		width: 100%;
	}
}

.innerLink>li a {
	position: relative;
	display: block;
	padding: 16px;
	border-radius: 3px;
	color: #008d88;
	font-weight: bold;
	background-color: #E1F1EF;
}

@media screen and (max-width: 560px) {
	.innerLink>li a {
		font-size: 14px;
	}
}

.innerLink>li a:after {
	position: absolute;
	top: 50%;
	right: 16px;
	display: block;
	width: .5em;
	height: .5em;
	content: '';
	border-bottom: 1px solid #008d88;
	border-left: 1px solid #008d88;
	transform: rotate(-45deg) translateY(-50%);
}

/* 
.subNavi
========================================================= */
.subNavi {
	padding: 64px;
	background-color: #E0EFEE;
}

@media screen and (max-width: 560px) {
	.subNavi {
		padding: 24px;
	}
}

.subNavi .headline {
	margin: 0 0 1em;
	color: #008080;
	font-weight: bold;
	font-size: 28px;
}

@media screen and (max-width: 560px) {
	.subNavi .headline {
		margin: 0;
	}
}

.subNavi .inner {
	max-width: 650px;
	margin: 0 auto;
}

.subNavi ul li a {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 200px;
	padding: 24px 64px 24px 0;
	color: #008080;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px;
	border-bottom: 3px solid #008080;
}

@media screen and (max-width: 560px) {
	.subNavi ul li a {
		min-width: none;
		padding: 24px 24px 24px 0;
		font-size: 13px;
	}
}

.subNavi ul li a::before,
.subNavi ul li a::after {
	position: absolute;
	top: 50%;
	right: 0;
	content: '';
}

.subNavi ul li a::before {
	width: 16px;
	height: 1px;
	background-color: #008080;
}

.subNavi ul li a::after {
	width: 10px;
	height: 1px;
	background-color: #008080;
	transform: rotate(45deg) translateY(-4px);
}


/* 
 .tableType01 table
========================================================= */
.tableType01 table {
	width: 100%;
	text-align: left;
	letter-spacing: 0.1em;
}

.tableType01 table th,
.tableType01 table td {
	padding: 16px 0;
	border-bottom: 1px solid #d9d9d9;
	line-height: 2;
}

.tableType01 table th {
	width: 100px;
	padding: 0 2em 0 0;
	white-space: nowrap;
}

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

	.tableType01 table th,
	.tableType01 table td {
		display: block;
	}

	.tableType01 table th {
		padding: 16px 0 0;
		font-weight: bold;
		border-bottom: none;
	}

	.tableType01 table td {
		padding: 0 0 16px;
	}
}

.tableType01 table td .address {
	display: flex;
	padding: 24px 0 0;
}

.tableType01 table td .address:first-child {
	padding: 0;
}

@media screen and (max-width: 560px) {
	.tableType01 table td .address {
		display: block;
		padding: 24px 0 0 0;
	}
}

.tableType01 table td .address .headline {
	display: block;
	width: 10em;
}

@media screen and (max-width: 560px) {
	.tableType01 table td .address .headline {
		width: 100%;
	}
}

@media screen and (max-width: 560px) {
	.tableType01 table td .address .text {
		display: block;
		padding: 0 0 0 1.2em;
	}
}

.tableType01 table td .address .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .5em 0 0;
}

/* 
 .tableType02 table 
========================================================= */
.tableType02 table {
	width: 100%;
	text-align: left;
	letter-spacing: 0.1em;
}

.tableType02 table th,
.tableType02 table td {
	padding: 16px 0;
	border-bottom: 1px solid #d9d9d9;
	line-height: 2;
}

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

	.tableType02 table th,
	.tableType02 table td {
		display: block;
		border-bottom: none;
	}
}

.tableType02 table th:nth-of-type(1),
.tableType02 table td:nth-of-type(1) {
	border-top: 1px solid #d9d9d9;
}

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

	.tableType02 table td:nth-of-type(1) {
		border-top: none;
	}
}

.tableType02 table th {
	width: 14em;
	border-right: 4em solid #fff;
}

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

	.tableType02 table th {
		width: 100%;
		padding: 24px 0 0;
		font-weight: bold;
		border-right: none;
		border-bottom: none;
	}

	.tableType02 table td {
		width: 100%;
		padding: 0 0 24px;
		border-bottom: none;
	}
}

.tableType02 table td .headline {
	color: #808080;
	font-weight: bold;
	font-size: 20px;
}

@media screen and (max-width: 560px) {
	.tableType02 table td .headline {
		font-size: 18px;
	}
}

.tableType02 table td .text p {
	font-size: 16px;
}

.tableType02 table td .headline+.text p {
	padding: 1em 0 0;
}


@media screen and (max-width: 560px) {
	.tableType02 table td .text p {
		font-size: 14px;
	}
}

.tableType02 table td .text figure {
	padding: 1em 0 0;
}

/* 
 .tableType03 table 
========================================================= */
.tableType03 table {
	width: 100%;
	text-align: left;
	border-top: 1px solid #d9d9d9;
	border-left: 1px solid #d9d9d9;
}

.tableType03 table th,
.tableType03 table td {
	padding: 8px 16px;
	vertical-align: middle;
	border-right: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	line-height: 2;
}

.tableType03 table th {
	color: #fff;
	font-weight: bold;
	background-color: #008080;
}


@media screen and (max-width: 560px) {
	.tableType03 {
		overflow: scroll;
	}

	.tableType03::before {
		display: inline-block;
		content: '表がスクロールします⇒';
		font-weight: bold;
		font-size: 11px;
	}


	.tableType03 table {
		width: auto;
		white-space: nowrap;
	}
}

/* 
 .blogList
========================================================= */
.blogList {
	position: relative;
	padding: 0 0 64px;
}

.blogList ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -16px -48px;
}

@media screen and (max-width: 560px) {
	.blogList ul {
		margin: 0 -8px -16px;
	}
}

.blogList ul li {
	width: 25%;
	padding: 0 16px 48px;
	border-radius: 3px;
}

@media screen and (max-width: 560px) {
	.blogList ul li {
		width: 50%;
		padding: 0 8px 16px;
	}
}

.blogList ul li a {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #eaeaea;
	filter: drop-shadow(0 1px 3px rgba(88, 88, 88, 0.4));
}

.blogList ul li .fig {
	position: relative;
}

.blogList ul li .fig::before {
	display: block;
	padding-top: 100%;
	content: '';
}

.blogList ul li .fig img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	vertical-align: bottom;

	object-fit: cover;
}

.blogList ul li .textWrap {
	padding: 0 0 64px;
}

.blogList ul li .textWrap .headline {
	padding: 16px;
	color: #008080;
	font-weight: bold;
	font-size: 16px;
}

@media screen and (max-width: 560px) {
	.blogList ul li .textWrap .headline {
		padding: 8px;
		font-size: 13px;
	}
}


.blogList ul li .textWrap .info {
	position: absolute;
	bottom: 0;
	left: 0;
	display: inline-flex;
	flex-direction: column;
	width: 100%;
}

.blogList ul li .textWrap .info .date {
	display: block;
	padding: 16px;
	font-size: 13px;
}

@media screen and (max-width: 560px) {
	.blogList ul li .textWrap .info .date {
		padding: 8px;
	}
}

.blogList ul li .textWrap .info .cat {
	text-align: right;
}

.blogList ul li .textWrap .info .cat span {
	display: inline-block;
	padding: 2px 16px;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	background-color: #808080;
}

@media screen and (max-width: 560px) {
	.blogList ul li .textWrap .info .cat span {
		padding: 2px 8px;
		font-size: 12px;
	}
}

/* 
 .footerBlogList
========================================================= */
.footerBlogList {
	padding: 120px 0 0;
}

@media screen and (max-width: 560px) {
	.footerBlogList {
		padding: 60px 0 0;
	}
}

.footerBlogList>.headline {
	margin: 0 0 2em;
	text-align: center;
	letter-spacing: 0.15em;
	font-size: 28px;
}

@media screen and (max-width: 560px) {
	.footerBlogList>.headline {
		font-size: 20px;
	}
}

.blogBtn {
	display: none !important;
}

/* 
 .blogTag
========================================================= */
.blogTag {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 0 64px;
}

.blogTag ul {
	display: inline-flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 -5px -16px;
}

.blogTag ul li {
	width: 20%;
	padding: 0 5px 16px;
}

@media screen and (max-width: 560px) {
	.blogTag ul li {
		width: auto;
	}
}

.blogTag ul li a {
	display: block;
	padding: 8px 0;
	color: #008883;
	text-align: center;
	border: 1px solid #E0EFEE;
}

@media screen and (max-width: 560px) {
	.blogTag ul li a {
		padding: 8px;
		font-size: 12px;
	}

}

.blogTag ul li a:hover,
.blogTag ul li.is-active a {
	background-color: #E0EFEE;
}


/* 
 .youtubeWrap
========================================================= */
.youtubeWrap {
	position: relative;
	max-width: 100%;
	padding-top: 56.25%;
}

.youtubeWrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/* 
 .bannerBlock01
========================================================= */
.bannerBlock01 {
	margin-top: -58px;
	padding: 64px 16px;
	text-align: center;
}

.bannerBlock01 li {
	display: block;
	margin-top: 58px;
}

.bannerBlock01 li.tomato_shop a {
	filter: drop-shadow(0 5px 8px rgba(88, 88, 88, 0.4));
}

@media screen and (max-width: 560px) {
	.bannerBlock01 {
		margin-top: -24px;
		padding: 24px 16px 64px;
	}

	.bannerBlock01 li {
		display: block;
		margin-top: 24px;
	}

}