/*
// Table of content
// -----------------------------------------------------------------------------
// - 1. Homepage
// - 2. About Page
// - 3. Work Page
// - 4. Work Detail Page
// - 5. News Page
// - 6. News Detail Page
// - 7. Contact Page
*/
* {
	box-sizing: border-box;
}

body {
	padding-bottom: 0;
}

@media screen and (max-width: 1000px) {
	body {
		padding-bottom: 80px;
	}
}

.frame_recruit {
	position: fixed;
	top: 0;
	right: 0;
	display: block;
	width: 360px;
	height: 100dvh;
	border: none;
}

.to_recruit {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	display: none;
	justify-content: center;
	align-items: center;
	padding: 20px;
	height: 80px;
	font-size: 18px;
	color: #fff;
	text-align: center;
	background-color: #008fc9;
	border: 2px solid #fff;
	z-index: 999;
}

@media screen and (max-width: 1000px) {
	.frame_recruit {
		display: none;
	}

	.to_recruit {
		display: flex;
	}
}

ol,
ul {
	padding: 0;
}

/* -----------------------------------------------------------------------------
// 1. Homepage
// ----------------------------------------------------------------------------- */
.homepage {
	position: relative;
}

.homepage .wrap {
	display: flex;
}

/* .main-content-wrapper {
	margin-right: 360px;
	min-width: 1200px;
}
@media screen and (max-width: 1560px) {
	.main-content-wrapper {
		margin-right: 0;
	}
} */

.main-content-wrapper {
	width: calc(100% - 360px)
}
.homepage .section-headline {
	margin-bottom: 50px;
	text-align: center;
}

.homepage .section-headline h2 {
	margin-bottom: 30px;
	font-size: 32px;
}

.homepage .section-headline h2 span {
	background: linear-gradient(transparent 60%, #80d3f5 60%);
	line-height: 1.5em;
}

.homepage .section-headline h3 {
	margin-bottom: 30px;

	font-weight: bold;
	font-weight: 700;
}

.homepage .section-headline h3.newstitle {
	color: #272727;
	/*margin-top: 110px;*/
}

.homepage .section-headline h3.ntm {
	margin-top: 0;
}

.homepage .section-headline p {
	font-size: 18px;
}

.homepage .section-headline h4 {
	position: relative;
	margin: 60px auto 30px;
}

.homepage .section-headline h4::after {
	content: ' ';
	width: 40px;
	height: 1px;
	background-color: #272727;
	display: block;
	border-radius: 2px;
	margin: 30px auto 30px auto;
}

.homepage .section-headline p.newsdate {
	font-family: YuMincho, "Yu Mincho", Times, serif;
	border-top: 1px #272727 solid;
	border-bottom: 1px #272727 solid;
	padding: 10px 0;
	margin-bottom: 110px;
}

.homepage .hero-slider {
	position: relative;
	max-height: 700px;
	overflow: hidden;
	text-align: center;
}

.homepage .hero-slider .content {
	position: absolute;
	top: 47%;
	right: 0;
	left: 0;
	margin: 0 auto;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.homepage .hero-slider img {
	opacity: 1;
}

.homepage .hero-slider h2 {
	margin-bottom: 50px;
	line-height: 56px;
	font-weight: 700;
	font-size: 80px;
	color: #fff;
	text-shadow: 0px 0px 4px #999;
}

.homepage .hero-slider h2 small {
	display: block;
	letter-spacing: 3px;
	font-size: 22px;
	color: #fff;
	margin-top: 30px;
	line-height: 1.5em;
}

.homepage .hero-slider .btn {
	margin-right: 10px;
}

.homepage .hero-slider .owl-buttons .owl-prev,
.homepage .hero-slider .owl-buttons .owl-next {
	position: absolute;
	top: 47%;
	width: 50px;
	height: 50px;
	background-color: transparent;
	text-align: center;
	color: #fff;
	opacity: 1;
}

.homepage .hero-slider .owl-buttons .owl-prev i,
.homepage .hero-slider .owl-buttons .owl-next i {
	font-size: 36px;
	line-height: 50px;
}

.homepage .hero-slider .owl-buttons .owl-prev {
	left: 10%;
}

.homepage .hero-slider .owl-buttons .owl-next {
	right: 10%;
}

.homepage .morebt {
	padding: 6px 10px;
	border: 2px solid #181818;
	display: block;
	text-align: center;
	color: #272727;
	font-size: 18px;
	font-style: italic;
	cursor: pointer;
	background-color: #fff;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
}

.homepage .morebt:hover {
	background-color: #181818;
	color: #fff;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
	cursor: pointer;
	text-decoration: none;
}

.homepage .projects .item {
	position: relative;
	margin-bottom: 30px;
}

.homepage .projects .item:hover .caption {
	opacity: 1;
}

.homepage .projects .caption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.85);
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.homepage .projects .caption .align {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.homepage .projects .caption h3 {
	margin-bottom: 3px;
	font-size: 12px;
	font-weight: 300;
	color: #fff;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.homepage .projects .caption .item-category {
	display: inline-block;
	color: #fff;
	font-size: 24px;
	font-weight: normal;
}

.homepage .community {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.homepage .community img {
	top: 0;
	left: 0;
	width: 50%;
}

.homepage .community .content {
	padding: 100px 0 100px 80px;
}

.homepage .community .content2 {
	padding: 0 0 100px 35px;
}

.homepage .community .content2 h2 {
	margin-top: 0;
}

.homepage .community h2 {
	margin-bottom: 30px;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 22px;
}

.homepage .community h2+p {
	margin-bottom: 10px;
}

.homepage .community i {
	font-size: 28px;
	color: #c4c4c4;
}

.homepage .community h4 {
	margin-bottom: 25px;
	text-transform: uppercase;
	font-weight: 500;
	color: #4b4b4b;
}

.homepage .testimonials {
	background: url(http://placehold.it/1895x1000) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.homepage .testimonials .section-headline h3 {
	color: #fff;
}

.homepage .clients img {
	opacity: 0.5;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.homepage .clients img:hover {
	opacity: 1;
}

.homepage .clients .owl-pagination {
	position: absolute;
	bottom: -50px;
}

.homepage .clients .owl-pagination .owl-page+.owl-page {
	margin-left: 15px;
}

.homepage .clients .owl-pagination .owl-page span {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0;
	opacity: 1;
	border: none;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	background-color: #c4c4c4;
}

.homepage .clients .owl-pagination .owl-page.active span {
	position: relative;
	border: none;
	background-color: #40b3e3;
	z-index: 10;
}

.homepage .clients .owl-pagination .owl-page.active span:before {
	content: " ";
	position: absolute;
	top: -9px;
	left: -9px;
	background-color: #c4c4c4;
	opacity: 0.2;
	width: 20px;
	height: 20px;
	text-align: center;
	border-radius: 100%;
}

/* -----------------------------------------------------------------------------
// 2. About Page
// ----------------------------------------------------------------------------- */
.about .section-headline {
	margin-bottom: 50px;
	text-align: center;
}

.about .section-headline h3 {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-weight: 500;
}

.about .section-headline p {
	font-size: 18px;
}

.about .hero-title {
	background: url(http://placehold.it/1895x1000) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.about .team {
	border-bottom: 1px solid #e5e5e5;
}

.about .info h4 {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-weight: 500;
}

.about .info strong {
	color: #9c9c9c;
}

.about .testimonials {
	background: url(http://placehold.it/1895x1000) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.about .testimonials .section-headline h3 {
	color: #fff;
}

.about .pub img {
	width: 33%;
}

.about .pub img+img {
	margin-left: 0.1%;
}

.about .clients .owl-item {
	text-align: center;
}

.about .clients img {
	opacity: 0.5;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.about .clients img:hover {
	opacity: 1;
}

.about .clients .owl-pagination {
	position: absolute;
	bottom: -50px;
}

.about .clients .owl-pagination .owl-page+.owl-page {
	margin-left: 15px;
}

.about .clients .owl-pagination .owl-page span {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0;
	opacity: 1;
	border: none;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	background-color: #c4c4c4;
}

.about .clients .owl-pagination .owl-page.active span {
	position: relative;
	border: none;
	background-color: #40b3e3;
	z-index: 10;
}

.about .clients .owl-pagination .owl-page.active span:before {
	content: " ";
	position: absolute;
	top: -9px;
	left: -9px;
	background-color: #c4c4c4;
	opacity: 0.2;
	width: 20px;
	height: 20px;
	text-align: center;
	border-radius: 100%;
}

.about .skills .progress-item {
	text-align: center;
}

.about .skills .progress-item strong {
	font-family: "Playfair Display", YuMincho, "Yu Mincho", Times, serif;
	position: absolute;
	top: 50px;
	right: 0;
	left: 0;
	color: #4b4b4b;
	font-weight: normal;
	font-size: 30px;
}

.about .skills .progress-item h4 {
	font-weight: 500;
	margin: 30px 0 25px 0;
	text-transform: uppercase;
	color: #4b4b4b;
}

.about .skills .progress-item h4+p {
	padding: 0 15px;
	margin-bottom: 20px;
}

.philosophyimg {
	text-align: center;
}

.companyprofile_left {
	float: left;
	width: 50%;
}

.companyprofile_right {
	float: right;
	width: 50%;
}

.companyprofile dt {
	padding: 10px 0 10px 10px;
	width: 26%;
	/* 左寄せ */
	float: left;
	/* float解除 */
	clear: both;
	font-weight: normal;
	font-size: 16px;
	line-height: 30px;
}

.companyprofile dd {
	padding: 10px;
	width: 73%;
	float: right;
	font-size: 16px;
	line-height: 24px;
	line-height: 30px;
}

.recruit01 {
	/* width: 800px; */
	max-width: 800px;
	margin: 0 auto;
}

.companyprofile .recruit01 dt {
	padding: 5px;
	width: 28%;
	/* 左寄せ */
	float: left;
	/* float解除 */
	clear: both;
	font-weight: normal;
	font-size: 16px;
	line-height: 30px;
}

.recruit01 dl {
	padding-bottom: 45px;
	overflow: hidden;
}

.companyprofile .recruit01 dd {
	padding: 5px;
	width: 70%;
	float: right;
	font-size: 16px;
	line-height: 30px;
}

.recruit01 h4 {
	clear: both;
	font-weight: normal;
	text-align: center;
	border-top: dotted 1px #999999;
	padding-top: 70px;
	padding-bottom: 50px;
	line-height: 1.8em;
}

.recruit01 h4.noborder {
	clear: both;
	font-weight: normal;
	text-align: center;
	border-top: none;
	padding-top: 0;
	padding-bottom: 55px;
}

.footer-copyright {
	background: #252525;
	color: #fff;
}

.footer-copyright p {
	font-size: 12px;
}

.footer-main p {
	color: #fff;
}

.tablemode {
	padding-top: 70px;
	padding-left: 180px;
}

footer {
	background-color: #008fc9;
	padding: 33px 0 0 0;
}

.footer-copyright {
	margin-top: 33px;
}

.subfooter {
	background: #14a9e3;
	text-align: center;
	padding: 25px 0;
}

.subfooter div {
	/* width: 1200px; */
	max-width: 1200px;
	position: relative;
	margin: 0 auto;
}

.subfooter .gotopbt {
	position: absolute;
	right: 20px;
	top: -10px;
}

.subfooter a {
	color: #fff;
}

.subfooter a:hover {
	color: #eeeeee;
}

/*modal*/
.modal-content,
.modal-content p {
	text-align: center;
}

#btn-close-modal {
	position: relative;
	width: 100%;
	text-align: center;
	padding-top: 50px;
	text-align: center;
}

.closebt {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	cursor: pointer;
}

.closebt:hover {
	transform: rotate(90deg);
}

.modalli001 {
	padding: 60px 0;
	width: 820px;
	margin: 0 auto;
	overflow: hidden;
}

.modalli001 div {
	padding: 0 20px;
	width: 25%;
	float: left;
	color: #fff;
}

.modalli001 div h4 {
	font-size: 16px;
	color: #fff;
	font-weight: normal;
}

.modalli001 div h4:after {
	content: " ";
	width: 20px;
	height: 1px;
	background-color: #ffffff;
	display: block;
	border-radius: 2px;
	margin: 20px auto 20px auto;
}

#animatedModal5 h3,
#animatedModal5 p,
#animatedModal6 h3,
#animatedModal6 p,
#animatedModal7 h3,
#animatedModal7 p,
#animatedModal8 h3,
#animatedModal8 p {
	color: #fff;
	clear: both;
}

#animatedModal5 h3,
#animatedModal7 h3,
#animatedModal8 h3 {
	padding-top: 50px;
	font-weight: normal;
}

.modalli005 {
	padding: 30px 0;
	width: 1200px;
	margin: 0 auto;
}

.modalli005 dl {
	padding-top: 0;
}

.modalli005 dt {
	padding: 5px;
	width: 22%;
	/* 左寄せ */
	float: left;
	/* float解除 */
	clear: both;
	font-weight: normal;
	font-size: 16px;
	line-height: 30px;
	color: #fff;
	text-align: left;
}

.modalli005 dd {
	padding: 5px;
	width: 76%;
	float: right;
	font-size: 16px;
	line-height: 30px;
	color: #fff;
	text-align: left;
}

.messagename {
	text-align: right;
}

p.privacydate {
	text-align: right;
}

.modalli006 {
	padding: 30px;
	width: 820px;
	margin: 0 auto;
}

#animatedModal6 h3 {
	padding-top: 50px;
	font-weight: normal;
}

.modalli006 li {
	text-align: left;
	color: #fff;
	clear: both;
	line-height: 30px;
}

/* -----------------------------------------------------------------------------
// 3. Work Page
// ----------------------------------------------------------------------------- */
.work .section-headline {
	margin-bottom: 50px;
	text-align: center;
}

.work .section-headline h3 {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-weight: 500;
}

.work .section-headline p {
	font-size: 18px;
}

.work .hero-title {
	background: url(http://placehold.it/1895x1000) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.work .portfolio-filter {
	margin-bottom: 40px;
}

.work .portfolio-filter:before,
.work .portfolio-filter:after {
	content: " ";
	display: table;
}

.work .portfolio-filter:after {
	clear: both;
}

.work .portfolio-filter ul {
	float: left;
	display: inline-block;
	padding: 0;
}

.work .portfolio-filter li {
	display: inline-block;
	margin-right: 15px;
	color: #9c9c9c;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: "Playfair Display", YuMincho, "Yu Mincho", Times, serif;
}

.work .portfolio-filter li.active,
.work .portfolio-filter li.active:hover {
	color: #40b3e3;
	cursor: auto;
}

.work .portfolio-filter li:hover {
	cursor: pointer;
	color: #4b4b4b;
}

.work .portfolio-filter .btn {
	float: right;
	margin-top: -8px;
	background-color: #e5e5e5;
	border-color: #e5e5e5;
	font-size: 12px;
	color: #9c9c9c;
	padding: 12px 15px 12px 20px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.work .portfolio-filter .btn i {
	display: inline-block;
	margin-left: 20px;
}

.work .portfolio-filter .btn:hover {
	background-color: transparent;
	border-color: #9c9c9c;
}

.work .portfolio .item {
	position: relative;
	margin-bottom: 30px;
}

.work .portfolio .item:hover .caption {
	opacity: 1;
}

.work .portfolio .caption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.85);
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.work .portfolio .caption .align {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.work .portfolio .caption .align:hover {
	text-decoration: none;
}

.work .portfolio .caption em {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	font-weight: 300;
	font-style: normal;
	color: #fff;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.work .portfolio .caption .item-category {
	display: inline-block;
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
}

.workbt {
	/* width: 300px; */
	max-width: 300px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 80px;
	clear: both;
}

/* -----------------------------------------------------------------------------
// 4. Work Detail Page
// ----------------------------------------------------------------------------- */
.work-detail .section-headline {
	margin-bottom: 50px;
	text-align: center;
}

.work-detail .section-headline h3 {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-weight: 500;
}

.work-detail .section-headline p {
	font-size: 18px;
}

.work-detail .hero-title {
	position: relative;
	padding: 300px 0;
	background: url(http://placehold.it/1895x1000) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.work-detail .hero-title:after {
	position: absolute;
	bottom: 50px;
	font-family: "linea-arrows-10";
	content: "\e064";
	color: #fff;
	font-size: 36px;
}

.work-detail .hero-title:hover:after {
	-webkit-animation: slideUpnDown 2s infinite;
	/* Safari 4+ */
	-moz-animation: slideUpnDown 2s infinite;
	/* Fx 5+ */
	-o-animation: slideUpnDown 2s infinite;
	/* Opera 12+ */
	animation: slideUpnDown 2s infinite;
	/* IE 10+, Fx 29+ */
}

.work-detail .banner {
	padding: 150px 0;
	text-align: center;
	background: url(http://placehold.it/1895x1000) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.work-detail .banner h3 {
	margin-bottom: 30px;
	font-weight: 500;
	color: #fff;
	text-transform: uppercase;
	font-size: 28px;
}

.work-detail .banner p {
	color: #fff;
	opacity: 0.7;
}

.work-detail .projects .section-headline {
	margin-top: 50px;
}

.work-detail .projects .item {
	position: relative;
	width: 20%;
	float: left;
}

.work-detail .projects .item:hover .caption {
	opacity: 1;
}

.work-detail .projects .caption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.85);
	opacity: 0;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.work-detail .projects .caption .align {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	margin: 0 auto;
	text-align: center;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.work-detail .projects .caption .align:hover {
	text-decoration: none;
}

.work-detail .projects .caption em {
	display: block;
	margin-bottom: 3px;
	font-size: 12px;
	font-weight: 300;
	font-style: normal;
	color: #fff;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.work-detail .projects .caption .item-category {
	display: inline-block;
	color: #fff;
	font-size: 16px;
	text-transform: uppercase;
}

.work-detail .share {
	text-align: center;
}

.work-detail .share .social {
	padding: 0;
	margin-top: 20px;
}

.work-detail .share .social li {
	display: inline-block;
}

.work-detail .share .social li+li a {
	margin-left: 15px;
}

.work-detail .share .social a {
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	border-radius: 100%;
	background-color: #f9f9f9;
	color: #c4c4c4;
	text-align: center;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
}

.work-detail .share .social a:hover {
	background-color: #40b3e3;
	color: #fff;
}

.work-detail .share .pagination {
	display: block;
	margin: 50px 15px 0 15px;
	padding: 30px 0 0 0;
	border-top: 1px solid #f1f1f1;
	border-radius: 0;
	font-size: 18px;
}

.work-detail .share .pagination a {
	color: #e5e5e5;
}

.work-detail .share .pagination a:hover {
	color: #c5c5c5;
}

.work-detail .share .pagination .arrow {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	text-align: center;
	border: 1px solid #e5e5e5;
}

.work-detail .share .pagination .arrow:hover {
	border-color: #c5c5c5;
}

/* -----------------------------------------------------------------------------
// 5. News Page
// ----------------------------------------------------------------------------- */
.news .section-headline {
	margin-bottom: 50px;
	text-align: center;
}

.news .section-headline h3 {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-weight: 500;
}

.news .section-headline p {
	font-size: 18px;
}

.news .hero-title {
	background: url(http://placehold.it/1895x1000) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.news .post {
	padding: 20px;
	text-align: center;
	border: 1px solid #e5e5e5;
}

.news .post img {
	margin-bottom: 20px;
}

.news .post h4 {
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 5px;
}

.news .post .date {
	font-size: 12px;
	margin-bottom: 30px;
}

.news .post .btn {
	margin-bottom: 20px;
	color: #181818;
	text-transform: uppercase;
}

.news .post .n-post-slider .owl-pagination {
	position: absolute;
	bottom: 30px;
}

.news .post .n-post-slider .owl-pagination .owl-page+.owl-page {
	margin-left: 15px;
}

.news .post .n-post-slider .owl-pagination .owl-page span {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0;
	opacity: 1;
	border: none;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	background-color: #fff;
}

.news .post .n-post-slider .owl-pagination .owl-page.active span {
	position: relative;
	border: none;
	background: #fff;
}

.news .post .n-post-slider .owl-pagination .owl-page.active span:before {
	content: " ";
	position: absolute;
	top: -9px;
	left: -9px;
	background-color: #fff;
	opacity: 0.2;
	width: 20px;
	height: 20px;
	text-align: center;
	border-radius: 100%;
}

.news .post-blockquote {
	padding: 20px 25px;
}

.news .post-blockquote p {
	line-height: 28px;
	font-style: italic;
	font-size: 18px;
	color: #4b4b4b;
	font-weight: 600;
}

.news .post-blockquote p:before {
	font-family: "FontAwesome";
	content: "\f10d";
	color: #40b3e3;
	display: block;
	font-style: normal;
	margin-bottom: 15px;
	text-align: center;
}

.news .post-blockquote strong {
	display: block;
	margin-top: 30px;
	font-family: "Playfair Display", YuMincho, "Yu Mincho", Times, serif;
	font-size: 14px;
	font-weight: 400;
	font-style: normal;
	color: #40b3e3;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
// 6. News Detail Page
// ----------------------------------------------------------------------------- */
.news-detail .section-headline {
	margin-bottom: 50px;
	text-align: center;
}

.news-detail .section-headline h3 {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-weight: 500;
}

.news-detail .section-headline p {
	font-size: 18px;
}

.news-detail .hero-title {
	background: url(http://placehold.it/1895x1000) center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding: 500px 0 100px 0;
}

.news-detail .post-navigation {
	position: relative;
	padding: 50px 0;
}

.news-detail .post-navigation a {
	font-family: "Playfair Display", YuMincho, "Yu Mincho", Times, serif;
	color: #4b4b4b;
	text-transform: uppercase;
}

.news-detail .post-navigation a i {
	position: relative;
	bottom: -8px;
	color: #4b4b4b;
}

.news-detail .post-navigation a:hover {
	text-decoration: none;
}

.news-detail .post-navigation .grid i {
	color: #40b3e3;
}

.news-detail .post-navigation i {
	font-size: 26px;
	color: #40b3e3;
}

.news-detail .post-navigation .previous i {
	margin-right: 15px;
}

.news-detail .post-navigation .next i {
	margin-left: 15px;
}

.news-detail .post-navigation:after {
	content: " ";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #e5e5e5;
}

.news-detail .post .post-intro {
	font-size: 18px;
	margin-bottom: 50px;
	color: #4b4b4b;
	line-height: 28px;
}

.news-detail .post h3 {
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 50px;
}

.news-detail .post .post-gallery img {
	width: 33%;
}

.news-detail .post .post-gallery img+img {
	margin-left: 0.1%;
}

.news-detail .post .post-banner {
	height: 500px;
	overflow: hidden;
}

.news-detail .post .space {
	padding: 50px 0;
}

.news-detail .post .space:before,
.news-detail .post .space:after {
	content: " ";
	display: table;
}

.news-detail .post .space:after {
	clear: both;
}

.news-detail .post .meta {
	padding: 40px 0;
	border-top: 1px solid #e5e5e5;
}

.news-detail .post .meta:before,
.news-detail .post .meta:after {
	content: " ";
	display: table;
}

.news-detail .post .meta:after {
	clear: both;
}

.news-detail .post .meta .social {
	padding: 0;
}

.news-detail .post .meta .social li {
	display: inline;
	list-style-type: none;
}

.news-detail .post .meta .social a {
	display: inline-block;
	width: 35px;
	height: 35px;
	margin-right: 10px;
	line-height: 35px;
	text-align: center;
	color: #c4c4c4;
	border-radius: 100%;
	background-color: #f9f9f9;
	-webkit-transition: background-color 0.5s;
	-moz-transition: background-color 0.5s;
	-ms-transition: background-color 0.5s;
	-o-transition: background-color 0.5s;
	transition: background-color 0.5s;
}

.news-detail .post .meta .social a:hover {
	background-color: #40b3e3;
	color: #fff;
}

.news-detail .post .meta .tagged strong {
	margin-right: 3px;
	text-transform: uppercase;
	font-family: "Playfair Display", YuMincho, "Yu Mincho", Times, serif;
}

.news-detail .post .post-comments {
	margin-top: 100px;
}

.news-detail .post .post-comments h3 {
	font-size: 28px;
	text-align: left;
	margin: 0 0 10px 0;
}

.news-detail .post .post-comments .btn {
	float: right;
	margin-top: -8px;
	background-color: #e5e5e5;
	border-color: #e5e5e5;
	font-size: 12px;
	color: #9c9c9c;
	padding: 12px 25px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.news-detail .post .post-comments .btn i {
	display: inline-block;
	margin-left: 20px;
}

.news-detail .post .post-comments .btn:hover {
	background-color: transparent;
	border-color: #9c9c9c;
}

.news-detail .post .post-comments .comment {
	padding: 30px 0;
}

.news-detail .post .post-comments .comment:before,
.news-detail .post .post-comments .comment:after {
	content: " ";
	display: table;
}

.news-detail .post .post-comments .comment:after {
	clear: both;
}

.news-detail .post .post-comments .comment+.comment {
	border-top: 1px solid #e5e5e5;
}

.news-detail .post .post-comments .comment-avatar {
	width: 70px;
	height: 70px;
	border-radius: 100%;
	float: left;
	overflow: hidden;
}

.news-detail .post .post-comments .comment-avatar img {
	margin: 0;
}

.news-detail .post .post-comments .comment .align {
	float: left;
	margin-left: 30px;
	width: 81%;
}

.news-detail .post .post-comments .comment h5 {
	display: inline-block;
	text-transform: uppercase;
	color: #4b4b4b;
	margin: 0 10px 20px 0;
	font-weight: 700;
}

.news-detail .post .post-comments .comment .date {
	font-size: 12px;
}

.news-detail .post .post-comments .comment .reply {
	display: inline-block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #4b4b4b;
}

.news-detail .post .post-comments .comment .reply i {
	display: inline-block;
	margin-right: 7px;
	font-size: 14px;
	position: relative;
	top: 3px;
}

.news-detail .post .comment-form {
	margin-top: 100px;
}

.news-detail .post .comment-form h3 {
	text-align: left;
	margin: 0 0 40px 0;
}

.news-detail .post .comment-form .form-control {
	background-color: #f9f9f9;
	text-transform: uppercase;
	font-family: "Playfair Display", YuMincho, "Yu Mincho", Times, serif;
	color: #4b4b4b;
	font-weight: 400;
}

.news-detail .post .comment-form .form-control:focus {
	border-color: #40b3e3;
}

/* -----------------------------------------------------------------------------
// 7. Contact
// ----------------------------------------------------------------------------- */
.contact-page .section-headline {
	margin-bottom: 50px;
	text-align: center;
}

.contact-page .section-headline h3 {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-weight: 500;
}

.contact-page .section-headline p {
	font-size: 18px;
}

.contact-page .contact-map {
	position: relative;
}

.contact-page .contact-map .color-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.7;
	z-index: 10;
	background-color: #40b3e3;
}

.contact-page .contact-map #map {
	width: 100%;
	height: 400px;
	z-index: 0;
	position: relative;
}

.contact-page .contact-info h5 {
	text-transform: uppercase;
	font-weight: 500;
}

.contact-page .contact .form-control {
	background-color: #fff;
	color: #4b4b4b;
	font-family: "Playfair Display", YuMincho, "Yu Mincho", Times, serif;
	text-transform: uppercase;
}

/*# sourceMappingURL=pages.css.map */

.form-wrap {
	max-width: 800px;
	margin: auto;
}

.form-paragraph {
	font-size: 16px;
	margin-bottom: 80px;
}

.form__row {
	margin-bottom: 30px;
}

.form__row--center {
	display: flex;
	justify-content: center;
}

.form__row--end {
	display: flex;
	justify-content: flex-end;
}

.form__label {
	display: flex;
	font-size: 16px;
}

.form__label--noflex {
	display: block;
	margin-bottom: 15px;
}

.form__label-text {
	min-width: 200px;
	width: 200px;
}

.form__label-text--full-width {
	width: 100%;
	margin-bottom: 15px;
}

.form__input {
	padding: 6px 10px;
	border: 1px solid #181818;
	color: #272727;
	font-weight: normal;
	width: 100%;
}

.form__select {
	padding: 6px 10px;
	border: 1px solid #181818;
	color: #272727;
	font-weight: normal;
	width: 100%;
}

.form__textarea {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid #181818;
	color: #272727;
	font-weight: normal;
}

.form__submit {
	width: 200px;
	border: 2px solid #181818;
	color: #272727;
	background-color: white;
}

.form__message {
	display: none;
	border: 3px solid green;
	padding: 10px;
	color: green;
	text-align: right;
	font-size: 20px;
	font-weight: bold;
}

.form__error {
	display: none;
	border: 3px solid red;
	padding: 10px;
	color: red;
	text-align: right;
	font-size: 20px;
	font-weight: bold;
}

.form__display {
	display: block;
}

.recruit_img {
	display: block;
	width: 800px;
	margin: auto;
}

.homepage .morebt--recruit {
	margin: auto;
	display: block;
	width: 250px;
	font-style: normal;
	padding: 16px;
}

.homepage .section-headline p.newsdate--no-bot {
	margin-bottom: 0;
	border-bottom: 0;
}

.homepage .section-headline p.newsdate--no-bot-last {
	margin-bottom: 0;
}

.mt-underline {
	text-decoration: underline;
}

.mt-banner2023 {
	position: absolute;
	top: 50%;
	right: calc(15px + 15px + 70px + 1px);
	transform: translateY(-50%);
}

.mt-banner2023 img {
	max-width: 380px;
}

.mt-banner2025 {
	position: absolute;
	top: 50%;
	right: calc(15px + 15px + 460px + 1px);
	transform: translateY(-50%);
}

.mt-banner2025 img {
	max-width: 380px;
}

.navbar .container {
	position: relative;
}

.navbar-nav li {
	background-color: #fff;
	z-index: 2;
}

/* bootstrapの幅除去 */
.container {
	width: auto;
	max-width: 1170px;
	padding: 0 30px;
}

.footer-flex {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 1000px) {
	.footer-flex {
		flex-direction: column;
		align-items: center;
	}

	.tablemode {
		padding: 0;
	}

	.homepage .wrap {
		display: block;
	}
}

/* =======================================
   iframe (frame_recruit) のスタイル
   ======================================= */
.frame_recruit {
	position: fixed;
	top: 0;
	/* 初期状態: 表示 (右端 0px) */
	right: 0;
	display: block;
	width: 360px;
	/* フル表示時の幅 */
	height: 100dvh;
	border: none;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	/* アニメーション設定 */
	transition: right 0.5s ease;
}

/* 格納時のスタイル (完全に画面外へ移動) */
.frame_recruit.collapsed {
	/* iframeの幅分、右に移動させて完全に隠す */
	right: -360px;
}

/* メインコンテンツエリアのマージン調整 */
/* 画面幅1000px以下での既存のレスポンシブ対応は維持 */
@media screen and (max-width: 1000px) {

	.frame_recruit,
	.frame_recruit.collapsed {
		display: none;
		right: -360px;
		/* 念のため格納 */
	}

	.main-content-wrapper,
	.main-content-wrapper.iframe-collapsed {
		margin-right: 0;
	}

	.main-content-wrapper {
		width: 100%;
	}

	/* .to_recruit は既存の通り表示 */
}

/* =======================================
   付箋バナー (sticky-tab) のスタイル
   ======================================= */
.sticky-tab {
	position: fixed;
	top: 50%;
	/* 縦方向の中央に配置 */
	right: 0;
	transform: translateY(-50%);
	/* バナーの幅と高さ */
	width: 50px;
	/* 付箋の幅 */
	height: 180px;
	/* 付箋の高さ */
	padding: 10px 0;
	background-color: #008fc9;
	/* 背景色 */
	/* box-shadow: 0 0 5px rgba(255, 255, 255, 1); */
	border: 2px solid #fff;
	border-right: none;
	cursor: pointer;
	/* マウスオーバーを促すカーソル */
	z-index: 1001;
	/* iframe (1000) より手前に配置 */
	/* アニメーション設定 */
	transition: right 0.5s ease;
}

/* 付箋バナーのテキストのスタイル */
.sticky-tab__text {
	display: block;
	color: #fff;
	font-weight: bold;
	text-align: center;
	/* 縦型にするための回転 */
	transform: rotate(90deg);
	/* 要素の回転中心と位置調整 */
	transform-origin: center;
	position: absolute;
	top: 50%;
	left: 50%;
	/* 回転後の位置調整 */
	transform: translate(-50%, -50%) rotate(90deg);
	white-space: nowrap;
	/* テキストが折り返さないように */
	letter-spacing: 0.1rem;
}

/* 初期状態: 非表示 (画面外へ移動) */
.sticky-tab.collapsed {
	right: -50px;
	/* 付箋の幅分、画面外へ移動 */
}

/* 展開状態: 表示 (右端 0px) */
.sticky-tab.expanded {
	right: 0;
}

/* 画面幅が1560px以下の場合、付箋も非表示にする */
@media screen and (max-width: 1000px) {

	.sticky-tab,
	.sticky-tab.collapsed,
	.sticky-tab.expanded {
		display: none;
		right: -50px;
	}
}



.interior_supervision {
	background-color: rgb(64, 179, 227);
	padding: 100px 0 0;
	margin-top: 100px;
	text-align: center;
}

.space-stripe.pickup {
	margin-top: 100px;
	padding: 100px 15px;
}

.pickup h3 {
	text-align: center;
	line-height: 1.8em;
}

.inner {
	background: #fff;
	padding: 30px;
	border: 1px solid #008fc9;
	text-align: center;
}

.inner h4 {
	color: #008fc9;
	font-size: 20px;
	margin-bottom: 40px;
}

.feature_box {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
	margin: 50px auto;
}

.feature_box div {
	width: 20%;
}

.feature_box div img {
	width: 80%;
	height: auto;
	margin-bottom: 20px;
}

.feature_box h5 {
	font-size: 18px;
	margin-bottom: 30px;
	line-height: 1.8em;
}

.feature_box div:nth-child(2n) h5 {
	margin-bottom: 0;
}

.row.skills {
	margin: 50px auto;
}

.row.skills h3 {
	margin-bottom: 30px;
}

.skills_txt {
	position: relative;
}

.skills_txt h4 {
	position: absolute;
	width: 70%;
	margin: auto;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: rgb(64, 179, 227, 0.8);
	text-align: center;
	padding: 20px;
	color: #fff;
	line-height: 1.4em;
}

.strongpoint_wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 50px;
	position: relative;
	background-color: #008fc9;
	padding: 30px;
}

.strongpoint_wrap div {
	position: relative;
	z-index: 1;
	text-align: center;
}

.strongpoint_img {
	width: 30%;
}

.strongpoint_img h3 {
	color: #fff;
	font-size: 32px;
	line-height: 1.5em;
}

.strongpoint_wrap img.strongpoint_image {
	position: absolute;
	left: 30px;
	bottom: 30px;
	width: 100%;
	max-width: 480px;
	height: auto;
	z-index: 0;
}

.strongpoint_txt div {
	background: rgba(255, 255, 255, 0.5);
	padding: 20px;
	margin-bottom: 20px;
	text-align: left;
}

.strongpoint_txt div p {
	margin-bottom: 0;
}

.strongpoint_txt div h4 {
	font-size: 20px;
}

.strongpoint_txt div:last-child {
	margin-bottom: 0;
}

.navbar-toggle {
	z-index: 9999;
}

.modalli006,
.modalli001 {
	width: auto;
	max-width: 820px;
}

.modalli005 {
	width: auto;
	max-width: 1200px;
	padding: 30px 20px;
}

.navbar-default .navbar-visible {
	position: relative;
	z-index: 9999;
}

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

	.homepage .section-headline h2 {
		font-size: 24px;
	}

	.strongpoint_txt div h4 {
		font-size: 18px;
	}

	.strongpoint_img h3 {
		font-size: 20px;
	}

	.homepage .section-headline p {
		font-size: 16px;
	}

	.homepage .section-headline h3 {
		font-size: 18px;
		line-height: 1.8em;
	}

	.homepage .welcome h2 {
		font-size: 18px;
	}

	.subfooter a#demo06 {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
	}

	.footer-main .col-md-6 {
		width: 100%;
	}

	.companyprofile_left {
		float: none;
		width: 100%;
	}

	.companyprofile_right {
		float: none;
		width: 100%;
	}

	.space3 {
		padding: 50px 0;
	}

	.workbt {
		padding-bottom: 50px;
	}

	.space {
		padding: 50px 0;
	}

	.homepage .community img {
		float: none;
		width: 100%;
		margin-bottom: 30px;
	}

	.homepage .community .content2 {
		padding-left: 0;
		padding-bottom: 50px;
	}

	.community .col-lg-6 {
		float: none;
		width: 100%;
	}

	.modalli001 div h4:after {
		background-color: #000;
	}

	.interior_supervision {
		padding-top: 50px;
		margin-top: 50px;
	}

	.modalli001 div h4 {
		color: #000;
	}

	#Message .modalli001 {
		padding: 15px;
	}

	#Message .modalli001 div {
		float: none;
		width: 100%;
		background: #fff;
		color: #000;
		padding: 10px;
		margin-bottom: 15px;
	}

	#About .col-md-3 {
		width: 100%;
		float: none;
	}

	.strongpoint_txt div {
		background: rgba(255, 255, 255, 0.8);
	}

	.strongpoint_wrap img.strongpoint_image {
		left: 0;
	}

	.strongpoint_img {
		width: 100%;
	}

	.strongpoint_wrap {
		flex-direction: column;
		padding: 20px;
		gap: 30px;
	}

	.skills .col-md-6 {
		float: none;
		width: 100%;
		margin-bottom: 30px;
	}

	.feature_box div img {
		width: 60%;
		margin-top: 30px;
	}

	.feature_box div {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.feature_box div:nth-child(2n) {
		flex-direction: column-reverse;
	}

	.feature_box {
		flex-direction: column;
	}

	.space-stripe.pickup {
		margin-top: 50px;
		padding: 50px 15px;
	}

	.welcome .col-md-3,
	.welcome .col-md-9 {
		float: none;
		width: 100%;
	}

	.space2 {
		padding: 50px 0 0;
	}

	.homepage .hero-slider {
		max-height: none;
		height: 400px;
	}

	.homepage .hero-slider img {
		object-fit: cover;
		height: 400px;
	}

	.homepage .hero-slider h2 {
		font-size: 50px;
		padding: 0 20px;
		text-shadow: 0px 0px 4px #5b5b5b;
	}

	.homepage .hero-slider h2 small {
		font-size: 16px;
	}

	.navbar-nav>li {
		float: none;
		text-align: center;
		background: none;
	}

	.mt-banner2023 {
		position: static;
		transform: inherit;
		display: flex;
		justify-content: center;
		width: 100%;
		margin-bottom: 30px;
	}

	.navbar-default .navbar-collapse {
		width: 100%;
		height: 100vh !important;
		left: 0;
		float: none !important;
		position: fixed;
		top: 0;
		z-index: 999;
		background: rgba(255, 255, 255, 0.95);

		display: flex !important;
		justify-content: flex-start;
		flex-direction: column;
		align-items: center;
		gap: 100px;
	}

	.navbar-default .navbar-collapse ul {
		float: none;
	}

	.navbar-default .navbar-toggle-desktop {
		padding-right: 0;
	}

	.navbar-default .navbar-nav li a {
		padding: 20px;
	}

	.disp_pc {
		display: none;
	}
}

@media screen and (max-width: 760px) {
	body.body-visible {
		overflow: hidden;
	}
}