@charset "utf-8";
/* =========================================================================================

=========================================================================================*/
body #contents {
	/* ページ左上に表示されている青三角形の横幅 */
	/* .page-header .page-title .jp にて使用 */
	--bg-triangle-w:calc(50vw + 360px);
	position:relative;

	/* ページ左上にある、青い三角形 */
	&:before {
		content:"";
		position:absolute;
		display:block;
		background-color:var(--color-main);
		width:var(--bg-triangle-w);
		aspect-ratio:var(--logo-aspect);
		clip-path:var(--logo-clip);
		inset:var(--header-height) auto auto 0;
	}

	/* ページ右下にある黄色い三角形 */
	&:after {
		content:"";
		position:absolute;
		display:block;
		width:50vw;
		width:calc((100% - min(var(--main-contents-width), 100% - 40px - 40px)) / 2 + 577px);
		height:auto;
		aspect-ratio:var(--logo-aspect);
		clip-path:var(--logo-clip-reverse);
		background-color:var(--color-sub);
		inset:auto 0 0 auto;
		z-index:-1;
	}
}
@media only screen and (max-width: 820px) {
	body #contents:after { width:60vw;}
}


/* =========================================================================================
PAGE HEADER
=========================================================================================*/
.page-header {
	/* viewport:375-820px 72-120px : 60%  .page-headerのpadding-top */
	/* .page-header .page-title .jp にて使用 */
	--pt:clamp(4.5rem, calc(1.972rem + 10.787vw), 7.5rem);

	position:relative;
	padding-top:var(--pt);
}
.page-header .inner { width:var(--large-contents-width); max-width:unset;}
.page-header .page-title-wrap {
	display:flex;
	justify-content:space-between;
	align-items:end;
	flex-wrap:wrap;
	gap:1em;
	margin-bottom:1.5625em;
}
.page-header .page-title {
	font-size:clamp(0.75rem, calc(0.329rem + 1.798vw), 1.25rem);/* viewport:375-820px 12-20px : 60% */
	line-height:1.5;
	color:var(--color-sub);
}
.page-header .page-title .jp {
	--h-range:calc(var(--bg-triangle-w) / 8 * 6 - var(--pt));	/* ページ左上に表示されている青三角形の、最下端から.page-title上端までの距離 */
	--w-range:calc(var(--h-range) / 6 * 8 - 3em);				/* .page-titleが青三角形からはみ出るまでの距離（-3emは調整。また1行目部分の距離） */

	font-size:3em;
	color:#fff;
	max-width:min(100%, var(--w-range));
}
.page-header .page-title .jp.active {
	position:relative;

	&:after {
		content:"";
		position:absolute;
		display:block;
		width:var(--w-range);
		height:100%;
		background-color:rgb(255 100 100 / 0.5);
		inset:0 auto auto 0;
	}
}
.page-header .page-title .en { font-family:var(--kanit); font-style:italic; font-weight:500; word-break:break-word; max-width:57.5vw;}
.page-header .eye-catch { position:relative;}
.page-header .eye-catch:before {
	content:"";
	position:absolute;
	display:block;
	width:18rem;
	aspect-ratio:var(--logo-aspect);
	background-color:var(--color-sub);
	clip-path:var(--logo-clip-reverse);
	inset:auto -2.375em -2.375em auto;
	z-index:-1;
}
.page-header .wp-post-image { width:100%; height:450px; object-fit:cover; object-position:center;}

@media only screen and (max-width: 820px) {
	.page-header .wp-post-image { height:auto;}
	.page-header .page-title-wrap { flex-direction:column; align-items:start;}
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
LAYOUT
=========================================================================================*/
.entry-content .content_wrap {
	padding-block:50px 200px;
	font-size:1.125rem;
	font-weight:normal;
	line-height:1.8;
}
.entry-content .sibling_links + .content_wrap { padding-block:0;}
@media only screen and (max-width: 820px) {
	.entry-content .content_wrap {
		padding-block:37.5px 150px;
		font-size:1rem;
	}
}
@media only screen and (max-width: 468px) {
	.entry-content .content_wrap {
		padding-block:25px 100px;
		font-size:0.875rem;
	}
}

/* =========================================================================================
COMPANY
=========================================================================================*/
/*greeting*/
body.company .greeting .flex-box {
	display: flex;
	flex-wrap: nowrap;
	gap: 50px;
}
body.company .greeting .flex-box .photo {
	text-align: center;
	max-width: 300px;
	min-width: 200px;
}
body.company .greeting .flex-box .message {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
body.company .greeting .flex-box .message .signature {
	margin-top: 1em;
}
body.company .greeting .flex-box .message .post {
	text-align: right;
}
body.company .greeting .flex-box .message .name {
	text-align: right;
	font-size: 1.5em;
}

@media only screen and (max-width: 820px) {
	body.company .greeting .flex-box {
		flex-wrap: wrap;
		justify-content: center;
	}
	body.company .greeting .flex-box .item {
		width: 100% !important;
	}
}
@media only screen and (max-width: 468px) {
}

/*overview*/
body.company .overview table {
	width: 100%;
	max-width: 900px;
	margin: auto;
	border-spacing: 0;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
body.company .overview th,
body.company .overview td {
	text-align: left;
	padding: 1em;
	border-bottom: 1px solid #ccc;
}
body.company .overview th {
	background: #ddd;
	width: 200px;
}
body.company .overview .file-list li + li {
	margin-top: 0.5em;
}
body.company .overview .file-list li a[target="_blank"] {
	padding-right: 1.5em;
	background: url(../images/common/icon_file.svg) no-repeat right;
	background-size: 1em;
}
@media only screen and (max-width: 820px) {
	body.company .overview th,
	body.company .overview td {
		display: block;
	}
	body.company .overview th {
		width: 100%;
	}
}
@media only screen and (max-width: 468px) {
}

/*access*/
body.company .access .flex-box {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: space-around;
}
body.company .access .flex-box + .flex-box {
	margin-top: 100px;
}
body.company .access .flex-box .map {
	width: calc(100% - 400px);
}
body.company .access .flex-box .map iframe {
	width: 100% !important;
	max-height: 400px !important;
}

@media only screen and (max-width: 820px) {
	body.company .access .flex-box {
		flex-direction: column-reverse;
		gap: 10px;
	}
	body.company .access .flex-box .item {
		width: 100% !important;
	}
	body.company .access .flex-box .map iframe {
		max-height: 300px !important;
	}
}
@media only screen and (max-width: 468px) {
}

/*history*/
body.company .history .history-block {
	position: relative;
	padding-left: 50px;
	width: 100%;
	max-width: 900px;
	margin: auto;
}
body.company .history .history-block::before {
	content: "";
	position: absolute;
	width: 3px;
	height: 100%;
	background: #ccc;
	top: 20px;
	left: 25px;
}
body.company .history .history-block dl {
	display: flex;
	justify-content: left;
	gap: 30px;
	align-items: start;
}
body.company .history .history-block dl + dl {
	margin-top: 50px;
}
body.company .history .history-block dt {
	font-size: 2em;
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
	position: relative;
}
body.company .history .history-block dt::before {
	content: "";
	position: absolute;
	width: 20px;
	aspect-ratio: 1 / 1;
	background: #ccc;
	top: 7px;
	left: -33px;
	border-radius: 50%;
}

@media only screen and (max-width: 820px) {
	body.company .history .history-block dl {
		flex-direction: column;
		gap: 15px;
	}
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
CONTACT
=========================================================================================*/
body.contact #main .inner {
	max-width: var(--small-contents-width);
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
SINGLE-CUSTOM
=========================================================================================*/
/*slider-area*/
body.single .slider-area {
	padding-bottom: 0;
}
body.single .slide-contents {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}
body.single .slider-main .swiper-wrapper,
body.single .slider-thumbnail .swiper-wrapper {
	overflow: hidden;
	width: 100%;
}
body.single .slider-main .swiper-slide img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}
body.single .slider-thumbnail .swiper-wrapper {
	width: 100%;
	display: flex;
	align-items: start;
	justify-content: start;
}
body.single .slider-thumbnail .swiper-slide {
	width: auto; /*表示数と余白はcommon.jsで管理*/
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.5s;
}
body.single .slider-thumbnail .swiper-slide img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: center;
}
body.single .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}

@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
Search
=========================================================================================*/
/*search-area*/
body.search .search-area {
	padding-bottom: 0;
	margin-block: 0;
}
body.search .search-area .inner {
	padding-block: 2em;
	background: var(--gray-color);
}
body.search .search-area form {
	display: grid;
	grid-template-columns: 1fr 60px;
	gap: 30px;
	align-items: center;
	width: 90%;
	margin: auto;
}
body.search .search-area input[type="text"] {
	background-color: #fff;
	transition: 0.5s;
}
body.search .search-area input[type="submit"] {
	color: #fff;
	padding: 0;
	margin: 0;
	background: var(--main-color) url(../images/common/icon_search.svg) no-repeat center;
	background-size: 40%;
	width: 60px;
	min-width: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	text-indent: -9999px;
}
body.search .search-area input[type="submit"]:hover {
	opacity: 0.8;
	transition: 0.3s;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/*result-area*/
body.search .result-area .search-count {
	color: var(--base-font-color);
	font-size: 1.5rem;
	text-align: center;
	display: block;
	margin-bottom: 1em;
}
body.search .result-area .post-list {
	margin-bottom: 50px;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
404
=========================================================================================*/
body.error404 .entry-header {
	text-align: center;
	padding: 40px 20px;
	margin: 0;
}
body.error404 .error-message {
	padding: 20px;
	margin-bottom: 30px;
	text-align: center;
}
body.error404 .error-message p img {
	margin: 0 auto 50px;
	max-width:50vw;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
.sibling_links
=========================================================================================*/
.sibling_links {
	font-size:clamp(0.875rem, calc(0.717rem + 0.674vw), 1.063rem);/* viewport:375-820px 14-17px */
	
	&.sibling_links_top {
		/* 60% */
		padding-top:clamp(3.188rem, calc(1.397rem + 7.64vw), 5.313rem);/* viewport:375-820px 51-85px */
		padding-bottom:clamp(4.5rem, calc(1.972rem + 10.787vw), 7.5rem);/* viewport:375-820px 72-120px */
	}
	&.sibling_links_bottom {
		padding-top:clamp(5.625rem, calc(2.465rem + 13.483vw), 9.375rem);/* viewport:375-820px 90-150px */
		padding-bottom:clamp(6.375rem, calc(2.794rem + 15.281vw), 10.625rem);/* viewport:375-820px 102-170px */
	}
	& h2 {
		display:grid;
		grid-template-columns:auto 1fr;
		align-items:center;
		gap:0.75em;
	}
	& h2:after {
		content:"";
		display:block;
		height:1px;
		background-color:var(--color-main);
	}
	& ul {
		display:grid;
		grid-template-columns:repeat(auto-fit, 230px);
		gap:0.75rem;
		margin-top:1em;
	}
	& ul a {
		display:grid;
		grid-template-columns:auto 1em;
		align-items:center;
		justify-content:space-between;
		padding:0.5em 1em;
		background-color:var(--color-main-light);

		&:after {
			content:"";
			display:block;
			width:1em;
			height:1em;
			background-color:var(--color-main);
			mask:url(../images/common/arrow.svg) no-repeat center / contain;
			-webkit-mask:url(../images/common/arrow.svg) no-repeat center / contain;
		}
	}
	& ul a.active {
		background-color:var(--color-main);
		color:#fff;

		&:after {
			background-color:currentColor;
			mask:none;
			border-radius:100%;
		}
	}
	@media (any-hover:hover) {
		ul a:hover { text-decoration:none;}
		ul a.active:hover { color:var(--color-sub);}
		ul a:not(.active):hover { background-color:var(--color-main); color:#fff;}
		ul a:not(.active):hover:after { background-color:currentColor;}
	}
	@media (any-hover:none) {
		ul a:active { text-decoration:none;}
		ul a.active:active { color:var(--color-sub);}
		ul a:not(.active):active { background-color:var(--color-main); color:#fff;}
		ul a:not(.active):active:after { background-color:currentColor;}
	}
}
@media only screen and (max-width: 820px) {
	.sibling_links {

		& ul { grid-template-columns:1fr 1fr;}
	}
}
@media only screen and (max-width: 468px) {
}




/* =========================================================================================
********
=========================================================================================*/
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}