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

  l-contentsの調整

----------------------------------------------*/
.l-contents:has(.indexPage-contents__firstview) {
  padding-top: 0;
}

/*----------------------------------------------

  INDEX PAGE CONTENTS

----------------------------------------------*/
.indexPage-contents {
  display: grid;
  gap: min( calc( 50 / var(--screen-width) * 100vw ), 65px );
  /*---------------------------------------
   firstview
  ---------------------------------------*/
  /*---------------------------------------
   news
  ---------------------------------------*/
  /*---------------------------------------
   about
  ---------------------------------------*/
  /*---------------------------------------
   case-study
  ---------------------------------------*/
  /*---------------------------------------
   business
  ---------------------------------------*/
}
.indexPage-contents__firstview {
  height: min( calc( 525 / var(--screen-width) * 100vw ), 525px );
  max-height: 100dvh;
  position: relative;
  padding: min( calc( 35 / var(--screen-width) * 100vw ), 35px ) 0;
  /* bg
  ----------------------------------*/
  /* body
  ----------------------------------*/
  /* site-title
  ----------------------------------*/
  /* lead-copy
  ----------------------------------*/
  /* scroll
  ----------------------------------*/
}
@media (min-width: 960px) {
  .indexPage-contents__firstview {
    height: min( calc( 600 / var(--screen-width) * 100vw ), 600px );
  }
}
.indexPage-contents__firstview .bg {
  display: block;
  width: 100vw;
  height: 100%;
  background-image: linear-gradient(-45deg, #050332 40%, #000F68);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  overflow: hidden;
}
.indexPage-contents__firstview .bg:before {
  content: "";
  display: block;
  aspect-ratio: 1500/1200;
  width: auto;
  height: 100vw;
  background-image: var(--url);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 100%;
  transform: rotate(90deg) translateX(60%);
  transform-origin: bottom right;
}
@media (min-width: 768px) {
  .indexPage-contents__firstview .bg:before {
    height: 100%;
    right: 0;
    transform: none;
  }
}
.indexPage-contents__firstview > .body {
  display: grid;
  gap: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
  align-content: flex-start;
  position: relative;
  height: 100%;
}
@media (min-width: 768px) {
  .indexPage-contents__firstview > .body {
    align-content: center;
    padding-left: min( calc( 100 / var(--screen-width) * 100vw ), 100px );
  }
}
@media (min-width: 1200px) {
  .indexPage-contents__firstview > .body {
    padding-left: 0;
  }
}
.indexPage-contents__firstview .site-title {
  display: grid;
  gap: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  color: #fff;
  filter: drop-shadow(0 0 5px rgba(5, 3, 50, 0.9));
}
.indexPage-contents__firstview .site-title .logo {
  display: block;
  width: min( calc( 320 / var(--screen-width) * 100vw ), 320px );
  aspect-ratio: 80/50;
  mask-image: var(--url);
  -webkit-mask-image: var(--url);
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-repeat: no-repeat;
  background-image: linear-gradient(to right, var(--color__primary), var(--color__secondary));
  margin: auto;
}
.indexPage-contents__firstview .site-title p {
  font-family: "Roboto", sans-serif;
  font-size: min( calc( 11 / var(--screen-width) * 100vw ), 11px );
  letter-spacing: 0.1em;
  text-align: center;
}
@media (min-width: 768px) {
  .indexPage-contents__firstview .site-title .logo {
    width: min( calc( 555 / var(--screen-width) * 100vw ), 555px );
    margin-left: 0;
  }
  .indexPage-contents__firstview .site-title p {
    text-align: left;
    font-size: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
  }
}
.indexPage-contents__firstview .lead-copy {
  color: #fff;
  text-align: center;
  font-size: min( calc( 16 / var(--screen-width) * 100vw ), 16px );
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: 0.3em;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .indexPage-contents__firstview .lead-copy {
    writing-mode: vertical-rl;
    height: min( calc( 600 / var(--screen-width) * 100vw ), 600px );
    width: min( calc( 80 / var(--screen-width) * 100vw ), 80px );
    background-color: #EAEDF0;
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color__text);
    font-size: min( calc( 18 / var(--screen-width) * 100vw ), 18px );
    transform: translate(-50vw, -50%);
  }
}
.indexPage-contents__firstview .scroll {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: min( calc( 12 / var(--screen-width) * 100vw ), 12px );
  writing-mode: sideways-lr;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-top: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
  position: absolute;
  right: 0;
  bottom: 0;
}
.indexPage-contents__firstview .scroll:before {
  content: "";
  display: block;
  width: 0.5px;
  background-color: #fff;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.indexPage-contents__firstview .scroll span {
  display: block;
  position: relative;
}
.indexPage-contents__firstview .scroll span:before {
  content: "";
  display: block;
  width: 2px;
  background-color: #fff;
  height: 100%;
  position: absolute;
  right: -1px;
  top: 0;
}
@media (min-width: 1350px) {
  .indexPage-contents__firstview .scroll {
    right: 100%;
    transform: translateX(max( calc( -40 / var(--screen-width) * 100vw ), -40px ));
  }
}
.indexPage-contents__news {
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 35px );
  position: relative;
  padding: min( calc( 15 / var(--screen-width) * 100vw ), 15px ) 0 min( calc( 30 / var(--screen-width) * 100vw ), 30px );
  z-index: 2;
  /* header
  ----------------------------------*/
  /* articles
  ----------------------------------*/
  /* article
  ----------------------------------*/
}
.indexPage-contents__news:before {
  content: "NEWS / RELEASE";
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: min( calc( 40 / var(--screen-width) * 100vw ), 40px );
  position: absolute;
  bottom: 100%;
  color: #fff;
  line-height: 0.65;
  text-align: center;
  width: 100%;
}
.indexPage-contents__news:after {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media (min-width: 960px) {
  .indexPage-contents__news {
    padding: min( calc( 35 / var(--screen-width) * 100vw ), 35px );
    padding-top: min( calc( 45 / var(--screen-width) * 100vw ), 45px );
    padding-left: 0;
    grid-template-columns: min( calc( 220 / var(--screen-width) * 100vw ), 220px ) 1fr;
    align-items: normal;
    min-height: min( calc( 265 / var(--screen-width) * 100vw ), 265px );
    margin-bottom: max( calc( -190 / var(--screen-width) * 100vw ), -190px );
  }
  .indexPage-contents__news:before {
    font-size: min( calc( 50 / var(--screen-width) * 100vw ), 50px );
    text-align: left;
  }
  .indexPage-contents__news:after {
    width: 100%;
    left: 0;
    transform: none;
    opacity: 0.9;
  }
}
.indexPage-contents__news .header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding-bottom: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
  border-bottom: 1px solid #B5B5B5;
}
@media (min-width: 960px) {
  .indexPage-contents__news .header {
    border-bottom: 0;
    border-right: 1px solid #B5B5B5;
    display: grid;
    gap: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
    align-content: flex-start;
    padding-bottom: 0;
  }
}
.indexPage-contents__news .header .heading {
  display: flex;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  align-items: center;
}
.indexPage-contents__news .header .heading h2 {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.1em;
}
.indexPage-contents__news .header .heading small {
  display: block;
  font-family: "Roboto", sans-serif;
  text-align: center;
  font-size: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  line-height: 1.5;
  font-weight: 500;
}
@media (min-width: 960px) {
  .indexPage-contents__news .header .heading {
    display: grid;
    gap: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  }
}
.indexPage-contents__news .header a {
  position: absolute;
  font-size: min( calc( 12 / var(--screen-width) * 100vw ), 12px );
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  right: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--color__text);
  gap: 0.3em;
  line-height: 1.2;
  padding: min( calc( 2 / var(--screen-width) * 100vw ), 2px ) min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  transition: color 0.3s, background 0.3s;
}
.indexPage-contents__news .header a:after {
  content: "";
  display: block;
  aspect-ratio: 1;
  width: 0.7em;
  background-color: var(--color__text);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'><path d='M5.5,3L.5,6V0l5,3Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'><path d='M5.5,3L.5,6V0l5,3Z'/></svg>");
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-repeat: no-repeat;
  transition: background 0.3s;
}
.indexPage-contents__news .header a:hover {
  background-color: var(--color__text);
  color: #fff;
}
.indexPage-contents__news .header a:hover:after {
  background-color: #fff;
}
@media (min-width: 960px) {
  .indexPage-contents__news .header a {
    position: relative;
  }
}
.indexPage-contents__news .articles {
  display: grid;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  line-height: 1.5;
  align-content: flex-start;
}
@media (min-width: 960px) {
  .indexPage-contents__news .articles {
    gap: min( calc( 25 / var(--screen-width) * 100vw ), 25px );
  }
}
.indexPage-contents__news article a {
  display: flex;
  align-items: flex-start;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
}
.indexPage-contents__news article a .info {
  flex-shrink: 0;
  width: min( calc( 60 / var(--screen-width) * 100vw ), 60px );
  padding-right: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
}
@media (min-width: 960px) {
  .indexPage-contents__news article a .info {
    width: min( calc( 135 / var(--screen-width) * 100vw ), 135px );
    display: flex;
    gap: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
    align-items: center;
  }
}
.indexPage-contents__news article a .info .date {
  font-family: "Roboto", sans-serif;
  flex-shrink: 0;
  font-size: min( calc( 12 / var(--screen-width) * 100vw ), 12px );
  line-height: 1;
  display: block;
  height: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
}
@media (min-width: 960px) {
  .indexPage-contents__news article a .info .date {
    height: auto;
    flex-shrink: 0;
  }
}
.indexPage-contents__news article a .info .category {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  background-color: var(--color__text);
  color: #fff;
  padding: min( calc( 3 / var(--screen-width) * 100vw ), 3px );
  line-height: 1;
  flex-shrink: 0;
  width: min( calc( 50 / var(--screen-width) * 100vw ), 50px );
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 960px) {
  .indexPage-contents__news article a .info .category {
    flex-shrink: 0;
  }
}
.indexPage-contents__news article a .txt {
  padding-top: min( calc( 18 / var(--screen-width) * 100vw ), 18px );
}
@media (min-width: 960px) {
  .indexPage-contents__news article a .txt {
    padding-top: 0;
    transform: translateY(max( calc( -2 / var(--screen-width) * 100vw ), -2px ));
  }
}
.indexPage-contents__news article a .txt .title {
  width: 100%;
  font-size: inherit;
  flex: 1;
  font-size: min( calc( 12 / var(--screen-width) * 100vw ), 12px );
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
}
.indexPage-contents__news article a .txt .description {
  display: none;
}
.indexPage-contents__about {
  aspect-ratio: 9/16;
  position: relative;
  display: grid;
  align-content: flex-end;
  width: 100%;
  max-height: min( calc( 550 / var(--screen-width) * 100vw ), 550px );
  /* movie
  ----------------------------------*/
  /* txt
  ----------------------------------*/
}
@media (min-width: 960px) {
  .indexPage-contents__about {
    display: flex;
  }
}
.indexPage-contents__about .movie {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
}
.indexPage-contents__about .movie video,
.indexPage-contents__about .movie iframe {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.indexPage-contents__about .txt {
  position: relative;
  padding: min( calc( 25 / var(--screen-width) * 100vw ), 25px ) min( calc( 15 / var(--screen-width) * 100vw ), 15px );
  color: #fff;
  display: grid;
  gap: min( calc( 20 / var(--screen-width) * 100vw ), 30px );
}
.indexPage-contents__about .txt:before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: linear-gradient(to right, var(--color__primary), var(--color__secondary));
  z-index: 1;
  mix-blend-mode: multiply;
}
.indexPage-contents__about .txt strong {
  z-index: 2;
  font-size: min( calc( 24 / var(--screen-width) * 100vw ), 35px );
  font-weight: bold;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.indexPage-contents__about .txt p {
  z-index: 2;
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (min-width: 960px) {
  .indexPage-contents__about .txt {
    width: 50%;
    margin-left: auto;
    align-content: center;
    padding: 0;
    padding-left: min( calc( 60 / var(--screen-width) * 100vw ), 60px );
    padding-top: min( calc( 125 / var(--screen-width) * 100vw ), 125px );
  }
  .indexPage-contents__about .txt:before {
    left: 0;
    width: 50vw;
    transform: none;
  }
}
.indexPage-contents__case-study {
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 35px );
  position: relative;
  padding: 0 0 min( calc( 30 / var(--screen-width) * 100vw ), 30px );
  /* heading
  ----------------------------------*/
  /* sections
  ----------------------------------*/
  /* articles
  ----------------------------------*/
  /* article
  ----------------------------------*/
}
.indexPage-contents__case-study:before {
  content: "CASE STUDY";
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: min( calc( 40 / var(--screen-width) * 100vw ), 40px );
  position: absolute;
  bottom: 100%;
  color: #fff;
  line-height: 0.65;
  text-align: center;
  width: 100%;
}
.indexPage-contents__case-study:after {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media (min-width: 960px) {
  .indexPage-contents__case-study {
    padding: min( calc( 75 / var(--screen-width) * 100vw ), 75px ) 0;
  }
  .indexPage-contents__case-study:before {
    font-size: min( calc( 50 / var(--screen-width) * 100vw ), 50px );
    text-align: right;
  }
}
.indexPage-contents__case-study > .heading {
  --color: rgb( from var(--color__text) r g b / 0.1 );
  aspect-ratio: 155/180;
  width: min( calc( 115 / var(--screen-width) * 100vw ), 115px );
  background-image: var(--url);
  background-repeat: no-repeat;
  background-size: contain;
  display: grid;
  justify-items: center;
  align-content: center;
  filter: drop-shadow(0 0 10px var(--color));
  margin: auto;
  transform: translateY(max( calc( -10 / var(--screen-width) * 100vw ), -10px ));
}
.indexPage-contents__case-study > .heading h2 {
  font-size: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.2em;
}
.indexPage-contents__case-study > .heading small {
  display: block;
  line-height: 1.4;
  font-size: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  font-weight: 500;
  font-family: "Roboto", sans-serif;
}
@media (min-width: 960px) {
  .indexPage-contents__case-study > .heading {
    width: min( calc( 155 / var(--screen-width) * 100vw ), 155px );
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(max( calc( -105 / var(--screen-width) * 100vw ), -105px ));
  }
}
.indexPage-contents__case-study .sections {
  display: grid;
  gap: min( calc( 30 / var(--screen-width) * 100vw ), 50px );
}
.indexPage-contents__case-study .sections > section {
  display: grid;
  gap: min( calc( 30 / var(--screen-width) * 100vw ), 30px );
  position: relative;
}
.indexPage-contents__case-study .sections > section > h3 {
  font-size: min( calc( 16 / var(--screen-width) * 100vw ), 16px );
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
  padding-bottom: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  border-bottom: 1px solid #B5B5B5;
  text-align: center;
  margin-bottom: max( calc( -15 / var(--screen-width) * 100vw ), -15px );
}
@media (min-width: 960px) {
  .indexPage-contents__case-study .sections > section > h3 {
    margin-bottom: 0;
  }
}
.indexPage-contents__case-study .sections > section > a {
  font-size: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  display: flex;
  align-items: center;
  border: 1px solid var(--color__text);
  gap: 0.3em;
  line-height: 1.2;
  padding: min( calc( 2 / var(--screen-width) * 100vw ), 2px ) min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  transition: color 0.3s, background 0.3s;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
.indexPage-contents__case-study .sections > section > a:after {
  content: "";
  display: block;
  aspect-ratio: 1;
  width: 0.7em;
  background-color: var(--color__text);
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'><path d='M5.5,3L.5,6V0l5,3Z'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' width='6' height='6'><path d='M5.5,3L.5,6V0l5,3Z'/></svg>");
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-repeat: no-repeat;
  transition: background 0.3s;
}
.indexPage-contents__case-study .sections > section > a:hover {
  background-color: var(--color__text);
  color: #fff;
}
.indexPage-contents__case-study .sections > section > a:hover:after {
  background-color: #fff;
}
@media (min-width: 960px) {
  .indexPage-contents__case-study .sections > section > a {
    position: absolute;
    right: 0;
    font-size: min( calc( 12 / var(--screen-width) * 100vw ), 12px );
  }
}
.indexPage-contents__case-study .articles {
  position: relative;
}
.indexPage-contents__case-study .articles .swiper {
  overflow: hidden;
  padding: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  margin: 0 max( calc( -10 / var(--screen-width) * 100vw ), -10px );
}
.indexPage-contents__case-study .articles .swiper-wrap {
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
}
.indexPage-contents__case-study .articles .navigation {
  display: none;
}
@media (min-width: 768px) {
  .indexPage-contents__case-study .articles {
    padding: 0 min( calc( 100 / var(--screen-width) * 100vw ), 100px );
    position: relative;
    opacity: 0;
    height: min( calc( 200 / var(--screen-width) * 100vw ), 200px );
    transition: opacity 0.3s;
  }
  .indexPage-contents__case-study .articles:has(.swiper-initialized) {
    height: auto;
    opacity: 1;
  }
  .indexPage-contents__case-study .articles .swiper-wrap {
    display: flex;
    gap: 0;
  }
  .indexPage-contents__case-study .articles .navigation {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  .indexPage-contents__case-study .articles .navigation:has(.swiper-button-lock) {
    display: none;
  }
  .indexPage-contents__case-study .articles .navigation button {
    --url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 35' width='30' height='35'><path d='M0,8.84v17.32l15,8.66,15-8.66V8.84L15,.18,0,8.84Z'/></svg>");
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    aspect-ratio: 1;
    width: min( calc( 40 / var(--screen-width) * 100vw ), 40px );
    display: block;
    position: relative;
    mask-image: var(--url);
    -webkit-mask-image: var(--url);
    mask-size: contain;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--color__text);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    position: absolute;
    top: 50%;
  }
  .indexPage-contents__case-study .articles .navigation button:before {
    content: "";
    display: block;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    top: 1px;
    left: 1px;
    mask-image: var(--url);
    -webkit-mask-image: var(--url);
    mask-size: contain;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: #fff;
    z-index: -1;
    position: absolute;
    transition: background 0.3s;
  }
  .indexPage-contents__case-study .articles .navigation button:after {
    content: "";
    --url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' width='20' height='10' fill='transparent' stroke='%23000'><path vector-effect='non-scaling-stroke' d='M18.93,4.89H1.07'/><path vector-effect='non-scaling-stroke' d='M7.55,1.21L1.07,4.91l6.48,3.87'/></svg>");
    display: block;
    aspect-ratio: 20/10;
    width: min( calc( 20 / var(--screen-width) * 100vw ), 20px );
    background-color: var(--color__text);
    position: relative;
    z-index: 1;
    mask-image: var(--url);
    -webkit-mask-image: var(--url);
    mask-size: contain;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    transition: background 0.3s;
  }
  .indexPage-contents__case-study .articles .navigation button:hover:before {
    background-color: var(--color__text);
  }
  .indexPage-contents__case-study .articles .navigation button:hover:after {
    background-color: #fff;
  }
  .indexPage-contents__case-study .articles .navigation button.prev {
    transform: translateY(-50%);
    left: min( calc( 30 / var(--screen-width) * 100vw ), 30px );
  }
  .indexPage-contents__case-study .articles .navigation button.next {
    transform: translateY(-50%) scaleX(-1);
    right: min( calc( 30 / var(--screen-width) * 100vw ), 30px );
  }
}
.indexPage-contents__case-study article {
  --color: rgb( from var(--color__text) r g b / 0.1 );
  box-shadow: 0 0 10px var(--color);
  width: 100%;
  flex-shrink: 0;
}
.indexPage-contents__case-study article a {
  display: grid;
  gap: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  padding: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
}
.indexPage-contents__case-study article a .img {
  display: block;
  aspect-ratio: 16/9;
  width: 100%;
  overflow: hidden;
}
.indexPage-contents__case-study article a .img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.indexPage-contents__case-study article a .txt {
  display: flex;
  flex-wrap: wrap;
  gap: min( calc( 5 / var(--screen-width) * 100vw ), 5px ) min( calc( 5 / var(--screen-width) * 100vw ), 5px );
}
.indexPage-contents__case-study article a .txt .date {
  font-size: min( calc( 13 / var(--screen-width) * 100vw ), 13px );
  line-height: 1.2;
  font-family: "Roboto", sans-serif;
}
.indexPage-contents__case-study article a .txt .category {
  font-size: min( calc( 13 / var(--screen-width) * 100vw ), 13px );
  line-height: 1.2;
  font-family: "Roboto", sans-serif;
  display: flex;
  align-items: center;
  gap: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
}
.indexPage-contents__case-study article a .txt .category:before {
  content: "";
  display: block;
  width: 1px;
  height: 1em;
  background-color: var(--color__text);
}
.indexPage-contents__case-study article a .txt .title {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
  line-height: 1.5;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.indexPage-contents__case-study article.is-movie .img {
  position: relative;
}
.indexPage-contents__case-study article.is-movie .img:before {
  content: "";
  display: block;
  --url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35 35' width='35' height='35'><circle fill='%23e50303' cx='17.5' cy='17.5' r='16.5'/><path fill='%23fff' d='M25.5,17.5l-12,7.5v-15l12,7.5Z'/></svg>");
  background-image: var(--url);
  background-repeat: no-repeat;
  background-size: contain;
  width: min( calc( 35 / var(--screen-width) * 100vw ), 35px );
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.indexPage-contents__business {
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 35px );
  position: relative;
  padding: 0 0 min( calc( 30 / var(--screen-width) * 100vw ), 30px );
  margin-bottom: max( calc( -50 / var(--screen-width) * 100vw ), -100px );
  /* heading
  ----------------------------------*/
  /* sections
  ----------------------------------*/
}
.indexPage-contents__business:before {
  content: "PROJECT / BUSINESS";
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: min( calc( 40 / var(--screen-width) * 100vw ), 40px );
  position: absolute;
  bottom: 100%;
  color: #fff;
  line-height: 0.65;
  text-align: center;
  width: auto;
  white-space: nowrap;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: -0.04em;
}
.indexPage-contents__business:after {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media (min-width: 960px) {
  .indexPage-contents__business {
    padding: min( calc( 75 / var(--screen-width) * 100vw ), 75px ) 0;
  }
  .indexPage-contents__business:before {
    font-size: min( calc( 50 / var(--screen-width) * 100vw ), 50px );
    width: 100%;
    text-align: right;
    letter-spacing: normal;
  }
}
.indexPage-contents__business > .heading {
  --color: rgb( from var(--color__text) r g b / 0.1 );
  aspect-ratio: 155/180;
  width: min( calc( 115 / var(--screen-width) * 100vw ), 115px );
  background-image: var(--url);
  background-repeat: no-repeat;
  background-size: contain;
  display: grid;
  justify-items: center;
  align-content: center;
  filter: drop-shadow(0 0 10px var(--color));
  margin: auto;
  transform: translateY(max( calc( -10 / var(--screen-width) * 100vw ), -10px ));
}
.indexPage-contents__business > .heading h2 {
  font-size: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.2em;
}
.indexPage-contents__business > .heading small {
  display: block;
  line-height: 1.4;
  font-size: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  font-weight: 500;
  font-family: "Roboto", sans-serif;
}
@media (min-width: 960px) {
  .indexPage-contents__business > .heading {
    width: min( calc( 155 / var(--screen-width) * 100vw ), 155px );
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(max( calc( -105 / var(--screen-width) * 100vw ), -105px ));
  }
}
.indexPage-contents__business .sections {
  display: grid;
  gap: min( calc( 30 / var(--screen-width) * 100vw ), 50px );
}
.indexPage-contents__business .sections > section {
  display: grid;
  gap: min( calc( 30 / var(--screen-width) * 100vw ), 30px );
  position: relative;
}
.indexPage-contents__business .sections > section > .heading {
  border-bottom: 1px solid #B5B5B5;
  padding-bottom: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  margin-bottom: max( calc( -15 / var(--screen-width) * 100vw ), -15px );
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
}
.indexPage-contents__business .sections > section > .heading h3 {
  font-size: min( calc( 16 / var(--screen-width) * 100vw ), 25px );
  font-weight: 900;
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
}
.indexPage-contents__business .sections > section > .heading small {
  font-size: min( calc( 10 / var(--screen-width) * 100vw ), 14px );
  font-weight: bold;
  line-height: 1.5;
}
@media (min-width: 960px) {
  .indexPage-contents__business .sections > section > .heading {
    margin-bottom: 0;
  }
}
.indexPage-contents__business .sections > section > .body {
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 15px );
}
.indexPage-contents__business .sections > section > .body .img {
  box-shadow: min( calc( 5 / var(--screen-width) * 100vw ), 10px ) min( calc( 5 / var(--screen-width) * 100vw ), 10px ) 0 rgba(57, 57, 57, 0.1);
  display: block;
}
.indexPage-contents__business .sections > section > .body .img img {
  display: block;
  width: 100%;
  height: auto;
}
.indexPage-contents__business .sections > section > .body .txt {
  display: grid;
  gap: min( calc( 15 / var(--screen-width) * 100vw ), 20px );
}
.indexPage-contents__business .sections > section > .body .txt p {
  font-size: min( calc( 14 / var(--screen-width) * 100vw ), 14px );
}
.indexPage-contents__business .sections > section > .body .txt > a {
  font-size: min( calc( 10 / var(--screen-width) * 100vw ), 10px );
  line-height: 1.2;
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: min( calc( 5 / var(--screen-width) * 100vw ), 5px );
  transition: color 0.3s;
}
.indexPage-contents__business .sections > section > .body .txt > a:after {
  --url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path d='M8.91,11.05l-3.34,3.33c-1.09,1.09-2.87,1.09-3.96,0-1.09-1.09-1.09-2.87,0-3.96l3.34-3.33h0c.16-.16.16-.41,0-.57-.15-.16-.41-.16-.57,0,0,0,0,0-.01.01l-3.34,3.34c-1.41,1.41-1.41,3.69,0,5.09,1.41,1.41,3.69,1.41,5.09,0l3.33-3.33h0c.15-.17.14-.42-.02-.57-.16-.15-.4-.14-.55,0ZM14.94,1.05c-1.41-1.4-3.68-1.4-5.09,0,0,0,0,0,0,0l-3.34,3.33h0c-.15.17-.14.42.02.57.16.15.4.14.55,0l3.33-3.33c1.09-1.09,2.87-1.09,3.96,0,1.09,1.09,1.09,2.87,0,3.96l-3.33,3.33c-.16.16-.16.41,0,.57s.41.16.57,0l3.33-3.33h0c1.4-1.41,1.4-3.69,0-5.1,0,0,0,0,0,0h0ZM9.72,5.72l-4,4c-.16.16-.16.41,0,.57s.41.16.57,0l4-4c.16-.16.16-.41,0-.57s-.41-.16-.57,0h0Z'/></svg>");
  content: "";
  display: block;
  aspect-ratio: 1;
  width: min( calc( 16 / var(--screen-width) * 100vw ), 16px );
  background-color: var(--color__text);
  mask-image: var(--url);
  -webkit-mask-image: var(--url);
  mask-size: contain;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-repeat: no-repeat;
  transition: background 0.3s;
}
.indexPage-contents__business .sections > section > .body .txt > a:hover {
  color: var(--color__primary);
}
.indexPage-contents__business .sections > section > .body .txt > a:hover:after {
  background-color: var(--color__primary);
}
@media (min-width: 768px) {
  .indexPage-contents__business .sections > section > .body {
    display: flex;
    align-items: flex-start;
    gap: min( calc( 25 / var(--screen-width) * 100vw ), 25px );
  }
  .indexPage-contents__business .sections > section > .body .img {
    width: min( calc( 400 / var(--screen-width) * 100vw ), 400px );
    flex-shrink: 0;
    order: 2;
  }
  .indexPage-contents__business .sections > section > .body .txt {
    flex: 1;
    order: 1;
  }
}
@media (min-width: 960px) {
  .indexPage-contents__business .sections > section > .body {
    padding-left: min( calc( 70 / var(--screen-width) * 100vw ), 70px );
    gap: min( calc( 80 / var(--screen-width) * 100vw ), 80px );
  }
}
/*# sourceMappingURL=index.css.map */