@charset "UTF-8";

.caption{
  background: var(--color-def04);
}

/*mvWrap
--------------------------------- */
.mvSlide,
.mvCatch{
  width: 50%;
  height: calc(100dvh - 192px + 32px);
  height: calc(100vh - 192px + 32px);
  /*min-height: 720px;*/
}
.mvSlide{
  position: fixed;
  right: 0;
  top: calc(192px - 32px);
  z-index: -1;
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/*縦向きのみの記述*/
	.mvSlide{
    top: 70px;
  }
}


.mvSlide .swiper,
.mvSlide .swiper-wrapper,
.mvSlide .swiper-slide,
.mvSlide figure{
  height: 100%;
}
.mvSlide figure{
  position: relative;
}
.mvSlide figure img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mvSlide .mv01 figure img{
  object-position: center bottom;
}
.mvSlide .mv02 figure img{
  object-position: center center;
}
.mvSlide figure .cap{
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: var(--color-white);
}
.mvCatch{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0 0;
}
.mvCatch figure{
  margin-top: -37px;
}
.mvCatch .mt01{
  margin: 0 0 40px 0;
  color: var(--color-key01);
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: clamp(calc(34px * var(--font-markup)), calc(34vw / var(--vw-pc)), 30px);/*34 / 24*/
  letter-spacing: 0.5em;
  text-align: left;
  line-height: 1.0;
}
.mvCatch .mt01 span{
  text-combine-upright: all;
}

.mvCatch .mt02{
  padding-left: 0.1em;
  color: var(--color-key01);
  font-size: clamp(calc(32px * var(--font-markup)), calc(30vw / var(--vw-pc)), 32px);/*32 / 22*/
  letter-spacing: 0.1em;
  line-height: 1.0;
}
.mvCatch .mt03{
  margin: 20px 0 0 0;
  color: var(--color-key01);
  padding-left: 0.1em;
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 16*/
  letter-spacing: 0.1em;
  line-height: 1.0;
}


/* for pc*/
@media screen and (min-width: 768px) {
  .mvCatch02{
    display: none;
  }
}

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

/* for sp*/
@media screen and (max-width: 767px) {
  .mvSlide,
  .mvCatch{
    width: 100%;
    height: auto;
  }
  .mvSlide{
    position: static;
    right: auto;
    top: auto;
  }
  .mvSlide .swiper,
  .mvSlide .swiper-wrapper,
  .mvSlide .swiper-slide,
  .mvSlide figure{
    height: auto;
  }
  .mvSlide figure{}
  .mvSlide figure img{
    height: auto;
    object-fit: unset;
  }
  .mvSlide .mv01 figure img{
    object-position: unset;
  }
  .mvSlide .mv02 figure img{
    object-position: unset;
  }
  .mvSlide figure .cap{}
  
  .mvCatch{
    display: block;
    margin: 0;
    padding: 40px 0;
  }
  .mvCatch figure{
    margin-top: 0;
  }
  .mvCatch02{
    padding: 30px 0;
    color: var(--color-key01);
  }
  .mvCatch .mt01{
    margin: 0;
    padding: 0 0 0 0.5em;
    -ms-writing-mode: unset;
    writing-mode: unset;
    font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-sp)), 24px);/*34 / 24*/
    letter-spacing: 0.5em;
    text-align: center;
    font-feature-settings: "palt";
  }
  .mvCatch .mt01 span{
    text-combine-upright: all;
  }
  
  .mvCatch .mt02,
  .mvCatch02 .mt02{
    font-size: clamp(calc(26px * var(--font-markup)), calc(26vw / var(--vw-sp)), 26px);/*30 / 26*/
  }
  .mvCatch .mt03,
  .mvCatch02 .mt03{
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*20 / 16*/
  }
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/*縦向きのみの記述*/
  
}

/* for tablet*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation:landscape) {
/*横向きのみの記述*/
  
}

/*mvList
--------------------------------- */
.mvList{
  width: 50%;
  margin: 0 auto 0 0;
}
.mvList ul{
  width: calc((400 / 640) * 100%);
  margin: 0 auto;
}
.mvList ul li{
  padding: 50px 0 40px 0;
  border-bottom: 1px solid var(--color-key01);
  text-align: left;
  font-feature-settings: "palt";
}
/*.mvList ul li:nth-of-type(1){
  border-top: 1px solid var(--color-key01);
}*/
.mvList ul li .t01{
  color: var(--color-key01);
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 14*/
  line-height: 1.0;
  letter-spacing: 0.2em;
}
.mvList ul li .t02{
  /*margin: 20px 0 0 0;*/
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 14*/
  line-height: 1.0;
  letter-spacing: 0.05em;
}
.mvList ul li .t03{
  margin: 15px 0 0 0;
  color: var(--color-key01);
  font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-pc)), 30px);/*30 / 25*/
  line-height: 1.0;
  letter-spacing: 0.05em;
}
.mvList ul li:nth-of-type(4) .t03{
  letter-spacing: normal;
  font-feature-settings: "palt";
}
.mvList ul li .t03 span{
  font-size: calc((16 / 30) * 100%);
  letter-spacing: normal;
}
.mvList ul li .btn {
  margin: 25px 0 0 auto;
  width: 180px;
  height: 40px;
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 14*/
  letter-spacing: 0.1em;
  line-height: 1.0;
}
.mvList ul li .btn > a{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0 0 20px;
  background: var(--color-key01);
  border-radius: 200px;
  color: #fff;
  transition: var(--transition-duration01);
  text-decoration: none;
}
.mvList ul li .btn > a::after{
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  display: block;
  width: 30px;
  height: 7px;
  background-image: url("../img/cmn/ico_arrow_wh.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  transform: translate(0,-50%);
  transition: var(--transition-duration01);
}

/*hover*/
.mvList ul li .btn > a:hover{
  background: var(--color-def01);
}
.mvList ul li .btn > a:hover::after{
  transform: translate(5px,-50%);
}

/* for sp*/
@media screen and (max-width: 767px) {
  .mvList{
    width: 100%;
    margin: 0;
  }
  .mvList ul{
    width: calc(100% - 6.44vw * 2);
  }
  .mvList ul li{
    padding: 30px 0 30px 0;
  }
  .mvList ul li .t01{
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*16 / 14*/
  }
  .mvList ul li .t02{
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*16 / 14*/
  }
  .mvList ul li .t03{
    margin-top: 10px;
    font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-sp)), 24px);/*30 / 25*/
  }
  .mvList ul li .t03 span{}
  .mvList ul li .btn {
    width: 135px;
    height: 30px;
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*16 / 14*/
  }
  .mvList ul li .btn > a{
    padding-left: 15px;
  }
  .mvList ul li .btn > a::after{
    right: 15px;
    width: 27px;
    height: 6px;
  }

  /*hover*/
  .mvList ul li .btn > a:hover{}
  .mvList ul li .btn > a:hover::after{}
}


/*info
--------------------------------- */
.information{
  padding: 160px 0 140px 0;
  background: var(--color-def04);
}
.information > div{
  position: relative;
  padding: 95px 0 120px 0;
  background: var(--color-white);
  text-align: center;
}
.information .t00{
  padding-left: 0.2em;
  font-size: clamp(calc(23px * var(--font-markup)), calc(23vw / var(--vw-pc)), 23px);/*23 / 18*/
  line-height: 1.0;
  letter-spacing: 0.2em;
}

.information .t01{
  margin: 50px 0 0 0;
  padding-left: 0.2em;
  font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);/*18 / 16*/
  line-height: 1.0;
  letter-spacing: 0.2em;
}
.information .t02{
  margin: 20px 0 0 0;
  padding-left: 0.5em;
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*28 / 22*/
  line-height: 1.0;
  letter-spacing: 0.5em;
}
.information .t03{
  margin: 50px 0 0 0;
  padding-left: 0.1em;
  font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-pc)), 15px);/*15 / 14*/
  line-height: 1.0;
  letter-spacing: 0.1em;
}

.information .merit{
  display: flex;
  background: var(--color-white);
  border: 1px solid var(--color-key01);
  margin: 60px 0 0 0;
}
.information .merit li{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% / 3);
  min-height: 300px;
  align-content: 0 10px;
  color: var(--color-key01);
  text-align: center;
}
.information .merit li + li{
  border-left: 1px solid var(--color-key01);
}

.information .merit li .fEn{
  padding-left: 0.05em;
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*28 / 22*/
  letter-spacing: 0.05em;
  line-height: 1.0;
}
.information .merit li .fEn::before{
  content: "LIMITED";
  display: block;
  margin: 0 0 5px 0;
  padding-left: 0.3em;
  font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);/*18 / 15*/
  letter-spacing: 0.3em;
}

.information .merit li .fEn + p{
  margin: 40px 0 0 0;
  padding-left: 0.2em;
  font-size: clamp(calc(25px * var(--font-markup)), calc(25vw / var(--vw-pc)), 25px);/*25 / 20*/
  letter-spacing: 0.2em;
  font-variant-east-asian: 1.0;
}
.information .merit li .fEn + p + p{
  margin: 20px 0 0 0;
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 13*/
  letter-spacing: normal;
  font-variant-east-asian: 1.0;
}

.information .btnList{
  margin: 70px 0 0 0;
}
.information .btnList .btn{
  width: calc((600 / var(--cont-width-nv-pc)) * 100%);
	font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 18*/
}
.information .btnList .btn > *{
  height: 120px;
  background: var(--color-key01);
  color: var(--color-white);
}
.information .btnList .btn > *:hover{
  background: var(--color-def02);
}



/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 834px) and (orientation:portrait) {
/*縦向きのみの記述 --- iPad Pro12.9はPC表示*/

}


/* for sp */
@media screen and (max-width: 767px) {
  .information{
    padding: 70px 0 80px 0;
  }
  .information > div{
    padding: 40px 0;
  }
  .information > div > div{
    padding: 0 calc((40 / 320) * 100%);
  }
  
  .information .t00{
    padding-left: 0.1em;
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*23 / 18*/
    letter-spacing: 0.1em;
  }

  .information .t01{
    margin-top: 30px;
    padding-left: 0.2em;
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*18 / 16*/
    line-height: 1.0;
    letter-spacing: 0.2em;
  }
  .information .t02{
    margin-top: 15px;
    padding-left: 0.2em;
    font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-sp)), 22px);/*28 / 22*/
    letter-spacing: 0.2em;
  }
  .information .t03{
    margin-top: 30px;
    padding-left: 0;
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);/*15 / 14*/
    letter-spacing: normal;
    line-height: var(--line-height);
  }

  .information .merit{
    display: block;
    margin-top: 30px;
  }
  .information .merit li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: auto;
    padding: 30px 10px;
  }
  .information .merit li + li{
    border-left: none;
    border-top: 1px solid var(--color-key01);
  }

  .information .merit li .fEn{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(calc(22px * var(--font-markup)), calc(22vw / var(--vw-sp)), 22px);/*28 / 22*/
  }
  .information .merit li .fEn::before{
    margin: 0 10px 0 0;
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*18 / 15*/
  }

  .information .merit li .fEn + p{
    margin-top: 15px;
    padding-left: 0.2em;
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*25 / 20*/
    letter-spacing: 0.1em;
  }
  .information .merit li .fEn + p + p{
    margin-top: 5px;
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*16 / 13*/
  }

  .information .btnList{
    margin-top: 40px;
  }
  .information .btnList .btn{
    width: 100%;
    font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-sp)), 18px);/*20 / 18*/
  }
  .information .btnList .btn > *{
    height: 80px;
  }
  .information .btnList .btn > *:hover{}
  
}


/*concept
--------------------------------- */
.concept{
  padding: 100px 0 85px 0;
  background: var(--color-white);
}
.concept > div{
  position: relative;
}
.concept > div > div{
  position: absolute;
  left: 50%;
  top: calc((65 / 1200) * 100%);
  width: 90%;
  color: var(--color-white);
  text-align: center;
  transform: translate(-50%,0);
}
.concept > div > div img{
  width: calc((280 / --cont-width-nv-pc) * 100%);
  margin: 0 auto 20px auto;
}
.concept > div > div h2{
  padding-left: 0.4em;
  margin-bottom: 40px;
  letter-spacing: 0.4em;
}
.concept > div > div p{
  padding-left: 0.05em;
  line-height: var(--line-height-wide02);
  letter-spacing: 0.05em;
}

/* for sp */
@media screen and (max-width: 767px) {
  .concept{
    padding: 70px 0 50px 0;
  }
  .concept > div{
    position: relative;
    /*padding: 70px 0 0 0;*/
    padding: 0;
    background-image: linear-gradient(180deg, #78bcff, #78bcff 50%, transparent 51% 100%);
  }
  .concept > div > div{
    top: 50px;
  }
  .concept > div > div img{
    width: 60%;
    margin-bottom: 15px;
  }
  .concept > div > div h2{
    padding-left: 0.2em;
    margin-bottom: 20px;
    letter-spacing: 0.2em;
  }
  .concept > div > div p{
    line-height: 2.0;
  }
  .concept figcaption.cap{
    margin-left: 10px;
    margin-right: 10px;
  }
}




/*conList
----------------------------*/

.conListWrap{
  background: var(--color-white);
}
.conListWrap .conBlock {
  width: 100%;
  height: calc(100vh - 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: sticky;
  top: 160px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  overflow: hidden;
}



.conListWrap .conBlock > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100% !important;
}
.conListWrap .conBlock > div > figure {
  max-width: 350px;
}

.conListWrap .conBlock > div > div {
  width: calc((430 / var(--cont-width-nv-pc)) * 100%);
  text-align: left;
}
.conListWrap .conBlock > div > div::before {
  content: "";
  position: relative;
  display: block;
  width: calc((144 / 430) * 100%);
  max-width: 144px;
  aspect-ratio: 144/32;
  background: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 1;
}
.conListWrap .conBlock .t01 {
  position: relative;
  margin: 15px 0 0 0;
  font-size: clamp(calc(100px * var(--font-markup)), calc(100vw / var(--vw-pc)), 100px);/*100 / 50*/
  letter-spacing: normal;
  line-height: 1.0;
}
.conListWrap .conBlock .t02 {
  padding: 35px 0 0 0;
  font-size: clamp(calc(18px * var(--font-markup)), calc(18vw / var(--vw-pc)), 18px);/*18 / 16*/
  letter-spacing: 0.5em;
}
.conListWrap .conBlock .btn {
  margin: 35px 0 0 0;
  width: 100%;
  max-width: 270px;
  height: 50px;
  font-size: clamp(calc(15px* var(--font-markup)), calc(15vw / var(--vw-pc)), 15px);
  letter-spacing: 0.2em;
  line-height: 1.0;
}
.conListWrap .conBlock .btn > *{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0 0 25px;
  /*background: #887263;*/
  border-width: 1px;
  border-style: solid;
  /*border-color: #887263;*/
  border-radius: 200px;
  color: #fff;
  transition: var(--transition-duration01);
  text-decoration: none;
}
.conListWrap .conBlock .btn > *::after{
  content: "";
  position: absolute;
  right: 25px;
  top: 50%;
  display: block;
  width: 27px;
  height: 6px;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  transform: translate(0,-50%);
  transition: var(--transition-duration01);
}



/*ブロックごと*/
.conListWrap .conBlock:nth-of-type(2n) {
  background: var(--color-key01);
}
.conListWrap .conBlock:nth-of-type(2n) > div > div::before {
  background-image: url("../img/cmn/con_txt_col02.svg");
}
.conListWrap .conBlock:nth-of-type(2n) .t01 {
  color: #c0dfc8;
}
.conListWrap .conBlock:nth-of-type(2n) .t02 {
  color: var(--color-white);
}
.conListWrap .conBlock:nth-of-type(2n) .btn a {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-key01);
}
.conListWrap .conBlock:nth-of-type(2n) .btn a::after{
  background-image: url("../img/cmn/ico_arrow_col01.svg");  
}
.conListWrap .conBlock:nth-of-type(2n) .cap {
  color: var(--color-white);
}

.conListWrap .conBlock:nth-of-type(2n+1) {
   background: var(--color-def04);
}
.conListWrap .conBlock:nth-of-type(2n+1) > div > div::before {
  background-image: url("../img/cmn/con_txt_col01.svg");
}
.conListWrap .conBlock:nth-of-type(2n+1) .t01 {
  color: #cdc8be;
}
.conListWrap .conBlock:nth-of-type(2n+1) .t02 {
  color: var(--color-def01);
}
.conListWrap .conBlock:nth-of-type(2n+1) .btn a {
  background: var(--color-key01);
  border-color: var(--color-key01);
  color: var(--color-white);
}
.conListWrap .conBlock:nth-of-type(2n+1) .btn a::after{
  background-image: url("../img/cmn/ico_arrow_wh.svg");   
}

/*コンセプト*//*テクノロジー*/
.conListWrap .conBlock.conConcept,
.conListWrap .conBlock.conTec{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: var(--color-white);
  text-align: center;
}
.conListWrap .conBlock.conConcept::before,
.conListWrap .conBlock.conTec::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  mix-blend-mode: multiply;
  transform: translate(-50%,0);
}
.conListWrap .conBlock.conConcept > div,
.conListWrap .conBlock.conTec > div{
  position: relative;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.conListWrap .conBlock.conConcept > div > div,
.conListWrap .conBlock.conTec > div > div {
  width: 100%;
  text-align: center;
}
.conListWrap .conBlock.conConcept > div > div::before,
.conListWrap .conBlock.conTec > div > div::before{
  content: none;
}
.conListWrap .conBlock.conConcept .t01,
.conListWrap .conBlock.conTec .t01{
  color: var(--color-white);
  font-size: clamp(calc(70px * var(--font-markup)), calc(70vw / var(--vw-pc)), 70px);/*70 / 40*/
}
.conListWrap .conBlock.conConcept .t02,
.conListWrap .conBlock.conTec .t02 {
  padding: 5% 0;
  color: var(--color-white);
}
.conListWrap .conBlock.conConcept .btn,
.conListWrap .conBlock.conTec .btn{
  margin-left: auto;
  margin-right: auto;
}
.conListWrap .conBlock.conConcept .btn a,
.conListWrap .conBlock.conTec .btn a{
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.conListWrap .conBlock.conConcept .btn a::after,
.conListWrap .conBlock.conTec .btn a::after{
  background-image: url("../img/cmn/ico_arrow_wh.svg");   
}

.conListWrap .conBlock.conConcept > .cap,
.conListWrap .conBlock.conTec > .cap{
  position: absolute;
  right: 5px;
  bottom: 20px;
}


/*コンセプト*/
.conListWrap .conBlock.conConcept {
  background-image: url("../img/top/btn_concept_pc.jpg");
}
.conListWrap .conBlock.conConcept::before {
  background: #484641;
}
.conListWrap .conBlock.conConcept .t02 {
  padding-top: 30px;
}
.conListWrap .conBlock.conConcept .t03 {
  margin-top: 60px;
  padding-left: 0.1em;
  font-size: clamp(calc(40px * var(--font-markup)), calc(40vw / var(--vw-pc)), 40px);/*40 / 20*/
  letter-spacing: 0.1em;
}
.conListWrap .conBlock.conConcept .t04 {
  margin-top: 10px;
  font-size: clamp(calc(25px * var(--font-markup)), calc(25vw / var(--vw-pc)), 25px);/*25 / 15*/
}


/*テクノロジー*/
.conListWrap .conBlock.conTec {
  background-image: url("../img/top/btn_tec_pc.jpg");
}
.conListWrap .conBlock.conTec::before {
  background: #333;
}
.conListWrap .conBlock.conTec .t02 {
  padding: 10% 0 5% 0;
}


/*hover*/
.conListWrap .conBlock .btn > a:hover{
  background: var(--color-def01);
  border-color: var(--color-def01);
  color: var(--color-white);
}
.conListWrap .conBlock .btn > a:hover::after{
  background-image: url("../img/cmn/ico_arrow_wh.svg"); 
  transform: translate(5px,-50%);
}


@media screen and (max-width: 767px) {
  .conListWrap{}
  .conListWrap .conBlock {
    height: calc(100vh - 120px);
    align-items: flex-start;
    justify-content: center;
    top: 100px;
    padding-top: 40px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .conListWrap .conBlock > div {
    flex-direction: column;
    justify-content: center;
    padding: 0 25px;
  }
  .conListWrap .conBlock > div > figure {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16/9;
    margin: 30px auto 0 auto;
  }
  .conListWrap .conBlock > div > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .conListWrap .conBlock > div > div {
    justify-content: center;
    width: 100%;
  }
  .conListWrap .conBlock > div > div::before {}
  .conListWrap .conBlock .t01 {
    margin-top: 5px;
    font-size: clamp(calc(50px * var(--font-markup)), calc(50vw / var(--vw-sp)), 50px);/*100 / 50*/
  }
  .conListWrap .conBlock .t02 {
    padding-top: 15px;
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*18 / 16*/
    letter-spacing: 0.1em;
  }
  .conListWrap .conBlock .btn {
    margin-top: 20px;
    width: 70%;
    height: 36px;
    font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-sp)), 14px);
    letter-spacing: 0.1em;
  }
  .conListWrap .conBlock .btn > *{
    padding-left: 15px;
  }
  .conListWrap .conBlock .btn > *::after{
    right: 15px;
    width: 27px;
    height: 6px;
  }
  
  
  /*ブロックごと*/
  .conListWrap .conBlock:nth-of-type(2n) {}
  .conListWrap .conBlock:nth-of-type(2n) > div > div::before {}
  .conListWrap .conBlock:nth-of-type(2n) .t01 {}
  .conListWrap .conBlock:nth-of-type(2n) .t02 {}
  .conListWrap .conBlock:nth-of-type(2n) .btn a {}
  .conListWrap .conBlock:nth-of-type(2n) .btn a::after{}
  .conListWrap .conBlock:nth-of-type(2n) .cap {}

  .conListWrap .conBlock:nth-of-type(2n+1) {}
  .conListWrap .conBlock:nth-of-type(2n+1) > div > div::before {}
  .conListWrap .conBlock:nth-of-type(2n+1) .t01 {}
  .conListWrap .conBlock:nth-of-type(2n+1) .t02 {}
  .conListWrap .conBlock:nth-of-type(2n+1) .btn a {}
  .conListWrap .conBlock:nth-of-type(2n+1) .btn a::after{}

  /*コンセプト*//*テクノロジー*/
  .conListWrap .conBlock.conConcept,
  .conListWrap .conBlock.conTec{}
  .conListWrap .conBlock.conConcept::before,
  .conListWrap .conBlock.conTec::before{}
  .conListWrap .conBlock.conConcept > div,
  .conListWrap .conBlock.conTec > div{}

  .conListWrap .conBlock.conConcept > div > div,
  .conListWrap .conBlock.conTec > div > div {}
  .conListWrap .conBlock.conConcept > div > div::before,
  .conListWrap .conBlock.conTec > div > div::before{}
  .conListWrap .conBlock.conConcept .t01,
  .conListWrap .conBlock.conTec .t01{
    font-size: clamp(calc(40px * var(--font-markup)), calc(40vw / var(--vw-sp)), 40px);/*70 / 40*/
  }
  .conListWrap .conBlock.conConcept .t02,
  .conListWrap .conBlock.conTec .t02 {}
  .conListWrap .conBlock.conConcept .btn,
  .conListWrap .conBlock.conTec .btn{}
  .conListWrap .conBlock.conConcept .btn a,
  .conListWrap .conBlock.conTec .btn a{}
  .conListWrap .conBlock.conConcept .btn a::after,
  .conListWrap .conBlock.conTec .btn a::after{}


  /*コンセプト*/
  .conListWrap .conBlock.conConcept {
    padding-top: 60px;
    background-image: url("../img/top/btn_concept_sp.jpg");
  }
  .conListWrap .conBlock.conConcept::before {}
  .conListWrap .conBlock.conConcept .t02 {
    padding-top: 15px;
  }
  .conListWrap .conBlock.conConcept .t03 {
    margin-top: 20px;
    padding-left: 0.05em;
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*40 / 20*/
    letter-spacing: 0.05em;
  }
  .conListWrap .conBlock.conConcept .t04 {
    margin-top: 10px;
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*25 / 15*/
  }


  /*テクノロジー*/
  .conListWrap .conBlock.conTec {
    align-items: center;
    background-image: url("../img/top/btn_tec_sp.jpg");
  }
  .conListWrap .conBlock.conTec::before {}
  .conListWrap .conBlock.conTec .t02 {}


  /*hover*/
  .conListWrap .conBlock .btn > a:hover{}
  .conListWrap .conBlock .btn > a:hover::after{}
  
}