@charset "UTF-8";
/*-------------------------------------------> font */
body {
		font-family: "Noto Serif SC", "Songti SC", "STSong", "宋体", SimSun, "Kaiti SC", "STKaiti", serif;
		font-weight: 400;
}

.en, .min {
		font-family: "Noto Serif SC", "Songti SC", "STSong", "宋体", SimSun, "Kaiti SC", "STKaiti", serif;
		font-weight: 400;
}

.en.f_def {
		font-weight: 400;
}

.en.f_bold {
		font-weight: 700;
}

.sans {
		font-family: "Noto Sans SC", "Segoe UI", SegoeUI, "SF Pro SC", "SF Pro Text", "PingFang SC", "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-optical-sizing: auto;
}
.sans .f_light {
		font-weight: 300;
}

.f_def {
		font-weight: 400;
}

.f_light {
		font-weight: 300;
}

.f_bold {
		font-weight: 700;
}

/*-------------------------------------------> Header */
@media screen and (min-width: 1380px) {
		#Navi .main > li {
				text-align: center;
		}
		#Navi .main > li.hmCh {
				display: none;
		}
		#Navi .main > li.hmContact a {
				min-width: 100px;
		}
		#Navi .main > li.hmSNS {
				margin-left: 1em;
				margin-right: 1.5em;
		}
}
@media screen and (max-width: 1379px) {
		.Scroll #Navi .logo {
				background: rgba(255, 255, 255, 0.95);
		}
		.deviceSP #Navi {
				height: 100%;
		}
}
/*-------------------------------------------> Footer */
#Footer .inner {
		margin-top: 0;
}
#Footer .inner .copyright {
		font-size: 15px;
		margin-top: 110px;
		margin-bottom: 110px;
}
@media screen and (max-width: 743px) {
		#Footer .inner .copyright {
				font-size: 2.6666666667vw;
				margin-top: 14.6666666667vw;
				margin-bottom: 14.6666666667vw;
		}
}

/*-------------------------------------------> Chinese */
#Home {
		margin-bottom: 0 !important;
}

.langEN #Navi .main > li a .en, .langEN #Footer .main > li a .en {
		display: inline;
}
.langEN #Navi .main > li a .ja, .langEN #Footer .main > li a .ja {
		display: none;
}

.fv {
		height: 100vh;
}
.fv > .wrap {
		width: 100%;
		height: 100%;
		overflow: hidden;
}
.fv .image, .fv .text {
		width: 100%;
		height: 100%;
}
.fv .image img, .fv .text img {
		width: 100%;
		height: 100%;
}
.fv .image {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
}
.fv .image img {
		object-fit: cover;
}
.fv .text {
		position: relative;
		z-index: 10;
}
.fv .text img {
		object-fit: contain;
}

.moreBtn .linkText {
		text-align: center;
		padding-bottom: 40px;
}
.moreBtn .linkText button, .moreBtn .linkText a {
		position: relative;
		padding-bottom: 40px;
		font-size: 22px;
		line-height: 1;
		letter-spacing: 0.15em;
		color: #666;
		cursor: pointer;
}
@media screen and (min-width: 744px) {
		.moreBtn .linkText button, .moreBtn .linkText a {
				transition: all 0.3s ease-out;
		}
		.moreBtn .linkText button:hover, .moreBtn .linkText a:hover {
				color: #000;
		}
}
.moreBtn .linkText button::before, .moreBtn .linkText a::before {
		pointer-events: none;
		content: "";
		display: block;
		width: 36px;
		height: 28px;
		position: absolute;
		bottom: 0;
		left: calc(50% - 18px);
		background-image: url(https://www.hermesinc.co.jp/h20/wpd/wp-content/themes/hermes_h23/assets/images/common/icon_accordion_open.svg);
		background-repeat: no-repeat;
		background-position: center top;
}
@media screen and (min-width: 744px) {
		.moreBtn .linkText button::before, .moreBtn .linkText a::before {
				transition: all 0.3s ease-out;
		}
}
.moreBtn .linkText button:hover::before, .moreBtn .linkText a:hover::before {
		bottom: -5px;
}
@media screen and (max-width: 743px) {
		.moreBtn .linkText {
				padding-bottom: 8vw;
		}
		.moreBtn .linkText button, .moreBtn .linkText a {
				font-size: 17.5px; /* legacy */
				font-size: 4.6666666667vw;
				line-height: 1;
				letter-spacing: 0.15em;
				padding-bottom: 8vw;
		}
		.moreBtn .linkText button::before, .moreBtn .linkText a::before {
				background-size: 100%;
				left: calc(50% - 3.6vw);
				width: 7.2vw;
				height: 3.7333333333vw;
		}
}

.blockTitle {
		text-align: center;
		font-size: 34px;
		line-height: 1;
		letter-spacing: 0.15em;
		font-weight: 300;
		margin-bottom: 110px;
}
@media screen and (max-width: 743px) {
		.blockTitle {
				font-size: 22px; /* legacy */
				font-size: 5.8666666667vw;
				line-height: 1;
				letter-spacing: 0.15em;
				margin-bottom: 14.6666666667vw;
		}
}

#Message .headCopy {
		font-size: 34px;
		line-height: 1;
		letter-spacing: 0.15em;
		font-weight: 300;
}
#Message .bodyCopy {
		font-size: 15px;
		line-height: 1.8666666667;
		letter-spacing: 0.08em;
}
@media screen and (max-width: 743px) {
		#Message .headCopy {
				font-size: 22px; /* legacy */
				font-size: 5.8666666667vw;
				line-height: 1;
				letter-spacing: 0.15em;
		}
		#Message .bodyCopy {
				font-size: 11px; /* legacy */
				font-size: 2.9333333333vw;
				line-height: 1.9090909091;
				letter-spacing: 0.04em;
		}
}

.chIndex {
		padding-bottom: 110px;
}
.chIndex ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
}
.chIndex ul li {
		width: 46.6666666667%;
}
.chIndex ul li a {
		display: block;
		position: relative;
		padding-top: 62.5%;
		overflow: hidden;
}
.chIndex ul li a span {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
}
.chIndex ul li a span.text {
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 44px;
		line-height: 1;
		letter-spacing: 0.1em;
		font-weight: 700;
		color: #FFF;
		background: rgba(0, 0, 0, 0.5);
}
.chIndex ul li a span.image {
		z-index: 1;
}
.chIndex ul li a span.image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
}
@media screen and (min-width: 744px) {
		.chIndex ul li a span.text {
				opacity: 1;
				transition: all 0.3s ease-out;
		}
		.chIndex ul li a span.image img {
				transition: all 0.3s ease-out;
		}
		.chIndex ul li a:hover span.text {
				opacity: 1;
				background: rgba(0, 0, 0, 0);
				text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8), 0px 0px 10px rgba(0, 0, 0, 0.8), 0px 0px 5px rgb(0, 0, 0);
		}
		.chIndex ul li a:hover span.image img {
				transform: scale3d(1.05, 1.05, 1);
		}
}
@media screen and (min-width: 744px) {
		.chIndex ul li:nth-child(n+3) {
				margin-top: 6.6666666667%;
		}
}
@media screen and (max-width: 743px) {
		.chIndex {
				padding-bottom: 14.6666666667vw;
		}
		.chIndex ul {
				display: block;
		}
		.chIndex ul li {
				width: 100%;
		}
		.chIndex ul li + li {
				margin-top: 10.6666666667vw;
		}
		.chIndex ul li a {
				padding-top: 53.0303030303%;
		}
		.chIndex ul li a span.text {
				font-size: 22px; /* legacy */
				font-size: 5.8666666667vw;
				line-height: 1;
				letter-spacing: 0.1em;
		}
}

.works {
		padding-top: 110px;
		padding-bottom: 110px;
}
@media screen and (max-width: 743px) {
		.works {
				padding-top: 14.6666666667vw;
				padding-bottom: 14.6666666667vw;
		}
}

.news {
		background: #f7f7f7;
		padding-top: 110px;
		padding-bottom: 110px;
}
@media screen and (max-width: 743px) {
		.news {
				padding-top: 14.6666666667vw;
				padding-bottom: 14.6666666667vw;
		}
}

.company {
		padding-top: 110px;
		padding-bottom: 110px;
}
.company .image {
		text-align: center;
}
.company .list {
		margin-top: 110px;
}
.company .mod_tableLayout {
		width: max-content;
		margin-left: auto;
		margin-right: auto;
		font-size: 17px;
		line-height: 1.5882352941;
		letter-spacing: 0.04em;
}
.company .mod_tableLayout dl dt {
		padding-right: 3em;
}
.company .mod_tableLayout dl + dl dt, .company .mod_tableLayout dl + dl dd {
		padding-top: 1em;
}
@media screen and (max-width: 743px) {
		.company {
				padding-top: 14.6666666667vw;
				padding-bottom: 14.6666666667vw;
		}
		.company .image {
				width: 100vw;
				margin-left: -4.6666666667vw;
		}
		.company .list {
				margin-top: 14.6666666667vw;
		}
		.company .mod_tableLayout {
				font-size: 11px; /* legacy */
				font-size: 2.9333333333vw;
				line-height: 1.5;
				letter-spacing: 0.08em;
		}
		.company .mod_tableLayout dl dt {
				padding-right: 1em;
		}
}

.contact {
		background: #f7f7f7;
		padding-top: 110px;
		padding-bottom: 110px;
}
.contact .form .mod_tableLayout {
		margin-bottom: 110px;
}
.contact .form input, .contact .form textarea {
		background: #FFF;
}
.contact .form .mod_linkButton a, .contact .form .mod_linkButton button {
		font-size: 26px;
		line-height: 2.2307692308;
		letter-spacing: 0.15em;
		min-width: 313px;
}
.contact .form .error {
		color: #F00;
}
.contact#Cover .blockTitle {
		margin-bottom: 0;
}
@media screen and (max-width: 743px) {
		.contact {
				padding-top: 14.6666666667vw;
				padding-bottom: 14.6666666667vw;
		}
		.contact .form .mod_tableLayout {
				margin-bottom: 14.6666666667vw;
		}
		.contact .form .mod_linkButton a, .contact .form .mod_linkButton button {
				font-size: 22px; /* legacy */
				font-size: 5.8666666667vw;
				line-height: 2.2727272727;
				letter-spacing: 0.15em;
				min-width: 72vw;
		}
		.contact .mw_wp_form_confirm .blockTitle {
				padding-top: 14.6666666667vw;
		}
		.contact#Cover .blockTitle {
				padding-top: 14.6666666667vw;
				margin-bottom: 0;
		}
}