@charset "utf-8";

/* ==============================
  共通
============================== */
:root{
  --bk: #333;
  --blue: #0051ba;
  --light_blue: #f8fafc;
  --light_blue02: #dee9f2;
  --orange: #f1723f;
  --red: #ff0000;
  --light_gray: #f5f5f5;
  --bd_color: #e2e2e2;
}

body{
  letter-spacing: 0.1em;
}

p{
  margin: 0;
  padding: 0;
  font-size: clamp(14px, calc(16 / 1200 * 100vw), 16px);
  line-height: calc(30.4 / 16);
  letter-spacing: 0.05em;
}
a{
  display: block;
  text-decoration: none;
}

body#top{
  background: #fff;
}

.section-title__wrapper{
  position: relative;
  text-align: center;
}

.section{
  position: relative;
  z-index: 10;
  background: #fff;
  padding: clamp(64px, calc(120 / 1200 * 100vw), 120px) 0;
}

.link-btn{
  width: fit-content;
  margin: clamp(40px, calc(48 / 1200 * 100vw), 48px) auto 0;
}
.link-btn a{
  color: #fff;
  font-size: clamp(18px, calc(24 / 1200 * 100vw), 24px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  background: var(--blue);
  border: solid 2px var(--blue);
  border-radius: 100vmax;
  padding: clamp(16px, calc(20 / 1200 * 100vw), 20px) clamp(24px, calc(48 / 1200 * 100vw), 48px);
  transition: .3s ease-in-out;
}
.link-btn a:hover{
  color: var(--blue);
  background: #fff;
}

@media screen and (max-width: 767px){
  .link-btn{
    max-width: 400px;
    width: 100%;
  }
}


/* MV
 ========================================================== */
.mv{
  position: relative;
}

.mv::before{
  position: fixed;
  z-index: 2;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / .48);
}

.mv::after{
  position: absolute;
  z-index: 4;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 90%);
  mix-blend-mode: multiply;
}

.mv #bg-video{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv #bg-video.js-hidden{
  opacity: 0;
  visibility: hidden;
  display: none;
}

.mv__inner{
  width: 100%;
  height: calc(100vh - clamp(116px, calc(122 / 1200 * 100vw), 122px));
}

.mv__inner .mv-logo__wrapper{
  position: fixed;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 95%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%,-50%);
}

.mv__inner .mv-logo__wrapper span{
  display: block;
  text-align: center;
}

.mv__inner .mv-logo__wrapper .mv__text{
  font-size: clamp(16px, calc(18 / 1200 * 100vw), 18px);
  color: #fff;
  text-shadow: 0 0 6px rgb(0 0 0 / .8);
}

.mv__inner .mv-logo__wrapper .mv__logo{
  margin: clamp(12px, calc(16 / 1600 * 100vw), 16px) auto 0;
  max-width: 318px;
  width: 70%;
}

/* スクロールダウンの位置 */
.scroll_wrap{
	position: absolute;
	z-index: 5;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
}
.scroll {
  position: relative;
	display: block;
  padding-bottom: 36px;
  text-align: center;
	text-decoration: none;
}
/* 矢印のアニメーション部分 */
.scroll::before,
.scroll::after{
  animation: scroll 2s infinite;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  height: 12px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  width: 12px;
}
.scroll::after{
	bottom: 22px;
}
.scroll span{
	font-size: clamp(14px, calc(16 / 737 * 100vw), 16px);
	color: #fff;
}
/* 矢印のアニメーション */
@keyframes scroll {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: rotate(-45deg) translate(-12px, 12px);
  }
  100% {
    opacity: 0;
  }
}

@media screen and (max-width: 1023px){

  .mv__inner{
    height: calc(100vh - 56px);
  }

  .mv__inner .mv-logo__wrapper{
    transform: translate(-50%,-50%) translateY(-5%);
  }
}


/* 製品説明
 ========================================================== */
.news{
  position: relative;
  z-index: 10;
  width: 100%;
  background: var(--light_gray);
  /* text-align: center; */
  padding: clamp(12px, calc(20 / 1200 * 100vw), 20px) 0;
}

.news .news__inner{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  column-gap: 0.25em;
}

.news p{
  font-size: clamp(13px, calc(16 / 1200 * 100vw), 16px);
  letter-spacing: 0.05em;
}

.news a{
  display: inline;
  text-decoration: underline;
}

.news .new{
  color: #fff;
  background: var(--red);
  font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  padding: 2px clamp(6px, calc(8 / 1200 * 100vw), 8px);
  margin-right: 0.5em;
}


/* 製品説明
 ========================================================== */
.about.section{
  padding-bottom: 0;
}

.about__box{
  margin-top: clamp(32px, calc(48 / 1600 * 100vw), 48px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(10px, calc(20 / 1600 * 100vw), 20px);
}

.about__item{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: var(--light_blue);
  padding: clamp(20px, calc(32 / 1600 * 100vw), 32px) clamp(10px, calc(24 / 1600 * 100vw), 24px) clamp(24px, calc(36 / 1600 * 100vw), 36px);
  border-radius: clamp(6px, calc(8 / 1200 * 100vw), 8px);
}

.about__item::after{
  position: absolute;
  content: '';
}

.about__item:nth-of-type(1):after{
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../img/top/about_illust01.png) right bottom / auto 70% no-repeat;
}

.about__item:nth-of-type(2):after{
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(../img/top/about_illust02.png) center bottom / auto 88% no-repeat;
}

.about__item p{
  position: relative;
  z-index: 2;
  font-size: clamp(15px, calc(18 / 1200 * 100vw), 18px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.6;
  text-align: center;
  margin-top: clamp(8px, calc(12 / 1600 * 100vw), 12px);
}

.about__item .about__checklist{
  position: relative;
  z-index: 2;
  margin-top: clamp(16px, calc(24 / 1600 * 100vw), 24px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2px, calc(4 / 1600 * 100vw), 4px) clamp(16px, calc(40 / 1600 * 100vw), 40px);
  width: fit-content;
}

.about__item .about__checklist li{
  font-size: clamp(13px, calc(16 / 1200 * 100vw), 16px);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.about__item .about__checklist li::before{
  content: '\f14a';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 400;
  margin-right: 0.25em;
  color: var(--blue);
}

.about .arrow-down{
  margin: clamp(24px, calc(32 / 1600 * 100vw), 32px) auto 0;
  width: clamp(80px, calc(140 / 1600 * 100vw), 140px);
}

.about .about-copy__wrapper{
  margin-top: clamp(16px, calc(24 / 1600 * 100vw), 24px);
}

.about .about-copy__wrapper .about-copy__text{
  font-size: clamp(18px, calc(22 / 1200 * 100vw), 22px);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: clamp(6px, calc(12 / 1600 * 100vw), 12px);
}

.about .about-copy__wrapper .about-copy__text .marker{
  background: linear-gradient(transparent 60%, #ffff00 40%);
}

@media screen and (max-width: 767px){

  .about__item .about__checklist{
    grid-template-columns: unset;
  }

  .about__item:nth-of-type(1):after{
    background-size: 95% auto;
  }
  
  .about__item:nth-of-type(2):after{
    background-size: 80% auto;
  }
}



/* 導入事例
 ========================================================== */
.case-study{
  overflow: hidden;
}

.case-study .case-study__copy{
  margin-top: clamp(24px, calc(0 / 1600 * 100vw), 32px);
}

.case-study .case-study__copy p{
  text-align: center;
}

.case-study .swiper{
  overflow: visible;
  margin-top: clamp(56px, calc(80 / 768 * 100vw), 80px);
}

.case-study .swiper-wrapper{
  position: relative;
  padding-bottom: clamp(64px, calc(88 / 768 * 100vw), 88px);
}

.case-study .swiper-button-prev,
.case-study .swiper-button-next{
  border: solid 2px #fff;
  background: var(--blue);
  color: #fff;
  width: clamp(48px, calc(64 / 1024 * 100vw), 64px);
  height: clamp(48px, calc(64 / 1024 * 100vw), 64px);
  border-radius: 100vmax;
  transform: translateY(-50%);
}

.case-study .swiper-button-prev,
.case-study .swiper-rtl .swiper-button-next{
  left: 4.5vw;
}

.case-study .swiper-button-next,
.case-study .swiper-rtl .swiper-button-prev{
  right: 4.5vw;
}

.case-study .swiper-button-next::after,
.case-study .swiper-button-prev::after{
  font-size: clamp(18px, calc(24 / 1024 * 100vw), 24px);
  font-family: 'Font Awesome 5 Pro';
}

.case-study .swiper-button-prev::after{
  content: '\f060';
}
.case-study .swiper-button-next::after{
  content: '\f061';
}

.case-study .swiper-pagination-bullet{
  width: clamp(10px, calc(12 / 1024 * 100vw), 12px);
  height: clamp(10px, calc(12 / 1024 * 100vw), 12px);
  opacity: 1;
  border: solid 2px var(--blue);
  background: #fff;
}

.case-study .swiper-pagination-bullet-active{
  background: var(--blue);
}

.case-study__item{
  border: solid 1px var(--bd_color);
  border-radius: clamp(6px, calc(8 / 1200 * 100vw), 8px);
  overflow: hidden;
}

.case-study__item.swiper-slide{
  transition: .3s ease-in-out;
  display: flex;
  align-content: center;
  justify-content: center;
}

.case-study__item.swiper-slide-active{
  scale: 1.15;
  z-index: 1;
}

.case-study__item .img img{
  aspect-ratio: 480 / 270;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.case-study__item .case-study__text{
  background: var(--light_gray);
  padding: clamp(16px, calc(32 / 1600 * 100vw), 32px) clamp(16px, calc(32 / 1600 * 100vw), 32px) clamp(20px, calc(40 / 1600 * 100vw), 40px);
}

@media screen and (min-width: 768px){
  .case-study .swiper-button-wrapper{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-24px);
    z-index: 2;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px){

  .case-study .swiper-button-wrapper{
    max-width: 72%;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1199px){

  .case-study .swiper-wrapper{
    margin-left: -20px;
  }

  .case-study__item.swiper-slide-active{
    margin-right: 40px!important;
  }

  .case-study__item.swiper-slide-prev{
    margin-right: 40px!important;
  }

  .case-study .swiper-button-wrapper{
    max-width: 47%;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1399px){

  .case-study .swiper-wrapper{
    margin-left: -26px;
  }

  .case-study__item.swiper-slide-active{
    margin-right: 52px!important;
  }

  .case-study__item.swiper-slide-prev{
    margin-right: 52px!important;
  }

  .case-study .swiper-button-wrapper{
    max-width: 47%;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1599px){

  .case-study .swiper-wrapper{
    margin-left: -30px;
  }

  .case-study__item.swiper-slide-active{
    margin-right: 60px!important;
  }

  .case-study__item.swiper-slide-prev{
    margin-right: 60px!important;
  }

  .case-study .swiper-button-wrapper{
    max-width: 45%;
  }
}

@media screen and (min-width: 1600px){

  .case-study .swiper-wrapper{
    margin-left: -34px;
  }

  .case-study__item.swiper-slide-active{
    margin-right: 68px!important;
  }

  .case-study__item.swiper-slide-prev{
    margin-right: 68px!important;
  }

  .case-study .swiper-button-wrapper{
    max-width: 44%;
  }
}


/* 製品紹介
 ========================================================== */
.products{
  background: var(--light_blue);
}

.products .section__copy{
  margin-top: clamp(24px, calc(32 / 1600 * 100vw), 32px);
}
.products .section__copy p{
  text-align: center;
}

.products .products__btn-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, calc(16 / 1200 * 100vw), 16px);
  margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
}

.products .products__btn-item{
  border-radius: clamp(6px, calc(8 / 1200 * 100vw), 8px);
  overflow: hidden;
}

.products .products__btn-item a{
  font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px);
  font-weight: 700;
  text-align: center;
  line-height: calc(35.2 / 22);
  color: #fff;
  padding: clamp(12px, calc(16 / 1200 * 100vw), 16px) clamp(16px, calc(24 / 1200 * 100vw), 24px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: .3s ease-in-out;
}

.products .products__btn-item a:hover{
  opacity: .7;
}

.products-contents{
  background: #fff;
  padding: clamp(48px, calc(64 / 1200 * 100vw), 64px) clamp(16px, calc(48 / 1200 * 100vw), 48px);
  margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
}

.products-contents__unit + .products-contents__unit{
  margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}

.products-contents .section-title--small{
  width: fit-content;
  margin: 0 auto clamp(16px, calc(24 / 1200 * 100vw), 24px);
}

.products-contents .section-title--small.num::before{
  position: absolute;
  z-index: -1;
  color: var(--light_blue);
  font-size: clamp(80px, calc(120 / 1200 * 100vw), 120px);
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  top: 50%;
  right: calc(100% - 0.5em);
  transform: translateY(-50%);
}
.products-contents .section-title--small.num01::before{
  content: '01';
}
.products-contents .section-title--small.num02::before{
  content: '02';
}
.products-contents .section-title--small.num03::before{
  content: '03';
}

.products-contents .products-contents__text p{
  text-align: center;
}

.products-contents .img{
  margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}

.products .report{
  margin-top: clamp(28px, calc(32 / 1200 * 100vw), 32px);
  background: var(--light_blue02);
  border-radius: clamp(6px, calc(8 / 1200 * 100vw), 8px);
  padding: clamp(24px, calc(32 / 1200 * 100vw), 32px) clamp(16px, calc(32 / 1200 * 100vw), 32px);
}

.products .report .report__ttl{
  font-size: clamp(16px, calc(18 / 1200 * 100vw), 18px);
  letter-spacing: 0.04em;
  text-align: center;
}

.products .report__wrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
  margin-top: clamp(20px, calc(24 / 1200 * 100vw), 24px);
}

.products .report__wrapper .report__img,
.products .report__wrapper .report__text{
  width: calc(50% - clamp(8px, calc(12 / 1200 * 100vw), 12px));
}

.products-contents .kousoku{
  background: url(../img/top/kosoku.png) center center / cover no-repeat;
  height: 490px;
}

.kousoku{
  margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}

.kousoku-movie{
  margin: -110px auto 0;
  width: 95%;
  background: #fff;
  padding: clamp(8px, calc(20 / 1600 * 100vw), 20px);
  box-shadow: 0 2px 16px rgb(0 0 0 / .1);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, calc(20 / 1600 * 100vw), 20px) clamp(6px, calc(12 / 1600 * 100vw), 12px);
}

.kousoku-movie__item .kousoku-movie__desc{
  color: #fff;
  background: var(--orange);
  font-size: clamp(11px, calc(18 / 1200 * 100vw), 18px);
  letter-spacing: 0.04em;
  text-align: center;
  padding: clamp(2px, calc(4 / 1600 * 100vw), 4px) clamp(4px, calc(16 / 1600 * 100vw), 16px);
  margin-bottom: clamp(4px, calc(7 / 1600 * 100vw), 7px);
}

.angle{
  margin-top: clamp(28px, calc(32 / 1200 * 100vw), 32px);
  background: var(--light_blue02);
  border-radius: clamp(6px, calc(8 / 1200 * 100vw), 8px);
  padding: clamp(24px, calc(32 / 1200 * 100vw), 32px) clamp(16px, calc(32 / 1200 * 100vw), 32px);
}

.angle__wrapper{
  margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px);
}

.angle__item .angle__text{
  margin-top: clamp(12px, calc(16 / 1200 * 100vw), 16px);
}

.rousai-movie{
  background: #fff;
  padding: clamp(16px, calc(20 / 1600 * 100vw), 20px) clamp(16px, calc(20 / 1600 * 100vw), 20px) clamp(18px, calc(22 / 1600 * 100vw), 22px);
  box-shadow: 0 2px 16px rgb(0 0 0 / .1);
  margin-top: clamp(24px, calc(32 / 1600 * 100vw), 32px);
}

.rousai-movie__list{
  margin-top: clamp(12px, calc(16 / 1600 * 100vw), 16px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, calc(32 / 1600 * 100vw), 32px) clamp(10px, calc(16 / 1600 * 100vw), 16px);
}

.rousai-movie__item .rousai-movie__desc{
  text-align: center;
  margin-top: clamp(10px, calc(16 / 1600 * 100vw), 16px);
}

.saigai__wrapper{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(24px, calc(32 / 1600 * 100vw), 32px);
}

.saigai__wrapper .saigai__ttl{
  font-size: clamp(18px, calc(22 / 1200 * 100vw), 22px);
  color: #041e69;
  text-align: center;
}

.saigai__wrapper .saigai__img{
  margin-top: clamp(12px, calc(16 / 1600 * 100vw), 16px);
}

.saigai__wrapper .saigai__img figcaption{
  font-size: clamp(14px, calc(16 / 1200 * 100vw), 16px);
  letter-spacing: 0.05em;
  margin-top: clamp(6px, calc(8 / 1600 * 100vw), 8px);
  text-align: center;
}

.saigai__wrapper .saigai__right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.saigai__wrapper .saigai__right p + p{
  margin-top: 1.5em;
}

.movie-sample{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, calc(16 / 1600 * 100vw), 16px);
}

.movie-sample li img{
  max-width: 100%;
  width: 100%;
  height: auto;
}

.scene{
  margin-top: clamp(16px, calc(24 / 1600 * 100vw), 24px);
}

.scene .scene__text{
  font-size: clamp(16px, calc(18 / 1200 * 100vw), 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: calc(28.8 / 18);
  text-align: center;
}


@media screen and (max-width: 767px){
  .products-contents .kousoku{
    background: url(../img/top/kosoku.png) center center / 130% no-repeat;
    height: clamp(250px, calc(350 / 737 * 100vw), 350px);
    margin-inline: calc(clamp(16px, calc(48 / 1200 * 100vw), 48px) * -1);
  }

  .kousoku-movie{
    width: 100%;
  }

  .movie-sample{
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
  }
}

@media screen and (min-width:551px) and (max-width: 767px){
  .products .products__btn-list{
    gap: 10px;
  }
}
@media screen and (max-width: 550px){
  .products .section__copy p{
    text-align: left;
  }

  .products .products__btn-list{
    grid-template-columns: unset;
    gap: 14px;
    max-width: 400px;
    margin-inline: auto;
  }

  .products-contents .section-title--small.num::before{
    top: 50%;
    right: unset;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .products-contents .products-contents__text p{
    text-align: left;
  }

  .products .report__wrapper{
    display: block;
  }

  .products .report__wrapper .report__img,
  .products .report__wrapper .report__text{
    width: 100%;
  }

  .products .report__wrapper .report__text{
    margin-top: clamp(16px, calc(20 / 550 * 100vw), 20px);
  }

  .kousoku-movie{
    margin-top: -100px;
  }

  .angle__wrapper{
    grid-template-columns: unset;
    column-gap: unset;
    row-gap: clamp(24px, calc(32 / 550 * 100vw), 32px);
  }

  .rousai-movie__list{
    grid-template-columns: unset;
    column-gap: unset;
    row-gap: clamp(20px, calc(24 / 550 * 100vw), 24px);
  }

  .saigai__wrapper{
    grid-template-columns: unset;
    column-gap: unset;
    row-gap: clamp(20px, calc(24 / 550 * 100vw), 24px);
  }
}

@media screen and (max-width: 374px){
  .scene .scene__text{
    font-size: clamp(14px, calc(15 / 375 * 100vw), 15px);
  }
}


/* 機能
 ========================================================== */
.features__box{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, calc(48 / 1200 * 100vw), 48px) clamp(20px, calc(32 / 1200 * 100vw), 32px);
  margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
}

.features__item.new{
  position: relative;
}

.features__item.new::after{
  position: absolute;
  content: 'New';
  text-transform: uppercase;
  top: 0;
  left: 0;
  font-size: clamp(12px, calc(14 / 1200 * 100vw), 14px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--red);
  padding: 4px clamp(8px, calc(12 / 1200 * 100vw), 12px);
}

.features__item .img{
  overflow: hidden;
}

.features__item:nth-of-type(1) .img,
.features__item:nth-of-type(2) .img{
  aspect-ratio: 534 / 338;
}

.features__item:nth-of-type(3) .img,
.features__item:nth-of-type(4) .img{
  aspect-ratio: 534 / 303;
}

.features__item .img img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.features__item .section-sub-title{
  text-align: left;
  margin: clamp(18px, calc(24 / 1200 * 100vw), 24px) 0;
}
.features__item .features__text{
  font-size: clamp(14px, calc(15 / 1200 * 100vw), 15px);
  line-height: 1.8;
}

.features__item .btn--small{
  margin-top: clamp(18px, calc(24 / 1200 * 100vw), 24px);
}

@media screen and (max-width: 550px){
  .features__box{
    grid-template-columns: unset;
    column-gap: unset;
    row-gap: clamp(32px, calc(40 / 768 * 100vw), 40px);
  }
}


/* さまざまシーンにてご活用ください
 ========================================================== */
.usage{
  position: relative;
  z-index: 10;
  overflow: hidden;
  text-align: center;
  background-image: url("../img/bg.jpg");
}
.usage .usage__inner{
  position: relative;
  padding: 30px 0 40px;
  z-index: 1;
}
.usage .usage__unit{
  padding: 5px 0 0;
	margin: 0 auto;
}
.usage .usage__list{
  margin: clamp(24px, calc(30 / 1200 * 100vw), 30px) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.usage .usage__list li{
  background: var(--blue);
	color: #fff;
	padding: 5px 15px;
	font-size: clamp(16px, calc(18 / 1200 * 100vw), 18px);
	display: inline-block;
	border-radius: 5px;
}
.usage .usage__target-list{
  margin: clamp(16px, calc(20 / 1200 * 100vw), 20px) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.usage .usage__target-list li{
  font-size: clamp(15px, calc(17 / 1200 * 100vw), 17px);
  font-weight: 700;
}


/* 製品紹介・チュートリアル
 ========================================================== */
.tutorial-movie{
  padding-bottom: clamp(56px, calc(80 / 1200 * 100vw), 80px);
}
.tutorial-movie__inner{
  max-width: 852px;
  width: 90%;
  margin-inline: auto;
}
.tutorial-movie__list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
	column-gap: clamp(12px, calc(20 / 737 * 100vw), 20px);
  margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}
.tutorial-movie__list-item p{
  margin-top: clamp(8px, calc(14 / 1200 * 100vw), 14px);
  font-size: clamp(15px, calc(17 / 1200 * 100vw), 17px);
}

@media screen and (max-width: 767px){
  .tutorial-movie__inner{
    width: 100%;
    padding: 0 clamp(15px, calc(30 / 768 * 100vw), 30px);
  }
  .tutorial-movie__list{
		grid-template-columns: unset;
		row-gap: clamp(20px, calc(24 / 737 * 100vw), 24px);
  }
}