@charset "UTF-8";

:root {
  --color-white: #FFFFFF;
  --color-black: #3E3A39;
  --color-666666: #666666;
  --color-8a8a8a: #8a8a8a;
  --color-cdcdcd: #cdcdcd;
  --color-ebebeb: #ebebeb;
  --color-e1e1e2: #e1e1e2;
  --color-f3f3f3: #f3f3f3;
  --color-ececec: #ececec;
  --color-2b4cdb: #2b4cdb;
  --color-00B9EF: #00B9EF;
  --color-00AB5A: #00AB5A;
  --color-007320: #007320;
  --color-FDD000: #FDD000;
  --color-FFE901: #FFE901;
  --color-E8380D: #E8380D;
  --color-b89023: #b89023;
  --color-6b82e6: #6b82e6;
  --color-DDF3FA: #DDF3FA;
  --color-EAEDFB: #EAEDFB;
  --font10: 0.625rem;
  --font12: 0.75rem;
  --font13: 0.8125rem;
  --font14: 0.875rem;
  --font15: 0.9375rem;
  --font16: 1rem;
  --font17: 1.0625rem;
  --font18: 1.125rem;
  --font20: 1.25rem;
  --font21: 1.3125rem;
  --font24: 1.5rem;
  --font26: 1.625rem;
  --font28: 1.75rem;
  --font30: 1.875rem;
  --font32: 2rem;
  --font35: 2.1875rem;
  --font38: 2.1875rem;
  --font40: 2.5rem;
  --font43: 2.6875rem;
  --font45: 2.8125rem;
  --font50: 50px;
  --font60: 60px;
  --font70: 70px;
  --font80: 80px;
  --font90: 90px;

  --font-weight-bold: 700;
  --font-weight-normal: normal;
  --shape-triangle-top: polygon(50% 0, 100% 100%, 0 100%);
  --shape-triangle-right: polygon(0 0, 100% 50%, 0 100%);
  --shadow: 0 0.3rem 2.5rem -2rem rgba(85, 96, 96, 0.3), 0 0.3rem 0.5rem rgba(84, 96, 96, 0.376);
  --shadow2: 0 0.2rem 2rem -1rem rgba(85, 96, 96, 0.4), 0 0.2rem 0.3rem rgba(84, 96, 96, 0.4);
  --list-border: 1px solid var(--color-cfcfcf);
  --number-width: clamp(136px, 33.8vw, 180px);
  --stretch: stretch;
}

/*-- header --*/
.header-container{
  --breadcrumb-y: translateY(calc(var(--title-size) + (150% + 1cqi)));
  --page-header-pt: clamp(20px, 11vw / 1.4, 110px);
  --title-size: clamp(var(--font30), calc((0.0625rem * 30) + ((1vw - 3.7px) * (20 / 11.3))), var(--font50));
  --title-size-sub: clamp(var(--font21), calc((0.0625rem * 21) + ((1vw - 3.7px) * (22 / 11.3))), var(--font43));
  --title-mb-sub: 1em;
  --page-header-gap: clamp(40px, 7vw, 70px);
  --page-header-title-mb: 1.6em;
  --page-header-img-h: min(100%, 470px);

  &.header--type3{
    --breadcrumb-y: translateY(0);
    --page-header-pt: clamp(10px, 2.5vw / 1.4, 25px);
    --page-header-title-mb: 0.5em;
    --page-header-img-h: clamp(200px, 52vw / 1.5, 520px);
    --title-color-main: var(--color-main);
  }
  &.header--type4{
    --breadcrumb-y: translateY(0);
    --page-header-pt: clamp(10px, 2.5vw / 1.4, 25px);
    --title-size-sub: clamp(var(--font16), calc((0.0625rem * 16) + ((1vw - 3.7px) * (4 / 11.3))), var(--font20));
    --page-header-gap: clamp(1rem, 3.2vw / 1.75, 2rem);
    --page-header-title-mb: 0.5em;
    --page-header-img-h: clamp(200px, 52vw / 1.5, 310px);
    display: grid;
    gap: clamp(1.5rem, 4.8vw / 1.4, 3rem);
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-white) 40%, var(--color-main-light) 40%, var(--color-main-light) 100%);
  }
  &.header--type5{
    --page-header-pt: clamp(20px, 5vw / 1.4, 50px);
    --title-mb-sub: 0.1em;
    --breadcrumb-y: translateY(calc(var(--title-size) + (var(--title-size-sub) * 1.4) + var(--title-mb-sub) + (180% + 1cqi)));
  }

  padding-block: var(--page-header-pt) clamp(30px, 7vw / 1.5, 70px);
  .message &{
    padding-block: var(--page-header-pt) clamp(10px, 4vw / 1.5, 40px);
  }
}
/*-- パンくずリスト --*/
.breadcrumb{
  transform: var(--breadcrumb-y);
  ol{
    display: flex;
    flex-wrap: wrap;
    gap: 0.05em 2em;
  }
  li, a{
    font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 3.7px) * (1 / 11.3))), var(--font15));
    .header--type4 &{
      color: var(--color-666666);
    }
  }
  a{
    position: relative;
    color: var(--color-main);
    &::before{
      content: "";
      position: absolute;
      top: 50%;
      right: -1em;
      transform: translateY(-50%);
      width: 0.3em;
      height: 0.3em;
      border-right: 1px solid var(--color-666666);
      border-top: 1px solid var(--color-666666);
      rotate: 45deg;
    }
    &:hover{
      color: var(--color-main);
    }
  }
}
@media (width <=600px){
  .breadcrumb{
    display: none;
  }
}
/*-- headerタイトル --*/
.page-header{
  --w: min(45%, 600px);
  display: grid;
  .header--type2 &, .header--type3 &{
    grid-template-columns: var(--w) 1fr;
    gap: var(--page-header-gap);
  }
  .header--type3 &{
    align-items: center;
  }
  .header--type4 &{
    gap: var(--page-header-gap) 5%;
    color: var(--color-main);
    .text__note{
      display: inline-block;
      color: var(--color-m);
      margin-top: 1em;
    }
  }
  .header--type5 &{
    .page-header__list{
      list-style-type: disc;
      padding-top: 1rem;
      margin-left: 1.5em;
    }
    .text__note{
      margin-bottom: 0;
    }
  }
  p{
    line-height: 1.6;
  }
}
.page-header__title{
  font-size: var(--title-size);
  margin-bottom: var(--page-header-title-mb);
  .header--type3 &{
    display: grid;
    gap: .5em;
    padding-top: 1rem;
  }
  img{
    width: 1.4em;
    margin-right: 0.2em;
  }
}
.page-header__title-sub{
  display: block;
  font-size: var(--title-size-sub);
  margin-bottom: var(--title-mb-sub);
  span{
    font-size: 90%;
  }
}
.page-header__title-main{
  color: var(--title-color-main);
}
.header--type4 .page-header__description{
  max-width: 560px;
  margin-inline: auto;
}
.page-header__image{
  width: calc(50vw + (50% - var(--w)));
  margin-inline: auto calc(50% - (50vw - var(--w)));
  height: var(--page-header-img-h);
  img{
    height: 100%;
    object-fit: cover;
    .header--type2 &{
      object-position: left center;
    }
    .header--type3 &{
      border-radius: clamp(10px, 2vw / 1.4, 20px) 0 0 20px;
    }
  }
  .header--type4 &{
    margin-inline: auto;
    img{
      object-fit: contain;
    }
  }
}
.page-header__term{
  font-size: clamp(var(--font17), calc((0.0625rem * 17) + ((1vw - 3.7px) * (4 / 11.3))), var(--font21));
  font-weight: var(--font-weight-bold);
  margin-bottom: .5em;
}
/*音声*/
.page-header__voice{
  display: grid;
  justify-items: start;
  audio{
    width: min(100%, 500px);
  }
}
.voice__btn{
  position: relative;
  background: var(--color-main);
  border-radius: 2em;
  color: var(--color-white);
  padding-block: .5em;
  padding-inline: 4.5em 2em;
  margin-block: clamp(1.5rem, 3.2vw / 1.4, 2rem);
  &::after, &::before{
    top: 50%;
    transform: translateY(-50%);
  }
  &::after{
    content: "";
    position: absolute;
    left: 0;
    background: var(--color-white) url("../images/product-icon/icon_voice.svg") no-repeat center / 60%;
    border: 2px solid var(--color-main);
    border-radius: 50%;
    width: 3.5em;
    aspect-ratio: 1;
  }
  &::before{
    background: var(--color-white);
    right: 0.8em;
  }
}
@media (width <=1000px){
  .header-container{
    --page-header-pt: 5px;
    --page-header-img-h: clamp(200px, 30vw, 300px);
    body:not(.clients) &.header--type2{
      --breadcrumb-y: translateY(calc(var(--title-size) + (150% + 1cqi) + var(--page-header-img-h) + var(--page-header-gap)));
    }
    &.header--type3{
      --breadcrumb-y: translateY(calc((150% + 1cqi) + var(--page-header-img-h)));
    }
  }
  /*-- headerタイトル --*/
  .page-header{
    .header--type2 &, .header--type3 &{
      grid-template-columns: 1fr;
    }
  }
  .page-header__inner{
    order: 2;
  }
  .page-header__image{
    order: 1;
    width: 100vw;
    height: var(--page-header-img-h);
    margin-inline: calc(-50vw + 50%) auto;
    .header--type3 & img{
      border-radius: 0;
    }
  }
}
/*-- タイトル --*/
.title-type01{
  position: relative;
  font-size: clamp(var(--font24), calc((0.0625rem * 24) + ((1vw - 3.7px) * (4 / 11.3))), var(--font30));
  padding-left: 1.3em;
  margin-bottom: 1.5em;
  &::before{
    content: '';
    position: absolute;
    inset: calc(50% - 1.5px) calc(100% - 1em) calc(50% - 1.5px) 0;
    background: var(--color-main);
  }
}
.title-type02{
  color: var(--color-black);
  font-size: clamp(var(--font20), calc((0.0625rem * 20) + ((1vw - 3.7px) * (8 / 11.3))), var(--font28));
  padding-bottom: 2em;
  .product &{
    color: var(--color-main);
  }
}
/*キャッチコピー*/
.page-header__cat{
  font-weight: var(--font-weight-bold);
  margin-bottom: .5em;
}
/*-- ナンバー --*/
.list-number{
  counter-reset: num;
  >li{
    counter-increment: num;
    position: relative;
  }
}
/*表示されない*/
.visually-hidden {
  width: 1px !important;
  white-space: nowrap !important;
  height: 1px !important;
  border: 0 !important;
  clip: rect(0,0,0,0) !important;
  position: absolute !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: -1px !important;
}
/*テーブル*/
table{
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
/*-- 関連リンク,CTA --*/
.c-links-section__list{
  display: grid;
  gap: 2rem 5%;
  li{
    container-type: inline-size;
  }
  a{
    display: grid;
    align-items: center;
    &::before{
      --size: 0.5em;
    }
    &:hover{
      box-shadow: none;
      opacity: .8;
    }
  }
}
/*-- CTA --*/
.cta-section{
  background: var(--color-main-sub);
  color: var(--color-white);
}
.cta-section__title{
  font-size: clamp(18px, calc(12.29px + 1.43cqi), 28px);
  margin-bottom: 1.5em;
}
.cta-section__buttons{
  grid-template-columns: repeat(2, 1fr);
}
.cta-section__but{
  height: clamp(80px, calc(58.36px + 13.11cqw), 120px);
  box-shadow: var(--shadow);
  border: none;
  font-size: clamp(16px, calc(11.67px + 2.62cqw), 24px);
  padding-inline: 1.5em 2.5em;
  &::before{
    right: 1.5em;
  }
  .cta-section &:hover::before{
    right: 1em;
  }
}
/*-- 関連リンク --*/
.related-links-section{
  background: var(--color-main-light);
}
.related-links-list{
  grid-template-columns: repeat(auto-fit, minmax(clamp(340px, 37vw, 370px), 1fr));
}
.related-link-card{
  grid-template-columns: 1fr clamp(80px, calc(57.14px + 5.71cqi), 120px);
  gap: 0.5rem;
  height: clamp(100px, calc(-30.77px + 38.46cqw), 150px);
  background: var(--color-white);
  border-radius: 0.2em;
  box-shadow: var(--shadow2);
  font-size: clamp(16px, calc(5.54px + 3.08cqw), 20px);
  padding-inline: 2em 2.5em;
  &::after{
    content: '';
    position: absolute;
    inset: calc(50% - 1px) calc(100% - 1.6em) calc(50% - 1px) 0.8em;
    background: var(--color-main);
  }
}

/*-- サイドメニュー --*/
.container-flex{
  --side-w: clamp(180px, 26vw / 1.92, 260px);
  display: grid;
  grid-template-columns: 1fr var(--side-w);
  justify-content: space-between;
  align-items: flex-start;
  .width-1400{
    width: min(100vw - (6vw + var(--side-w)), 1400px - var(--side-w));
  }
  .width-1200{
    width: min(100vw - (6vw + var(--side-w)), 1200px - var(--side-w));
  }
  .width-1000{
    width: min(100vw - (6vw + var(--side-w)), 1100px - var(--side-w));
  }
}
.side-menu{
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
  width: 100%;
  height: calc(100dvh - 200px);
  overflow-y: auto;
  margin-top: 50px;
}
.side-menu__title-link{
  display: block;
  border-bottom: 1px solid var(--color-black);
  font-weight: var(--font-weight-bold);
  font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 10px) * (1 / 5))), var(--font15));
  padding: 0.5em;
  margin-bottom: 0.7em;
}
.side-menu__list{
  padding-left: 0.5em;
  li{
    border-left: 4px solid var(--color-e1e1e2);
  }
}
.side-menu__link{
  position: relative;
  width: calc(100% - 1.8em);
  font-size: clamp(var(--font13), calc((0.0625rem * 13) + ((1vw - 10px) * (1 / 5))), var(--font14));
  padding-block: 0.5em;
  padding-inline: 0.8em 1em;
  .nav__desc{
    display: none;
    font-size: 90%;
    transition: 0.5s;
  }
  .nav__name{
    font-weight: var(--font-weight-bold);
    &::after{
      content: '';
      position: absolute;
      inset: 0 100% 0 -4px;
      background: var(--color-main);
      transform: scaleY(0);
      transform-origin: top;
      transition: .5s;
    }
  }
  &:hover{
    .nav__desc{
      display: block;
    }
    .nav__name{
      color: var(--color-main);
      &::after{
        transform: scaleY(1);
      }
    }
  }
}
@media (width <=1000px){
  .container-flex{
    display: block;
    .width-1400{
      width: min(100vw - 6vw, 1400px);
    }
    .width-1200{
      width: min(100vw - 6vw, 1200px);
    }
    .width-1000{
      width: min(100vw - 6vw, 1100px);
    }
  }
  .side-menu{
    display: none;
  }
}

/*-- 合わせて連携 --*/
.integration__list{
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 30vw, 300px), 1fr));
  gap: 1rem 3%;
  &:has(> :nth-child(1):last-child){
    grid-template-columns: clamp(160px, 32vw, 320px);
  }
  &:has(> :nth-child(2):last-child){
    grid-template-columns:repeat(2 , clamp(160px, 32vw, 320px));
  }
  li{
    display: grid;
    place-items: end center;
    gap: 1em;
    width: calc(100% - 2em);
    background: var(--color-f3f3f3);
    padding-block: 1em;
    padding-inline: 1em;
  }
  p, .integration__link span:nth-child(2){
    font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 4px) * (2 / 4))), var(--font16));
  }
}
.integration__link{
  width: 70%;
  background: var(--color-black);
  border-radius: 0.2em;
  color: var(--color-white);
  padding: 0.8em 1.5em 0.8em 1em;
  span{
    display: inline-block;
    &:first-child{
      font-weight: var(--font-weight-bold);
      margin-right: 0.2em;
    }
  }
  &:hover{
    opacity: .8;
  }
}
/*-- システム連携 --*/
.integ__inner{
  position: relative;
  aspect-ratio: 14 / 15;
}
.product-card{
  position: absolute;
  display: grid;
  place-content: end center;
  justify-items: center;
  gap: 0.4em;
  box-sizing: border-box;
  width: 16.4%;
  padding-block: 0.5em;
  h3{
    display: inline-block;
    background: var(--color-main);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
  }
  h3, p{
    font-size: clamp(var(--font12), calc((0.0625rem * 12) + ((1vw - 9px) * (4 / 8.5))), var(--font16));
    line-height: 1.1;
  }
  &.active{
    background: var(--color-FFE901);
    border-radius: 0.2em;
  }
}
.product-card_03, .product-card_04, .product-card_05, .product-card_13{ bottom: 88%; }
.product-card_01, .product-card_02, .product-card_06, .product-card_08{ bottom: 64%; }
.product-card_12, .product-card_07, .product-card_09{ bottom: 42%; }
.product-card_10, .product-card_11{ bottom: 16%; }
.product-card_01, .product-card_03, .product-card_12, .product-card_10, .product-card_14{ left: 23%; }
.product-card_04, .product-card_02, .product-card_07{ left: 41.6%; }
.product-card_05, .product-card_06, .product-card_09, .product-card_11{ left: 60.2%; }
.product-card_13, .product-card_08{ right: 4.6%; }
.product-card_14{
  bottom: 3%;
  display: flex;
  align-items: center;
  gap: 2em;
  width: 45%;
}
@media (width <=900px){
  /*-- システム連携 --*/
  .integ__img{
    display: none;
  }
  .integ__list{
    background: var(--color-main-light);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1em;
    padding: 1rem;
  }
  .product-card{
    position: static;
    align-items: center;
    grid-template-rows: 1fr auto;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    border-radius: 1em;
    h3, p{
      margin-inline: .5em;
    }
    p{
      margin-top: .5em;
    }
    h3{
      margin-bottom: .5em;
    }
  }
    .product-card_14{
      display: grid;
    }
}