/* || ------------------------------ parts */

/* h2.title-dot */
.title-dot {
	display: flex;
  align-items: baseline;
	width: 100%;
	max-width: 1200px;
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-size: 1.625em;
	margin: 0 auto 20px auto;
}
.english .title-dot {
  font-family: "Libertinus Serif", serif;
  font-weight: 600;
	overflow-wrap: anywhere;
}
.title-dot::before {
  content: '';
  width: 12px;
  height: 12px;
  background: linear-gradient(0deg, #00485e 0%, #009fc9 100%);
  border-radius: 50px;
  margin: 0 12px 0 0;
  transform: translateY(-4px);
}
@media screen and (max-width: 930px) {
  .title-dot {
    font-size: min(3.13vw, 1.875em);
  }
}
@media screen and (max-width: 768px) {
  .title-dot {
    font-size: 1.5em;
  }
}

/* h3.fs-24 */
h3.fs-24 {
	font-size: 1.25em;
	font-weight: 700;
}

/* font serif */
.f-serif {
	font-family: "Zen Old Mincho", serif;
}
.english .f-serif {
	font-family: "Libertinus Serif", serif;
}

/* btn */
a.btn-blue {
  max-width: 280px;
  min-height: 70px;
}


/* || ------------------------------ page-head */
div.page-head {
	display: flex;
	flex-direction: column;
	justify-content: center;

	width: 100%;
	height: 310px;
	background: url('../images/page-head-bg.jpg');
	background-position: right;
	padding: 110px 60px 40px 60px;
}
div.page-head div.inner {
	width: 100%;
	max-width: 1480px;
	margin: auto auto 0 auto;
}
div.page-head h1,
div.page-head p {
	font-size: 2.5em;
	font-family: "Zen Old Mincho", serif;
	font-weight: 700;
	text-align: center;
	margin: 0 0 50px 0;
}
.english div.page-head h1,
.english div.page-head p {
	font-family: "Libertinus Serif", serif;
}
div.page-head ul.pankuzu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}
div.page-head ul.pankuzu li {
	display: flex;
	align-items: first baseline;
	margin: 0 10px 0 0;
}
div.page-head ul.pankuzu li:not(:first-child)::before {
	content: '/';
	margin: 0 10px 0 0;
}
div.page-head ul.pankuzu li a {
	color: #757575;
	text-decoration: underline #757575;
}
div.page-head ul.pankuzu li span {
	color: #00485E;
}

@media screen and (max-width: 930px) {
	div.page-head h1,
	div.page-head p {
		font-size: min(3.39vw, 2.5em);
		margin: 0 0 30px 0;
	}
	div.page-head ul.pankuzu li {
		font-size: 0.875em;
	}
}
@media screen and (max-width: 768px) {
	
	div.page-head {
		height: 250px;
		padding: 90px 20px 14px 20px;
	}
	div.page-head:has(+ div.anchor) {
		padding-bottom: 30px;
	}
	div.page-head h1,
	div.page-head p {
		font-size: 1.625em;
		margin: 0 0 30px 0;
	}
	div.page-head ul.pankuzu {
		padding: 0 0 0 0;
	}
}


/* || ------------------------------ anchor */
div.anchor {
	position: relative;
	z-index: 10;
	width: calc(100% - 40px);
	max-width: 1480px;
	background-color: #FFFFFF;
	padding:  30px 20px 20px 20px;
	margin: -20px auto 80px auto;
}
div.anchor ul {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	
	width: 100%;
	max-width: 1300px;
	margin: 0 auto 0 auto;
}
div.anchor ul li {
	width: calc((100% - 100px)/5);
	border-bottom: 1px solid #CCCCCC;
	margin: 0 10px 16px 10px;
}
div.anchor ul li a {
	color: #3A3A3A;
	height: 100%;
	padding: 0 0 16px 0;
}
div.anchor ul li a:hover {
	color: #009FC9;
}

@media screen and (max-width: 930px) {
	div.anchor ul li {
		width: calc((100% - 80px)/4);
	}
}
@media screen and (max-width: 768px) {
	div.anchor {
		padding: 20px 10px 10px 10px;
		margin: -20px auto 20px auto;
	}
	div.anchor ul li {
		width: calc((100% - 30px)/3);
		margin: 0 5px 16px 5px;
	}
}
@media screen and (max-width: 600px) {
	div.anchor ul li {
		width: calc((100% - 20px)/2);
	}
}

/* || ------------------------------ business-mold */
.business section.mold {
	width: 100%;
	padding: 0 20px 0 20px;
	margin: 0 0 80px 0;
}
.business section.mold div.inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.business section.mold div.image {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	/* flex-wrap: wrap; */
	
	width: 100%;
	margin: 0 0 20px 0;
}
.business section.mold div.image figure {
	/* width: calc((100% - 60px)/3); */
	width: auto;
	margin: 0 10px 0 10px;
}
.business section.mold div.image figure img {
	object-fit: cover;
	max-height: 402px;
}

.business section.mold h3 {
	margin: 0 0 10px 0;
}
.business section.mold h3.title-bg {
	background-color: #009FC9;
	color: #FFFFFF;
	padding: 20px 20px 20px 20px;
	margin: 0 0 20px 0;
}
.business section.mold p {
	margin: 0 0 10px 0;
}
.business section.mold ul.work {
	width: 100%;
	margin: 0 0 40px 0;
}

.business section.mold ul.product {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;

	width: 100%;
	padding: 0 16px 0 16px;
}
.business section.mold ul.product > li.exterior,
.business section.mold ul.product > li.interior {
	width: 49%;
	margin: 0 0 80px 0;
}
.business section.mold ul.product > li:nth-child(3) {
	width: 100%;
}
.business section.mold ul.product h4 {
	font-size: 1.12em;
	border-bottom: 1px solid #009FC9;
	padding: 0 0 16px 0;
	margin: 0 0 20px 0;
}
.business section.mold ul.product figure {
	width: 100%;
	max-width: 640px;
}
.business section.mold ul li.other ul {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	
	width: 100%;
}
.business section.mold ul li.other li {
	width: calc((100% - 90px)/4);
}
.business section.mold ul li.other li:not(:nth-child(4n)) {
	margin-right: 30px;
}
.business section.mold ul li.other li figure {
	width: 100%;
	margin: 0 0 10px 0;
}

/* || ------------------------------ business-molding */

.business section.molding {
	width: 100%;
	background-color: #EBF2F8;
	padding: 80px 20px 80px 20px;
}
.business section.molding div.inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.business section.molding h3 {
	margin: 0 0 10px 0;
}
.business section.molding h3.title-bg {
	background-color: #ffffff;
	padding: 20px 20px 20px 20px;
	margin: 0 0 20px 0;
}
.business section.molding p {
	margin: 0 0 40px 0;
}

.business section.molding ul.product {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	
	width: 100%;
	padding: 0 16px 0 16px;
	margin: 0 0 20px 0;
}
.business section.molding ul.product li {
	width: calc((100% - 90px)/4);
}
.business section.molding ul.product li:not(:nth-child(4n)) {
	margin-right: 30px;
}
.business section.molding ul.product li figure {
	width: 100%;
	margin: 0 0 10px 0;
}
.business section.molding ul.product li.other span {
	display: block;
}

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

	.business section.mold {
    margin: 0 0 50px 0;
	}
	.business section.mold h3.title-bg {
		padding: 14px 14px 14px 14px;
	}
	.business section.mold ul.product h4 {
		padding: 0 0 6px 0;
    margin: 0 0 14px 0;
	}
	.business section.mold ul.product > li.exterior,
	.business section.mold ul.product > li.interior {
		width: 100%;
		margin: 0 0 20px 0;
	}
	.business section.mold ul li.other li {
		width: calc((100% - 10px)/2);
		margin: 0 0 20px 0;
	}
	.business section.mold ul li.other li:not(:nth-child(4n)) {
		margin-right: unset;
	}
	.business section.mold ul li.other li:not(:nth-child(2n)) {
		margin-right: 10px;
	}


	.business section.molding {
		padding: 50px 20px 30px 20px;
	}
	.business section.molding h3.title-bg {
		padding: 14px 14px 14px 14px;
	}
	.business section.molding ul.product h4 {
		padding: 0 0 6px 0;
    margin: 0 0 14px 0;
	}
	.business section.molding ul.product li {
		width: calc((100% - 10px)/2);
		margin: 0 0 20px 0;
	}
	.business section.molding ul.product li:not(:nth-child(4n)) {
		margin-right: unset;
	}
	/* .business section.molding ul.product li:not(:nth-child(2n)) {
		margin-right: 10px;
	} */

}

@media screen and (max-width: 425px) {
	.business section.mold div.image {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.business section.mold div.image figure {
		width: calc((100% - 6px)/2);
		margin: 0 0 6px 0;
	}
	.business section.mold div.image figure img {
		aspect-ratio: 1 / 1;
	}

	.business section.molding ul.product li {
		width: 100%;
	}
	.business section.molding ul.product li.other span {
		width: 100%;
	}
}

/* || ------------------------------ equipment */
.equipment section.haruhi,
.equipment section.sunaga,
.equipment section.cad-cam {
	width: 100%;
	padding: 0 20px 0 20px;
	margin: 0 0 80px 0;
}
.equipment section.sunaga {
	background-color: #EBF2F8;
	padding: 80px 20px 80px 20px;
}
.equipment section div.scroll-box {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;

	overflow-x: auto;
}

/* ul */
.equipment section ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.equipment section ul li {
	width: calc(92%/4);
	margin: 0 0 20px 0;
}
.equipment section ul li figure {
	border: 1px solid #E0E0E0;
	margin: 0 0 6px 0;
}

/* div.text */
.equipment section div.text {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	width: 100%;
	max-width: 1024px;
	margin: 0 auto 50px auto;
}
.equipment section div.text figure {
	width: 50%;
}
.equipment section div.text p {
	width: 45%;
}
.equipment section.cad-cam div.text figure {
	width: 35%;
	max-width: 300px;
}
.equipment section.cad-cam div.text p {
	width: 60%;
}

/* table */
.equipment section span.scroll-text {
	display: none;
	align-items: center;
	justify-content: right;
	color: #009FC9;
	margin: 10px 0 10px 0; 
}
.equipment section span.scroll-text::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-top: 1px solid #009FC9;
	border-right: 1px solid #009FC9;
	transform: rotate(45deg);
	margin: 0 0 0 10px;
}
.equipment section table {
	width: 100%;
	min-width: 728px;
	border: 1px solid #AFAFAF;
}
.equipment section table tbody {
	background-color: #E0E0E0;
}
.equipment section table tbody:nth-child(2n) {
	background-color: #F5F5F5;
}
.equipment section table tr {
	border-bottom: 1px solid #AFAFAF;
}
.equipment section table th {
	border-right: 1px solid #AFAFAF;
}
.equipment section table tbody:first-child th {
	vertical-align: middle;
	background-color: #00485E;
	color: #FFFFFF;
	padding: 10px 10px 10px 10px;
}
.equipment section table tr th:first-of-type {
	width: 32%;
}
.equipment section table tr th:nth-of-type(4) {
	width: 8%;
}
.equipment section table tr th:nth-of-type(5) {
	width: 20%;
}

.equipment section table td {
	border-right: 1px solid #AFAFAF;
	padding: 10px 10px 10px 10px;
}
.equipment section table tr td:nth-of-type(3) {
	text-align: center;
}

@media screen and (max-width: 768px) {
	.equipment section.haruhi,
	.equipment section.sunaga,
	.equipment section.cad-cam {
		margin: 0 0 50px 0;
	}
	.equipment section.sunaga {
		padding: 50px 20px 50px 20px;
	}

	.equipment section ul {
		justify-content: flex-start;
	}
	.equipment section ul li {
		width: calc(98%/3);
	}
	.equipment section ul li:not(:nth-child(3n)) {
		margin-right: 1%;
	}

	.equipment section span.scroll-text {
		display: flex;
	}
}
@media screen and (max-width: 600px) {
	.equipment section ul li {
		width: calc(99%/2);
	}
	.equipment section ul li:not(:nth-child(3n)) {
		margin-right: unset;
	}
	.equipment section ul li:not(:nth-child(2n)) {
		margin-right: 1%;
	}


	.equipment section div.text {
		flex-direction: column;
		margin: 0 auto 30px auto;
	}
	.equipment section div.text figure {
		width: 90%;
	}
	.equipment section div.text p {
		width: 100%;
		margin: 0 0 20px 0;
	}
	.equipment section.cad-cam div.text figure {
		width: 90%;
		max-width: 300px;
	}
	.equipment section.cad-cam div.text p {
		width: 100%;
	}
}

/* || ------------------------------ about */

.about div.container {
	width: 100%;
	padding: 0 20px 0 20px;
	margin: 80px 0 80px 0;
}
.about div.container ul {
	display: flex;
	align-items: stretch;
	justify-content: space-between;

	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.about div.container ul li {
	display: flex;
	flex-direction: column;

	width: 49%;
	background-color: #F5F5F5;
	padding: 0 0 40px 0;
}
.about div.container ul li figure {
	width: 100%;
}
.about div.container ul li img {
	object-fit: cover;
	width: 100%;
	min-height: 230px;
}
.about div.container ul li h2 {
	padding: 40px 40px 0 40px;
}
.about div.container ul li p {
	width: 100%;
	padding: 0 40px 0 40px;
	margin: 0 0 40px 0;
}
.about div.container ul li a {
	width: calc(100% - 40px);
	margin: auto auto 0 auto;
}
@media screen and (max-width: 768px) {
	.about div.container {
		margin: 50px 0 50px 0;
	}
	.about div.container ul li img {
		min-height: 230px;
	}
	.about div.container ul li h2 {
		padding: 20px 20px 0 20px;
	}
	.about div.container ul li p {
		padding: 0 20px 0 20px;
		margin: 0 0 40px 0;
	}
}
@media screen and (max-width: 600px) {
	.about div.container ul {
		flex-direction: column;
	}
	.about div.container ul li {
		width: 100%;
	}
	.about div.container ul li:first-child {
		margin-bottom: 20px;
	}
}

/* || ------------------------------ about message */

.message section.detail {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	
	width: 100%;
	padding: 0 20px 0 20px;
	margin: 0 0 80px 0;
}
.message section.detail > div {
	position: relative;
	width: 100%;
	max-width: 780px;
}
.message section.detail figure {
	position: relative;
	width: 100%;
	max-width: 400px;
	
	margin-right: 60px;
}
.message section.detail figure img {
	position: relative;
	z-index: 5;
}
.message section.detail p {
	padding-top: 1em;
	margin: 0 0 20px 0;
}
.message section.detail div.name {
	width: 100%;
	max-width: 800px;
	text-align: right;
	padding: 0 1em 0 0;
	margin: 0 auto 0 auto;
}
.message section.detail div.name span:first-child {
	display: block;
	margin: 0 0 6px 0;
}
.message section.detail div.name span:nth-child(2) {
	display: block;
	font-size: 1.5em;
	font-weight: 700;
}
.message section.detail figure::before {
	content: '';
	position: absolute;
	left: -160px;
	top: -80px;

	background: url('../images/deco-logo.png') no-repeat;
	background-size: contain;
	width: 300px;
	height: 300px;
	transform: rotate(-15deg);
	opacity: 0.06;
	
	z-index: 0;
}

.message section.philosophy {
	background-color: #EBF2F8;
	padding: 80px 20px 70px 20px;
}
.message section.philosophy h2.title-dot {
	max-width: 1024px;
}
.message section.philosophy ul {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;

	width: 100%;
	max-width: 1024px;
	margin: 0 auto 0 auto;
}
.message section.philosophy ul li {
	width: calc(98% / 3);
	min-height: 226px;
	border-top: 2px solid #009FC9;
	background-color: #FFFFFF;
	
	padding: 20px 30px 30px 30px;
	margin: 0 0 10px 0;
}
.message section.philosophy ul li:not(:nth-child(3n)) {
	margin-right: 1%;
}
.message section.philosophy ul li span {
	display: block;
	font-size: 2.5em;
	text-align: center;
	color: #009FC9;
	margin: 0 0 10px 0;
}
.message section.philosophy ul li h3 {
	font-size: 1.625em;
	text-align: center;
	color: #00485E;
	margin: 0 0 6px 0;
}
.message section.philosophy ul li figure {
	width: 100%;
	max-width: 100px;
	margin: 0 auto 10px auto;
}
.message section.philosophy ul li p {
	width: fit-content;
	margin: 0 auto 0 auto;
}

@media screen and (max-width: 1280px) {
	.message section.detail figure::before {
		left: -90px;
    top: -120px;
		width: 250px;
		height: 250px;
	}
}
@media screen and (max-width: 930px) {
	.message section.philosophy ul li p br {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.message section.detail {
		flex-wrap: wrap;
		margin: 0 0 50px 0;
	}
	.message section.detail figure {
		width: 80%;
		margin: 0 auto 0 auto;
	}
	.message section.detail figure::before {
		left: -130px;
		top: 190px;
	}
	.message section.detail figure img {
		object-fit: cover;
		object-position: top;
		width: 100%;
		height: 240px;
	}
	.message section.detail > div {
		width: 90%;
	}

	.message section.philosophy {
		padding: 50px 20px 50px 20px;
	}
	.message section.philosophy ul {
		justify-content: flex-start;
	}
	.message section.philosophy ul li {
		width: calc(98% / 2);
	}
	.message section.philosophy ul li:not(:nth-child(3n)) {
		margin-right: unset;
	}
	.message section.philosophy ul li:not(:nth-child(2n)) {
		margin-right: 1%;
	}
	.message section.philosophy ul li span {
		font-size: 2.5em;
		margin-bottom: 4px;
	}
	.message section.philosophy ul li h3 {
		font-size: 1.25em;
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 510px) {
	.message section.philosophy ul li {
		width: 100%;
		min-height: 180px;
		padding: 10px 20px 20px 20px;
	}
	.message section.philosophy ul li:not(:nth-child(2n)) {
		margin-right: unset;
	}
	.message section.detail figure img {
		height: 200px;
	}
}

/* || ------------------------------ about overview */
.overview section {
	width: 100%;
	padding: 0 20px 0 20px;
	margin: 0 0 80px 0;
}

.overview section table {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
/* detail */
.overview section.detail table {
	border: 1px solid #AFAFAF;
}
.overview section.detail table tr {
	border-bottom: 1px solid #AFAFAF;
}
.overview section.detail table th {
	background-color: #00485E;
	color: #FFFFFF;
	padding: 16px 16px 16px 16px;
}
.overview section.detail table td {
	padding: 16px 16px 16px 16px;
}
.overview section.detail table td span {
	display: inline-block;
	margin: 0 1em 0 0;
}
.overview section.detail table td span.tel,
.overview section.detail table td span.fax,
.overview section.detail table td span.e-mail {
	display: block;
}
.overview section.detail table td figure {
	width: 100%;
	max-width: 164px;
}

/* history */
.overview section.history ul {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.overview section.history ul li {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border-bottom: 2px solid #EBF2F8;
	padding: 0 16px 16px 16px;
	
	margin: 0 0 16px 0;
}
.overview section.history ul li::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;

	width: 240px;
	height: 2px;
	background: linear-gradient(90deg, #16667E 0%, #009FC9 100%);
	margin: 0 20px 0 0;
}
.overview section.history ul li span {
	width: 224px;
	color: #00485E;
	flex-shrink: 0;
	font-size: 1.625em;
	margin: 0 20px 0 0;
}
.overview section.history ul li p {
	flex-grow: 1;
}

/* client */
.overview section.client table {
	border: 1px solid #AFAFAF;
}
.overview section.client table tr {
	border-bottom: 1px solid #AFAFAF;
}
.overview section.client table tr:nth-child(2) th,
.overview section.client table tr:nth-child(3) th {
	background-color: #16667E;
}
.overview section.client table th {
	width: 160px;
	background-color: #00485E;
	color: #FFFFFF;
	border-right: 1px solid #AFAFAF;
	padding: 16px 16px 16px 16px;
}
.overview section.client table td {
	padding: 16px 16px 16px 16px;
}
.overview section.client table ul {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.overview section.client table ul li {
	width: 49%;
	text-indent: -1em;
	padding-left: 1em;
}
.overview section.client table ul li.w-100 {
	width: 100%;
}
.overview section.client table ul li::before {
	content: '・';
}
.overview section.client table ul li:nth-child(2n - 1) {
	margin: 0 2% 0 0;
}
.overview section.client table ul li span {
	margin: 0 0 0 10px;
}
body:not(.english) .overview section.client table ul li:last-of-type::after {
	content: '…等';
}

/* access */
.overview section.access ul {
	display: flex;
	align-items: stretch;
	justify-content: space-between;

	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.overview section.access ul li {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;

	width: 49%;
}
.overview section.access ul li h3 {
	width: 100%;
	font-size: 1.25em;
	font-weight: 700;
	color: #00485E;
	border-bottom: 1px solid #009FC9;
	padding: 0 0 10px 0;
	margin: 0 0 20px 0;
}
.overview section.access ul li figure {
	width: 100%;
	max-width: 200px;
	margin: 0 2% 0 0;
}
.overview section.access ul li div {
	width: calc(98% - 200px);
}
.overview section.access ul li iframe {
	width: 100%;
	height: 200px;
}
.overview section.access ul li h3 {
	width: 100%;
}

@media screen and (max-width: 768px) {
	.overview section {
		margin: 0 auto 50px auto;
	}

	.overview section.detail table th,
	.overview section.detail table td {
		padding: 10px 10px 10px 10px;
	}

	.overview section.history ul li {
		padding: 0 0 10px 0;
		margin: 0 0 10px 0;
	}
	.overview section.history ul li::after {
		width: 106px;
	}
	.overview section.history ul li span {
		width: 90px;
		font-size: 1.25em;
	}

	.overview section.client table th,
	.overview section.client table td {
		display: block;
		width: 100%;
		padding: 10px 10px 10px 10px;
	}
	.overview section.client table tr th br {
		display: none;
	}
	
	.overview section.access ul {
		flex-direction: column;
	}
	.overview section.access ul li {
		width: 100%;
	}
	.overview section.access ul li:first-child {
		margin-bottom: 20px;
	}
}
@media screen and (max-width: 600px) {
	.overview section.detail table th,
	.overview section.detail table td {
		display: block;
		width: 100%;
	}
	.overview section.detail table td span {
		display: block;
	}

	.overview section.history ul li {
		flex-wrap: wrap;
	}
	.overview section.history ul li::after {
		width: 76px;
	}
	.overview section.history ul li p {
		width: 100%;
	}

	.overview section.client table ul li {
		width: 100%;
	}
}
@media screen and (max-width: 510px) {
	.overview section.access ul li figure {
		max-width: 300px;
		margin: 0 auto 20px auto;
	}
	.overview section.access ul li div {
		width: 100%;
	}
}

/* || ------------------------------ privacy */
.privacy section div.inner {
	width: 100%;
	max-width: 950px;
	padding: 0 20px 0 20px;
	margin: 80px auto 80px auto;
}

.privacy section div.inner > h2 {
	font-size: 1.625em;
	color: #00485E;
	margin: 0 0 16px 0;
}
.privacy section div.inner > p {
	border-bottom: 1px solid #AFAFAF;
	padding: 0 0 30px 0;
	margin: 0 0 30px 0;
}
.privacy section div.inner div p {
	text-align: right;
	font-size: 1.12em;
}
.privacy section div.inner div p.date {
	margin: 0 0 10px 0;
}
.privacy section div.inner div p.sign span {
	font-size: 1.5em;
	margin-left: 10px;
}

@media screen and (max-width: 768px) {
	.privacy section div.inner {
		margin: 50px auto 50px auto;
	}
	.privacy section div.inner > h2 {
		font-size: 1.25em;
		margin-bottom: 10px;
	}
	.privacy section div.inner div p {
		font-size: 1em;
	}
}

/* || ------------------------------ recrtuit */
.recruit section.dept-intro {
	width: 100%;
	padding: 0 20px 0 20px;
	margin: 80px 0 80px 0;
}
.recruit section.dept-intro div.inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.recruit section.dept-intro figure {
	width: calc(50% - 30px);
	max-width: 590px;
}
.recruit section.dept-intro figure img {
	object-fit: cover;
	width: 100%;
	min-height: 360px;
}
.recruit section.dept-intro div.text {
	width: calc(50% - 30px);
}
.recruit section.dept-intro div.text p {
	margin: 0 0 40px 0;
}

.recruit section.job-list {
	width: 100%;
	padding: 0 20px 0 20px;
	margin: 0 0 80px 0;
}
.recruit section.job-list div.inner {
	width: 100%;
	max-width: 1480px;
	background: linear-gradient(90deg, #005065 0%, #009fc9 100%);
	padding: 60px 50px 60px 50px;
	margin: 0 auto 0 auto;
}
.recruit section.job-list div.inner h2 {
	color: #FFFFFF;
}
.recruit section.job-list div.inner p.message {
	width: 100%;
	max-width: 1200px;
	color: #FFFFFF;
	margin: 0 auto 40px auto;
}
.recruit section.job-list ul {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.recruit section.job-list ul li {
	width: calc(96% / 3);
	margin-bottom: 20px;
}
.recruit section.job-list ul li:not(:nth-child(3n)) {
	margin-right: 2%;
}
.recruit section.job-list ul li a {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	
	width: 100%;
	height: 100%;
	background-color: #E0E0E0;
	padding: 0 0 20px 0;
}
.recruit section.job-list ul li figure {
	width: 100%;
	overflow: hidden;
	margin: 0 0 20px 0;
}
.recruit section.job-list ul li figure img {
	object-fit: cover;
	width: 100%;
	min-height: 130px;
	transition: transform 0.3s;
}
.recruit section.job-list ul li a:hover img {
	transform: scale(1.1);
}
.recruit section.job-list ul li span {
	width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
	flex-grow: 1;

  color: #00485E;
	font-size: 1.25em;
	margin: 0 20px 0 20px;
  z-index: 5;
}
.recruit section.job-list ul li span::before {
  content: '';
  display: block;
  flex-shrink: 0;

  width: 16px;
  height: 16px;
	background: url(../images/icon-link.svg) no-repeat;
  margin: 0 0 0 6px;

  order: 2;
}
.recruit section.job-list ul li a:hover::after {
  transform: translateX(100%);
}
.recruit section.job-list ul li a:hover span::after {
  transform: translateX(20px);
}

.recruit section.job-list p.close {
	display: block;

	width: 100%;
	max-width: 1200px;
	font-size: 1.12em;
	text-align: center;
	background-color: #ffffff;
	color: #00485E;
	padding: 10px 10px 10px 10px;
	margin: 0 auto 0 auto;
}

.recruit section.job-list p.annotation {
	width: 100%;
	max-width: 1200px;
	color: #ffffff;
	margin: 0 auto 0 auto;
}

@media screen and (max-width: 768px) {
	.recruit section.dept-intro {
		margin: 50px 0 50px 0;
	}
	.recruit section.dept-intro div.inner {
		flex-direction: column;
	}
	.recruit section.dept-intro figure {
		width: 100%;
		max-width: 600px;
		margin: 0 0 30px 0;
	}
	.recruit section.dept-intro figure img {
		object-fit: cover;
		width: 100%;
		height: 250px;
		min-height: unset;
	}
	.recruit section.dept-intro div.text {
		width: 100%;
		max-width: 600px;
	}

	.recruit section.job-list {
		margin: 0 0 50px 0;
	}
	.recruit section.job-list div.inner {
		padding: 30px 20px 30px 20px;
	}
	.recruit section.job-list ul li {
		width: calc(98% / 2);
		margin-bottom: 20px;
	}
	.recruit section.job-list ul li:not(:nth-child(3n)) {
		margin-right: 0;
	}
	.recruit section.job-list ul li:not(:nth-child(2n)) {
		margin-right: 2%;
	}
	.recruit section.job-list ul li span {
		font-size: 1.12em;
	}
}
@media screen and (max-width: 510px) {
	.recruit section.job-list ul li {
		width: 100%;
		margin-bottom: 20px;
	}
	.recruit section.job-list ul li:not(:nth-child(2n)) {
		margin-right: unset;
	}
}

/* || ------------------------------ recrtuit info */
.job section.detail {
	width: 100%;
	padding: 0 20px 0 20px;
	margin: 80px 0 80px 0;
}
.job section div.inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.job section div.inner:not(:last-child) {
	margin-bottom: 50px;
}
.job section div.inner table {
	border: 1px solid #AFAFAF;
	margin: 0 0 30px 0;
}
.job section div.inner table tr {
	border-bottom: 1px solid #AFAFAF;
}
.job section div.inner table th {
	width: 30%;
	background-color: #EBF2F8;
	padding: 16px 16px 16px 16px;
}
.job section div.inner table td {
	padding: 16px 16px 16px 16px;
}

.job section div.inner a.btn-blue {
	margin: 0 auto 0 auto;
}


@media screen and (max-width: 768px) {
	.job section.detail {
		margin: 50px 0 50px 0;
	}
	.job section div.inner table th,
	.job section div.inner table td {
		padding: 10px 10px 10px 10px;
	}
}
@media screen and (max-width: 600px) {
	.job section div.inner table th,
	.job section div.inner table td {
		display: block;
		width: 100%;
	}
}

/* || ------------------------------ recrtuit-department */

body > div.wrap {
	overflow: visible;
}
.dept section.about {
	position: relative;
	width: 100%;
	padding: 60px 20px 0 20px;
	margin: 0 0 80px 0;
}
.dept section.about::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 90%;
	background: url('../images/dept-about.jpg') no-repeat;
	background-size: cover;
	z-index: -1;
}
.dept section.about::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 90%;
	background: linear-gradient(0deg, #ffffffcc 0%, #ffffff 100%);
	z-index: 0;
}
.dept section.about > h2 {
	position: relative;
	text-align: center;
	font-size: 1.875em;
	font-weight: 700;
	color: #00485E;
	margin: 0 0 30px 0;
	z-index: 5;
}
.dept section.about > p {
	position: relative;
	width: 90%;
	text-align: center;
	margin: 0 auto 60px auto;
	z-index: 5;
}
.dept section.about div.inner {
	position: relative;
	width: 90%;
	max-width: 1600px;
	background-color: #ffffff;
	padding: 50px 60px 60px 60px;
	margin: 0 auto 0 auto;
	z-index: 5;
}
.dept section.about div.inner > P {
	display: flex;
	align-items: center;

	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.dept section.about div.inner > p::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	border-top: 1px dotted #009FC9;
}
.dept section.about div.inner > p span {
	flex-shrink: 0;
	font-weight: 700;
	color: #009FC9;
	margin: 0 20px 0 0;
}
.dept section.about ul {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 0 auto;
}
.dept section.about ul li {
	position: relative;
	width: calc(92%/2);
	max-width: 550px;
}
.dept section.about ul li span {
	position: absolute;
	left: 0;
	top: 0;

	font-family: "Zen Old Mincho", serif;
	font-size: 4.375em;
  font-weight: 900;
	color: #ffffff;
  text-stroke: 1px #009FC9;
	-webkit-text-stroke: 1px #009FC9;
	opacity: 0.3;
	z-index: -1;
}
.dept section.about ul li h3 {
	text-align: center;
	font-size: 1.5em;
	font-weight: 700;
	margin: 42px 0 20px 0;
}
.dept section.about ul li h3 br.pc-none {
	display: none;
}
.dept section.about ul li p {
	width: 100%;
}


.dept section.info {
	width: 100%;
	padding: 0 20px 0 80px;
	margin: 0 0 160px 0;
}
.dept section.info div.inner {
	display: flex;
	align-items: flex-start;

	width: 100%;
	max-width: 1280px;
	margin: 0 auto 0;
}

.dept section.info div.sticy-img {
	position: sticky;
	top: 60px;
	left: 0;
	
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	
	width: 40%;
	max-width: 490px;
}
.dept section.info div.sticy-img span {
	position: absolute;
	left: -190px;
	top: 120px;
	transform: rotate(-90deg);

	font-family: "Zen Old Mincho", serif;
	font-size: 3.125em;
	font-weight: 900;
	color: transparent;
	text-stroke: 1px #009FC9;
	-webkit-text-stroke: 1px #009FC9;
	opacity: 0.3;
	z-index: -1;
}
.dept section.info div.sticy-img::after {
	content: '';
	position: absolute;
	left: 24%;
	bottom: -16%;

	width: 50%;
	height: 70%;
	background: linear-gradient(#009fc9 0%, #cadbdf 100%);
	opacity: 0.2;
	z-index: -1;
}
.dept section.info div.sticy-img figure {
	width: 48%;
}
.dept section.info div.sticy-img figure:first-child {
	padding-top: 60px;
}
.dept section.info div.sticy-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dept section.info div.job-list {
	width: 57%;
	max-width: 680px;
	margin-left: auto;
}
.dept section.info ul.detail {
	width: 100%;
}
.dept section.info ul.detail > li {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.dept section.info ul.detail > li:not(:last-child) {
	margin: 0 0 60px 0;
}
.dept section.info ul.detail figure {
	width: 60px;
	height: 60px;
	border-radius: 100px;
	background: linear-gradient(0deg, #cadbdf 0%, #009fc9 100%);
	padding: 10px;
	margin: 0 16px 0 0;
}
.dept section.info ul.detail img {
	object-fit: contain;
}
.dept section.info ul.detail h3 {
	width: calc(100% - 76px);
	font-size: 1.25em;
	font-weight: 700;
	color: #00485E;
}
.dept section.info ul.detail p {
	width: 100%;
	margin: 10px 0 30px 0;
}
.dept section.info ul.detail div {
	width: 100%;
	border-left: 2px solid #6fcee9;
	padding-left: 16px;
}
.dept section.info ul.detail h4 {
	font-weight: 700;
	color: #009FC9;
	margin: 4px 0 10px 0;
}
.dept section.info ul.detail ul li {
	text-indent: -1em;
	padding-left: 1em;
}
.dept section.info ul.detail ul li::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 10px;
	margin: 0 8px 4px 2px;
	background-color: #a1b9c0;
}

@media screen and (max-width: 1280px) {
	.dept section.info div.job-list {
		width: 52%;
		max-width: 660px;
	}
}
@media screen and (max-width: 768px) {

	.dept section.about {
		padding: 0 20px 0 20px;
		margin: 0 0 30px 0;
	}
	.dept section.about > h2 {
		font-size: 1.5em;
	}
	.dept section.about > p {
		text-align: left;
		margin: 0 auto 30px auto;
	}

	.dept section.about div.inner {
		width: 100%;
		padding: 30px 30px 30px 30px;
	}
	.dept section.about ul {
		justify-content: space-around;
	}
	.dept section.about ul li h3 {
		font-size: 1.25em;
	}
	.dept section.about ul li h3 br.pc-none {
		display: block;
	}

	.dept section.info {
		padding: 0 20px 0 20px;
		margin: 0 0 100px 0;
	}
	
	.dept section.info div.sticy-img {
		top: 120px;
		padding-left: 20px;
	}
	.dept section.info div.sticy-img span {
		left: -46%;
		font-size: min(6vw, 3.125em);
	}
}

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

	.dept section.about ul li {
		width: 100%;
	}

	.dept section.info {
		margin: 0 0 50px 0;
	}
	.dept section.info div.inner {
		flex-direction: column;
	}
	.dept section.info div.sticy-img {
		position: relative;
		top: unset;
		left: unset;

		width: 90%;
		margin: 0 auto 30px auto;
	}
	.dept section.info div.sticy-img::after {
		bottom: -10%;
	}
	.dept section.info div.job-list {
		width: 100%;
		max-width: 510px;
		margin: 0 auto 0 auto;
	}
	.dept section.info div.sticy-img figure:first-child {
		padding-top: 20px;
	}
	.dept section.info ul.detail > li:not(:last-child) {
		border-bottom: 1px dotted #AFAFAF;
		padding: 0 0 30px 0;
		margin: 0 0 20px 0;
	}
	.dept section.info ul.detail div {
		padding: 0 10px 0 10px;
		margin-left: 10px;
	}
	.dept section.info ul.detail figure {
		width: 46px;
		height: 46px;
	}
	.dept section.info ul.detail p {
		padding: 0 10px 0 10px;
		margin: 10px 0 20px 0;
	}
	.dept section.info div.sticy-img span {
		top: 28%;
		left: -28%;
		font-size: min(8vw, 3.125em);
	}
	
}


/* || ------------------------------ contact */
.contact div.input-box {
	width: 100%;
	max-width: 1080px;
	margin: 80px auto 80px auto;
	padding: 0 20px 0 20px;
}
.contact div.input-box p.text {
	width: 100%;
	max-width: 984px;
	margin: 0 auto 80px auto;
}
.contact form {
	border-top: 1px solid #AFAFAF;
	padding-top: 50px;
}
.contact form table {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 50px auto;
}
.contact form table th {
	width: 230px;
	text-align: left;
	vertical-align: middle;
	padding: 0 16px 16px 16px;
}
.contact form table th div {
	display: flex;
	align-items: center;
	width: 100%;
}
.contact form table th span {
	display: block;
	flex-shrink: 0;
	font-size: 0.875em;
	color: #FFFFFF;
	background-color: #009FC9;
	border-radius: 2px;
	padding: 2px 10px 2px 10px;
	margin: 0 0 0 auto;
}
.contact form table th span.any {
	background-color: #757575;
}
.contact form table td {
	padding: 0 16px 16px 16px;
}

.contact form input[type="text"],
.contact form textarea {
	width: 100%;
	outline: none;
	border: 1px solid #AFAFAF;
	background-color: #EBF2F8;
	border-radius: 2px;
	padding: 10px 10px 10px 10px;
}
.contact form input[type="text"]::placeholder,
.contact form textarea::placeholder {
	color: #AFAFAF;
}
.contact form input[type="text"]:focus,
.contact form textarea:focus {
	border-color: #00485E;
}
.contact form textarea {
	height: 300px;
}

.english .contact form table th {
	width: 270px;
}

/* radio */
.contact form input[type="radio"] {
	appearance: none;
}
.contact form span.radio {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
}
.contact form span.mwform-radio-field {
	position: relative;
	padding-left: 24px;
	margin: 0 20px 10px 0;
}
.contact form span.mwform-radio-field-text::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #009FC9;
	border-radius: 50px;
}
.contact form input[type="radio"]:checked + span.mwform-radio-field-text::after {
	content: '';
	position: absolute;
	top: 6px;
	left: 3px;
	width: 14px;
	height: 14px;
	background-color: #009FC9;
	border-radius: 50px;
}
.mw_wp_form .horizontal-item + .horizontal-item {
	margin-left: unset;
}

/* check */
.contact div.input-box div.privacy-check {
	width: fit-content;
	margin: 0 auto 50px auto;
}
.contact div.privacy-check p {
	margin: 0 0 10px 0;
}
.contact div.privacy-check a {
	color: #009FC9;
	display: inline;
	text-decoration: underline;
}
.contact form span.check {
	display: block;
	text-align: center;
}
.contact form input[type="checkbox"] {
	appearance: none;
}
/* .contact form span.mwform-checkbox-field {
	display: block;
	flex-shrink: 1;
	margin: 0 0 10px;
} */
.contact form span.mwform-checkbox-field {
	position: relative;
	padding-left: 24px;
}
.contact form span.mwform-checkbox-field-text::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1px solid #009FC9;
	border-radius: 2px;
}
.contact form input[type="checkbox"]:checked + span.mwform-checkbox-field-text::after {
	content: '';
	position: absolute;
	top: 7px;
	left: 3px;
	width: 14px;
	height: 8px;
	border-left: 2px solid #009FC9;
	border-bottom: 2px solid #009FC9;
	transform: rotate(-45deg);
	border-radius: 2px;
}

/* submit */
.contact div.input-box div.btn {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: 400px;
	margin: 0 auto 0 auto;
}
.contact form input[type="submit"] {
	width: calc((100% - 10px)/2);
	color: #FFFFFF;
	background-color: #00485E;
	padding: 16px 30px 16px 30px;
	transition: all 0.3s;
}
.contact form input[type="submit"]:hover {
	background-color: #009FC9;
}
.contact form button {
	width: calc((100% - 10px)/2);
	color: #FFFFFF;
	background-color: #757575;
	padding: 16px 30px 16px 30px;
	margin: 0 10px 0 0;
	transition: all 0.3s;
}
.contact form button:hover {
	background-color: #AFAFAF;
}

.contact div.input-box a.btn-blue {
	margin: 0 auto 0 auto;
}

@media screen and (max-width: 768px) {
	.contact div.input-box {
		margin: 50px auto 50px auto;
	}
	.contact div.input-box p.text {
		margin: 0 auto 50px auto;
	}
}
@media screen and (max-width: 600px) {
	.contact form {
		padding-top: unset;
	}
	.contact form table th,
	.contact form table td {
		display: block;
		width: 100%;
	}
	.contact form table th {
		padding: 16px 10px 16px 10px;
	}
	.contact form table td {
		padding: 0 10px 16px 10px;
	}
	.contact form table tr {
		border-bottom: 1px solid #AFAFAF;
	}

	.english .contact form table th {
		width: 100%;
	}
}

/* || ------------------------------ sitemap */
.sitemap div.container {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;

	width: 100%;
	max-width: 1024px;
	margin: 80px auto 80px auto;
	padding: 0 20px 0 20px;
}
.sitemap div.container ul {
	width: calc(96% / 2);
}
.sitemap div.container ul li {
	width: 100%;
	margin: 0 0 20px 0;
}

.sitemap div.container ul li > a {
	display: flex;
	align-items: center;

	font-size: 1.25em;
	font-weight: 500;
	color: #00485E;
	border-bottom: 1px solid #AFAFAF;
	padding: 0 0 20px 0;
}
.sitemap div.container ul li > a::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50px;
	margin: 0 10px 0 0;
	background: linear-gradient(0deg, #00485e 0%, #009FC9 100%);
}
.sitemap div.container ul li > a:hover {
	color: #009FC9;
}
.sitemap div.container ul li div {
	padding: 0 0 0 10px;
	margin: 20px 0 30px 0;
}
.sitemap div.container ul li div a {
	color: #3A3A3A;
}
.sitemap div.container ul li div a:not(:last-child) {
	margin-bottom: 6px;
}
.sitemap div.container ul li div a:hover {
	color: #009FC9;
}

@media screen and (max-width: 600px) {
	.sitemap div.container {
		flex-direction: column;
		margin: 50px auto 50px auto;
	}
	.sitemap div.container ul {
		width: 100%;
	}
	.sitemap div.container ul li > a {
		font-size: 1.12em;
	}
}