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

	Title: portfolio.css
	Created: 2017-8-18

=========================================================== */
/*

	portfolio-type
	list
	map
	details
	data


=========================================================== */
/* ===========================================================

	portfolio-type

=========================================================== */
/* portfolio-title
----------------------------------------------------------- */
.portfolio-title ul li.portfolio-type__a {background-color: #e5a156 !important;}
.portfolio-title ul li.portfolio-type__b {background-color: #eb7a6c !important;}
.portfolio-title ul li.portfolio-type__c {background-color: #1277be !important;}
.portfolio-title ul li.portfolio-type__d {background-color: #69ad33 !important;}
.portfolio-title ul li.portfolio-type__e {background-color: #93a0bf !important;}
.portfolio-title ul li.portfolio-type__f {background-color: #c796a4 !important;}

/* ===========================================================

	list

=========================================================== */
/* portfolio-list
----------------------------------------------------------- */
.portfolio-filter {
	display: flex;
	align-items: center;
	margin-bottom: 32px;
	gap: 32px;
}
.portfolio-filter dl {
	display: flex;
	align-items: center;
}
.portfolio-filter dt {
	margin-right: 16px;
}
.is-en .portfolio-filter dt {
	width: min-content;
}
.portfolio-filter dd {
	display: flex;
}
.arrow-parts {
	position: relative;
}
.arrow-parts:after {
	position: absolute;
	top: 36%;
	right: 16px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	pointer-events: none;
	content: ""; 
}
.portfolio-filter .filter-parts {
	font-size: 16px;
	padding: 16px;
	border-radius: 16px;
	border: 1px solid var(--Gallery-300, #BDBDBD);
	box-sizing: border-box;
	 appearance: none;
}
.portfolio-filter .filter-parts.parts1 {
	width: 184px;
}
.portfolio-filter .filter-parts.parts2 {
	width: 120px;
	margin-right: 8px;
}
.portfolio-filter .filter-parts.parts3 {
	width: 96px;
}
.portfolio-filter .filter-parts.parts4 {
	width: 156px;
}
.filter-btn {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 32px;
}
.filter-btn #search {
	font-size: 16px;
	cursor: pointer;
	color: var(--Alizarin-Crimson-600, #E30C1F);
	display: flex;
	width: 256px;
	height: 56px;
	padding: 16px 56px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 16px;
	border: 1px solid var(--Alizarin-Crimson-600, #E30C1F);
	background: #FFF;
	transition: all .7s;
}
.filter-btn #search:hover {
	color: #fff;
	background-color: #E30C1F;
}
.filter-btn #clear {
	font-size: 16px;
	cursor: pointer;
	color: var(--Sisal-950, #2E221C);
	display: flex;
	width: 256px;
	height: 56px;
	padding: 16px 56px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 16px;
	border: 1px solid #dcdcdc;
	background: #F8F8F8;
	transition: all .7s;
}
.filter-btn #clear:hover {
	color: #fff;
	background-color: #989898;
}

table.portfolio-list {
}

table.portfolio-list th {
	vertical-align: middle;
	border-bottom: none;
	background-color: #FFF1F2;
}
/* sort-btn */
table .sort-btn th {
	/*background: #3f86c1 !important;*/
	/*padding: 5px 0 !important;*/
	/*text-align: center;*/
	/*line-height: 1;*/
	/*white-space: nowrap !important;*/
	/*border-top-color: #fff;*/
    padding: 0 0 8px;
	border-bottom: solid 1px #dcdcdc;
	border-top: none;

}
table .sort-up, table .sort-down {
	width: 20px;
	height: 20px;
	margin: 0 4px;
	display: inline-block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	position: relative;
	background-color: #E30C1F;
	border-radius: 4px;
}
table .sort-up:before, table .sort-down:before {
	position: absolute;
	content: " ";
	top: 50%;
	right: 50%;
	width: 6px;
	height: 6px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(45deg);
}
table .sort-down:before {
	margin: -5px -4px 0 0;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
table .sort-up:before {
	margin: -2px -4px 0 0;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
}
table .sort-up:hover, table .sort-down:hover {
}
table .sort-down:hover:before {
	opacity:.7;
}
table .sort-up:hover:before {
	opacity:.7;
}
.portfolio-name {
	background: var(--Alizarin-Crimson-100, #FFDFE2);
}
.portfolio-name a {
	color: var(--Gallery-950, #292929) !important;
	text-decoration: none !important;
}
.portfolio-name a:hover {
	color: var(--Gallery-950, #E30C1F) !important;
	text-decoration: none !important;
}
@media screen and (max-width: 1024px) {
	.portfolio-filter {
		flex-direction: column;
		gap: 0;
	}
	.filter-btn {
		align-items: center;
		flex-direction: column;
		gap: 16px;
	}
	table.portfolio-list {
		font-size: 14px;
	}
	table.portfolio-list th,
	table.portfolio-list td {
		padding: 8px 8px;	
	}

}
/* ===========================================================

	portfolio-map-top

=========================================================== */
#portfolio-map-top {
	position: relative;
	width: 900px;
	height: 700px;
	margin: auto;
	background: url(/assets/img/common/portfolio/map.png) 0 0 no-repeat;
}
#portfolio-map-top #map_shuto,
#portfolio-map-top #map_kinki,
#portfolio-map-top #map_chubu {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 700px;
}
#portfolio-map-top #map_shuto {
  background: url(/assets/img/common/portfolio/shuto.png) 0 0 no-repeat;
}
#portfolio-map-top #map_kinki {
  background: url(/assets/img/common/portfolio/kinki.png) 0 0 no-repeat;
}
#portfolio-map-top #map_chubu {
  background: url(/assets/img/common/portfolio/chubu.png) 0 0 no-repeat;
}
/* map-data
----------------------------------------------------------- */
.map-data {
	overflow: hidden;
}
.map-data a {
	text-decoration: none;
}
.map-data h2 {
	background-color: #555;
	color: #fff;
	font-size: 16px;
	letter-spacing: 1px;
	border: none;
	margin: 0 0 5px;
	padding: 5px;
	text-decoration: none !important;
}
.map-data h2:after {
	content: none;
}
.map-data h2 a {
	display: block;
	color: #fff;
	padding-left: 12px;
}
.map-data h2 a:hover {
	text-decoration: none;
}
.map-data h2 a:before {
	position: absolute;
	left:8px;
	top: 16px;
	content: " ";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 3px 0 3px 5px;
	border-color: transparent transparent transparent #fff;
	margin: 0 5px 2px 0;
}
.map-data dl {
	margin: 0;
	line-height: 1.4;
}
.map-data dl dt {
	clear: both;
	font-size: 13px;
	padding: 5px 5px 0;
	margin: 0;
}
.map-data dl dd {
	clear: both;
	font-size: 13px;
	padding: 0 5px 5px;
	margin: 0 10px 5px;
	border-bottom: solid 1px #ddd;
}
.map-data dl dd:last-child {
	border-bottom: none;
	margin: 0 10px 0;
}
.map-data dl dd em {
	font-size: 20px;
	color: #111;
	margin: 0 2px 0 0;
}
#map-data_shuto,
#map-data_chubu,
#map-data_kinki,
#map-data_sonota {
	position: absolute;
	width: 200px;
	text-align: center;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
}
#map-data_shuto {
	top: 390px;
	right: 0;
}
#map-data_chubu {
	top: 190px;
	right: 0;
}
#map-data_kinki {
    top: 250px;
	left: 0;
}
#map-data_sonota {
	top: 0;
	left: 0;
}
#map-data_shuto {border-color: #f28089;}
#map-data_shuto h2 {background-color: #f28089;}
#map-data_shuto .bl-hover {background-color: rgba(242,128,137,0.50);}
#map-data_chubu {border-color: #b4d794;}
#map-data_chubu h2 {background-color: #b4d794;}
#map-data_chubu .bl-hover {background-color: rgba(180,215,148,0.50);}
#map-data_kinki {border-color: #80bae0;}
#map-data_kinki h2 {background-color: #80bae0;}
#map-data_kinki .bl-hover {background-color: rgba(128,186,224,0.50);}
#map-data_sonota {border-color: #999999;}
#map-data_sonota h2 {background-color: #999999;}
#map-data_sonota .bl-hover {background-color: rgba(153,153,153,0.50);}

@media screen and (max-width: 1023px) {
	#portfolio-map-top {
		width: 100%;
		height: auto;
		background: none;
	}
  #portfolio-map-top #map_shuto,
  #portfolio-map-top #map_kinki,
  #portfolio-map-top #map_chubu {
    display: none;
  }
	#map-data_shuto,
	#map-data_chubu,
	#map-data_kinki,
	#map-data_sonota {
		position: relative;
		width: 100%;
		top: inherit;
		right: inherit;
		left: inherit;
		margin: 0 0 10px;
	}
}

/* ===========================================================

	map

=========================================================== */
#map {
	clear: both;
	margin: 0 0 10px;
	height: 600px;
}
@media screen and (max-width: 1024px) {
	#map {
		height: 300px;
	}
}

/* map-info
----------------------------------------------------------- */
.map-info p {
  margin: 0;
}
.map-info .map-info-image {
  text-align: center
}

/* portfolio-hub
----------------------------------------------------------- */
.portfolio-hub {
	margin-bottom: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.portfolio-hub li {
	width: calc(25% - 12px);
	line-height: 1.4;
}
.portfolio-hub li img {
	width: 100%;
	height: auto;
}
.portfolio-hub li span {
	display: block;
    height: 240px;
    margin-bottom: 8px;
	background-size: cover !important;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	/*Scott Kellum Method */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	transition: all .3s;
}
.portfolio-hub li em {
	margin: 4px 0;
	padding: 0 6px;
	display: inline-block;
	font-weight: bold;
	font-size: 11px;
	color: #fff;
	line-height: 20px;
	height: 20px;
	text-decoration: none;
	z-index: 2;
	background-color: #2F77EF;
}

.portfolio-hub li a {
	display: block;
	position: relative;
}
.portfolio-hub li a:hover span {
	opacity: 0.7;
}
.portfolio-hub li a:before {
	/*content: "";*/
	/*display: block;*/
	/*width: 210px;*/
	/*height: 210px;*/
	/*position: absolute;*/
	/*left: 0;*/
	/*top: 0;*/
	/*background-color: #fff;*/
	/*z-index: 1;*/
	/*transition: .3s ease-in-out;*/
	/*opacity: 0.0;*/
}
.portfolio-hub li a:hover:before {
	/*opacity: 0.3;*/
}
.portfolio-hub li a:link, .portfolio-hub li a:visited {
	text-decoration: none;
	text-align: center;
}
.portfolio-hub li a:hover {
	text-decoration: none;
}
@media screen and (max-width: 1024px) {
	.portfolio-hub {
		text-align: center;
	}
	.portfolio-hub li {
		width: calc(50% - 8px);
	}
	.portfolio-hub li span {
	    height: 160px;
	}
}

/* ===========================================================

	details

=========================================================== */
/* portfolio-title
----------------------------------------------------------- */
.portfolio-title {
}
.portfolio-title h1 {
	float: left;
	display: inline-block;
	color: #111;
	font-size: 30px;
	font-size: 3.0rem;
	letter-spacing: 1px;
	margin: 0 0 20px;
}
.portfolio-title ul {
	float: right;
	display: inline-block;
	margin: 0 0 20px;
	padding: 15px 0 0;
}
.portfolio-title ul li {
	float: left;
	margin: 0 0 0 5px;
	text-align: center;
	color: #fff;
	background-color: #000;
	font-size: 11px;
	min-height: 30px;
	line-height: 30px;
	padding: 0 15px;
}

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

/* pagenation
----------------------------------------------------------- */
.pagenation {
	position: relative;
	width: 832px;
	height: 56px;
	margin: 64px auto 0;
}
.pagenation:first-child {
	margin: 0 auto 64px;
}
.pagenation, .pagenation li a, .pagenation li.next a:after, .pagenation li.prev a:before {
	height: 56px;
	line-height: 56px;
}
.pagenation li {
	display: inline-block;
	width: 256px;
}
.pagenation li.next {
	float: right;
}
.pagenation li.prev {
	float: left;
}
.pagenation li.back {
	position: absolute;
	left: 50%;
	margin-left: -128px;
}
.pagenation li a {
	text-align: center;
	display: block;
	color: #E30C1F;
	border-radius: 16px;
	border: 1px solid var(--Alizarin-Crimson-600, #E30C1F);
	background: var(--white, #FFF);
	text-decoration: none;
}
.pagenation li a:hover {
	text-decoration: none;
	color: #fff;
	background: var(--white, #E30C1F);
}
.pagenation li.next a:after, .pagenation li.prev a:after {
	position: absolute;
	content: " ";
	top: 50%;
	width: 10px;
	height: 10px;
	margin: -5px 0 0;
}
.pagenation li.next a:after {
	right: 14px;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	border: 8px solid transparent;
	border-left: 8px solid #E30C1F;
	border-radius: 2px;
}
.pagenation li.prev a:after {
	left: 14px;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	border: 8px solid transparent;
	border-right: 8px solid #E30C1F;
	border-radius: 2px;
}
.pagenation li.prev a:after {
	left: 10px;
}
.pagenation li.next a:hover:after{
	border: 8px solid transparent;
	border-left: 8px solid #fff;
}
.pagenation li.prev a:hover:after {
	border: 8px solid transparent;
	border-right: 8px solid #fff;
}

@media screen and (max-width: 1024px) {
	.pagenation {
		width: 100%;
		height: auto;
	}
	.pagenation li a, .pagenation li.next a:after, .pagenation li.prev a:before {
		height: 40px;
		line-height: 40px;
	}
	.pagenation li {
		display: block;
		width: auto;
		margin: 0 0 5px;
	}
	.pagenation li.next {
		float: none;
	}
	.pagenation li.prev {
		float: none;
	}
	.pagenation li.back {
		width: auto;
		position: relative;
		left: inherit;
		margin-left: 0;
	}
	.pagenation li a {
		text-align: center;
		display: block;
		border: solid 1px #ccc;
		position: relative;
	}
	.pagenation li a:hover {
		border: solid 1px #FF1100 !important;
		background-color: #FF1100 !important;
		color: #fff;
	}
	.pagenation li.next a:after, .pagenation li.prev a:before, .pagenation li.next a:before, .pagenation li.prev a:after {
		display: none;
	}
}

/* detail
----------------------------------------------------------- */
/* bxslider-detail-warp */
.bxslider-detail-warp {
	margin: 0 0 30px;
	width: 100%;
}
/* bx-wrapper  */
.bx-wrapper {
	margin: 0 0 24px;
}
/* bxslider-detail */
.bxslider-detail {
	height: auto;
}
.bxslider-detail li {
	text-align: center;
	height: inherit;
	margin: 0;
}
.bxslider-detail li span {
  text-align: center;
  vertical-align: middle;
}
.bxslider-detail li img {
	margin: 0 auto;
	width: auto;
	width: 100%;
	height: auto;
	max-height: 738px;
	vertical-align: middle;
	border-radius: 16px;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
	/* bxslider-detail */
	.bxslider-detail {
		height: 100%;
	}
	.bxslider-detail li {
		height: 100%;
		text-align: center;
		vertical-align: middle;
		display: table;
		max-height: 320px;
	}
	.bxslider-detail li span {
		height: 100%;
		vertical-align: middle;
		display: table-cell;
		max-height: 320px;
	}
	.bxslider-detail li img {
		width: 100%;
		height: auto;
		max-height: 320px;
	}
}
/* bx-pager  */
#bx-pager {
	width: 100%;
	height: 72px;
	margin: 0 auto 0;
	padding: 2px 0 0 0;
	text-align: center;
	letter-spacing: -.40em;
}
#bx-pager li {
	display: inline-block;
	margin: 0 8px;
	padding: 0;
	text-align: center;
	line-height: 1;
	overflow: hidden;
	width: 128px;
	height: 72px;
	background-color: #313131;
	letter-spacing: normal;
	border-radius: 16px;
}
#bx-pager li a {
	width: 128px;
	height: 100px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: #555;
	background-size: cover;
	margin: 0;
	position: relative;
	overflow: hidden;
	display: block;
	opacity: 0.5;
	cursor: pointer;
}
#bx-pager li a.active, #bx-pager li a:hover {
	opacity: 1;
}
#bx-pager li a img {
	width: 128px;
	height: 72px;
	opacity: 0.5;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all .3s ease;
	cursor: pointer;
}
#bx-pager li a.active img, #bx-pager li a:hover img {
	opacity: 1.0;
}

@media screen and (max-width: 1024px) {
	#bx-pager {
		width: 100%;
		height: 10px;
		margin: 0;
		padding: 0;
		background-color: inherit;
	}
	#bx-pager li {
		float: none;
		display: inline-block;
		margin: 0 10px;
		padding: 0;
		width: 10px;
		height: 10px;
		background-color: inherit;
	}
	#bx-pager li a {
		display: block;
		width: 10px;
		height: 10px;
		border-radius: 10px;
		background: none !important;
		background-color: #FF1100 !important;
		margin: 0;
		/*#DEA6B4;*/
	}
}
/* portfolio-details  */
.detail-map {
	display: flex;
}
.detail-map #map {
	width: 720px;
	margin-right: 32px;
	border-radius: 16px;
}
.detail-map table {
	display: block;
	flex: 1;
}
@media screen and (max-width: 1024px) {
	.detail-map {
		flex-direction: column;
	}
	.detail-map #map {
		width: 100%;
		margin-right: 0;
		margin-bottom: 32px;
	}
}
.portfolio-movie {
    position: relative;
	aspect-ratio: 16 / 9;
    margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 32px;
    vertical-align: top;
}
.portfolio-movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1024px) {
	.portfolio-movie {
	  width: 100%;
	}
}
#portfolio-movieurl {
}
/* ===========================================================

	data

=========================================================== */
/* data-summary
----------------------------------------------------------- */
.data-summary {
	display: flex;
	justify-content: center;
}
.data-summary p {
	margin-bottom: 5px;
}
.data-summary dl {
	border-radius: 16px;
	border: 1px solid var(--Gallery-300, #BDBDBD);
	display: block;
	padding: 32px;
	margin: 0;
	text-align: center;
	width: 284px;
}
.data-summary dl + dl {
	margin-left: 32px;
}
.data-summary dl:after {
	content: " ";
	display: block;
	clear: both;
}
.data-summary dl dt {
	margin-bottom: 24px;
	color: var(--Gallery-950, #292929);
	font-family: "M PLUS 1p";
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 16px; /* 100% */
}
.data-summary dl dd {
	margin: 0;
	padding: 0;
	color: var(--Gallery-950, #292929);
	font-family: "M PLUS 1p";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px; /* 100% */
}
.data-summary dl em {
	color: var(--Alizarin-Crimson-600, #E30C1F);
	font-family: Poppins;
	font-size: 48px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%; /* 48px */
	margin-right: 8px;
}
@media screen and (max-width: 1024px) {
	.data-summary {
		flex-direction: column;
		align-items: center;
	}
	.data-summary dl + dl {
		margin-left: 0;
		margin-top: 32px;
	}
}

/* ===========================================================

	result

=========================================================== */
.result h2 {
	text-decoration: underline;
	cursor: pointer;
}
.result h2:hover {
	text-decoration: none;
}
.result h2 span.icon-plus, .result h2 span.icon-minus {
	color: #FF1100;
	width: 24px;
	height: 24px;
	line-height: 21px;
	border: solid 2px #FF1100;
	float: right;
	text-align: center;
	font-size: 18px;
	background-color: #fde5e5;
	cursor: pointer;
	font-weight: bold;
}
.result h2 span.icon-plus:after {
	content: "+";
}
.result h2 span.icon-minus:after {
	content: "-";
}
.result table th.th-2nd {
	background: #cf8992 !important;
}