/*====================================================
////id |  mv
====================================================*/
#mv {
  padding-top: var(--header_top);
}
.mv-inner {
  padding: 0 0 var(--header_top);
}
.mv-visual {
  border-radius: 10px 0 0 10px;
  overflow: hidden;
  position: relative;
}
.mv-visual-video {
  margin: auto;
  /* padding-left: 215%;
  position: absolute;
    top: 0;
    left: -50%;
    right: -50%;
  width: 0;
  height: 100%; */
  position: absolute;
    top: 0;
    left: -50vw;
    right: -50vw;
  width: 150vw;
  height: 100%;
}
.mv-visual-video video {
  position: absolute;
    top: 0;
    left: 0;
  width: 100%;
  height: 100%;
}
.mv-img {
  border-radius: 0 8px 0 0;
  margin-left: calc(var(--innerBox_margin) * -1);
  overflow: hidden;
}
.mv-img-slide .coverImg {
  padding-top: 51.51%;
}
.mv-head {
  font-weight: 100;
  line-height: 1.2;
  margin: 0;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 1220.0px) {
  .mv-visual {
    transform: translateX(var(--innerBox_margin));
    width: 100%;
    height: min(69.333vw, 600px);
  }
  .mv-visual-video {
    min-height: 69.333vw;
  }
  .mv-content {
    padding-bottom: 4.25vw;
    position: relative;
    z-index: 10;
  }
  .mv-head {
    font-size: min(12.266vw, 8rem);
    margin-top: -1.2em;
  }
  .mv-text {
    margin-top: .8em;
  }
  .mv-img {
    width: min(70vw, 600px);

  }
}

/* ////////// PC ////////// */
@media print,screen and (min-width: 1220.1px) {
  .mv-inner {
    display: grid;
      grid-gap: 80px 30px;
      grid-template-columns: min(35vw, 600px) 1fr;
      grid-template-rows: 1fr auto;
  }
  .mv-visual {
    grid-column: 2;
    grid-row: 1 / 3;
    width: calc(100% + var(--innerBox_margin));
  }
  .mv-content {
    display: flex;
      align-items: flex-end;
  }
  .mv-head {
    font-size: min(7vw, 9.2rem);
    margin-top: .5em;
  }
  .mv-text {
    font-size: 2rem;
    margin-top: 1.5em;
  }
  .mv-img {
    width: 100%;
  }
}

@media print,screen and (min-width: 1600.1px) {
  .mv-inner {
    height: calc(100svh - (var(--header_h) + (var(--header_top) * 2)));
      min-height: 850px;
      max-height: 70vw;
  }
  .mv-content {
    align-items: center;
  }
}

@media (hover: hover) {}



/*====================================================
////id |  products
====================================================*/
#products {
  overflow: hidden;
}
.en_jp {
  font-size: min(8vw, 4.5rem);
}
.products-inner {
  padding-bottom: 0;
}
.products-item-wrapper {
  border: solid var(--color_2);
  border-width: 1px 0;
  margin: 0 calc(var(--innerBox_margin) * -1);
  padding-left: 10vw;
  position: relative;
  width: calc(100% + (var(--innerBox_margin) * 2));
}
.products-item-wrapper .swiper {
  overflow: visible;
}
.products-item {
  border-left: solid 1px var(--color_2);
  padding: min(7.45vw, 32px) min(4.66vw, 20px);
  position: relative;
  width: min(80vw, 336px) !important;
}
.products-item:last-child::after {
  border-left: solid 1px var(--color_2);
  content: '';
  display: block;
  margin: auto;
  position: absolute;
    top: 0;
    right: 0;
  width: 0;
  height: 100%;
}
.products-item-link {
  width: 100%;
}
.products-item-img .coverImg {
  border-radius: 5px;
  padding-top: 74.324%;
}
.products-item dt {
  font-family: var(--f_maru);
  line-height: 1.4;
  margin-top: 1em;
}
.products-item dd {
  margin-top: .7em;
}
.products-item-wrapper .swiper-controls {
  margin: auto;
  position: absolute;
    right: var(--innerBox_margin);
    bottom: calc(100% + min(8vw, 4.5rem));
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769.0px) {
  .products-item dt {
    font-size: 1.285em;
  }
  .products-link {
    margin-top: min(8.5vw, 50px);
  }

}

/* ////////// PC ////////// */
@media print,screen and (min-width: 769.1px) {
  .products-item dt {
    font-size: 1.375em;
  }
  .products-link {
    margin-top: min(5vw, 50px);
  }
}

@media (hover: hover) {
}



/*====================================================
////id |  projects
====================================================*/
#projects {
  overflow: hidden;
}
.projects-inner {
  padding-bottom: 0;
}
.projects-item-wrapper {
  margin: 0 calc(var(--innerBox_margin) * -1) 0 calc((var(--innerBox_margin) - 5vw) * -1);
  padding-left: calc(min(79.2vw, 962px) - min(50vw, 600px));
  padding-bottom: min(36vw, 280px);
  width: calc(100% + (var(--innerBox_margin) * 2) - 5vw);
}
.projects-slider {
  overflow: visible !important;
}
.projects-item {
  padding: 0 3px;
  width: min(50vw, 600px) !important;
}
.projects-item-link {
  display: block;
  font-size: min(2.66vw, 1.125rem);
  transform-origin: top right;
  width: 100%;
}
.projects-item.swiper-slide-active .projects-item-link {
  transform: scale(1.6);
}
.projects-item.swiper-slide-prev .projects-item-link {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.6);
}
.projects-item .coverImg {
  border-radius: min(1.33vw, 15px);
  padding-top: min(44vw, 364px);
}
.projects-item.swiper-slide-active .coverImg {
  border-radius: min(.833vw, 9.375px);
}
.projects-item-title {
  opacity: 0;
  margin-top: .7em;
  transition: opacity .3s ease-in-out;
}
.projects-item.swiper-slide-active .projects-item-title {
  opacity: 1;
}
.projects-slider .swiper-controls {
  justify-content: flex-end;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 1330.0px) {
  .projects-slider .swiper-controls {
    position: absolute;
      bottom: calc(100% + min(8.666vw, 50px));
      right: var(--innerBox_margin);
  }
}
@media screen and (max-width: 769.0px) {
  /* .projects-item-wrapper {
    padding-bottom: min(30vw, 160px);
  } */
}

/* ////////// PC ////////// */
@media print,screen and (min-width: 1330.1px) {
  .projects-slider .swiper-controls {
    padding-right: var(--innerBox_margin);
  }
  /* .projects-item-wrapper {
    padding-bottom: min(30vw, 160px);
  } */

}

@media (hover: hover) {}



/*====================================================
////id |  techniques
====================================================*/
.techniques-inner {
  padding-bottom: 0;
}
.techniques-img {
  position: relative;
}
.techniques-item-wrapper {
  display: grid;
    grid-gap: min(3.4vw, 24px) min(2.4vw, 18px);
}
.techniques-item {
  background: var(--color_5);
  border-radius: min(2.66vw, 15px);
  padding: min(5.33vw, 40px) min(.5vw, 15px);
  text-align: center;
}
.techniques-item figure {
  display: flex;
    align-items: center;
    justify-content: center;
  height: min(17.6vw, 140px);
}
.techniques-item dt {
  font-weight: 500;
  line-height: 1.6;
  margin: 1em 0 .6em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
  .techniques-inner {
    display: grid;
  }
  .techniques-img {
    grid-row: 1;
    height: min(30vw, 300px);
    position: relative;
  }
  .techniques-img > div {
    margin: auto;
    position: absolute;
  }
  .techniques-img .img-1 {
    top: calc(min(16vw, 60px) * -1);
    right: 53%;
    width: min(52.5vw, 380px);
    max-height: calc(90% + min(16vw, 60px));
  }
  .techniques-img .img-2 {
    right: -2vw;
    bottom: calc(min(12vw, 60px) * -1);
    width: min(32vw, 200px);
  }
  .techniques-item-wrapper {
    grid-template-columns: repeat(2, 1fr);
    margin-top: min(8.5vw, 50px);
  }
  .techniques-item figure {
    height: min(17.6vw, 100px);
  }
  .techniques-item dt {
    font-size: min(3.7333vw, 2rem);
  }
  .techniques-item dd {
    font-size: min(3.2vw, 1.6rem);
  }
  .techniques-link {
    margin-top: min(8.5vw, 50px);
  }
}

/* ////////// PC ////////// */
@media print,screen and (min-width: 960.1px) {
  .techniques-inner {
    display: grid;
      grid-gap: 0 30px;
      grid-template-columns: auto 1fr;
  }
  .techniques-img {
    grid-column: 2;
    grid-row: 1;
  }
  .techniques-detail {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .techniques-item-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
  .techniques-item dt {
    font-size: 2.2rem;
  }
  .techniques-link {
    margin-top: min(5vw, 70px);
  }
}

@media screen and (min-width: 960.1px) and (max-width: 1555.0px) {
  .techniques-img {
    display: flex;
      justify-content: center;
  }
  .techniques-img > div {
    display: flex;
      justify-content: center;
    width: 50%;
  }
  .techniques-img .img-1 figure {
    margin: calc(min(8vw, 70px) * -1) 0 0 auto;
    width: min(100%, 350px);
  }
  .techniques-img .img-2 figure {
    margin: min(5vw, 50px) 0 min(2vw, 20px);
    width: min(50%, 200px);
  }
  .techniques-link {
    grid-column: 1 / 3;
  }

}

@media screen and (min-width: 1555.1px) {
  .techniques-inner {
    grid-template-columns: 1fr 950px;
    grid-template-rows: auto auto 1fr;
  }
  .techniques-img {
    display: flex;
      align-items: center;
      flex-direction: column-reverse;
    grid-column: 1;
    grid-row: 3;
    padding-top: min(10vw, 130px);
  }
  .techniques-img .img-1 {
    margin: 0 auto 0 calc(var(--innerBox_margin) * -.8);
    width: min(22vw, 452px);
  }
  .techniques-img .img-2 {
    width: min(20vw, 240px);
  }
  .techniques-detail {
    grid-column: 2;
    grid-row: 1 / 4;
  }
  .techniques-link {
    display: flex;
      
    grid-column: 1;
    grid-row: 2;

  }
}

@media (hover: hover) {}



/*====================================================
////id |  simulator
====================================================*/
#simulator {
  overflow: hidden;
}
.simulator-inner {
  padding-bottom: 0;
}
.simulator-palette {
  display: grid;
    grid-gap: 24px;
}
.simulator-palette > dl {
  display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0 min(6.4vw, 58px);
  font-weight: 500;
}
.palette_color {
  display: flex;
    flex-wrap: wrap;
    gap: min(9vw, 6px);
}
.palette_color li {
  padding: min(.666vw, 4px);
  position: relative;
}
.palette_color li::before {
  border: solid 1px #9C9C9C;
  border-radius: 100%;
  box-sizing: border-box;
  content: '';
  display: block;
  margin: auto;
  opacity: 0;
  position: absolute;
    top: 0;
    left: 0;
  transition: opacity .2s ease-in-out;
  width: 100%;
  height: 100%;
}
.palette_color li:has(input:checked)::before {
  opacity: 1;
}
.palette_color input[type="radio"] + label {
  border-radius: 100%;
  display: block;
  padding-left: 0;
  transition: transform .2s ease-in-out;
  width: min(5vw, 30px);
  height: min(5vw, 30px);
}
.palette_color label::before,
.palette_color label::after,
.palette_color label .text {
  display: none;
}
.palette_color .name {
  display: flex;
    justify-content: center;
  font-size: .7em;
  font-family: var(--f_maru);
  letter-spacing: .04em;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
    left: -5em;
    right: -5em;
    bottom: calc(100% + 5px);
  transition: .2s ease-in-out;
  transform: translateY(10px);
}
.palette_color .name > span {
  background: var(--l_gray);
  display: block;
  padding: .2em 1em .3em;
}
.simulator-img-wrapper {
  margin: min(6.4vw, 32px) calc(var(--innerBox_margin) * -1) 0;
  overflow: hidden;
  position: relative;
}
.simulator-img {
  position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  width: 100%;
  min-height: 100%;
}
.simulator-img img {
  width: 100%;
  max-width: none;
  max-height: none;
}
.simulator-color {
  mix-blend-mode: multiply;
  position: absolute;
    top: 0;
    left: 0;
  transition: mix-blend-mode 0.4s ease;
  width: 100%;
  height: 100%;
}
#simulator #object {
  transition: fill 0.4s ease;
}

.palette_color li.white label {
  border: solid 1px #BBBBBB;
}
.simulator-color.white {
  mix-blend-mode: soft-light;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769.0px) {
  .simulator-img-wrapper {
    height: min(45vw, 650px);
  }

}

/* ////////// PC ////////// */
@media print,screen and (min-width: 769.1px) {
  .simulator-palette > dl {
    font-size: 1.8rem;
  }
  dl.color-wrapper dt {
    padding-top: calc((min(5vw, 30px) + (min(.666vw, 4px) * 2) - 1.75em) / 2);
  }
  .simulator-img-wrapper {
    height: min(40vw, 600px);
    /* min-height: 500px; */
  }
}

@media (hover: hover) {
  .palette_color li:not(li:has(input:checked)):hover label {
    transform: scale(1.1);
  }
  .palette_color li:hover .name {
    opacity: 1;
    transform: none;
  }
}


/*====================================================
////id |  flow
====================================================*/
.flow-inner {
  padding-bottom: 0;
}
.flow-item .no {
  font-weight: 500;
}
.flow-item .title {
  font-weight: 500;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 1220.0px) {
  .flow-item {
    border-bottom: solid 1px var(--color_2);
    display: grid;
      grid-template-columns: auto 2em 1fr;
    padding: min(9vw, 40px) 10vw;
  }
  .flow-item:first-child {
    border-top: solid 1px var(--color_2);
  }
  .flow-item .no {
    display: flex;
      align-items: flex-end;
    font-size: min(4.2666vw, 1.8rem);
    grid-column: 2;
    grid-row: 1;
  }
  .flow-item .img {
    display: flex;
      align-items: center;
      justify-content: center;
    grid-column: 1;
    grid-row: 1 / 3;
    margin-right: min(5vw, 30px);
    width: min(17.5vw, 100px);
  }
  .flow-item .title {
    display: flex;
      align-items: flex-end;
    font-size: min(4.2666vw, 1.8rem);
    grid-column: 3;
    grid-row: 1;
  }
  .flow-item .text {
    grid-column: 2 / 4;
    grid-row: 2;
    margin-top: 10px;
  }
}

@media screen and (max-width: 769.0px) {
  .flow-item {
    padding: min(9vw, 40px) 3.2vw;
  }
}

/* ////////// PC ////////// */
@media print,screen and (min-width: 1220.1px) {
  .flow-item-wrapper {
    display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .flow-item {
    border-left: solid 1px var(--color_2);
    display: grid;
      grid-gap: 16px;
      grid-template-rows: subgrid;
    grid-row: span 4;
    padding: min(1.5vw, 30px);
  }
  .flow-item:last-child {
    border-right: solid 1px var(--color_2);
  }
  .flow-item .no {
    text-align: center;
  }
  .flow-item .img figure {
    display: flex;
      align-items: center;
      justify-content: center;
    height: 85px;
  }
  .flow-item .title {
    display: flex;
      align-items: center;
      justify-content: center;
    font-size: min(1.35vw, 1.8rem);
    line-height: 1.4;
    text-align: center;
  }
  .flow-item .text {
    font-size: 1.4rem;
  }
}

@media (hover: hover) {}



/*====================================================
////id |  attempt
====================================================*/
.attempt-link {
  margin-top: min(8.5vw, 50px);
}

/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
  .attempt-detail img {
    margin: 1em auto 0;
    max-height: min(84.5vw, 500px);
  }
  .attempt-img {
    display: flex;
      justify-content: center;
    margin-top: min(6vw, 40px);
  }
  .attempt-img img {
    max-height: 400px;
  }
}

/* ////////// PC ////////// */
@media print,screen and (min-width: 960.1px) {
  .attempt-inner {
    display: grid;
      grid-template-columns: 40% 1fr;
  }
  .attempt-detail {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-left: 30px;
  }
  .attempt-img {
    margin-top: min(3vw, 80px);
    margin-left: calc(var(--innerBox_margin) * -.6);
    width: 100%;
  }
}

@media (hover: hover) {}



/*====================================================
////id |  column
====================================================*/
#column {
  position: relative;
}
#column::before {
  background: var(--color_5);
  border-radius: min(10.6666vw, 100px) min(10.6666vw, 100px) 0 0;
  content: '';
  display: block;
  margin: auto;
  position: absolute;
    top: 0;
    left: 0;
  width: 100%;
  height: 100%;
}
.column-inner {
  padding: min(12.8vw, 110px) 0 min(14.5vw, 100px);
}
.column-head {
  place-items: center;
}

.column-archive-wrapper {
  margin: 0 auto;
  max-width: 1100px;
}
.column-archive-item-link {
    display: block;
    width: 100%;
}
.column-head {
    margin-bottom: 1em;
}
.column-archive {
    padding: 0 min(3vw, 10px);
}
.column-archive-item .coverImg {
  border-radius: 5px;
}
.column-archive-item .title {
    margin-top: .8em;
    line-height: 1.5;
}
.column-archive-item .category {
    margin-top: .2em;
}
.column-link {
    margin-top: min(5vw, 40px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
  .column-head .en {
    font-size: min(7vw, 4.5rem);
  }
  .column-archive-wrapper {
    overflow: hidden;
  }
  #column .swiper {
      margin: 0 auto 0 0;
      width: 85%;
      overflow: visible;
  }
  #column .swiper-wrapper {
    gap: min(6.4vw, 30px);
  }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960.1px) {
  #column .swiper-wrapper {
    gap: min(2vw, 40px);
    justify-content: center;
    transform: none !important;
  }
  .column-slide {
    flex: 1;
    max-width: 340px;
    /* margin-right: calc(min(2vw, 40px) * -1);
    width: min(calc((100vw - (var(--innerBox_margin) * 2) + min(2vw, 40px) ) / 3), calc(340px + min(2vw, 40px))) !important; */
  }
  /* .column-slide {
    padding-right: min(2vw, 40px);
  } */
}

@media screen and (min-width: 1330px) {
    #column .swiper-wrapper {
      gap: 40px;
    }
}

@media (hover: hover) {}


/*====================================================
////id |  news_insta
====================================================*/
.news_insta {
  border-top: solid 1px var(--color_2);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769.0px) {}

/* ////////// PC ////////// */
@media print,screen and (min-width: 960.1px) {
  .news_insta {
    display: grid;
      grid-template-columns: 1fr 1fr;
    position: relative;
  }
  .news_insta::before {
    border-left: solid 1px var(--color_2);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
      top: 0;
      left: 0;
      right: 0;
    width: 0;
    height: 100%;
  }
  .news_insta-inner {
    padding: min(10vw, 120px) 0;
  }
}

@media (hover: hover) {}



/*====================================================
////id |  news
====================================================*/
.news-link-wrapper {
  margin-top: min(6.5vw, 40px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960.0px) {
  .news-inner {
    padding-bottom: 0;
  }
}

/* ////////// PC ////////// */
@media print,screen and (min-width: 960.1px) {
  .news-inner {
    margin-right: min(5vw, 75px);
  }
}

@media (hover: hover) {}



/*====================================================
////id |  xxx
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 769.0px) {}

/* ////////// PC ////////// */
@media print,screen and (min-width: 769.1px) {}

@media (hover: hover) {}