#main {
	background-image: url(/product/trantixxii/portfolio/images/main_bg.jpg);
	background-size: cover;
	background-position: center;
	margin-bottom: 68px;
}
#main>div{
	height: 350px;
	color: #fff;
	position: relative;
}
#main h1 {
	font-size: 50px;
	font-weight: bold;
	position: absolute;
	top: 100px;
	width: 480px;
	text-align: center;
}
#main p {
	font-size: 18px;
	position: absolute;
	top: 180px;
	width: 480px;
	text-align: center;
}
#main_image {
	position: absolute;
	top: 40px;
	right: 76px;
}

#main_2nd {
	background-image: url(/product/trantixxii/portfolio/images/main_2nd_bg.jpg);
	background-size: cover;
	background-position: center;
}

#main_2nd>div{
	height: 80px;
	color: #fff;
	position: relative;
}
#main_2nd h1 {
	font-size: 20px;
	font-weight: bold;
	margin-top: 10px;
	margin-left: 10px;
}
#main_2nd h1 span {
	font-size: 12px;
}






#portfolio_filter_area {
	padding: 0 0 10px;
	margin-bottom: 20px;
}

#portfolio_text {
	font-weight: bold;
	text-align: left;
	font-size: 14px;
	margin: 0 10px 10px;
}

#portfolio_filter {
	background-color: #fff;
	width: 98%;
    overflow-x: scroll;
    overflow-y: hidden;
}

#portfolio_filter>table {
	border-collapse: collapse;
	margin: 0;
	width: 860px;
}
#portfolio_filter>table th {
	padding: 5px;
	color: #729929;
	text-align: left;
	font-size: 12px;
	width: 65px;
	position: sticky;
    left: 0.1px;
    z-index: 2;
    background: #fff;
}
#portfolio_filter>table tr {
}
#portfolio_filter>table td {
	padding: 10px 0;
	font-size: 11px;
	line-height: 2.3;
}
#portfolio_filter>table td a {
	padding: 3px 5px;
	background-color: #f4f4f4;
	border: 1px solid #cfcfcf;
	margin-right: 5px;
	border-radius: 100px;
	cursor: pointer;
	white-space: nowrap;
}

#portfolio_filter>table tr td, #portfolio_filter>table tr th {
	border-bottom: 1px solid #919191;
}

#portfolio_filter>table td:not(#filter_color) a.on,
#filter_color>a.on:last-child{
	background-color: #b9c999;
	color: #fff;
}
#filter_color {
	overflow: hidden;
}
#filter_color>a:not(:last-child){
	display: block;
	width: 20px;
	height: 20px;
	padding: 0 !important;
	background-color: #f4f4f4;
	border: 1px solid #cfcfcf;
	margin-right: 12px;
	border-radius: 0 !important;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	float: left;
}
#filter_color>a:last-child{
	padding: 5px 10px;
}
.color_gold {
	background-color: #ffc000 !important;
	border-width: 1px !important;
}
.color_gray {
	background-color: #a6a6a6 !important;
	border-width: 1px !important;
}
.color_pink {
	background-color: #ed5fe3 !important;
	border-width: 1px !important;
}
.color_green {
	background-color: #33a82a !important;
	border-width: 1px !important;
}
.color_charcoal {
	background-color: #8c7259 !important;
	border-width: 1px !important;
}
.color_black {
	background-color: #000000 !important;
	border-width: 1px !important;
}
.color_blue {
	background-color: #014099 !important;
	border-width: 1px !important;
}

.color_white {
	background-color: #ffffff !important;
	border-width: 2px !important;
}

#filter_color a.on:not(:last-child) {
	border: 1px solid #f00;
}


#portfolio_list {
	padding: 0;
}
#portfolio_list>div {
	width: 100%;
}

#portfolio_list h2{
	margin-bottom: 20px;
	font-size: 12px;
	font-weight: normal;
	text-align: center;
}
#portfolio_list h2 em{
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
}


#portfolio_list_units>div {
	width: 30%;
	float: left;
	margin-bottom: 30px;
	height: 200px;
	margin-left: 1.5%;
	margin-right: 1.5%;
}
#portfolio_unit_image {
	margin-bottom: 10px;
}
#portfolio_unit_completion {
	font-size: 10px;
	line-height: 1;
	margin-bottom: 4px;
}
#portfolio_unit_name {
	font-size: 12px;
	line-height: 1.2;
	font-weight: bold;
	margin-bottom: 5px;
}
#portfolio_unit_finish {
	margin-bottom: 5px;
	padding: 2px 0;
}
#portfolio_unit_finish>span {
	font-size: 10px;
	background-color: #edeeee;
	border: 1px solid #cfcfcf;
	padding: 2px 5px;
	line-height: 2;
}

#portfolio_list_units>div.off {
	display: none;
}

.hide {
	display: none;
}

.detail_box {
	width: 95%;
	overflow: hidden;
	padding: 0;
	margin: auto;
}

.detail_box_image {
	width: 320px;
	margin-bottom: 5px;
	font-size: 10px;
	text-align: right;
}
.detail_box_image img {
	margin-bottom: 5px;
}


.detail_box_area {
	color: #fff;
	background-color: #c2d3a7;
	font-size: 10px;
	margin-bottom: 5px;
	padding: 3px 0;
	width: 50%;
}
.detail_box_area>span {
	margin: 0 15px;
}

.detail_box_completion {
	font-size: 10px;
	font-weight: bold;
	color: #729929;
	margin-bottom: 5px;
}
.detail_box_name {
	font-size: 16px;
	font-weight: bold;
	color: #729929;
	margin-bottom: 5px;
}
.detail_box_link {
	text-align: center;
	margin-bottom: 20px;
}
.detail_box_link>a {
	font-size: 10px;
	color: #fff;
	background-color: #bdce9d;
	padding: 3px 5px;
	border: 1px solid #cfcfcf;
	margin-right: 0;
	border-radius: 100px;
	line-height: 1;
}
.detail_box_table {
    width: 90%;
    border-collapse: collapse;
	margin-bottom: 20px;
}
.detail_box_table th{
	width: 30%;
	background-color: #ececec;
	color: #729929;
	font-weight: bold;
	font-size: 10px;
	padding: 1px;
}
.detail_box_table td{
	font-size: 10px;
	padding: 1px 10px 1px 10px;
}
.detail_box_table .bar {
    height: 1px;
    width: 100%;
    border-top: solid 1px #fff;
    white-space: nowrap;
    overflow: hidden;
	padding: 0;
}

.detail_box_table .detail_colors {
	overflow: hidden;
}
.detail_box_table .detail_colors a {
	display: block;
	float: left;
	width: 12px;
	height: 12px;
	padding: 0 !important;
	background-color: #f4f4f4;
	border: 1px solid #cfcfcf;
	margin-right: 4px;
	border-radius: 0 !important;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
.detail_box_table .detail_colors div {
	float: left;
	margin-right: 12px;
	line-height: 1.2;
}

div.pp_pic_holder {
	width: 95% !important;
	left: 2.5% !important;
	top: 0 !important;
	position: fixed !important;
}
.pp_content {
	width: 100% !important;
	height: auto !important;
}
.ppt, .pp_details {
	width: 100% !important;
}
.pp_hoverContainer {
	width: 100% !important;
}
.pp_close {
	top: -30px !important;
}

/* 20200717更新 */

#portfolio_list_units>div {
	height: 210px;
}

.detail_box_table .detail_colors a:nth-child(5),
.detail_box_table .detail_colors a:nth-child(9){
	clear: both;
}

.detail_box_table .detail_colors a:nth-child(5),
.detail_box_table .detail_colors a:nth-child(7),
.detail_box_table .detail_colors div:nth-child(6),
.detail_box_table .detail_colors div:nth-child(8){
	margin-top: 5px;
	margin-bottom: 5px;
}

/* 20201208 更新 */

/* 表面仕上仕上げ */

#portfolio_filter>table tr:nth-child(3) td{
	padding: 35px 0;
}

#portfolio_filter>table td#filter_finish{
	position: relative;
}

#portfolio_filter>table td#filter_finish span{
	content: "";
	display: flex;
    align-items: center;
	font-size: 10px;
	font-weight: bold;
	color: #000;
	top: 10%;
	position: absolute;
}

#portfolio_filter>table td#filter_finish span:first-child{
    left: 0;
}

#portfolio_filter>table td#filter_finish span:nth-child(2){
	left: 5.5%;
}

#portfolio_filter>table td#filter_finish span:nth-child(3){
	left: 24%;
}

#portfolio_filter>table td#filter_finish span:nth-child(4){
	left: 47%;
}

#portfolio_filter>table td#filter_finish span:nth-child(5){
	left: 57.5%;
}

#portfolio_filter>table.en td#filter_finish span:first-child{
    left: -0.6%;
}

#portfolio_filter>table.en td#filter_finish span:nth-child(2){
	left: 5.8%;
}

#portfolio_filter>table.en td#filter_finish span:nth-child(3){
	left: 24.4%;
}

#portfolio_filter>table.en td#filter_finish span:nth-child(4){
	left: 48%;
}

#portfolio_filter>table.en td#filter_finish span:nth-child(5){
	left: 58%;
}

/* 横線 */

#portfolio_filter>table td#filter_finish span:before{
	margin-right: 0.5rem;
}

#portfolio_filter>table td#filter_finish span:after{
	margin-left: 0.5rem;
}

#portfolio_filter>table td#filter_finish span:before,
#portfolio_filter>table td#filter_finish span:after{
	content: "";
    height: 2px;
    flex-grow: 1;
    background-color: #000;
}

#portfolio_filter>table td#filter_finish span:first-child:before,
#portfolio_filter>table td#filter_finish span:first-child:after{
    width: 0px;
}

#portfolio_filter>table td#filter_finish span:nth-child(2):before,
#portfolio_filter>table td#filter_finish span:nth-child(2):after{
	width: 33px;
}

#portfolio_filter>table td#filter_finish span:nth-child(3):before,
#portfolio_filter>table td#filter_finish span:nth-child(3):after{
	width: 61.7px;
}

#portfolio_filter>table td#filter_finish span:nth-child(4):before,
#portfolio_filter>table td#filter_finish span:nth-child(4):after{
	width: 0px;
}

#portfolio_filter>table td#filter_finish span:nth-child(5):before,
#portfolio_filter>table td#filter_finish span:nth-child(5):after{
	width: 18.5px;
}


#portfolio_filter>table.en td#filter_finish span:first-child:before,
#portfolio_filter>table.en td#filter_finish span:first-child:after{
    width: 0px;
}

#portfolio_filter>table.en td#filter_finish span:nth-child(2):before,
#portfolio_filter>table.en td#filter_finish span:nth-child(2):after{
	width: 37.6px;
}

#portfolio_filter>table.en td#filter_finish span:nth-child(3):before,
#portfolio_filter>table.en td#filter_finish span:nth-child(3):after{
	width: 69.7px;
}

#portfolio_filter>table.en td#filter_finish span:nth-child(4):before,
#portfolio_filter>table.en td#filter_finish span:nth-child(4):after{
	width: 0px;
}

#portfolio_filter>table.en td#filter_finish span:nth-child(5):before,
#portfolio_filter>table.en td#filter_finish span:nth-child(5):after{
	width: 20.5px;
}

/* 縦線 */

#portfolio_filter>table td#filter_finish a{
	position: relative;
}

#portfolio_filter>table td#filter_finish a:nth-child(7):before,
#portfolio_filter>table td#filter_finish a:nth-child(9):before,
#portfolio_filter>table td#filter_finish a:nth-child(10):before,
#portfolio_filter>table td#filter_finish a:nth-child(13):before,
#portfolio_filter>table td#filter_finish a:nth-child(15):before,
#portfolio_filter>table td#filter_finish a:nth-child(15):after{
	content:"";
	width: 2px;
    height: 10px;
    background-color: #000;
    top: -17px;
	position: absolute;
	pointer-events: none;
}


#portfolio_filter>table td#filter_finish a:nth-child(7):before,
#portfolio_filter>table td#filter_finish a:nth-child(10):before,
#portfolio_filter>table td#filter_finish a:nth-child(15):before{
	left: 0;
}

#portfolio_filter>table td#filter_finish a:nth-child(9):before,
#portfolio_filter>table td#filter_finish a:nth-child(13):before,
#portfolio_filter>table td#filter_finish a:nth-child(15):after{
	right: 0;
}

/* 材質規格 */

#portfolio_filter>table td#filter_materialstandard a:last-child{
	margin: 3.0em 0.8em 0 0;
}

#portfolio_filter>table.en td#filter_materialstandard a:last-child{
	margin: 4.0em 0.8em 0 0;
}

#portfolio_filter>table.en td#filter_materialstandard a{
	padding: 0 25px;
	display: inline-block;
    margin: 0.5em 0.8em 0 0;
}

#portfolio_filter>table tr:nth-child(5) td{
	padding: 35px 0;
}

#portfolio_filter>table td#filter_materialstandard{
	position: relative;
}

#portfolio_filter>table td#filter_materialstandard span{
	content: "";
	display: flex;
    align-items: center;
	font-size: 10px;
	font-weight: bold;
	color: #000;
	top: 7%;
	position: absolute;
}

#portfolio_filter>table.en td#filter_materialstandard span{
	font-size: 10px;
	top: 6%;
	text-align: center;
}

#portfolio_filter>table td#filter_materialstandard span:first-child{
    left: 0.2%;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(2){
	left: 11.8%;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(3){
	left: 25.2%;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(4){
	left: 49.5%;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(5){
	left: 56.3%;
    top: 4%;
    line-height: 1.3em;
    text-align: center;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(6){
	left: 62.5%;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(7){
	left: 69.4%;
}

#portfolio_filter>table.en td#filter_materialstandard span:first-child{
    left: 0.15%;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(2){
	left: 23.4%;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(3){
	left: 48.3%;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(4){
	left: 85%;
	line-height: 1.2em;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(5){
	left: -0.5%;
	top: 45%;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(6){
	left: 12.5%;
	top: 45%;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(7){
	left: 24.4%;
    top: 46%;
}

/* 横線 */

#portfolio_filter>table td#filter_materialstandard span:before{
	margin-right: 0.5rem;
}

#portfolio_filter>table td#filter_materialstandard span:after{
	margin-left: 0.5rem;
}

#portfolio_filter>table td#filter_materialstandard span:before,
#portfolio_filter>table td#filter_materialstandard span:after{
	content: "";
    height: 2px;
    flex-grow: 1;
    background-color: #000;
}

#portfolio_filter>table td#filter_materialstandard span:first-child:before,
#portfolio_filter>table td#filter_materialstandard span:first-child:after{
    width: 18px;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(2):before,
#portfolio_filter>table td#filter_materialstandard span:nth-child(2):after{
	width: 15px;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(3):before,
#portfolio_filter>table td#filter_materialstandard span:nth-child(3):after{
	width: 67.5px;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(4):before,
#portfolio_filter>table td#filter_materialstandard span:nth-child(4):after{
	width: 0px;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(5):before,
#portfolio_filter>table td#filter_materialstandard span:nth-child(5):after{
	width: 0px;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(6):before,
#portfolio_filter>table td#filter_materialstandard span:nth-child(6):after{
	width: 0px;
}

#portfolio_filter>table td#filter_materialstandard span:nth-child(7):before,
#portfolio_filter>table td#filter_materialstandard span:nth-child(7):after{
	width: 76px;
}

#portfolio_filter>table.en td#filter_materialstandard span:first-child:before,
#portfolio_filter>table.en td#filter_materialstandard span:first-child:after{
    width: 38.5px;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(2):before,
#portfolio_filter>table.en td#filter_materialstandard span:nth-child(2):after{
	width: 25.7px;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(3):before,
#portfolio_filter>table.en td#filter_materialstandard span:nth-child(3):after{
	width: 93.3px;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(4):before,
#portfolio_filter>table.en td#filter_materialstandard span:nth-child(4):after{
	width: 0px;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(5):before,
#portfolio_filter>table.en td#filter_materialstandard span:nth-child(5):after{
	width: 0px;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(6):before,
#portfolio_filter>table.en td#filter_materialstandard span:nth-child(6):after{
	width: 0px;
}

#portfolio_filter>table.en td#filter_materialstandard span:nth-child(7):before,
#portfolio_filter>table.en td#filter_materialstandard span:nth-child(7):after{
	width: 144.2px;
}

/* 縦線 */

#portfolio_filter>table td#filter_materialstandard a{
	position: relative;
}

#portfolio_filter>table td#filter_materialstandard a:nth-child(8):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(9):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(10):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(11):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(12):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(13):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(17):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(20):before{
	content:"";
	width: 2px;
    height: 10px;
    background-color: #000;
    top: -20.5px;
	position: absolute;
	pointer-events: none;
}

#portfolio_filter>table td#filter_materialstandard a:nth-child(8):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(12):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(17):before{
	left: 0;
}

#portfolio_filter>table td#filter_materialstandard a:nth-child(10):before{
	left: 1px;
}

#portfolio_filter>table td#filter_materialstandard a:nth-child(9):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(11):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(13):before,
#portfolio_filter>table td#filter_materialstandard a:nth-child(20):before{
	right: 0;
}

/* 結晶打消し */
    
#portfolio_filter>table td#filter_finish span:nth-child(5):before, #portfolio_filter>table td#filter_finish span:nth-child(5):after,
#portfolio_filter>table td#filter_finish a:nth-child(15):before,
#portfolio_filter>table td#filter_finish a:nth-child(15):after{
    display: none;
}

#portfolio_filter>table.en th{
	width: 80px;
}

/* @media all and (-ms-high-contrast: none){
  	#portfolio_filter > table:not(.en) td#filter_finish span{
	  top: 10%;
	}
	#portfolio_filter>table:not(.en) td#filter_materialstandard span{
	  top: 8%;
	}
	#portfolio_filter>table:not(.en) td#filter_materialstandard span:nth-child(7){
	  top: 47.3%;
	}
} */

/* @-moz-document url-prefix(){
  #portfolio_filter > table td#filter_genre a, #portfolio_filter > table td#filter_use a, #portfolio_filter > table td#filter_materialstandard a{
	  margin: 0.5em 0.9em 0 0;
	}
	#portfolio_filter>table td#filter_finish span:nth-child(2){
		left: 7.5%;
	}
	
	#portfolio_filter > table td#filter_finish span:nth-child(2)::before, #portfolio_filter > table td#filter_finish span:nth-child(2)::after{
		width: 56.3px
	}
	
	#portfolio_filter>table td#filter_finish span:nth-child(3){
		left: 32.6%;
	}
	
	#portfolio_filter > table td#filter_finish span:nth-child(3)::before, #portfolio_filter > table td#filter_finish span:nth-child(3)::after{
		width: 95.9px;
	}
	
	#portfolio_filter > table td#filter_materialstandard span{
		top: 8%;
	}
	
	#portfolio_filter > table td#filter_materialstandard span:nth-child(2){
		left: 16.5%;
	}
	
	#portfolio_filter > table td#filter_materialstandard span:nth-child(2)::before, #portfolio_filter > table td#filter_materialstandard span:nth-child(2)::after {
		width: 28.5px;
	}
	
	#portfolio_filter > table td#filter_materialstandard span:nth-child(3){
		left: 35%;
	}
	
	#portfolio_filter > table td#filter_materialstandard span:nth-child(7){
		top: 47.3%;
	}
	
	#portfolio_filter > table td#filter_materialstandard span:nth-child(7)::before, #portfolio_filter > table td#filter_materialstandard span:nth-child(7)::after {
		width: 38.3px;
	} */
	
	/* 英語版 */
	
	/*#portfolio_filter > table.en td#filter_finish span:nth-child(2){
		left: 7.8%;
	}
	
	#portfolio_filter > table.en td#filter_finish span:nth-child(2)::before, #portfolio_filter > table.en td#filter_finish span:nth-child(2)::after {
		width: 61.2px;
	}
	
	#portfolio_filter > table.en td#filter_finish span:nth-child(3){
		left: 33.4%;
	}
	
	#portfolio_filter > table.en td#filter_finish span:nth-child(3)::before, #portfolio_filter > table.en td#filter_finish span:nth-child(3)::after {
		width: 104.7px;
	}
	
	#portfolio_filter > table.en td#filter_materialstandard span:nth-child(2) {
		left: 27%;
	}
	
	#portfolio_filter > table.en td#filter_materialstandard span:nth-child(2)::before, #portfolio_filter > table.en td#filter_materialstandard span:nth-child(2)::after {
		width: 39.6px;
	}
	
	#portfolio_filter > table.en td#filter_materialstandard span:nth-child(3) {
		left: 55.9%;
	}
	
	#portfolio_filter > table.en td#filter_materialstandard span:nth-child(3)::before, #portfolio_filter > table.en td#filter_materialstandard span:nth-child(3)::after {
		width: 115.7px;
	}
	
	#portfolio_filter > table.en td#filter_materialstandard span:nth-child(7){
		left: 42.1%;
	}
	
} */


/* 20210217 追加 */

#portfolio_unit_applytechnology{
	font-size: 10px;
    background-color: #edeeee;
    border: 1px solid #cfcfcf;
    padding: 0 5px;
    line-height: 2;
	margin-bottom: 5px;
	width: 7.5em;
}

/* 20210301 追加 */

#main_2nd .btn_area{
	position: absolute;
    top: 9%;
    right: 10px;
}

#main_2nd .btn_area a{
	z-index: 10;
    border-radius: 30px;
    color: #fff;
    text-align: center;
    display: block;
    padding: 5px 15px;
    width: 10em;
	font-size: 12px;
}

#main_2nd .btn_area a:nth-child(n + 2){
	margin-top: 5px;
}

#main_2nd .btn_area a.advantage{
	background: #4d4251 none repeat scroll 0 0;
}

#main_2nd .btn_area a.variation{
	background: #014099 none repeat scroll 0 0;
}

/* 20211208 追加 */

#portfolio_list_units div:nth-child(56){
	display: none;
}