@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-d7ddf8: #d7ddf8;
  --color-main: #2b4cdb;
  --color-main-light: #EAEDFB;
  --color-main-sub: #6b82e6;
  --color-main-sub-light: #B1BDF7;
  --font10: 0.625rem;
  --font12: 0.75rem;
  --font13: 0.8125rem;
  --font14: 0.875rem;
  --font15: 0.9375rem;
  --font16: 1rem;
  --font17: 1.0625rem;
  --font18: 1.125rem;
  --font19: 1.1875rem;
  --font20: 1.25rem;
  --font21: 1.3125rem;
  --font24: 1.5rem;
  --font26: 1.625rem;
  --font28: 1.75rem;
  --font30: 1.875rem;
  --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%);
  --shape-triangle-bottom: polygon(0 0, 100% 0, 50% 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);
  --shadow3: 0 0.3rem 3.5rem -1.3rem rgba(85, 96, 96, 0.3), 0 0.3rem 0.45rem -0.15rem rgba(84, 96, 96, 0.2);
  --list-border: 1px solid var(--color-cfcfcf);
  --number-width: clamp(136px, 33.8vw, 180px);
  --stretch: stretch;
}

/* 共通
----------------------------*/
/*-- 特長共通 ---*/
.c-feature__description{
  width: min(100%, 470px);
  margin-inline: auto;
  margin-bottom: 2em;
}
.c-feature__list{
  --border: 2px solid var(--color-main);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 5.6vw / 1.3, 3.5rem) 0;
}
.c-feature__item{
  display: grid;
  justify-items: center;
  align-content: start;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: clamp(1.5rem, 3.2vw / 1.3, 2rem) clamp(1rem, 3.2vw / 1.3, 2rem);
  border-right: var(--border);
  padding-block: 0.5rem;
  padding-inline: 7%;
  &:has(> :nth-child(2):last-child){
    grid-row: span 2;
  }
  &:where(:first-child, :nth-child(4)){
    border-left: var(--border);
  }
  dd, p{line-height: 1.6;}
  dt{
    font-weight: var(--font-weight-bold);
  }
  dd:not(:last-child){
    margin-bottom: 1em;
  }
  >div p{
    margin-bottom: 1em;
  }
}
.c-feature__icon{
  width: clamp(80px, 13vw / 1.3, 130px);
}
.c-feature__item-title{
  position: relative;
  align-self: end;
  font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 3.7px) * (3 / 9.3))), var(--font21));
  color: var(--color-main);
  padding-bottom: 0.8em;
  &::before{
    content: '';
    position: absolute;
    inset: 100% calc(50% - 1.5em) -3px;
    background: var(--color-main);
  }
}
.c-feature__item-text{
  display: grid;
  align-content: start;
  margin-bottom: 0.5em;
  li{
    line-height: 1.2;
    margin-bottom: .5em;
  }
}
/*プラン*/
.plan__item-title{
  padding-block: 0.5em;
  margin-bottom: 1.2em;
}
.plan-free{ background: var(--color-black); }
.plan1{ background: var(--color-main); }
.plan2{ background: var(--color-main-sub); }
.plan3{ background: var(--color-main-sub-light); }
/*-- メリット,課題と成果共通,できること---*/
.benefits{
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-white) 50%, var(--color-main) 50%, var(--color-main) 100%);
  .product &{
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-white) 35%, var(--color-main) 35%, var(--color-main) 100%);
  }
}
.c-solution__list{
  display: flex;
  justify-content: center;
  gap: 1.5rem 1.8%;
  .product &{
    flex-wrap: wrap;
  }
}
.c-solution__item{
  width: clamp(140px, 23vw / 1.3, 230px);
  background: var(--color-white);
  text-align: center;
  padding-inline: 5px;
}
.benefits__item{
  display: grid;
  justify-items: center;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 1.5em;
  border: 2px solid;
  color: var(--color-main);
  padding-block: clamp(1.5rem, 4vw / 1.3, 2.5rem) clamp(0.8rem, 3.2vw / 1.4, 2rem);
  img{
    width: clamp(80px, 12vw / 1.3, 120px);
  }
  p{
    font-size: var(--font13);
  }
}
/*-- 図 --*/
.c-concept{
  --img-p: clamp(0.8rem, 3.2vw / 1.3, 2rem);
}
.c-concept__list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--img-p);
  margin-bottom: var(--img-p);
}
.c-concept__item{
  display: grid;
  background: var(--color-white);
  padding-block: var(--img-p);
  padding-inline: var(--img-p);
}
.c-concept__diagram{
  display: grid;
  justify-items: center;
  gap: 2rem;
  background: var(--color-white);
  padding: var(--img-p) var(--img-p) 0.5rem var(--img-p);
}
@media (width <=900px){
  /*メリット共通,課題と成果*/
  .c-solution__list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 21vw / 0.9, 210px), 1fr));
  }
  .c-solution .c-solution__item{
    width: calc(100% - 10px);
  }
  /*特長共通*/
  .c-feature__list{
    grid-template-columns: 1fr;
  }
  .c-feature__item{
    position: relative;
    place-items: center start;
    grid-template-rows: auto auto;
    border-right: 0;
    border-bottom: var(--border);
    padding-inline: 3%;
    &:is(:first-child, :nth-child(4)){
      border-left: 0;
    }
    &.item-icon{
      grid-template-columns: auto 1fr;
    }
    &.item-img{
      grid-template-columns: 1fr clamp(120px, 22vw / 0.9, 220px);
      grid-auto-flow: column;
    }
    .plan &{
      padding-top: 40px;
    }
  }
  .c-feature__icon, .c-feature__img{
    grid-row: span 2;
  }
  .c-feature__item-title{
    text-align: left;
    &::before{
      inset: 100% calc(100% - 3em) -3px 0;
    }
  }
  .c-feature__item-text{ 
    justify-items: start;
  }
  /*プラン*/
  .plan__item-title{
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100vw - 6vw - 6%);
    transform: translate(-50%, -20%);
  }
  .gate{
    .c-feature__item-title{
      order: 2;
      padding-bottom: 0;
      &::before{
        display: none;
      }
    }
    .c-feature__img{
      order: 1;
      width: clamp(120px, 28vw, 280px);
      img{
        height: clamp(100px, 15vw, 150px);
        object-fit: contain;
      }
    }
    .c-feature__text{
      order: 3;
    }
    .text-s{ line-height: 1.2; }
  }
}
/*-- システム一覧 --*/
.c-product__list{
  display: grid;
  gap: clamp(1.2rem, 2.56vw / 1.3, 1.6rem) max(10px, 2%);
}
.c-product__link{
  width: 100%;
  height: 100%;
  box-shadow: var(--shadow3);
  text-align: center;
  >*{
    padding-inline: 0.1em;
  }
  img{
    width: 50px;
  }
  h3{
    font-size: clamp(var(--font17), calc((0.0625rem * 17) + ((1vw - 3.7px) * (3 / 9.3))), var(--font20));
    padding-block: 0.4em 0.2em;
  }
  &:hover{
    opacity: .8;
    box-shadow: none;
  }
}
.c-product-description{
  font-size: clamp(var(--font14), calc((0.0625rem * 16) + ((1vw - 4px) * (2 / 9))), var(--font16));
}

/*製品・サービス
-------------------------*/
/*-- 導入の流れ --*/
.flow-list{
  display: grid;
  place-items: start;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  gap: 4rem 2rem;
  padding-top: 2rem;
}
.flow-list__item{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
  color: var(--color-main);
  &::before, &::after{
    position: absolute;
    top: -5px;
    transform: translateY(-100%);
    line-height: 1;
  }
  &::before{
    content: counter(num, decimal-leading-zero);
    left: 1.5em;
    font-weight: var(--font-weight-bold);
    font-size: clamp(var(--font20), calc((0.0625rem * 20) + ((1vw - 4px) * (4 / 9))), var(--font24));
  }
  &::after{
    content: 'Step';
    left: 0;
    font-size: var(--font14);
  }
}
.flow-step__title{
  border-top: 3px solid;
  font-size: clamp(var(--font16), calc((0.0625rem * 16) + ((1vw - 4px) * (2 / 9))), var(--font18));
  padding-block: 1.2em 0.5em;
  &::before{
    --size: clamp(10px, 15vw, 20px);
    top: -2px;
    right: -2px;
    transform: translateY(-50%);
  }
}
.flow-step__description{
  color: var(--color-black);
  font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 4px) * (2 / 9))), var(--font16));
}

@media (width <=900px){
  /*-- 導入の流れ --*/
  .flow-list{
    grid-template-columns: 1fr;
  }
  .flow-list__item{
    grid-template-columns: 35% 1fr;
    gap: 0.5em;
  }
  .flow-step__title{
    border-top: none;
    border-left: 4px solid;
    padding-block: 1.2em;
    padding-left: 1em;
    &::before{
      top: 100%;
      right: 100%;
      transform: rotate(90deg) translate(-10%, calc(-50% + 4px));
    }
  }
}
/*業種別でみる
-------------------------*/
.industry__list{
  --list-w: clamp(200px, 34vw / 1.14, 340px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--list-w), 1fr));
  gap:clamp(1.5rem, 4.8vw / 1.3, 3rem) clamp(0.5rem, 3.2vw / 1.3, 2rem);
}
.industry__item{
  container-type: inline-size;
  position: relative;
  &::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15%;
    aspect-ratio: 1;
    background: var(--color-main);
    z-index: -1;
  }
}
.industry__link{
  --p: clamp(5px, calc(5px + 10 * (100cqw - 320px) / 180), 15px);
  overflow: hidden;
  margin-top: var(--p);
  margin-left: var(--p);
  &:hover img{
    transform: scale(1.15);
  }
}
.industry__text{
  position: absolute;
  bottom: 30%;
  right: 0;
  background: var(--color-white);
  border-radius: 2.5em 0 0 2.5em;
  color: var(--color-main);
  font-weight: var(--font-weight-bold);
  font-size: clamp(var(--font16), calc(var(--font16) + 8 * (100cqw - 320px) / 180), var(--font24));
  padding: 0.5em 2em 0.5em 0.8em;
  margin-left: var(--p);
  z-index: 1;
}
.industry__img{
  aspect-ratio: 1.8;
  object-fit: cover;
  transition:  0.4s;
}

/*チケットHUB®とは
-------------------------*/
/*チケットHUBの特徴*/
.characteristic{
  .c-concept__diagram img{
    width: min(100% - (var(--img-p) * 2), 1190px);
  }
  figcaption{
    color: var(--color-666666);
  }
  .c-concept__item{
    align-items: center;
    grid-template-columns: 3em auto;
    gap: 1.5em;
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    font-size: clamp(var(--font17), calc((0.0625rem * 17) + ((1vw - 3.7px) * (3 / 9.3))), var(--font20));
  }
  .icon{
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-main);
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%) rotate(-45deg);
      width: 40%;
      aspect-ratio: 1.5;
      border-left: 3px solid var(--color-white);
      border-bottom: 3px solid var(--color-white);
    }
  }
}
/*概念図*/
.overview{
  .c-concept__item{
    justify-items: center;
    gap: 0.5em;
    text-align: center;
    h3{
      font-size: clamp(var(--font17), calc((0.0625rem * 17) + ((1vw - 3.7px) * (3 / 9.3))), var(--font20));
      vertical-align: middle;
      span{
        font-size: 120%;
      }
  }
    p{
      margin-bottom: 1.5em;
    }
  }
  .c-concept__item--user{
    color: var(--color-main);
    a{
      background: var(--color-main);
    }
  }
  .c-concept__item--seller{
    a{
      background: var(--color-black);
    }
  }
  .c-concept__link{
    border-radius: 0.2em;
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    padding-block: 1em;
    padding-inline: 1.5em 2.5em;
    &::after{
      right: 0.5em;
    }
    &:hover{
      transform: translateY(5px);
    }
  }
  .c-concept__diagram img{
    width: min(100% - (var(--img-p) * 2), 780px);
  }
}
/*保守サポート
-------------------------*/
/*表*/
.plan-comparison__table{
  --p-l: clamp(0.3em, 1.8vw, 1em);
  margin-bottom: clamp(1rem, 2.4vw, 2rem);
  :where(th, td){
    border: 1px solid var(--color-black);
    padding-block: 0.5em;
  }
}
.plan-comparison__head th{
  font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 4px) * (6 / 9))), var(--font20));
}
.head-cell--service{
  width: 46%;
  background: var(--color-black);
  padding-left: var(--p-l);
}
.head-cell--plan{
  width: 18%;
  span{
    display: block;
    font-size: clamp(var(--font13), calc((0.0625rem * 13) + ((1vw - 4px) * (3 / 9))), var(--font16));
  }
}
.plan-comparison__body th{
  background: var(--color-ebebeb);
  padding-left: var(--p-l);
  font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 4px) * (3 / 9))), var(--font17));
}
.comparison__none{
  border: 0;
}
/*製品システム一覧
-------------------------*/
/*カテゴリー*/
.product-category{
  .triangle-bottom::before{
    --size: 1em;
    left: 50%;
    transform: translate(-50%, 0);
  }
}
.product-filter__list{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 24vw / 1.3, 1.5rem) max(10px, 1.5%);
  padding-bottom: clamp(1.5rem, 3.2vw / 1.3, 2rem);
}
.filter-btn{
  position: relative;
  cursor: pointer;
  background: var(--color-black);
  border-radius: 1.1em;
  text-align: center;
  color: var(--color-white);
  font-size: clamp(var(--font16), calc((0.0625rem * 16) + ((1vw - 3.7px) * (2 / 9.3))), var(--font18));
  padding: 0.3em 1.3em;
  transition: .3s;
  &::before{
    bottom: 0;
    z-index: -1;
  }
  &.active{
    background: var(--color-main);
    &::before{
      animation: Filter .3s ease-out forwards;
    }
  }
  span{
    color: var(--color-FDD000);
  }
}
@keyframes Filter{
  0%  { transform: translate(-50%, 0); }
  100%{ transform: translate(-50%, 80%); }
}
.product-list__container{
  padding-block: clamp(2rem, 4.8vw / 1.3, 3rem);
}
.product__list{
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 23vw, 220px), 1fr));
}
.product__link{
  h3{
    padding-block: 0.4em 1em;
  }
}
.product__category{
  display: grid;
  place-content: center;
  height: 2.6em;
  color: var(--color-white);
  padding-block: 0.5em;
  margin-bottom: 1.5em;
  &::before{
    bottom: -0.9em;
  }
}
/*キーワード*/
.product-keyword__title{
  img{
    width: 1.6em;
    margin-left: 0.5em;
  }
}
.keyword__list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 29vw / 1.25, 290px), 1fr));
  gap: clamp(1.5rem, 3.2vw / 1.3, 2rem) max(10px, 2.5%);
  li{
    position: relative;
  }
}
details{
  &::details-content{
    transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
    height: 0;
    opacity: 0;
    overflow: clip;
  }
  &[open]::details-content{
    opacity: 1;
  }
}
@supports (interpolate-size: allow-keywords){
  :root{
    interpolate-size: allow-keywords;
  }
  details[open]::details-content{
    height: auto;
  }
}
@supports not (interpolate-size: allow-keywords){
  details[open]::details-content{
    height: 150px;
    overflow-y: scroll;
  }
}
summary{
  list-style: none;
  .keyword__btn{
    border: 1px solid;
    border-radius: 0.2em;
    text-align: left;
    font-weight: var(--font-weight-bold);
    padding-block: 0.8em;
    padding-inline: 0.8em 1em;
    transition: .3s;
    &:hover::before{
      right: 0.9em;
    }
    details[open] &{
      background: var(--color-main-sub);
      color: var(--color-white);
      &::before{
        transform: translateY(-50%) rotate(135deg);
      }
    }
  }
}
summary::-webkit-details-marker{
  display:none;
}
.keyword-product_list{
  padding: 1rem 0.5em;
  li{
    display: grid;
    margin-bottom: 1.2em;
  }
}
.keyword-product__category{
  order: 1;
  border-bottom: 1px solid;
  font-size: clamp(var(--font16), calc((0.0625rem * 16) + ((1vw - 3.7px) * (1 / 9.3))), var(--font17));
  font-weight: var(--font-weight-bold);
}
.keyword-product__description{
  order: 2;
  font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 3.7px) * (2 / 9.3))), var(--font16));
  padding-block: 0.5em 0.3em;
  line-height: 1.3;
}
.keyword-product__name{
  order: 3;
  a{
    background: var(--color-black);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
  }
}

/*業種別 ~編
-------------------------*/
/*-- 課題と成果共通---*/
.challenge-title{
  color: var(--color-white);
}
.challenge__item{
  container-type: inline-size;
  position: relative;
  width: clamp(140px, 20vw / 1.3, 200px);
  font-weight: var(--font-weight-bold);
  padding-block: 3em 1.2em;
  margin-top: clamp(7rem, 17.6vw / 1.3, 11rem);
  img{
    width: max(130px, 85%);
  }
}
.challenge__issues{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -90%);
  display: grid;
  place-content: center;
  width: clamp(130px, 18vw / 1.3, 180px);
  aspect-ratio: 1;
  background: var(--color-main-light);
  border-radius: 50%;
  color: var(--color-main);
  font-size: clamp(var(--font13), calc(var(--font13) + 5 * (100cqw - 150px) / 70), var(--font18));
  font-size: clamp(var(--font13), calc((0.0625rem * 13) + ((1vw - 9px) * (5 / 5))), var(--font18));
  padding: 5px;
  span{
    font-size: clamp(var(--font19), calc(var(--font19) + 9 * (100cqw - 150px) / 70), var(--font28));
    font-size: clamp(var(--font19), calc((0.0625rem * 19) + ((1vw - 9px) * (9 / 5))), var(--font28));
    line-height: 1.7;
  }
  &::before, &::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    background: var(--color-main);
  }
  &::before{
    --size: 1.2em;
    height: calc(var(--size) / 2 * tan(60deg));
    transform: translate(-50%, 140%);
  }
  &::after{
    width: 4px;
    height: 1.5em;
    transform: translate(-50%, 50%);
    border-radius: 2px;
  }
}
.challenge__results{
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1em;
  height: 100%;
}
.result{
  font-size: clamp(var(--font15), calc(var(--font15) + 5 * (100cqw - 150px) / 70), var(--font20));
}
/*-- 導入による効果・実績---*/
.effect-keywords{
  display: flex;
  justify-content: center;
  gap: 2.5%;
  li{
    display: grid;
    justify-items: center;
    align-content: start;
    gap: clamp(0.5em, 1.28vw, 0.8em);
    width:10em;
    aspect-ratio: 1;
    border: 3px solid;
    border-radius: 50%;
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    font-size: clamp(var(--font13), calc((0.0625rem * 13) + ((1vw - 4px) * (5 / 9))), var(--font18));
  }
  img{
    width: 55%;
    margin-top: 1.3em;
  }
}
.anchor-nav__list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: max(1rem, 3%);
  border-top: 3px solid;
  border-bottom: 3px solid;
  padding-block: 50px;
  margin-block: 5rem;
}
.anchor-nav__link{
  font-size: var(--font16);
  font-weight: var(--font-weight-bold);
  padding-block: 0.5em;
  padding-left: 1.2em;
  &::before{
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: calc(var(--size) / 2 * tan(60deg));
    background: var(--color-black);
  }
}
.effect-group__title{
  position: relative;
  background: var(--color-main);
  color: var(--color-white);
  font-size: clamp(var(--font20), calc((0.0625rem * 20) + ((1vw - 4px) * (4 / 9))), var(--font24));
  padding-block: 0.5em;
  padding-left: 1.5em;
  margin-bottom: 1.3em;
  &::before{
    content: '';
    position: absolute;
    inset: 0.5em calc(100% - 1.1em) 0.5em 0.9em;
    background: var(--color-FDD000);
  }
}
.effect-group__details{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(3rem, 6.4vw, 4rem) 85px;
  margin-bottom: 5rem;
}
.effect-detail__heading{
  font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 4px) * (3 / 9))), var(--font21));
  margin-bottom: 0.8em;
}
.effect-detail__text{
  --text-size: clamp(var(--font15), calc((0.0625rem * 15) + ((1vw - 4px) * (1 / 9))), var(--font16));
  font-size: var(--text-size);
  line-height: 1.6;
  a{
    display: inline;
    text-decoration: underline;
    font-size: var(--text-size);
    &:hover{
      color: var(--color-main);
      text-decoration: none;
    }
  }
  strong{
    background:linear-gradient(transparent 60%, var(--color-FFE901) 60%);
    font-weight: var(--font-weight-normal);
  }
}
.effect-detail__tags{
  margin-top: 1em;
  li{
    color: var(--color-8a8a8a);
  }
}
/*-- 製品システムリンク ---*/
.reason__list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.reason__link{
  --p-block: clamp(1rem, 3.2vw / 1.3, 2rem);
  border-top: 3px solid var(--color-main);
  img{
    padding-top: var(--p-block);
  }
  p{
    padding-bottom: var(--p-block);
  }
}
/*プロダクト
---------------------------*/
/*-- とは --*/
.intro__inner{
  display: grid;
  place-items: center;
  grid-template-columns: 1fr clamp(250px, 34vw / 1.5, 340px);
  gap: 1.5rem 8%;
  background: url(../images/common/back_image_intro1.jpg) no-repeat right center / contain;
  border: 1px solid var(--color-main);
  padding-block: clamp(0.8rem, 4.8vw, 3rem);
  padding-inline: clamp(0.8rem, 7vw, 70px);
}
.intro__title-main{
  font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 4px) * (3 / 6))), var(--font21));
  margin-bottom: 0.5em;
}
.intro__title-sub{
  font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 4px) * (2 / 6))), var(--font16));
}
.intro__content p{
  margin-bottom: .5em;
}
.intro__img{
  border-radius: 0.2rem;
}
@media (width <=900px){
  /*-- とは --*/
  .intro__inner{
    grid-template-columns: 1fr;
    background: url(../images/common/back_image_intro2.jpg) no-repeat right bottom / 100%;
    img{
      height: clamp(120px, 25vw, 250px);
      object-fit: contain;
    }
  }
}
/*-- 特徴 --*/
.features__title{
  color: var(--color-main);
}
.features__list{
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 3%;
  &::before, &::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: clamp(50px, 6vw / 1.5, 60px);
    aspect-ratio: 11 / 32;
    z-index: 1;
  }
  &::before{
    background: url(../images/business/icon_man.svg) no-repeat center / contain;
    right: 0;
  }
  &::after{
    background: url(../images/business/icon_woman.svg) no-repeat center  / contain;
    left: 0;
  }
}
.features__item{
  position: relative;
  display: grid;
  place-content: center;
  width: 8.5em;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1em;
}
.icon-point{
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 2em;
  aspect-ratio: 1;
  background: var(--color-main);
  border-radius: 50%;
  &::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.4em;
    height: 0.8em;
    border-right: 3px solid var(--color-white);
    border-bottom: 3px solid var(--color-white);
    transform: translate(-50%, -60%) rotate(45deg);
  }
}
/*-- 取り扱いチケット --*/
.ticket-types__list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 22vw, 220px), 1fr));
  gap: 1.5rem 2%;
  li{
    font-weight: var(--font-weight-bold);
    padding-block: 1em;
    padding-inline: 0.2em;
  }
  span{
    font-size: 90%;
  }
  a{
    font-size: 100%;
    padding-right: 1.2em;
    &::after{
      right: .1em;
      font-size: var(--font13);
    }
  }
}
/*-- 決済の種類 --*/
.payment-methods__list{
  border-top: 2px solid;
  border-bottom: 2px solid;
  display: flex;
  padding-block: clamp(0.8rem, 4.8vw, 3rem);
  margin-bottom: 1em;
  li{
    display: grid;
    justify-items: center;
    align-content: start;
    flex: 1;
    font-weight: var(--font-weight-bold);
    font-size: clamp(var(--font12), calc((0.0625rem * 12) + ((1vw - 4px) * (4 / 4))), var(--font16));
  }
  img{
    width: min(80%, 80px);
    margin-bottom: 0.2rem;
  }
}
/*-- デバイス一覧 --*/
.device__list{
  display: grid;
  place-items: start center;
  grid-template-columns: repeat(3, 21%) 1fr;
  gap: 2.5%;
  img{
    height: clamp(200px, 40vw / 1.2, 400px);
    object-fit: contain;
    margin-bottom: 1rem;
  }
}
.device__detail span{
  &:first-child{
    font-weight: var(--font-weight-bold);
    font-size: 14px;
  }
  &:nth-child(2){
    font-size: 12px;
  }
}
/*業態別活用例*/
.employ__list{
  border-top: 2px solid var(--color-main);
  >li{
    border-bottom: 2px solid var(--color-main);
  }
}
.employ__item{
  display: grid;
  justify-content: end;
  grid-template-columns: clamp(300px, 52vw / 1.4, 520px) 1fr;
  gap: clamp(20px, 4vw / 1.4, 40px);
  padding-block: clamp(20px, 4vw / 1.4, 40px);
  h3, p{
    color: var(--color-main);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.8em;
  }
  h3{
    font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 3.8px) * (6 / .2))), var(--font24));
  }
}
.employ__figure{
  width: clamp(250px, 40vw / 1.4, 400px);
  margin-inline: auto;
  img{
    border: 1px solid var(--color-666666);
  }
}
.employ__item-list li{
  position: relative;
  padding-left: 1.2em;
  &::before{
    content: '';
    position: absolute;
    inset: calc(0.7em - .3em) calc(100% - .6em) calc(100% - 0.7em - .3em) 0;
    background: var(--color-black);
  }
  &:not(:last-child){
    margin-bottom: .8em;
  }
}
@media (width <=900px){
  .employ__item{
    grid-template-columns: 1fr;
  }
  .employ__figure{
    width: clamp(250px, 40vw / 0.9, 400px);
  }
}
/*紹介*/
.introduce{
  padding-block: clamp(20px, 6vw / 1.4, 60px);
}
.introduce__inner{
  display: grid;
  justify-items: center;
  width: min(90%, 800px);
  padding-inline: 1rem;
  margin-inline: auto;
  p, img{
    margin-bottom: 1em;
  }
}
.introduce__img{
  width: clamp(100px, 30vw / 1.4, 300px);
}
.introduce__link{
  background: var(--color-white);
  border: 1px solid;
  border-radius: .2em;
  box-shadow: var(--shadow3);
  font-weight: var(--font-weight-bold);
  padding: .5em 2em .5em .5em;
}

/*スマ券NAVI
--------------------*/
/*深掘り分析*/
.data-analysis{
  .c-concept__item{
    padding: 0;
  }
}
.data-analysis__img{
  margin-bottom: clamp(15px, 5vw /1.4, 50px);
}
.data-content__title{
  color: var(--color-main);
  border-bottom: 2px solid;
  padding-block: 2em 1em;
  span{
    font-size: clamp(var(--font18), calc((0.0625rem * 18) + ((1vw - 4px) * (3 / 4))), var(--font21));
    margin-inline: .2em;
  }
}
.data-content{
  --margin: clamp(20px, 8.7cqw - 10.43px, 40px);
  container-type: inline-size;
  align-items: start;
  >div{
    margin-inline: var(--margin);
    padding-block: var(--margin);
  }
}
.data-content__sub-title{
  margin-bottom: 1em;
}
.data-content__period-list{
  margin-bottom: 1em;
  li{
    line-height: 1.8;
  }
}
.data-content__detail{
  border-top: 1px solid;
  li, p{
    font-size: clamp(14px, 0.87cqw + 10.96px, 16px);
  }
  .notes__item{
    display: flex;
    padding-top: .2em;
  }
}
.data-content__detail-inner{
  display: grid;
  grid-template-columns: 1fr clamp(100px, 39.13cqw - 76.96px, 150px);
}
.data-content__caption{
  font-size: clamp(16px, 0.87cqw + 12.96px, 18px);
  padding-block: .5em 1em;
}
/*機能*/
.purpose__list{
  gap: 1.5rem 5%;
}
.purpose__item{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: .5em;
}
.purpose__text{
  .font-bold{
    margin-block: .5em;
  }
}
.purpose__title{
  background: var(--color-main);
  color: var(--color-white);
  font-size: var(--font14);
  padding-block: 0.3em;
  span{
    font-size: 130%;
    margin-right: 0.2em;
  }
}
.purpose__footer{
  display: grid;
  place-items: center;
  gap: .5em;
  border-top: 1px solid var(--color-main);
  border-bottom: 3px solid var(--color-main);
  padding-block: 1rem;
  p{
    color: var(--color-main);
  }
  img{
    max-width: 200px;
  }
}
/*料金*/
.cell--type{ width: 6.2em;}
.sumaken-navi{
  .plan-comparison__content{
    padding-top: clamp(4.5rem, (10vw / 1.1), 6.25rem);
  }
  .head-cell--plan{
    width: 16%;
  }
  .plan-comparison__body th{
    width: 6em;
    vertical-align: top;
    span{
      font-size: 85%;
    }
  }
  .body-cell--type{
    font-size: clamp(var(--font14), calc((0.0625rem * 14) + ((1vw - 4px) * (2 / 9))), var(--font16));
    padding-left: 0.5em;
  }
}
.plan--color-type1 th{ background: var(--color-white); }
.plan--color-type2 :is(th, td){ background: var(--color-f3f3f3); }
.plan--color-type3 :is(th, td){ background: var(--color-e1e1e2); }
.plan--color-type4 :is(th, td){
  color: var(--color-main);
  background: var(--color-main-light);
}
.plan--color-type5 :is(th, td){
  color: var(--color-main);
  background: var(--color-d7ddf8);
}
.plan-free{
  position: relative;
}
.free-charge{
  position: absolute;
  top: -7.6em;
  left: 50%;
  transform: translateX(-50%);
  place-content: center;
  width: 6.2em;
  aspect-ratio: 1;
  border: 2px solid;
  border-radius: 50%;
  color: var(--color-black);
  font-size: clamp(var(--font14), (2vw / 1.4), var(--font20)) !important;
  line-height: 1.1;
  b{
    font-size: clamp(var(--font30), (6vw / 1.4), 60px);
  }
  &::before, &::after{
    --size: 0.7em;
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%, 100%);
    width: var(--size);
    height: calc(var(--size) / 1.2 * tan(60deg));
    clip-path: var(--shape-triangle-bottom);
  }
  &::before{
    background: var(--color-black);
    bottom: 0;
  }
  &::after{
    background: var(--color-white);
    bottom: 6px;
  }
}
/* WebketPOP
------------------------------ */
/*三角*/
.popup .triangle{
  padding-right: 2.5em;;
  &::before{
    top: 50%;
    right: 1em;
    transform: translateY(-50%);
    transition: .3s;
  }
  .popup__toggle:hover &::before, &:hover::before{
    right: 0.5em;
  }
}
/* ボタン */
.popup__toggle{
  display: grid;
  width: min(100% - 5vw - 2em, 600px - 2em);
  background: var(--color-white);
  border-radius: .5em;
  box-shadow: var(--shadow3);
  color: var(--color-main);
  text-align: start;
  cursor: pointer;
  transition: .3s;
  padding-block: 1em;
  padding-inline: 1em;
  margin-inline: auto;
  .popup__toggle-text{
    font-weight: var(--font-weight-b);
    font-size: clamp(var(--font16), calc((0.0625rem * 16) + ((1vw - 3.8px) * (5 / 10.2))), var(--font21));
    span{
      font-size: clamp(var(--font24), calc((0.0625rem * 24) + ((1vw - 3.8px) * (4 / 10.2))), var(--font28));
      margin-right: 0.2em;
    }
  }
  .popup__toggle-description{
    border-top: 2px solid;
    padding-top: .5em;
    margin-top: .5em;
  }
  &:hover{
    box-shadow: none;
    opacity: .8;
  }
}
@media (width <=640px){
  .product__header-wrap{
    display: flex block;
    flex-direction: column-reverse;
    .popup{
      background: var(--col-w);
      border-radius: 1em;
      margin-top: 50px;
      padding-bottom: 0;
    }
    .popup__toggle{
      width: calc(100%);
      padding: 1em;
    }
    .popup__toggle-text{
      display: grid;
    }
  }
}
/* POPup */
.popup-info{
  --p: 0.6em;
  --p-top: clamp(var(--fz30), 5.5vw, calc(var(--fz1) * 55));
  --p-bottom: clamp(var(--fz10), 3vw, var(--fz30));
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc((108vw / 1.1) - 6vw), 1080px);
  max-height: 90svh;
  overflow: auto;
  background: var(--color-white);
  box-shadow: var(--shadow);
  border-radius: 2rem;
  padding: var(--p-top) clamp(var(--fz10), 2vw, var(--fz20)) var(--p-bottom);
  &::backdrop{
    background: rgba(0, 0, 0, 0.8);
  }
  html:has(&[open], &:popover-open){
    overflow: hidden;
  }
}
.popup-info__content{
  position: relative;
  border-top: 3px solid var(--col);
  border-bottom: 3px solid var(--col);
  padding: 1em var(--p-bottom) 0 var(--p-bottom);
  h2{
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    font-size: clamp(var(--fz14), calc((0.0625rem * 14) + ((1vw - 3.6px)*(4/8.4))), var(--fz18));
    color: var(--col-w);
    background: var(--col);
    padding: var(--p) calc(var(--p) * 2);
  }
}
.popup__section{
  padding: var(--p-bottom) 0;
  &:not(:last-child){
    border-bottom: 1px dashed var(--col);
  }
  h3{
    color: var(--col-07);
    font-size: clamp(var(--fz19), calc((0.0625rem * 19) + ((1vw - 3.6px)*(5/8.4))), var(--fz18));
    margin-bottom: 0.8em;
  }
  .popup__contact-list{
    display: grid;
    gap: 1em;
  }
  li{
    position: relative;
    font-size: clamp(var(--fz14), 1.7vw, var(--fz17));
    &::before{
      position: absolute;
      left: 0;
      aspect-ratio: 1;
      border-radius: 50%;
    }
  }
  p{
    font-size: clamp(var(--fz14), 1.7vw, var(--fz17));
    margin-bottom: 0.8em;
    span{
      font-weight: 700
    }
  }
  ol{
    counter-reset: item;
    li{
      padding-left: 1.8em;
      &::before{
        counter-increment: item;
        content: counter(item);
        top: 0.2em;
        display: grid block;
        place-items: center;
        width: 1.2em;
        border: 1px solid;
        font-size: 0.9em;
        line-height: 1;
      }
    }
  }
  ul{
    li{
      padding-left: 0.8em;
      &::before{
        content: '';
        top: 0.5em;
        width: calc(var(--fz1) * 4);
        background: var(--col);
      }
      &:first-child{
        a{
          display: inline-block;
          background: var(--col-01);
          border: 1px solid;
          color: var(--col-07);
          font-size: clamp(var(--fz15), calc((0.0625rem * 15) + ((1vw - 3.6px)*(3/8.4))), var(--fz18));
          font-weight: 700;
          padding: 1em 3.5em 1em 1.3em;
          margin-bottom: 0.5em;
          &:hover{
            background: var(--col-08);
            color: var(--col);
          }
        }
      }
      &:nth-child(2){
        a{
          color: var(--col-07);
          border-bottom: 1px solid;
          &:hover{
            color: var(--col);
          }
        }
      }
    }
  }
  .suppl-info{
    font-size: clamp(var(--fz13), calc((0.0625rem * 13) + ((1vw - 3.6px)*(3/8.4))), var(--fz16));
  }
}
.close-btn-wrap{
  display: grid block;
  justify-items: center;
  padding-top: var(--p-bottom);
  .close-icon{
    top: 10px;
    right: min(2vw, 30px);
    width: clamp(50px, 10vw, 100px);
  }
  .close-text{
    place-items: center;
    width: min(500px, 50vw);
    height: 3em;
    border: 1px solid;
    border-radius: 1.5em;
    font-size: clamp(var(--fz18), calc((0.0625rem * 18) + ((1vw - 3.6px)*(6/8.4))), var(--fz24));
  }
}
.close-btn{
  background: transparent;
  cursor: pointer;
  span{
    display: grid block;
    background: var(--col-01);
    transition: 0.3s;
    &:hover{
      background: var(--col-08);
    }
  }
}
.close-icon{
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  &::before,
  &::after{
    content: '';
    position: absolute;
    inset: calc(50% - 1px) var(--fz10);
    background: var(--col);
  }
  &::before{
    rotate: 45deg;
  }
  &::after{
    rotate: -45deg;
  }
}