@charset "utf-8";
/* CSS Document */
/*chics*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&family=Noto+Serif+JP:wght@300&family=Poiret+One&display=swap');
/*header*/
.bisoxchics_imgBox {
	height: 100vh;
	overflow: hidden;
	position: relative;
}
.bisoxchics_img {
	z-index:10;
	opacity: 0;
	width: 100%;
	height:100%;
    object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-animation: anime 36s 0s infinite;
	animation: anime 36s 0s infinite; 
}
.bisoxchics_img:nth-of-type(2) {
	-webkit-animation-delay: 6s;
	animation-delay: 6s; 
}
.bisoxchics_img:nth-of-type(3) {
	-webkit-animation-delay: 12s;
	animation-delay: 12s; 
}
.bisoxchics_img:nth-of-type(4) {
	-webkit-animation-delay: 18s;
	animation-delay: 18s; 
}
.bisoxchics_img:nth-of-type(5) {
	-webkit-animation-delay: 24s;
	animation-delay: 24s; 
}
.bisoxchics_img:nth-of-type(6) {
	-webkit-animation-delay: 30s;
	animation-delay: 30s; 
}

@keyframes anime {
	0% {
		opacity: 0;
	}
	9% {
		opacity: 1;
	}
	18% {
		opacity: 1;
	}
	27% {
		opacity: 0;
		transform: scale(1.2) ;
		z-index:9;
	}
	100% {
		opacity: 0;
	}
}
.bisoxchics_message {
	z-index:11;
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100%;
	padding: 2.0rem 2.5%;
	height:auto;
	font-family: 'Noto Serif JP', serif;
	font-weight: 300;
	font-size: 2.0rem;
	color: #FFFFFF;
	text-shadow: 3px 4px 3px #000000;
	background-color: rgba(0,0,0,0.50);
}
.bisoxchics_message h1{
	font-size: 3.0rem;
	letter-spacing: 0.5rem;
}
.bisoxchics_message h5{
	margin-bottom: 3.0rem;
	color: #D4D4D4;
}
.bisoxchics_message hr{
	height: 1px;
	background-color: #FFFFFF;
}
.bisoxchics_message h2{
	margin-bottom: 1.5rem;
	font-size: 1.5rem;
}
.bisoxchics_message p{
	font-size: 1.0rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 100;
}
.bisoxchics_message a{
	color: #ffffff;
}
@media (max-width:768px){
	.bisoxchics_message h1{
		font-size: 2.5rem;
	}
}
#header1 div.TexturePanel{
	margin: -2.0rem 0 0 0;
	width: 100%;
	z-index: 12;
	position: relative;
	text-align: center;
}
#header1 div.TexturePanel img{
	width: 90%;
	box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.5);
}
/*collaboration*/
.sub-t3{
	display: inline-block;
	text-align: left;
}
#about-c{
	overflow: hidden;
}
#about-c div.about-c{
	background:rgba(60,12,12,1.0);
}
#about-c div.about-c div.row{
	transform: translate(0,-3.0rem);
	padding: 0 1.0rem;
}
#about-c div.about-c div.about-list{
	padding: 0 0.75rem;
}
#about-c div.about-c div.about-list div.ac-box{
	background-color: #FFFFFF;
	text-align: center;
	height: 100%;
}
#about-c div.about-c div.about-list div.ac-box img{
	width: 100%;
}
#about-c div.about-c div.about-list div.ac-box span{
	font-size: 0.7rem;
	color: #464646;
}
#about-c div.about-c div.about-list div.ac-box h4{
	font-size: 1.2rem;
	margin: 0.5rem;
	font-weight: 500;
}
#about-c div.about-c div.about-list div.ac-box h6{
	font-size: 1.0rem;
	margin: 0.5rem 0 0;
	font-weight: 500;
}
#about-c div.about-c div.about-list div.ac-box p{
	font-size: 0.8rem;
	padding: 0.5rem;
	text-align: left;
}
#about-c div.about-c div.about-list div.ac-box p span{
	color: #FF0004;
}
#about-c div.about-c div.about-list div.ac-box div.ac-word p{
	width: 100%;
	margin: 0.2rem;
	padding: 0.2rem;
	text-align: center;
}
@media (max-width:576px){
	#about-c p.sub-t{
		font-size: 1.0rem;
	}
}

/*製品紹介*/
.pi-box{
	position: relative;
	border: rgba(60,12,12,0) solid 1px;
}
.pi-box img{
	width: 100%;
}
.pi-box p{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0.2rem;
	background-color: rgba(60,12,12,0.8);
	color: #ffffff;
	text-align: center;
}
.tab-container div div div.pi-box.selected img{
  opacity: 0.9;
}
/* コンテンツを非表示。 */
.tab-con{
	display: none;
}
/* selectedクラスが付いたコンテンツのみ表示。 */
.tab-con.selected {
  display: block;
  padding: 0 1.0rem 1.0rem;
  min-height: 200px;
}
.tab-con img{
	width: 100%;
}
.tab-con h5{
	position: relative;
	padding-top: 15px;
	padding-left: 1.0rem;
	font-size: 1.2rem;
	border-bottom: 1px solid rgba(5,62,98,1);
}
.tab-con h5 span {
	position: relative;
	z-index: 2;
}

.tab-con h5::before {
	content: attr(data-en);
	position: absolute;
	top: 0px;
	left: 0;
	color: rgba(255,255,255,0.8);
	font-size: 1.6rem;
	text-transform: uppercase;
	font-family: 'Poiret One', cursive;
	z-index: 1;
}
.tab-con p{
	font-size: 1.0rem;
}
.tab-con a.list-frame{
	width: 100%;
	margin: 1.0rem auto 2.0rem;
}

/*施工実績グリッド*/
.achievements_c .grid-container {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 1px 1px;
	grid-template-areas:
	"grid1 grid2 grid2 grid3"
	"grid4 grid2 grid2 grid5"
	"grid6 grid7 grid8 grid5"
	"grid6 grid9 grid10 grid10";
}
@media screen and (max-width:576px) {
	.achievements_c .grid-container {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
		"grid1 grid3"
		"grid2 grid2"
		"grid2 grid2"
		"grid4 grid7"
		"grid5 grid6"
		"grid5 grid6"
		"grid8 grid9"
		"grid10 grid10";
	}
}
.achievements_c .grid-box{
	position: relative;
	overflow: hidden;
}
.achievements_c .grid-box img{
	object-fit: cover;
	width: 100%;
}
.achievements_c .grid-box div.grid_text{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	background-color: rgba(0,0,0,0.7);
	transition: .3s ease-in-out;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.achievements_c .grid-box div.grid_text span{
	font-size: 0.8rem;
}
.achievements_c .grid-box:hover div.grid_text{
	opacity: 1;
}
.achievements_c .grid-area1 {
  grid-area: grid1;
}
.achievements_c .grid-area2 {
  grid-area: grid2;
}
.achievements_c .grid-area3 {
  grid-area: grid3;
}
.achievements_c .grid-area4 {
  grid-area: grid4;
}
.achievements_c .grid-area5 {
  grid-area: grid5;
}
.achievements_c .grid-area6 {
  grid-area: grid6;
}
.achievements_c .grid-area7 {
  grid-area: grid7;
}
.achievements_c .grid-area8 {
  grid-area: grid8;
}
.achievements_c .grid-area9 {
  grid-area: grid9;
}
.achievements_c .grid-area10 {
  grid-area: grid10;
}
.achievements_c a.list-frame{
	display: block;
	width: 20rem;
	margin: 1.0rem 0 0 auto;
}