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

/*
contents
*/

.contents{
	margin-top: 0;
}

/*con-link-wrap [
----------------------------------------------------------- */
.con-link-wrap{
  border-top: 1px solid var(--color-def03);
}



/*mv-wrap [
----------------------------------------------------------- */
.mv-wrap{}

@media print, screen and (min-width:768px) {
  .mv-wrap{}
}


/*mv-wrap [
----------------------------------------------------------- */
.mv-wrap {
  position: relative;
  height: calc(100vh - 60px);
  height: calc(100svh - 60px);
  width: 100%;
  margin-top: 0;
  background: url("../images/mv_bg_sp.webp") no-repeat center center;
  background-size: cover;
}

.mv-slide,
.mv-slide .swiper,
.mv-slide .swiper-wrapper,
.mv-slide .swiper-slide{
  height: 100%;
}

.mv-slide{
  position: relative;
  z-index: 5;
}
.mv-slide .mv{
  position: relative;
  height: 100%;
}
.mv-slide .mv-catch{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 20;
}
.mv-slide .mv01 .mv-catch{
  width: 90%;
}
.mv-slide .mv02 .mv-catch{
  width: 90%;
}


.mv-slide .mv03{
  overflow: visible;
}
.mv-slide .mv03 .mv-info{
  position: absolute;
  left: 50%;
  /*top: 100px;*/
  top: 17%;
  width: 100%;
  transform: translate(-50%,0);
  z-index: 20;
}
.mv-slide .mv03 .mv-info .mv-pj-logo{
  width: 65%;
  max-width: 276px;
  margin: 0 auto;
}
.mv-slide .mv03 .mv-info .mv-info-txt01{
  margin: 20px 0 0 0;
  padding-left: 0.05em;
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / --*/
  letter-spacing: 0.05em;
}
.mv-slide .mv03 .mv-info .mv-info-txt02{
  margin: 15px 0 0 0;
  padding-left: 0.2em;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*20 / --*/
  letter-spacing: 0.05em;
  line-height: var(--line-height);
}
.mv-slide .mv03 .mv-info .mv-info-txt03{
  margin: 10px 0 0 0;
  padding-left: 0.5em;
  font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-sp)), 24px);/*24 / --*/
  letter-spacing: 0.1em;
}
.mv-slide .mv03 .mv-info .mv-time{
  width: 65%;
  max-width: 335px;
  margin: 15px auto 0 auto;
}

#mv-batch{
  position: absolute;
  left: 0;
  top: 60px;
  width: 100%;
  height: calc(100vh - 120px);
  height: calc(100svh - 120px);
  z-index: 10000;  /*9999 + 1*/
  animation-name: fadeout;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
#mv-batch.def{
  opacity: 0 !important;
}
#mv-batch img{
  position: absolute;
  right: 10px;
  /*bottom: -15px;*/
  bottom: -5px;
  width: 100px;
  aspect-ratio: 1/1;
  filter: drop-shadow(6px 1px 6px rgba(0,0,0,0.6));
}
#mv-batch.above {
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}




#aerial{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #65dcf6;
  z-index: 2;  
  animation-name: fadeout;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
#aerial.def{
  opacity: 0 !important;
}
#aerial figure{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#aerial figure img{
  object-fit: contain;
  object-position: center bottom;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 896px) and (orientation: landscape) {
  /* スマートフォンの横向きだけに適用したいスタイル */
  #aerial figure img{
    object-fit: none;
    width: 100%;
    height: auto;
  }
}

#aerial figure figcaption{
  position: absolute;
  /*right: 4px;*/
  left: 4px;
  bottom: 4px;
  color: var(--color-white);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6),-1px -1px 2px rgba(0,0,0,0.6),-1px 1px 2px rgba(0,0,0,0.6),1px -1px 2px rgba(0,0,0,0.6);
}

#aerial.above {
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes fadein {
  0% {
     opacity: 0;
  }
  100% {
     opacity: 1;
  }
}

@keyframes fadeout {
  0% {
     opacity: 1;
  }
  100% {
     opacity: 0;
  }
}



@media print, screen and (min-width:768px) {
  .mv-wrap  {
    height: 100vh;
    /*height: 10svh;*/
    min-height: 950px;
    aspect-ratio: unset;
    background-image: url("../images/mv_bg_pc.webp");
  }
  
  .mv-slide .mv{}
  .mv-slide .mv-catch{}
  .mv-slide .mv01 .mv-catch{
   max-width: 820px;
  }
  .mv-slide .mv02 .mv-catch{
   max-width: 550px;
  }
  .mv-slide .mv03 figure{}
  .mv-slide .mv03 figure img{}
  .mv-slide .mv03 figure figcaption{}
  
  .mv-slide .mv03 .mv-info{
    display: none;
  }
  #mv-batch{
    display: none;
  }
  
  #aerial figure img{
    object-fit: cover;
  }
  #aerial figure figcaption{
    left: auto;
    right: 4px;
  }
}


@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
  /*横*/
  .mv-wrap {
    min-height: initial;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /*縦*/
  .mv-wrap {
    height: 60vh;
    height: 60svh;
    min-height: initial;
    z-index: 10;
  }
}




/*tsparticles*/
#tsparticles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}



/*merit-wrap [
----------------------------------------------------------- */
.merit-wrap{
  position: relative;
  padding: 40px 0 50px 0;
  background: url("../images/bg01_sp.webp") no-repeat center top;
  background-size: cover;
  text-align: center;
}
.merit-wrap::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 1080px;
  background: url("../images/bg_petal_sp.webp") no-repeat center top;
  background-size: 100% auto;
  transform: translate(-50%,0);
}
.merit-wrap > div{
  position: relative;
}

/*SPは非表示  MVに設置*/
.merit-wrap .pj-logo{
  width: 60%;
  max-width: 276px;
  margin: 0 auto;
}
.merit-wrap .merit-txt01{
  margin: 20px 0 0 0;
  padding-left: 0.05em;
  font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-sp)), 23px);/*23 / 30*/
  letter-spacing: 0.05em;
  line-height: var(--line-height);
}
.merit-wrap .merit-txt02{
  margin: 20px 0 0 0;
  padding-left: 0.05em;
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*16 / 18*/
  letter-spacing: 0.05em;
  line-height: var(--line-height);
}
/*SPは非表示  MVに設置*/

.merit-wrap .merit-list{}
.merit-wrap .merit-list li{
  position: relative;
  background: rgba(var(--color-white-rgb),0.3);
}
.merit-wrap .merit-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px 1px rgba(var(--color-black-rgb),0.1);
}

.merit-wrap .merit-list li strong{
  color: var(--color-key02);
  line-height: 0;
}

.merit-wrap .merit-list:nth-of-type(1){
  /*margin: 40px 0 0 0;*/
  margin: 10px 0 0 0;
}
.merit-wrap .merit-list:nth-of-type(1) li{
  padding: 0 20px;
}
.merit-wrap .merit-list:nth-of-type(1) li > div{
  padding: 20px 0;
}
.merit-wrap .merit-list:nth-of-type(1) li > div + div{
  border-top: 1px solid var(--color-def02);
}
.merit-wrap .merit-list:nth-of-type(1) li dl{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  text-align: left;
}
.merit-wrap .merit-list:nth-of-type(1) li dl dt{
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 16*/
}
.merit-wrap .merit-list:nth-of-type(1) li dl dd{
  margin: 7px 0 0 0;
  font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-sp)), 23px);/*23 / 35*/
}
.merit-wrap .merit-list:nth-of-type(1) li dl dd strong{
  font-size: calc((15 / 7) * 100%);/*75 / 35*/
}


.merit-wrap .merit-list:nth-of-type(2){}
.merit-wrap .merit-list:nth-of-type(2) li{
  margin: 8px 0 0 0;
  padding: 20px 0;
}
.merit-wrap .merit-list:nth-of-type(2) li p.f-en{
  padding-left: 0.1em;
  color: var(--color-key02);
  font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*12 / 12*/
  letter-spacing: 0.1em;
}
.merit-wrap .merit-list:nth-of-type(2) li dl dt{
  margin: 10px 0 0 0;
  padding-left: 0.1em;
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 16*/
  letter-spacing: 0.1em;
}
.merit-wrap .merit-list:nth-of-type(2) li dl dd{
  margin: 4px 0 0 0;
  padding-left: 0.1em;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*20 / 23*/
  letter-spacing: 0.1em;
}
.merit-wrap .merit-list:nth-of-type(2) li dl dd strong{
  font-size: calc((45 / 23) * 100%);/*45 / 23*/
  line-height: 1.0;
}



@media print, screen and (min-width:768px) {
  
  .merit-wrap{
    padding: 60px 0 90px 0;
    background-image: url("../images/bg01_pc.webp");
  }
  .merit-wrap::before{
    background-image: url("../images/bg_petal_pc.webp");
  }
  .merit-wrap > div{}
  .merit-wrap .pj-logo{}
  .merit-wrap .merit-txt01{
    margin-top: 35px;
    padding-left: 0.2em;
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*23 / 30*/
    letter-spacing: 0.2em;
  }
  .merit-wrap .merit-txt02{
    margin-top: 35px;
    padding-left: 0.1em;
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);/*16 / 18*/
    letter-spacing: 0.1em;
  }

  .merit-wrap .merit-list{}
  .merit-wrap .merit-list li{}
  .merit-wrap .merit-list li::before{}

  .merit-wrap .merit-list li strong{}

  .merit-wrap .merit-list:nth-of-type(1){
    margin-top: 65px;
  }
  .merit-wrap .merit-list:nth-of-type(1) li{
    display: flex;
    justify-content: center;
    padding: 30px 0;
  }
  .merit-wrap .merit-list:nth-of-type(1) li > div{
    padding: 10px 0;
  }
  .merit-wrap .merit-list:nth-of-type(1) li > div:nth-of-type(1){
    width: 57.5%;
  }
  .merit-wrap .merit-list:nth-of-type(1) li > div:nth-of-type(2){
    width: 42.5%;
  }
  .merit-wrap .merit-list:nth-of-type(1) li > div + div{
    border-left: 1px solid var(--color-def02);
    border-top: none;
  }
  .merit-wrap .merit-list:nth-of-type(1) li dl{}
  .merit-wrap .merit-list:nth-of-type(1) li dl dt{
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*13 / 16*/
    letter-spacing: 0.1em;
  }
  .merit-wrap .merit-list:nth-of-type(1) li dl dd{
    font-size: clamp(calc(35px * var(--font-markup)), calc(35vw / var(--vw-pc)), 35px);/*23 / 35*/
    letter-spacing: 0.1em;
  }
  .merit-wrap .merit-list:nth-of-type(1) li dl dd strong{}


  .merit-wrap .merit-list:nth-of-type(2){
    display: flex;
    justify-content: space-between;
  }
  .merit-wrap .merit-list:nth-of-type(2) li{
    margin-top: 7px;
    padding: 30px 0;
    width: calc((355 / var(--cont-width-nv-pc)) * 100%);
  }
  .merit-wrap .merit-list:nth-of-type(2) li p.f-en{
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-pc)), 12px);/*12 / 12*/
  }
  .merit-wrap .merit-list:nth-of-type(2) li dl dt{
    mmargin-top: 15px;
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*13 / 16*/
  }
  .merit-wrap .merit-list:nth-of-type(2) li dl dd{
    mmargin-top: 8px;
    font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-pc)), 23px);/*20 / 23*/
  }
  .merit-wrap .merit-list:nth-of-type(2) li dl dd strong{}
  
}



/*info-wrap [
----------------------------------------------------------- */
.info-wrap{
  text-align: center;
}
.info-wrap p + p{
  margin: 20px 0 0 0;
}
.info-wrap .lead04{
  margin: 40px 0 0 0;
}
.info-wrap .info-txt01{
  padding-left: 0.2em;
  font-size: clamp(calc(26px * var(--font-markup)), calc(26vw / var(--vw-sp)), 26px);/*26 / 30*/
  letter-spacing: 0.2em;
}
.info-wrap .info-txt02{
  padding-left: 0.2em;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*20 / 28*/
  letter-spacing: 0.2em;
}

.info-wrap ul{
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.info-wrap ul li{
  width: 49%;
  padding: 0 10px;
  background: var(--color-white);
  border: 1px solid var(--color-def03);
  box-shadow: 2px 2px 1px rgba(var(--color-black-rgb),0.1);
}
.info-wrap ul li .logo-dev{
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}
.info-wrap ul li.ph .logo-dev{
  width: calc((9 / 10) * 100%);/*270 / 300*/
}
.info-wrap ul li figure{}
.info-wrap ul li dl{
  padding: 15px 0;
  text-align: left;
}
.info-wrap ul li dl dt{
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 13*/
  white-space: nowrap;
  line-height: 1.4;
}
.info-wrap ul li.ph dl dt{
  letter-spacing: -0.05em;
}
.info-wrap ul li dl dd{
  display: flex;
  align-items: center;
  margin: 5px 0 0 0;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*20 / 32*/
}

.info-wrap ul li dl dd::before{
  content: "";
  display: block;
  width: 26px;
  height: 16px;
  margin: 3px 0 0 0;
  background: url("../common/images/ico_fd.svg") no-repeat center center;
  background-size: cover;
}

.info-wrap ul li .btn{
  margin-left: -10px;
}
.info-wrap ul li .btn a{
  display: flex;
  align-items: center;
  padding: 12px 10px;
  background: var(--color-key03);
  border-top-right-radius: 10px;
  color: var(--color-white);
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 18*/
  text-align: left;
  transition: var(--transition-duration01);
}
.info-wrap ul li .btn a::after{
  content: "";
  display: block;
  width: 15px;
  aspect-ratio: 27/7;
  margin: 0 0 0 auto;
  background: url("../common/images/ico_arr_wh01.svg") no-repeat center center;
  background-size: cover;
  transition: var(--transition-duration01);
}
  
.info-wrap ul li .btn a:active::after{
  transform: translateX(5px);
}
.info-wrap ul li .btn a:active{
  background: var(--color-key02);
}

@media print, screen and (min-width:768px) {
  .info-wrap{}
  .info-wrap p + p{
    margin-top: 30px;
  }
  .info-wrap .lead04{
    margin-top: 50px;
  }
  .info-wrap .info-txt01{
    padding-left: 0.5em;
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*26 / 30*/
    letter-spacing: 0.5em;
  }
  .info-wrap .info-txt02{
    font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*20 / 28*/
  }

  .info-wrap ul{
    max-width: 860px;
  }
  .info-wrap ul li{
    position: relative;
    width: calc((10 / 21) * 100%);/*400 / 860*/
    padding: 0 calc((3 / 86) * 100%) 80px calc((3 / 86) * 100%) ;/*30 / 860*/
  }
  .info-wrap ul li .logo-dev{
    width: calc((268 / 340) * 100%);/*268 / 340*/
    padding: 45px 0 40px 0;
  }
  .info-wrap ul li.ph .logo-dev{
    width: calc((240 / 340) * 100%);/*240 / 340*/
  }
  .info-wrap ul li figure{}
  .info-wrap ul li dl{
    padding: 17px 0;
  }
  .info-wrap ul li dl dt{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-pc)), 13px);/*13 / 13*/
  }
  .info-wrap ul li.ph dl dt{
    letter-spacing: 0;
  }
  .info-wrap ul li dl dd{
    font-size: clamp(calc(32px * var(--font-markup)), calc(32vw / var(--vw-pc)), 32px);/*20 / 32*/
    letter-spacing: 0.1em;
  }
  .info-wrap ul li dl dd a{
    pointer-events: none;
  }
  .info-wrap ul li dl dd::before{}

  .info-wrap ul li .btn{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    margin-left: 0;
  }
  .info-wrap ul li .btn a{
    width: calc((37 / 40) * 100%);/*370 / 400*/
    height: 80px;
    padding: 0 20px 0 30px;
    border-top-right-radius: 20px;
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);/*13 / 18*/
  }
  .info-wrap ul li .btn a::after{
    width: 27px;
  }
  .info-wrap ul li .btn a:hover::after{
    transform: translateX(5px);
  }
  .info-wrap ul li .btn a:hover{
    background: var(--color-key02);
  }
}



/*concept
----------------------------*/
.concept-wrap{
  position: relative;
  padding: 50px 0 100px 0;
  background: url("../images/bg02_sp.webp") no-repeat center center;
  background-size: cover;
  text-align: center;
}

.concept{
  position: relative;
  z-index: 2;
}
.concept .con-catch{
  width: 40%;
  max-width: 244px;
  margin: 0 auto;
}
.concept .con-txt{
  width: 60%;
  margin: 20px auto 0 auto;
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 18*/
  line-height: 3.0;
  text-align: left;
}
.concept .con-txt + p{
  margin: 30px auto 0 auto;
  font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*18 / 25*/
  line-height: 1.0;
  text-align: center;
}


@media screen and (max-width:767px) {
  .concept-img{
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    transform: translate(0,-50%);
    z-index: 1;
  }
  .concept-img figure{
    width: 50%;
  }
  .concept-img figure img{
    display: block;
  }

  .concept-wrap .p01{
    margin-top: calc((150 / 800) * 100%);
  }
  .concept-wrap .p01 img{
    width: calc((calc(200 / 1.5) / var(--cont-width-nv-sp)) * 100%);
    margin-right: auto;
  }
  .concept-wrap .p02{
    margin-top: calc((170 / 800) * 100%);
  }
  .concept-wrap .p02 img{
    width: calc((calc(120 / 1.2) / var(--cont-width-nv-sp)) * 100%);
    margin-right: calc((20 / var(--cont-width-nv-sp)) * 100%);
    margin-left: auto;
  }
  .concept-wrap .p03{
    margin-top: calc((220 / 800) * 100%);
  }
  .concept-wrap .p03 img{
    width: calc((calc(120 / 1.4) / var(--cont-width-nv-sp)) * 100%);
    margin-right: auto;
    margin-left: calc((20 / var(--cont-width-nv-sp)) * 100%);
  }
  .concept-wrap .p04{
    margin-top: calc((260 / 800) * 100%);
  }
  .concept-wrap .p04 img{
    width: calc((calc(200 / 1.5) / var(--cont-width-nv-sp)) * 100%);
    margin-right: 0;
    margin-left: auto;
  }
  .concept-wrap .p05{
    margin-top: calc((380 / 800) * 100%);
  }
  .concept-wrap .p05 img{
    width: calc((calc(180 / 1.5) / var(--cont-width-nv-sp)) * 100%);
    margin-right: auto;
    margin-left: calc((10 / var(--cont-width-nv-sp)) * 100%);
  }
  .concept-wrap .p06{
    margin-top: calc((550 / 800) * 100%);
  }
  .concept-wrap .p06 img{
    width: calc((calc(180 / 1.5) / var(--cont-width-nv-sp)) * 100%);
    margin-right: calc((10 / var(--cont-width-nv-sp)) * 100%);
    margin-left: auto;
  }
}

@media print, screen and (min-width:768px) {
  .concept-wrap{
    height: 1100px;
    padding: 120px 0 200px 0;
    background-image: url("../images/bg02_sp.webp");
  }
  .concept{}
  .concept .con-catch{
    width: 40%;
    max-width: 244px;
    margin: 0 auto;
  }
  .concept .con-txt{
    width: auto;
    max-width: 440px;
    margin-top: 75px;
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*13 / 16*/
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
  }
  .concept .con-txt + p{
    margin-top: 60px;
    padding-right: 0.2em;
    font-size: clamp(calc(25px * var(--font-markup)), calc(25vw / var(--vw-pc)), 25px);/*18 / 25*/
    letter-spacing: 0.2em;
  }
  .concept-img{
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: var(--cont-width-pc-wide01);
    transform: translate(-50%,0);
  }
  .concept-wrap figure{
    position: absolute;
  }
  
  .concept-wrap .p01{
    left: 0;
    top: calc((135 / 1100) * 100%);
    width: calc((200 / calc(var(--cont-width-nv-pc-wide01))) * 100%);
  }  
  .concept-wrap .p02{
    right:calc((165 / var(--cont-width-nv-pc-wide01)) * 100%);
    top: calc((135 / 1100) * 100%);
    width: calc((120 / calc(var(--cont-width-nv-pc-wide01))) * 100%);
  }
  .concept-wrap .p03{
    left: calc((170 / var(--cont-width-nv-pc-wide01)) * 100%);
    top: calc((440 / 1100) * 100%);
    width: calc((120 / calc(var(--cont-width-nv-pc-wide01))) * 100%);
  }
  .concept-wrap .p04{
    right: 0;
    top: calc((390 / 1100) * 100%);
    width: calc((200 / calc(var(--cont-width-nv-pc-wide01))) * 100%);
  }
  .concept-wrap .p05{
    left: calc((90 / var(--cont-width-nv-pc-wide01)) * 100%);
    top: calc((740 / 1100) * 100%);
    width: calc((200 / calc(var(--cont-width-nv-pc-wide01))) * 100%);
  }
  .concept-wrap .p06{
    right: calc((90 / var(--cont-width-nv-pc-wide01)) * 100%);
    top: calc((790 / 1100) * 100%);
    width: calc((200 / calc(var(--cont-width-nv-pc-wide01))) * 100%);
  }
  
  /*
  .concept-wrap .p01{
    margin-top: calc((120 / 1100) * 100%);
  }
  .concept-wrap .p01 img{
    width: calc((200 / calc(var(--cont-width-nv-pc-wide01) / 2)) * 100%);
  }
  .concept-wrap .p02{
    margin-top: calc((135 / 1100) * 100%);
  }
  .concept-wrap .p02 img{
    width: calc((120 / calc(var(--cont-width-nv-pc-wide01) / 2)) * 100%);
    margin-right:calc((165 / var(--cont-width-nv-pc-wide01)) * 100%);
  }
  .concept-wrap .p03{
    margin-top: calc((80 / 1100) * 100%);
  }
  .concept-wrap .p03 img{
    width: calc((120 / calc(var(--cont-width-nv-pc-wide01) / 2)) * 100%);
    margin-left: calc((170 / var(--cont-width-nv-pc-wide01)) * 100%);
  }
  .concept-wrap .p04{
    margin-top: calc((55 / 1100) * 100%);
  }
  .concept-wrap .p04 img{
    width: calc((200 / calc(var(--cont-width-nv-pc-wide01) / 2)) * 100%);
    margin-left: auto;
  }
  .concept-wrap .p05{
    margin-top: calc((90 / 1100) * 100%);
  }
  .concept-wrap .p05 img{
    width: calc((200 / calc(var(--cont-width-nv-pc-wide01) / 2)) * 100%);
    margin-left: calc((90 / var(--cont-width-nv-pc-wide01)) * 100%);
  }
  .concept-wrap .p06{
    margin-top: calc((200 / 1100) * 100%);
  }
  .concept-wrap .p06 img{
    width: calc((200 / calc(var(--cont-width-nv-pc-wide01) / 2)) * 100%);
    margin-right: calc((90 / var(--cont-width-nv-pc-wide01)) * 100%);
  }
  */
}




/*red-wrap [
----------------------------------------------------------- */
.red-wrap{}
.red-wrap .ttl-en{
  color: var(--color-key03);
}
.red-wrap .red-lp{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.red-wrap ul{}
.red-wrap ul li{}
.red-wrap ul li + li{
  margin: 40px 0 0 0;
}
.red-wrap ul li .red-circle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 180px;
  margin: 0 auto;
  background: url("../images/red_circle.svg") no-repeat center center;
  background-size: cover;
  border-radius: 50%;
  aspect-ratio: 1/1;
  color: var(--color-white);
}
.red-wrap ul li .red-circle img{
  max-width: 110px;
  margin: -10px auto 0 auto;
}
.red-wrap ul li .red-circle p{
  padding-left: 0.2em;
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-sp)), 28px);/*28 / 30*/
  letter-spacing: 0.2em;
}
.red-wrap ul li .red-circle p span{
  display: block;
  margin: 12px 0 10px 0;
  padding-left: 0.05em;
  font-size: calc((16 / 30) * 100%);
  letter-spacing: 0.05em;
}

.red-wrap ul li > p{
  margin: 30px 0 0 0;
  text-align: left;
}
.red-wrap ul li > dl{
  margin: 10px 0 0 0;
  font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*13 / 13*/
  text-align: left;
}
.red-wrap ul li > dl dt::first-letter{
  color: var(--color-key02);
}
.red-wrap ul li > figure{
  margin: 20px 0 0 0;
}

@media screen and (max-width:767px) {
  .red-wrap ul li > dl{
    display: flex;
  }
  .red-wrap ul li > dl dd::before{
    content: "／";
    display: inline-block;
    margin: 0 5px;
  }
  
}

@media print, screen and (min-width:768px) {
  .red-wrap{}
  .red-wrap .ttl-en{}
  .red-wrap .red-lp{}
  .red-wrap ul{
    display: flex;
    justify-content: space-between;
  }
  .red-wrap ul li{
    width: calc((230 / var(--cont-width-nv-pc)) * 100%);
  }
  .red-wrap ul li + li{
    margin-top: 0;
  }
  .red-wrap ul li .red-circle{}
  .red-wrap ul li .red-circle img{
    margin-top: -20px;
  }
  .red-wrap ul li .red-circle p{
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*28 / 30*/
  }
  .red-wrap ul li .red-circle p span{}

  .red-wrap ul li > p{}
  .red-wrap ul li > dl{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-pc)), 13px);/*13 / 13*/
    text-align: left;
  }
  .red-wrap ul li > dl dt::first-letter{
    color: var(--color-key02);
  }
  .red-wrap ul li > figure{}
}



/*dev-wrap [
----------------------------------------------------------- */
.dev-wrap{
  background: var(--color-key04);
}
.dev-wrap .ttl-en{
  color: var(--color-key03);
}
.dev-wrap ul{}
.dev-wrap ul li{
  padding: 0 20px 20px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-def03);
  box-shadow: 2px 2px 1px rgba(var(--color-black-rgb),0.1);
}
.dev-wrap ul li + li{
  margin: 30px 0 0 0;
}
.dev-wrap ul li .logo-dev{
  width: 100%;
  max-width: 270px;
  margin: 0 auto;
  padding: 25px 0;
}
.dev-wrap ul li figure{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0 0;
}
.dev-wrap ul li figure img{
  display: block;
  width: calc((100% - 10px) / 2);
}
.dev-wrap ul li figure img:nth-of-type(1){
  width: 100%;
}
.dev-wrap ul li figure figcaption{
  width: 100%;
  margin-top: -5px;
  text-align: right;
  line-height: 1.0;
}


@media print, screen and (min-width:768px) {
  .dev-wrap{}
  .dev-wrap .ttl-en{}
  .dev-wrap ul{
    display: flex;
    justify-content: space-between;
  }
  .dev-wrap ul li{
    width: calc((520 / var(--cont-width-nv-pc)) * 100%);/*520 / 1080*/
    padding: 0 calc((60 / var(--cont-width-nv-pc)) * 100%) 50px calc((60 / var(--cont-width-nv-pc)) * 100%) ;/*60 / 1080*/
  }
  .dev-wrap ul li + li{
    margin-top: 0;
  }
  .dev-wrap ul li .logo-dev{
    padding: 60px 0 50px 0;
  }
  .dev-wrap ul li p{
    min-height: 8em;
  }
  .dev-wrap ul li figure{
    margin-top: 40px;
  }
  .dev-wrap ul li figure img{}
  .dev-wrap ul li figure img:nth-of-type(1){}
}


/*yokoku [
----------------------------------------------------------- */
.yokoku{
  padding: 15px 20px;
  border: 1px solid var(--color-def02);
}
.yokoku dt{
  padding: 0 0 15px 0;
  border-bottom: 1px solid var(--color-def02);
  font-size: 16pt;
  letter-spacing: 0.2em;
  text-align: center;
}
.yokoku dd{
  padding: 15px 0 0 0;
  /*font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);13 / 13*/
  /*font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);15 / 15*/
  font-size: clamp(calc(10px * var(--font-markup)), calc(10vw / var(--vw-sp)), 10px);/*10 / 15*/
  text-align: left;
  line-height: var(--line-height);
}

@media screen and (min-width:768px) {
  .yokoku{
    display: flex;
    padding: 15px 0;
  }
  .yokoku dt{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10em;
    padding: 0 0 0 0.2em;
    border-right: 1px solid var(--color-def02);
    border-bottom: none;
  }
  .yokoku dd{
    margin: 0 0 0 20px;
    padding: 0 20px 0 0;
    /*font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-pc)), 13px);13 / 13*/
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-pc)), 15px);/*10 / 15*/
  }

}