@charset "UTF-8";

body{
	font-family: 'YakuHanJP', 'Zen Kaku Gothic New', sans-serif;
}
.wrapper{
	min-height: 100vh;
	scroll-behavior: smooth;
}

/*全体の枠*/
.mainContainer{
  height: auto;
  overflow: clip;
  padding-bottom: 120px;
}

/*左のロゴ*/
/*ロゴ枠*/
.logoWrap {
  position: fixed;
  top:0;
  left: 0;
  z-index: -9000;
}

.mark {
  position: absolute;
  width: 80px;
  top:0;
  left: 0;
}

.logo {
  position: absolute;
  height: 550px;
  top:120px;
  left: 5px;
  z-index: -9000;
}


/*-----------------------------------------------------*/

/*タイトル枠*/
.mainContainer .catch{
  position: sticky;
  width: auto;
  z-index: 6000;
  right: 0;
  left: 0;
  top: 0;
  background-color:#EEEBE9;
  opacity: 0.9;
  padding: 90px 150px 60px 150px;
}

/*［カテゴリー］*/
.catch .category {
  font-weight: 400;
  text-align: left;
  width:auto;
  height: 30px;
}

/*デザイン種類*/
.designType {
  margin-top: 40px;
  font-weight: 700;
  font-size: 1.6rem;
  text-align: left;
  width: auto;
 }

/*デザイン種類小見出し*/
.komidashi{
  font-weight: 400;
  font-size: 1.2rem;
  text-align: left;
  margin-left: 150px;
  margin-top: 70px;
}
.komidashi::before{
  content: "● ";
  font-size: 0.6rem;
  vertical-align: 0.2rem;
}

/*本文*/
.description {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.8rem;
  color: #533833;
  word-break: keep-all;/*単語の切れ目で改行*/
  text-align: left;
  padding-inline:150px;
}

/*作品集枠*/
.mainContainer .imgWrap{
  z-index: 1000;
  position: relative;
  width: 100%;
  bottom: 0;
}

/*大きい作品*/
.bigWrap{
  display: flex;
  flex-wrap: wrap;/*折り返し*/
  justify-content: space-around;/*左から並べる*/
  height: auto;
  margin: 20px 150px 20px 150px;
}

.imgBig {
  width: 25%;
  margin-top: 2%;
}

a.element {
  display: block;
  width: 100%;
  margin:0 auto;
  opacity: 0;
  background: #f7f6f4;
  box-sizing: border-box;
  padding:25px;
}
.imgback{
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
  width: 100%;
  box-sizing: border-box;
}


.imgBig:hover{
  box-shadow: 0 10px 15px -10px;
  transform: scale(1.5);	/*画像の拡大率*/
  transition-duration: 0.2s;	/*変化に掛かる時間*/
  z-index: 2000;
}

/*小さい作品*/
.smallWrap {
  display: flex;
  flex-wrap: wrap;/*折り返し*/
  justify-content: space-around;/*左から並べる*/
  margin: 0 135px 0 130px;
  height: auto;
}
.smallWrap:last-of-type{
	margin-bottom: 20px;
}

.element {
  display: block;
  width: 100%;
  margin:0 auto;
  opacity: 0;
}


.imgSmal {
  width: 22%;
  margin-top: 3%;
}

.imgSmal:hover {
  box-shadow: 0 10px 15px -10px;
  transform: scale(1.5);	/*画像の拡大率*/
  transition-duration: 0.2s;	/*変化に掛かる時間*/
  z-index: 2000;
}

.box:hover {
  box-shadow: 0 10px 15px -10px;
  transform: scale(1.5);	/*画像の拡大率*/
  transition-duration: 0.2s;	/*変化に掛かる時間*/
  z-index: 2000;
}


/*注意書きラップ*/
.cautionBox{
  margin-top: -80px;
  margin-bottom: 80px;
}

.cautionWrap{
  padding-bottom: 5px;
  height: auto;
}

/*注意書き*/
.caution{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  text-align: justify;
  font-size:0.8rem;
  line-height: 1.2rem;
  margin: 0 150px 0 150px;
  padding: 0 0 0 1rem;
  text-indent:-0.8rem;
}


/*WEBの詳細はこちら(お見積はこちら)*/
.btn{
  background-color: #533833;
  width: 180px;
  height:30px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 5px;
}

.btn:hover{
  background-color: #906158;
}

.btn .btn_txt a{
  color: #FFF;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
}


/*add 2025*/
.fade_trigger2 a{
  display: block;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  /*padding: 25px;*/
}
.fade_trigger2 a:has(.imgback){
  padding: 10%;
  background: #f7f6f4;
}

.fade_trigger2 img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.fade_trigger2 >div{
	opacity: 0;
	transform: translateY(70px);
}

.fade_trigger2.active >div{
	animation: fadein2 0.5s ease-in-out forwards;
}
.fade_trigger2.active >div:nth-of-type(2){animation-delay: 0.2s;}
.fade_trigger2.active >div:nth-of-type(3){animation-delay: 0.4s;}
.fade_trigger2.active >div:nth-of-type(4){animation-delay: 0.6s;}
.fade_trigger2.active >div:nth-of-type(5){animation-delay: 0.8s;}
.fade_trigger2.active >div:nth-of-type(6){animation-delay: 1.0s;}
.fade_trigger2.active >div:nth-of-type(7){animation-delay: 1.2s;}
.fade_trigger2.active >div:nth-of-type(8){animation-delay: 1.4s;}
.fade_trigger2.active >div:nth-of-type(9){animation-delay: 1.6s;}
.fade_trigger2.active >div:nth-of-type(10){animation-delay: 1.8s;}
.fade_trigger2.active >div:nth-of-type(11){animation-delay: 2.0s;}
.fade_trigger2.active >div:nth-of-type(12){animation-delay: 2.2s;}
.fade_trigger2.active >div:nth-of-type(13){animation-delay: 2.4s;}
.fade_trigger2.active >div:nth-of-type(14){animation-delay: 2.6s;}

.fade_trigger2.active >tr{
	animation: fadein2 0.5s ease-in-out forwards;
}
.fade_trigger2.active >tr:nth-of-type(2){animation-delay: 0.2s;}
.fade_trigger2.active >tr:nth-of-type(3){animation-delay: 0.4s;}
.fade_trigger2.active >tr:nth-of-type(4){animation-delay: 0.6s;}
.fade_trigger2.active >tr:nth-of-type(5){animation-delay: 0.8s;}
.fade_trigger2.active >tr:nth-of-type(6){animation-delay: 1.0s;}
.fade_trigger2.active >tr:nth-of-type(7){animation-delay: 1.2s;}
.fade_trigger2.active >tr:nth-of-type(8){animation-delay: 1.4s;}

.fadecontainer .fadeItem{
  opacity: 0;
}
.fadecontainer .fadeItem{
  animation: fadein2 0.5s ease-in-out forwards;
}
.fadeItem:nth-child(1){animation-delay: 0s;}
.fadeItem:nth-child(2){animation-delay: 0.2s;}
.fadeItem:nth-child(3){animation-delay: 0.4s;}
.fadeItem:nth-child(4){animation-delay: 0.6s;}
.fadeItem:nth-child(5){animation-delay: 0.8s;}

@keyframes fadein2 {
	0%{
		opacity: 0;
		transform: translateY(70px);
	}
	100%{
		opacity: 1;
		transform: translate(0);
	}
}

.fade_trigger2.self{
	opacity: 0;
	transform: translateY(70px);
}
.fade_trigger2.self.active{
  animation: fadein2 0.5s ease-in-out forwards;
}

.delay.fade_trigger2.active{
  animation-delay: 0.8s;

}