@charset "UTF-8";

/*for PC*/
@media screen and (min-width: 768px) {
  .ttlEn.-type02{
    /*font-size: clamp(calc(150px * 0.6), calc(100vw / 9.76), 150px);*//*150 / 45*/
  }
}

.pageH div{
  justify-content: center;
  height: 80px;
  padding: 0;
}
.pageH p{
  margin-bottom: 0;
  font-size: clamp(calc(32px * 0.7), calc(32vw / 9.76), 32px);/*24 / 32*/
}

.lNav{
  display: flex;
  justify-content: center;
  gap: calc((40 / 976) * 100%);
  margin: 60px 0 0 0;
}
.lNav li{
  width: calc((350 / 976) * 100%);
  background: #fff;
  border: 1px solid #202124;
  box-shadow: 4px 4px 0 #202124;
}
.lNav li a{
  display: block;
  padding: 30px 10px;
  transition: .3s;
}
.lNav li a .num span{
  display: block;
  font-size: clamp(calc(20px * 0.7), calc(20vw / 9.76), 20px);/*20 / 13*/
  line-height: 1.0;
}
.lNav li a .num i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 10px auto 0 auto;
  background: #202124;
  border-radius: 50%;
  color: #fff;
  font-size: clamp(calc(40px * 0.7), calc(40vw / 9.76), 40px);/*40 / 26*/
  font-style: normal;
  line-height: 1.0;
}
.lNav li a .num + p{
  margin: 1.0em 0 0 0;
  font-size: clamp(calc(20px * 0.7), calc(20vw / 9.76), 20px);/*20 / 13*/
  line-height: 1.8;
  text-align: center;
}
.lNav li a::after{
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  border-color: #202124;
  border-style: solid;
  border-width: 0 0 2px 2px;
  margin: 20px auto 0 auto;
  transform: rotate(-45deg) skew(10deg,10deg);
  transition: .3s;
}

/*for PC*/
@media screen and (min-width: 768px) {
  .lNav li a:hover{
    background: #eee;
  }
  .lNav li a:hover::after{
    transform: rotate(-45deg) skew(10deg,10deg) translate(-5px,5px);
  }
}
/*for SP*/
@media screen and (max-width: 767px) {
  
  .pageH div{
    height: 60px;
  }
  .pageH p{
    margin-bottom: 0;
    font-size: clamp(calc(24px * 0.7), calc(24vw / 3.75), 24px);/*24 / 32*/
  }

  .lNav{
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 30px;
  }
  .lNav li{
    width: auto;
    box-shadow: 2px 2px 0 #202124;
  }
  .lNav li a{
    padding: 20px 5px;
  }
  .lNav li a .num span{
    font-size: clamp(calc(13px * 0.7), calc(13vw / 3.75), 13px);/*20 / 13*/
  }
  .lNav li a .num i{
    width: 50px;
    height: 50px;
    font-size: clamp(calc(26px * 0.7), calc(26vw / 3.75), 26px);/*40 / 26*/
  }
  .lNav li a .num + p{
    font-size: clamp(calc(13px * 0.7), calc(13vw / 3.75), 13px);/*20 / 13*/
  }
  .lNav li a::after{
    width: 20px;
    height: 20px;
    margin-top: 10px;
  }
  
  .lNav li a:active{
    background: #eee;
  }
  .lNav li a:active::after{
    transform: rotate(-45deg) skew(10deg,10deg) translate(-5px,5px);
  }

}


.voiceList{
  position: relative;
}
.voiceList .ttlNum{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.voiceList .ttlNum span{
  display: block;
  font-size: clamp(calc(25px * 0.7), calc(25vw / 9.76), 25px);/*25 / 15*/
  line-height: 1.0;
}
.voiceList .ttlNum i{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: #202124;
  border-radius: 50%;
  color: #fff;
  font-size: clamp(calc(50px * 0.7), calc(50vw / 9.76), 50px);/*50 / 30*/
  font-style: normal;
  line-height: 1.0;
}

  
.voiceList .unit{
  position: relative;
  padding: 120px 0 0 0;
}
.voiceList .unit > div{
  position: relative;
}
.voiceList .unit .ttl{
  padding: 0 0 0 0.03em;
  font-size: clamp(calc(28px * 0.7), calc(28vw / 9.76), 28px);/*28 / 22*/
  letter-spacing: 0.03em;
  line-height: 1.6;
  text-align: center;
}
.voiceList .unit .ttl::after{
  content: "";
  display: block;
  width: 100%;
  height: 30px;
  margin: 10px 0 0 0;
  border-color: #202124;
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-bottom-right-radius: 20px;
}
.voiceList .unit .talk{
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0 0 0;
}
.voiceList .unit .talk dt,
.voiceList .unit .talk dd{
  margin: 50px 0 0 0;
  font-size: clamp(calc(16px * 0.7), calc(16vw / 9.76), 16px);/*16 / 15*/
  line-height: 2.4;
  letter-spacing: 0.03em;
  text-align: left;
}
.voiceList .unit .talk dt{
  width: 2.5em;
}
.voiceList .unit .talk dt::after{
  content: "：";
  display: inline-block;
  margin: 0 0 0 0.5em;
}
.voiceList .unit .talk dd{
  width: calc(100% - 2.5em);
}


.voiceList .unit .photo{
  margin: 50px 0 0 0;
}
.voiceList .unit .photo.col2{
  display: flex;
  justify-content: space-between;
}
.voiceList .unit .photo.col2 li{
  width: calc((310 / 650) * 100%);
  max-width: 320px;
}
.voiceList .unit .photo.col2.-type02 li{
  width: calc((320 / 650) * 100%);
  max-width: 320px;
}
.voiceList .unit figure{
  position: relative;
}

.voiceList .unit .photo.butterfly{
  position: relative;
}
.voiceList .unit .photo.butterfly div{
  position: absolute;
  right: calc((-45 / 650) * 100%);
  top: -50px;
  width: calc((230 / 640) * 100%);
  animation: floating-x-1 5.4s ease-in-out infinite alternate-reverse;
}

.voiceList .unit .photo.butterfly div img{
  animation: floating-y-1 1.8s ease-in-out infinite alternate-reverse;
}


@keyframes floating-x-1 {
  0% {
    transform: translateX(-8%);
  }
  100% {
    transform: translateX(8%);
  }
}
@keyframes floating-y-1 {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}



/*一番目*/
.voiceList .unit.unit01{
  padding: 75px 0 0 0;
}
.voiceList .unit.unit01::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: calc(100% - 185px);
  background: #f2f1e8;
}

.voiceList .unit.unit01 .copy01{
  margin-bottom: 0;
  padding: 70px 0 60px 0;
  padding-left: 0.03em;
  border-bottom: 4px solid #202124;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: center;
}
.voiceList .unit.unit01 .copy03{
  margin-top: 50px;
  margin-bottom: 0;
  padding-left: 0.1em;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}
.voiceList .unit.unit01 .lead01{
  margin-top: 50px;
  margin-bottom: 0;
  letter-spacing: 0.03em;
  text-align: left;
}


/*for PC*/
@media screen and (min-width: 768px) {
  .conPCS{
    max-width:650px;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/*for SP*/
@media screen and (max-width: 767px) {

  .voiceList{}
  .voiceList .ttlNum{}

  .voiceList .ttlNum span{
    font-size: clamp(calc(15px * 0.7), calc(15vw / 3.75), 15px);/*25 / 15*/
  }
  .voiceList .ttlNum i{
    width: 70px;
    height: 70px;
    font-size: clamp(calc(30px * 0.7), calc(30vw / 3.75), 30px);/*50 / s*/
  }

  .voiceList .unit{
    padding-top: 80px;
  }
  .voiceList .unit > div{}
  .voiceList .unit .ttl{
    font-size: clamp(calc(22px * 0.7), calc(22vw / 3.75), 22px);/*28 / 22*/
  }
  .voiceList .unit .ttl::after{
    height: 20px;
    border-bottom-right-radius: 10px;
  }
  .voiceList .unit .talk{
    padding-top: 10px;
  }
  .voiceList .unit .talk dt,
  .voiceList .unit .talk dd{
    margin-top: 30px;
    font-size: clamp(calc(15px * 0.7), calc(15vw / 3.75), 15px);/*16 / 15*/
  }
  .voiceList .unit .talk dt{}
  .voiceList .unit .talk dt::after{}
  .voiceList .unit .talk dd{}
  
  
  /*一番目*/
  .voiceList .unit.unit01{
    padding-top: 50px;
  }
  .voiceList .unit.unit01::before{
    height: calc(100% - 100px);
  }

  .voiceList .unit.unit01 .copy01{
    margin-bottom: 0;
    padding: 40px 0 30px 0;
  }
  .voiceList .unit.unit01 .copy03{
    margin-top: 30px;
    font-size: clamp(calc(15px * 0.7), calc(15vw / 3.75), 15px);
  }
  .voiceList .unit.unit01 .lead01{
    margin-top: 30px;
  }

}


/*
intro
---------------------------*/
.intro{
  text-align: center;
}
.intro h1{
  margin: 0 0 55px 0;
  padding-left: 0.2em;
  font-size: clamp(calc(60px * 0.7), calc(60vw / 9.76), 60px);/*60 / 40*/
  letter-spacing: 0.2em;
  line-height: 1.0;
  font-weight: 400;
}
.intro h1 span{
  display: block;
  margin: 0 0 25px 0;
  padding-left: 0.05em;
  font-size: calc((28 / 60) * 100%);
  letter-spacing: 0.05em;
  line-height: 1.0;
}
/*for SP*/
@media screen and (max-width: 767px) {
  .intro{
    text-align: center;
  }
  .intro h1{
    margin-bottom: 30px;
    font-size: clamp(calc(40px * 0.7), calc(40vw / 3.75), 40px);/*60 / 40*/
  }
  .intro h1 span{
    margin-bottom: 15px;
  }
  .intro .lead01 {
    font-size: clamp(calc(14px * 0.7), calc(14vw / 3.75), 14px);
    letter-spacing: 0;
  }  
}



.btnPageTop{
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border: 1px solid #202124;
  box-shadow: 4px 4px 0 #202124;
}
.btnPageTop a{
  display: block;
  padding: 15px 10px 20px 10px;
  transition: .3s;
}
.btnPageTop a p{
  margin: 1.0em 0 0 0;
  font-size: clamp(calc(16px * 0.7), calc(16vw / 9.76), 16px);/*16 / 13*/
  line-height: 1.0;
  text-align: center;
}
.btnPageTop a::before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-color: #202124;
  border-style: solid;
  border-width: 2px 2px 0 0;
  margin: 5px auto 0 auto;
  transform: rotate(-45deg) skew(10deg,10deg);
  transition: .3s;
}


/*for PC*/
@media screen and (min-width: 768px) {
  .btnPageTop a:hover{
    background: #eee;
  }
  .btnPageTop a:hover::before{
    transform: rotate(-45deg) skew(10deg,10deg) translate(5px,-5px);
  }
}
/*for SP*/
@media screen and (max-width: 767px) {
  .btnPageTop{
    width: 200px;
    box-shadow: 2px 2px 0 #202124;
  }
  .btnPageTop a{
    padding: 10px 5px 15px 5px;
  }
  .btnPageTop a p{
    font-size: clamp(calc(13px * 0.7), calc(13vw / 3.75), 13px);/*16 / 13*/
  }
  .btnPageTop a::before{
    width: 20px;
    height: 20px;
    margin-top: 10px;
  }
  
  .btnPageTop a:active{
    background: #eee;
  }
  .btnPageTop a:active::before{
    transform: rotate(-45deg) skew(10deg,10deg) translate(5px,-5px)
  }

}