@charset "UTF-8";


/*----------------------------
         		pgs
-----------------------------*/

/*----------------------------
         		solution
-----------------------------*/
/*一覧*/
#solutionArchive{
  padding-block: min(14.4vw, 72px) min(10.8vw, 54px);
}
#solutionArchive .js-tab{
  display: flex;
  gap: 0 2.7%;
  border-bottom: 1px solid #000;
  margin-bottom: min(7.8vw, 39px);
  padding-inline: 4%;
}
#solutionArchive .js-tab li{
  flex: 1;
  display: block;
  height: 50px;
  background-color: rgba(147, 0, 7, 0.1);
}
#solutionArchive .js-tab li a{
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  color: #930007;
}
#solutionArchive .js-tab li.active{
  background-color: #930007;
  border-color: #930007;
}
#solutionArchive .js-tab li.active a{
  color: #fff;
}

.entryBoxWrap{
  display: flex;
  flex-wrap: wrap;
  gap: min(3.2vw, 32px) 3.6%;
}
.entryBox{
}
.entryBox a{
  display: block;
  background-color: #f3f3f3;
  height: 100%;
}
.entryBox a figure{
  width: 100%;
  aspect-ratio: 310 / 200;
  background-color: #000000;
}
.entryBox a figure img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.entryBox h3{
  padding: 9px 5% 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6875em;
}
@media screen and (max-width: 768px) {
  #solutionArchive .js-tab{
    padding-inline: 4%;
  }
  .entryBox{
    width: 100%;
  }  
} /* -SP- */
@media screen and (min-width: 769px) {
  .entryBox{
    width: calc((100% - 3.6% * 2) / 3);
  }  
} /* -PC only- */


/*投稿*/
#solution .pageTitle + section{
  padding-top: 70px;
}

.tiBdr2{
  position: relative;
  margin-bottom: 36px;
  padding-bottom: 33px;
  font-size: min(50/768*100vw,36px);
  text-align: center;
  line-height: 1.5em;
  color: #053077;
  letter-spacing: 0.05em;
}
.tiBdr2::before{
  content: "";
  position: absolute;
  inset: calc(100% - 15px) 0 auto 0;
  display: block;
  margin-inline: auto;
  width: min(63.7%, 700px);
  height: 14px;
  background-color: #053077;
}
.tiBdr2::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  width: 100%;
  height: 14px;
  border: solid #053077;
  border-width: 1px 0;
}
.tiBdr2 span{
	display: block;
	font-size: 66.67%;
	margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .tiBdr2{
		padding-bottom: 20px;
	}
	.tiBdr2 span{
		margin-top: 5px;
	}
  .tiBdr2::before{
    inset: calc(100% - 8px) 0 auto 0;
    width: 50%;
    height: 7px;
  }
  .tiBdr2::after{
    height: 7px;
  }
} /* -SP- */

.solutionMainImage{
  margin-block: 38px;
}

#solution .exampleArea{
  padding-block: min(10.8vw, 54px) min(12.8vw, 64px);
}
#solution .exampleArea h4{
  background-color: #333333;
  padding-block: 0.5em 0.65em;
  font-size: min(4.8vw, 24px);
  line-height: 1.133em;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
}
#solution .exampleArea .exampleCatch{
  margin-bottom: 1em;
  padding-block: 0.867em 0.5em;
  border-bottom: 1px solid #923636;
  font-size: min(6vw, 30px);
  line-height: 1em;
  color: #923636;
  font-weight: bold;
  text-align: center;
}

#solution .exampleBox + .exampleBox{
  margin-top: 18px;
}
#solution .exampleBox h5{
  background-color: #8064a2;
  padding: 0.4em 0.9em 0.45em;
  font-size: min(4.4vw, 22px);
  color: #fff;
}
#solution .exampleBox figure img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#solution .othersMovie{
  width: min(100%, 580px);
  margin-inline: auto;
}
#solution .othersMovie > *{
  width: min(100%, 580px);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
}

#solution .othersArea{
  background: url("../images/solution_bg.png") repeat left top / 3px;
  padding-block: min(12.2vw, 61px) 22px;
}
#solution .othersArea .othersRelatied{
  display: flex;
  flex-wrap: wrap;
  gap: min(4.2vw,42px) 2.1%;
  padding-top: min(10.8vw, 54px);
}
#solution .othersArea .othersRelatied figcaption{
  margin-top: 9px;
  font-size: 14px;
  text-align: center;
}

#solution .documentBtnArea{
  padding-block: min(12.8vw, 64px);
  border-bottom: 1px dotted #930007;
}
#solution .documentBtnArea .inner1000{
  display: flex;
  justify-content: center;
  gap: 20px 6.6%;
}
#solution .documentBtnArea .inner1000 .btnArrow{
  width: min(100%, 285px);
}
@media screen and (max-width: 768px) {
  #solution .documentBtnArea .inner1000{
    flex-direction: column;
  }   
  #solution .othersArea .othersRelatied figure{
    width: calc((100% - 2.1%) / 2);
  }
} /* -SP- */
@media screen and (min-width: 769px) {
  #solution .othersArea .othersRelatied figure{
    width: calc((100% - 2.1% * 2) / 3);
  }
} /* -PC only- */



#solution main section#pgsContact{
  padding: 100px 0;
}