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

html,body{
	height:auto;
}
.contents{}

/*tab [
----------------------------------------------------------- */
.tab {
	display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
}
.tab li {
  position: relative;
  width: 48.5%;
}
.tab li.is-active {}
.tab li p {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-white);
  font-size: clamp(calc(18px * var(--font-markup)), calc(18vw/ var(--vw-sp)), 18px);/*18 / 30*/
  text-align: center;
  line-height: 1.0;
  transition: var(--color-white);
}
.tab li p::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-def);
  opacity: 0.25;
  z-index: 9;
  transform: translate(-50%,-50%);
  transition: var(--transition-duration01);
}
.tab li p:hover {
 cursor: pointer;
}
.tab li p:hover::before {
 opacity: 0;
}
.tab li p span{
  position: relative;
  z-index: 10;
}
.tab li p span:nth-of-type(1){
  margin: 5px 0 0 0;
  font-size: clamp(calc(12px * var(--font-markup)), calc(12vw/ var(--vw-sp)), 12px);/*12 / 14*/
}
.tab li p span:nth-of-type(2){
  font-family: var(--font-family-en);
}

.tab li.is-active p::before{
  opacity: 0;
}


.tabDtl {
	display: none;
	transition: 1s;
}
.tabDtl.is-active {
	display: block;
  animation: fadeIn 0.3s ease-in-out;
}

.pjList{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.pjList + .pjList{
  padding-top: 20px;
}
.pjList .unit{
  margin: 0 0 30px 0;
  line-height: var(--line-height-narrow);
  text-align: left;
}
.pjList .unit a{
  display: block;
}
.pjList .unit figure{
  margin: 0 0 20px 0;
}
.pjList .unit figure img{
  display: block;
  width: 100%;
}
.pjList .unit p{
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw/ var(--vw-sp)), 16px);/*16 / 20*/
}
.pjList .unit dl{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pjList .unit dt,
.pjList .unit dd{
  margin: 15px 0 0 0;
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw/ var(--vw-sp)), 13px);/*13 / 14*/
}
.pjList .unit dt{
  width: 5em;
}
.pjList .unit dd{
  width: calc(100% - 5em);
}

@media print, screen and (min-width:768px) {
  .tab {}
  .tab li {
    width: calc((100%  - 36px) / 2);
  }
  .tab li.is-active {}
  .tab li p {
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw/ var(--vw-pc)), 30px);/*18 / 30*/
  }
  .tab li p::before{}
  .tab li p:hover {}
  .tab li p:hover::before {}
  .tab li p span{}
  .tab li p span:nth-of-type(1){
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw/ var(--vw-pc)), 14px);/*12 / 14*/
  }
  .tab li p span:nth-of-type(2){}
  
  
  .pjList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }
  .pjList + .pjList{
    padding-top: 40px;
  }
  .pjList .unit{
    width: calc((310 / 1100) * 100%);
    margin: 0 0 80px 0;
  }
  .pjList .unit a{}
  .pjList .unit figure{}
  .pjList .unit figure img{}
  .pjList .unit p{
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw/ var(--vw-pc)), 20px);/*16 / 20*/
  }
  .pjList .unit dl{}
  .pjList .unit dt,
  .pjList .unit dd{
    margin: 15px 0 0 0;
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw/ var(--vw-pc)), 14px);/*13 / 14*/
  }
  .pjList .unit dt{}
  .pjList .unit dd{}

}



/*modaal*/
.modaal-container{
  background: none;
  box-shadow: none;
  height: 50vh;
}




@keyframes fadeIn {
 from {
    opacity: 0;
  }
  to {
    opacity: 1;
    height: auto;
  }
}