@charset "utf-8";
/* CSS Document */

/*------------------------------------------
ローディングアニメーション
------------------------------------------*/
.loader-wrap {
	position: fixed;
	display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--main-color);
	z-index: 1000;
}
.loader_img{
	width: 17vh;
	margin: 0 auto 3rem;
}
.loader {
  text-indent: -9999em;
  width: /*48*/40px;
  height: /*48*/40px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #FFF #FFF transparent transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #706eb1 #706eb1;
  width: /*40*/33px;
  height: /*40*/33px;
  border-radius: 50%;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}
.loader::before {
  width: /*32*/26px;
  height: /*32*/26px;
  border-color: #FFF #FFF transparent transparent;
  animation: rotation 1.5s linear infinite;
}
    
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}


/*------------ ヘッダー --------------*/
.header {
	top:0;
}
/*------------ トップメイン --------------*/
.top_main{
	position: relative;
	overflow: hidden;
}
.top_main__read{
}
.top_main__ttl{
	position:absolute;
	z-index: 1;
	bottom:-10%;
	right:5%;
	color:#fff;
	font-size: calc(90px + 45 * ((100vw - 768px) / 1152));
	font-weight: 300;
	text-shadow: 0 0 16px rgba(0, 0, 0, 0.2);
	opacity: 0.0;
	animation: header_anime01 1.0s forwards ease-out 0.5s;
}
.top_main__txt{
	position:absolute;
	z-index: 1;
	bottom:25%;
	left:20%;
	color:#fff;
	font-size: calc(24px + 12 * ((100vw - 768px) / 1152));
	font-weight: 500;
	text-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
	opacity: 0.0;
	animation: header_anime02 2.5s forwards ease-out 1.3s;
}

/*スライド画像*/
.swiper-wrapper{
}
#top_main .swiper-slide{
	background-color: #222;
	height:100vh !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}


/*------------ NEWS --------------*/
.top_news{
}
.top_news__container{
	display: flex;
    justify-content:space-between;
    align-items: center;
	padding: 4% 0 2%;
}
.top_news__left{
	width:20%;
}
.top_news__ttl{
	/*font-size: 1.8rem;*/
	font-size: calc(10px + 5 * ((100vw - 768px) / 1152));
	font-weight: 500;
	letter-spacing: 0.2rem;
	margin-bottom: 5.0rem;
}
.top_news__ttl span{
	display: block;
	/*/font-size: 6.0rem;*/
	font-size: calc(36px + 18 * ((100vw - 768px) / 1152));
	font-weight: 300;
	letter-spacing: 0;
	margin-bottom: 0.8rem;
}
.top_news__right{
	width:70%;
}
.top_news__list{
	border-top: 1px solid #ccc;
}
.top_news__li{
	display: flex;
    justify-content:space-between;
    align-items: center;
	border-bottom: 1px solid #ccc;
	padding: 3.0rem;
}
.top_news__dtl{
	width:70%;
}
.top_news__date{
	font-size: 1.4rem;
	margin-bottom: 1.0rem;
}
.top_news__subttl{
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	line-height: 1.2;
}
.top_news__txt{
	font-size: 1.4rem;
	line-height: 1.5;
}
.top_news__img{
	width:20%;
	border: 1px solid #eee;
	border-radius: 1.0rem;
}
.top_news__btn01{
	display:inline-block;
}
.top_news__btn02{
	display:none;
}


/*------------ ブランド --------------*/
.top_bland{
	background-color: #e4e8ea;
}
.top_bland__container{
	padding: 4% 0 2%;
}
.top_bland__ttl{
	width: 100%;
	text-align: center;
	font-size: calc(10px + 5 * ((100vw - 768px) / 1152));
	font-weight: 500;
	letter-spacing: 0.2rem;
	margin-bottom: 3.0rem;
}
.top_bland__ttl span{
	display: block;
	font-size: calc(36px + 18 * ((100vw - 768px) / 1152));
	font-weight: 300;
	letter-spacing: 0;
	margin-bottom: 0.8rem;
}
.top_bland__txt{
	width: 100%;
	text-align: center;
	font-size: calc(16px + 8 * ((100vw - 768px) / 1152));
	margin-bottom: 3.0rem;
	font-weight: 400;
}
.top_bland__main{
	display: flex;
    justify-content:center;
    align-items:flex-start;
	flex-wrap: wrap;
	margin-bottom: 9.5rem;
}
.top_bland__main_li{
	width:24%;
	text-align: center;
	margin: 0 2.0%;
}
.top_bland__main_img{
	position: relative;
}
.top_bland__main_photo{
	width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: right;
}
.top_bland__main_icon{
	position:absolute;
	width: 50%;
	bottom:3%;
	right:3%;
}
.top_bland__main_txt{
	font-size: 1.3rem;
    font-weight: 600;
    padding: 0.8rem 0.8rem 0.5rem;
    border-bottom: 2px solid #000;
    width: fit-content;
    margin: 0 auto;
}
.top_bland__main_link:hover .top_bland__main_photo{
	filter: brightness(0.7);
	transition: .8s;
}
.top_bland__main_link:hover .top_bland__main_txt{
	color:#dab720;
	transition: .15s;
    border-bottom: 2px solid #dab720;
}
.top_bland__sub{
	display: flex;
    justify-content:center;
    align-items:flex-start;
	flex-wrap: wrap;
}
.top_bland__sub_li{
	width:7.5%;
	margin: 0;
}
.top_bland__sub_img{
	width: 100%;
    padding: 0 15%;
}
.top_bland__sub_txt{
	font-size: 0.9rem;
    font-weight: 600;
	text-align: center;
	line-height: 1.3;
    padding: 0.7rem 0 0;
}


/*------------ インスタ --------------*/
.top_insta{
}
.top_insta__container{
	padding: 4% 0 2%;
}
.top_insta__ttl{
	width: 100%;
	text-align: center;
	font-size: calc(10px + 5 * ((100vw - 768px) / 1152));
	font-weight: 500;
	letter-spacing: 0.2rem;
	margin-bottom: 3.0rem;
}
.top_insta__ttl span{
	display: block;
	font-size: calc(36px + 18 * ((100vw - 768px) / 1152));
	font-weight: 300;
	letter-spacing: 0;
	margin-bottom: 0.8rem;
}
#sb_instagram .sbi_photo img{
	border-radius: 0.5rem;
}

/*------------ プロダクト --------------*/
.top_product{
	background-color: #222;
}
.top_product__container{
	padding: 2% 14% 4%;
}
.top_product__ttl{
	width: 100%;
	text-align: center;
	font-size: calc(10px + 5 * ((100vw - 768px) / 1152));
	font-weight: 500;
	color: #fff;
	letter-spacing: 0.2rem;
	margin-bottom: 3.0rem;
}
.top_product__ttl span{
	display: block;
	font-size: calc(36px + 18 * ((100vw - 768px) / 1152));
	font-weight: 300;
	letter-spacing: 0;
	margin-bottom: 0.8rem;
}
.top_product__txt{
	width: 100%;
	text-align: center;
	font-size: calc(16px + 8 * ((100vw - 768px) / 1152));
	color: #fff;
	margin-bottom: 8.0rem;
	font-weight: 400;
}
.top_product__name{
	font-size: 1.3rem;
    font-weight: 600;
	color:#fff;
    padding: 1.0rem 0.8rem 0.5rem;
    border-bottom: 2px solid #fff;
    width: fit-content;
    margin: 0 auto;
}
.top_product__bland{
	font-size: 0.9rem;
    font-weight: 600;
	color:#fff;
	text-align: center;
	line-height: 1.3;
    padding: 1.0rem 0 0;
}
.top_product__link:hover .top_product__img{
	filter: brightness(0.5);
	transition: .8s;
}
.top_product__link:hover .top_product__name{
	color:#dab720;
	transition: .15s;
    border-bottom: 2px solid #dab720;
}
.top_product__img{
	width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}
.top_product .swiper-button-next {
	top: var(--swiper-navigation-top-offset, 57%);
    right: var(--swiper-navigation-sides-offset, 9%);
	color: #666;
}
.top_product .swiper-button-prev {
	top: var(--swiper-navigation-top-offset, 57%);
    left: var(--swiper-navigation-sides-offset, 9%);
	color: #666;
}
.top_product .swiper-pagination-bullets.swiper-pagination-horizontal{
	bottom: var(--swiper-pagination-bottom, 10%);
}
.top_product .swiper-pagination-bullet-active {
    background: #fff;
}
.top_product .swiper-pagination-bullet {
    background: #999;
}


/*------------ ショールーム --------------*/
.top_showroom{
}
.top_showroom__container{
	display: flex;
    justify-content:space-between;
    align-items: center;
	padding: 2% 0 2% 10%;
}
.top_showroom__left{
	width:32%;
}
.top_showroom__ttl{
	font-size: calc(10px + 5 * ((100vw - 768px) / 1152));
	font-weight: 500;
	letter-spacing: 0.2rem;
	margin-bottom: 5.0rem;
}
.top_showroom__ttl span{
	display: block;
	font-size: calc(36px + 18 * ((100vw - 768px) / 1152));
	font-weight: 300;
	letter-spacing: 0;
	margin-bottom: 0.8rem;
}
.top_showroom__subttl{
	font-size: calc(9px + 5 * ((100vw - 768px) / 1152));
	font-weight: 600;
	letter-spacing: 0.2rem;
	margin-bottom: 2.0rem;
}
.top_showroom__subttl span{
	display: block;
	font-size: calc(18px + 9 * ((100vw - 768px) / 1152));
	letter-spacing: 0;
	margin-bottom: 0.8rem;
}
.top_showroom__txt{
	font-size: 1.4rem;
	line-height: 1.6;
	margin-bottom: 3.0rem;
}
.top_showroom__right{
	width:60%;
}
.top_showroom__img{
	width:100%;
}

/*------------ 施工実績 --------------*/
.top_works{
	background-color: #e4e8ea;
}
.top_works__container{
	padding: 4% 0 2%;
	text-align: center;
}
.top_works__ttl{
	width: 100%;
	text-align: center;
	font-size: calc(10px + 5 * ((100vw - 768px) / 1152));
	font-weight: 500;
	letter-spacing: 0.2rem;
	margin-bottom: 4.0rem;
}
.top_works__ttl span{
	display: block;
	font-size: calc(36px + 18 * ((100vw - 768px) / 1152));
	font-weight: 300;
	letter-spacing: 0;
	margin-bottom: 0.8rem;
}
.top_works__list{
	display: flex;
    justify-content:flex-start;
    align-items:flex-start;
	flex-wrap: wrap;
	margin: 0 0 3.0rem 6%;
}
.top_works_li{
	width:14%;
	margin: 0 6% 2.0rem 0;
	text-align: center;
}
.top_works_li:nth-child(5n){
	margin: 0 0 2.0rem;
}
.top_works_img{
	width:100%;
	margin-bottom: 0.7rem;
}
.top_works_txt{
	font-size: 1.2rem;
    font-weight: 600;
	line-height: 1.3;
}
.top_works_link:hover .top_works_img{
	filter: brightness(0.5);
	transition: .8s;
}
.top_works_link:hover .top_works_txt{
	color:#dab720;
	transition: .15s;
}
.top_works__btn{
	padding: 1.0rem 5.0rem;
}



/*------------------------------------------
SP画面
------------------------------------------*/
@media screen and (max-width: 768px) {
	
	/*------------ トップメイン --------------*/
	.top_main__ttl{
		bottom:45%;/**/
		right:auto;/**/
		left:100%;/**/
		font-size: 12vw;/**/
		font-weight: 400;/**/
		opacity: 1.0;/**/
		animation: header_anime01sp 2.5s forwards ease-out 0.5s;/**/
		white-space: nowrap;/**/
	}
	.top_main__txt{
		bottom:55%;/**/
		left:100%;/**/
		font-size: 4.8vw;/**/
		line-height: 1.4;/**/
		font-weight: 600;/**/
		opacity: 1.0;/**/
		animation: header_anime02sp 2.0s forwards ease-out 1.3s;/**/
		white-space: nowrap;/**/
	}


	/*------------ NEWS --------------*/
	.top_news{
	}
	.top_news__container{
		padding: 5rem 0;/**/
		flex-wrap: wrap;/**/
	}
	.top_news__left{
		width:100%;/**/
		text-align: center;/**/
	}
	.top_news__ttl{
		font-size: 1.3rem;/**/
		margin-bottom: 2.0rem;/**/
	}
	.top_news__ttl span{
		font-size: 8.5vw;/**/
		margin-bottom: 0.5rem;/**/
	}
	.top_news__right{
		width:100%;/**/
	}
	.top_news__li{
		align-items:flex-start;/**/
		padding: 2.5rem 0;/**/
	}
	.top_news__dtl{
		width:60%;/**/
	}
	.top_news__txt{
		line-height: 1.3;/**/
	}
	.top_news__img{
		width:35%;/**/
		border-radius: 0.5rem;/**/
		margin-top: 2.2rem;/**/
	}
	.top_news__btn01{
		display:none;/**/
	}
	.top_news__btn02{
		display:inline-block;/**/
		margin: 3.0rem auto 0;/**/
	}


	/*------------ ブランド --------------*/
	.top_bland{
	}
	.top_bland__container{
		padding: 5rem 0;/**/
	}
	.top_bland__ttl{
		font-size: 1.3rem;/**/
		margin-bottom: 2.0rem;/**/
	}
	.top_bland__ttl span{
		font-size: 8.5vw;/**/
		margin-bottom: 0.5rem;/**/
	}
	.top_bland__txt{
		font-size: 1.6rem;/**/
		line-height:1.4;/**/
		font-weight: 500;/**/
	}
	.top_bland__main{
		margin-bottom: 4.0rem;/**/
	}
	.top_bland__main_li{
		width:60%;/**/
		margin: 0 auto 3.0rem;/**/
	}
	.top_bland__sub{
		justify-content:flex-start;/**/
	}
	.top_bland__sub_li{
		width:30%;/**/
		margin: 0 5% 1.5rem 0;/**/
	}
	.top_bland__sub_li:nth-child(3n){
		margin:0;/**/
	}
	.top_bland__sub_img{
		padding: 0;/**/
	}
	.top_bland__sub_txt{
		line-height: 1.2;/**/
		padding: 0.5rem 0 0;/**/
		font-weight: 500;/**/
		font-size: 1.0rem;/**/
	}


	/*------------ インスタ --------------*/
	.top_insta{
	}
	.top_insta__container{
		padding: 5rem 0;/**/
	}
	.top_insta__ttl{
		font-size: 1.3rem;/**/
		margin-bottom: 2.0rem;/**/
	}
	.top_insta__ttl span{
		font-size: 8.5vw;/**/
		margin-bottom: 0.5rem;/**/
	}


	/*------------ プロダクト --------------*/
	.top_product{
	}
	.top_product__container{
		padding: 5rem 0 8rem;/**/
	}
	.top_product__ttl{
		font-size: 1.3rem;/**/
		margin-bottom: 2.0rem;/**/
	}
	.top_product__ttl span{
		font-size: 8.5vw;/**/
		margin-bottom: 0.5rem;/**/
	}
	.top_product__txt{
		font-size: 1.6rem;/**/
		line-height:1.4;/**/
		margin-bottom: 3.0rem;/**/
	}
	.top_product .swiper-button-next {
		right: var(--swiper-navigation-sides-offset, 2%);/**/
		color: #fff;/**/
	}
	.top_product .swiper-button-prev {
		left: var(--swiper-navigation-sides-offset, 2%);/**/
		color: #fff;/**/
	}
	.top_product .swiper-pagination-bullets.swiper-pagination-horizontal{
		bottom: var(--swiper-pagination-bottom, 5%);/**/
	}


	/*------------ ショールーム --------------*/
	.top_showroom{
	}
	.top_showroom__container{
		flex-wrap: wrap;/**/
		padding: 5rem 0 6rem;/**/
	}
	.top_showroom__left{
		width:100%;/**/
		text-align: center;/**/
		padding: 0 5%;/**/
	}
	.top_showroom__ttl{
		font-size: 1.3rem;/**/
		margin-bottom: 2.0rem;/**/
	}
	.top_showroom__ttl span{
		font-size: 8.5vw;/**/
		margin-bottom: 0.5rem;/**/
	}
	.top_showroom__subttl{
		font-size: 1.3rem;/**/
		letter-spacing: 0;/**/
		margin-bottom: 2.0rem;
	}
	.top_showroom__subttl span{
		font-size: 5.0vw;/**/
	}
	.top_showroom__txt{
		line-height: 1.4;/**/
		text-align: left;/**/
		margin-bottom: 3.0rem;/**/
	}
	.top_showroom__right{
		width:100%;/**/
		margin: 4.0rem 0 0 10%;/**/
	}
	.top_showroom__img{
		height: 300px;/**/
		object-fit: cover;/**/
	}

	/*------------ 施工実績 --------------*/
	.top_works{
	}
	.top_works__container{
		padding: 5rem 0;/**/
	}
	.top_works__ttl{
		font-size: 1.3rem;/**/
		margin-bottom: 3.0rem;/**/
	}
	.top_works__ttl span{
		font-size: 8.5vw;/**/
		margin-bottom: 0.5rem;/**/
	}
	.top_works__list{
		margin: 0 0 1.0rem;/**/
	}
	.top_works_li{
		width:30%;/**/
		margin: 0 5% 2.0rem 0;/**/
	}
	.top_works_li:nth-child(5n){
		margin: 0 5% 2.0rem 0;/**/
	}
	.top_works_li:nth-child(3n){
		margin: 0 0 2.0rem;/**/
	}
	.top_works_txt {
		font-size: 1.0rem;/**/
		font-weight: 500;/**/
		text-align: left;/**/
	}
}

/*------------ アニメーション --------------*/
@keyframes header_anime01 {0%{opacity: 0.0;bottom:-10%;}100%{opacity: 1.0;bottom:6%;}}
@keyframes header_anime01sp {0%{left:100%}100%{left:5%}}
@keyframes header_anime02 {0%{opacity: 0.0;left:25%;}100%{opacity: 1.0;left:5%;}}
@keyframes header_anime02sp {0%{left:100%}100%{left:5%}}