@charset "UTF-8";
main {
  color: #333333;
}

/**/
.contents-hero {
  display: block;
  background-color: #F6FEFF;
  background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(246,254,255,1) 100%);
}
.contents-hero > .content {
  inline-size: var(--contents-width);
  margin-inline: auto;
  display: grid;
}
.contents-hero > .content > .cta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  row-gap: 10px;
  column-gap: 20px;
}
.contents-hero > .content > .cta > li> a {
  padding-block: 0.8em;
  letter-spacing: 0.1em;
  font-weight: bold;
}
.contents-hero > .content > .description {
  font-size: 16px;
  font-weight: bold;
}
.contents-hero > .content > .headline {
  margin: 0;
}
.contents-hero > .content > .headline > img {
  display: block;
  aspect-ratio: 492 / 146;
  animation-name: hiroimg;
  animation-duration: 0.5s;
  animation-delay: 0.8s;
  animation-timing-function: ease-in-out;
}
@keyframes hiroimg {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.1;
  }
  100% {
    scale: 1;
  }
}
.contents-hero > .content > .image > img {
  display: block;
  aspect-ratio: 570 / 376;
}
@media (min-width: 1px) and (max-width: 520.99px) {
  .contents-hero {
    margin-block-end: 50px;
  }
  .contents-hero > .content {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .contents-hero > .content > .cta {
    grid-row: 4;
  }
  .contents-hero > .content > .description {
    grid-row: 3;
  }
  .contents-hero > .content > .headline {
    grid-row: 2;
  }
  .contents-hero > .content > .image {
    grid-row: 1;
    margin-block: 25px;
  }
}
@media (min-width: 521px) and (max-width: 768.99px) {
  .contents-hero {
    margin-block-end: 50px;
  }
  .contents-hero > .content {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .contents-hero > .content > .cta {
    grid-row: 4;
  }
  .contents-hero > .content > .description {
    grid-row: 3;
  }
  .contents-hero > .content > .headline {
    grid-row: 2;
  }
  .contents-hero > .content > .image {
    grid-row: 1;
    margin-block: 25px;
  }
}
@media (min-width: 769px) and (max-width: 1199.99px) {
  .contents-hero {
    padding-block: 64px;
  }
  .contents-hero > .content {
    grid-template-columns: 7fr 1fr 7fr;
    grid-template-rows: auto auto 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .contents-hero > .content > .cta {
    grid-row: 3;
  }
  .contents-hero > .content > .description {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-block: 30px;
  }
  .contents-hero > .content > .headline {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .contents-hero > .content > .image {
    grid-column: 2 / 4;
    grid-row: 1 / 4;
    max-inline-size: 570px;
    margin: auto 0 auto auto;
  }
}
@media (min-width: 1200px) {
  .contents-hero {
    padding-block: 64px;
  }
  .contents-hero > .content {
    grid-template-columns: 5fr 1fr 5fr;
    grid-template-rows: auto auto 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
  .contents-hero > .content > .cta {
    grid-row: 3;
  }
  .contents-hero > .content > .description {
    grid-column: 1 / 3;
    grid-row: 2;
    margin-block: 44px;
  }
  .contents-hero > .content > .headline {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .contents-hero > .content > .image {
    grid-column: 2 / 4;
    grid-row: 1 / 4;
    max-inline-size: 570px;
    margin: auto 0 auto auto;
  }
}
/**/
.contents-homecompany {
  display: flow-root;
  margin-block: 60px;
  margin-inline: auto;
  border-color: rgba(0,0,0,0.2);
  border-radius: 8px;
  border-style: solid;
  border-width: thin;
  inline-size: var(--contents-width);
}
.contents-homecompany > .content {
  margin-block: 30px;
}
.contents-homecompany > .content > .identity > .headline {
  margin-block: 10px 0;
  margin-inline: auto;
  inline-size: fit-content;
  font-size: 14px;
}
.contents-homecompany > .content > .identity > .image {
  display: block;
}
.contents-homecompany > .content > .identity > .image > a {
  display: block;
}
.contents-homecompany > .content > .description > .paragraph {
  margin-block: 0 20px;
}
.contents-homecompany > .content > .description > .service {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contents-homecompany > .content > .description > .service > li {
  inline-size: 160px;
  max-inline-size: 40%;
}
.contents-homecompany > .content > .description > .service > li > a {}
.contents-homecompany > .content > .description > .service > li > a > img {}
.contents-homecompany > .headline {
  margin-block: 32px;
  margin-inline: auto;
  inline-size: fit-content;
  word-break: keep-all;
  font-size: 24px;
  font-weight: bold;
}
@media (min-width: 1px) and (max-width: 520.99px) {
  .contents-homecompany > .content {
    margin-inline: 20px;
  }
  .contents-homecompany > .content > .identity {
    margin-block: 20px;
    margin-inline: auto;
    inline-size: 61.8%;
  }
}
@media (min-width: 521px) and (max-width: 768.99px) {
  .contents-homecompany > .content {
    margin-inline: 20px;
  }
  .contents-homecompany > .content > .identity {
    margin-block: 20px;
    margin-inline: auto;
    inline-size: 220px;
  }
}
@media (min-width: 769px) and (max-width: 1199.99px) {
  .contents-homecompany > .content {
    display: flex;
    gap: 40px;
    margin-inline: 40px;
  }
  .contents-homecompany > .content > .identity {
    flex-shrink: 0;
    inline-size: 220px;
  }
}
@media (min-width: 1200px) {
  .contents-homecompany > .content {
    display: flex;
    gap: 60px;
    margin-inline: 60px;
  }
  .contents-homecompany > .content > .identity {
    flex-shrink: 0;
    inline-size: 260px;
  }
}
/**/
.contents-homecustomers {
  display: flow-root;
  margin-block: 60px;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-block-size: 200px;
}
.contents-homecustomers > ul {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 40px;
  margin-block: 40px;
  margin-inline: 0;
  padding-inline-start: 0;
  block-size: 40px;
  min-inline-size: 200%;
  list-style: none;
  user-select: none;
  pointer-events: none;
}
.contents-homecustomers > ul > li {
  flex-shrink: 0;
  max-block-size: 40px;
  max-inline-size: 200px;
}
.contents-homecustomers > ul > li > img {
  max-block-size: inherit;
  max-inline-size: inherit;
}
@media screen {
  .contents-homecustomers > ul {
    animation-delay: 0s;
    animation-duration: 30s;
    animation-name: homecustomers;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  .contents-homecustomers > ul:nth-child(odd) {
    animation-direction: alternate;
  }
  .contents-homecustomers > ul:nth-child(even) {
    animation-direction: alternate-reverse;
  }
  @keyframes homecustomers {
    0% {
      transform: translateX(-50%);
    }
    100% {
      transform: translateX(0);
    }
  }
}
/**/
.contents-hometrademark {
  display: flow-root;
  margin-block: 60px 20px;
  margin-inline: auto;
  inline-size: var(--contents-width);
}
.contents-hometrademark > p {
  margin-block: 0;
  margin-inline-start: auto;
  inline-size: fit-content;
}
.contents-hometrademark > p > img {
  block-size: 1.618em;
  vertical-align: middle;
}
/**/
.contents-features {
  display: block;
  margin-block: 65px;
  contain: paint;
}
.contents-features > .header {
  text-align: center;
}
.contents-features > .header > h2 {
  margin: 0;
  color: #525252;
  font-size: clamp(1.375rem, 1.221rem + 0.77vw, 1.75rem);
}
.contents-features > .header > p {
  margin: 0;
  color: #2ea7e0;
  font-weight: bold;
  font-size: 16px;
}
.contents-features > .section {
  display: flex;
  background-color: #F8F8F8;
  gap: 32px;
  margin-block: 38px;
  margin-inline: auto;
  padding: 36px;
  inline-size: var(--contents-width);
  box-sizing: border-box;
}
.contents-features > .section > .content {
  flex-grow: 1;
  flex-basis: 0;
}
.contents-features > .section > .content > .heading {
  margin-block-start: 0;
  margin-block-end: 14px;
  font-size: clamp(1.375rem, 1.221rem + 0.77vw, 1.75rem);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 15px;
}
.contents-features > .section > .content > .heading > span {
  display: block;
  background: #2ea7e0;
  color: #FFFFFF;
  border-radius: 50%;
  block-size: 40px;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  text-align: center;
  font-weight: bold;
}
.contents-features > .section > .content > .list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(282px, 1fr));
  margin: 0;
  padding: 0;
}
.contents-features > .section > .content > .list > li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 20px;
  padding-inline: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #525252;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-sizing: border-box;
}
.contents-features > .section > .content > .list > li::before {
  content: "";
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" fill="rgba(46,167,224,1)" /></svg>');
  background-position: center;
  background-repeat: no-repeat;
  block-size:  1em;
  aspect-ratio: 1 / 1;
}
.contents-features > .section > .image {
  max-inline-size: 400px;
  margin-inline: auto;
}
.contents-features > .section > .unit {
  background-color: #FFFFFF;
  border-radius: 8px;
  max-inline-size: 400px;
  box-sizing: border-box;
  padding: 30px;
  margin-inline: auto;
}
.contents-features > .section > .unit > .headline {
  margin: 0;
  font-size: 16px;
  color: #525252;
  text-align: center;
  margin-block-end: 25px;
}
@media (min-width: 1px) and (max-width: 520.99px) {
  .contents-features > .section {
    flex-direction: column;
    padding: 20px;
  }
  .contents-features > .section > .content > .heading > span {
    padding-block-start: 8px;
  }
  .contents-features > .section > .content > .list {
    gap: 12px;
  }
}
@media (min-width: 521px) and (max-width: 768.99px) {
  .contents-features > .section {
    flex-direction: column;
    padding: 20px;
  }
  .contents-features > .section > .content > .heading > span {
    padding-block-start: 8px;
  }
  .contents-features > .section > .content > .list {
    gap: 12px;
  }
}
@media (min-width: 769px) and (max-width: 1199.99px) {
  .contents-features > .section > .content > .heading > span {
    padding-block-start: 4px;
  }
  .contents-features > .section > .content > .list {
    gap: 24px;
  }
}
@media (min-width: 1200px) {
  .contents-features > .section > .content > .heading > span {
    padding-block-start: 4px;
  }
  .contents-features > .section > .content > .list {
    gap: 24px;
  }
}
/**/
.contents-section {
  display: block;
  contain: paint;
}
.contents-section > .cases {
  display: flex;
  justify-content: start;
  gap: 24px;
  margin-block-start: 50px;
  margin-inline: auto;
  inline-size: calc(var(--contents-width) + 32px);
  contain: paint;
}
.contents-section > .cases::after,
.contents-section > .cases::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 24px;
}
.contents-section > .cases::after {
  margin-inline-start: auto;
  background-image: linear-gradient(to left, rgba(255,255,255,1), transparent);
}
.contents-section > .cases::before {
  margin-inline-end: auto;
  background-image: linear-gradient(to right, rgba(255,255,255,1), transparent);
}
.contents-section > .cases > .item {
  flex-shrink: 0;
  inline-size: 300px;
}
.contents-section > .cases > .item > .image {
  display: block;
  aspect-ratio: 4 / 3;
  position: relative;
}
.contents-section > .cases > .item > .image::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(to right, transparent 20%, rgba(255,255,255,0.4) 50%, transparent 100%);
  background-position-x: 200%;
  background-repeat: no-repeat;
  background-size: 200% auto;
}
.contents-section > .cases > .item > .image > img {
  display: inherit;
  aspect-ratio: inherit;
}
.contents-section > .cases > .item > .image:hover::before {
  background-position-x: -200%;
}
.contents-section > .cases > .item > .text {
  margin-block: 10px;
}
.contents-section > .cases > .item > .title {
  font-weight: bold;
  margin-block: 10px;
}
.contents-section > .formrelay {
  position: relative;
  margin-block-start: 60px;
  margin-inline: auto;
  inline-size: var(--contents-width);
  contain: paint;
}
.contents-section > .formrelay > .headline {
  margin: 0;
  font-size: clamp(1rem, 0.692rem + 1.54vw, 1.75rem);
}
.contents-section > .formrelay > .image > img {
  display: block;
}
.contents-section > .formrelay > .image > source {
  display: block;
}
.contents-section > .formrelay > .sup {
  position: absolute;
}
.contents-section > .formrelay > .sup > img {
  display: block;
  aspect-ratio: 175 / 256;
}
.contents-section > .formrelay > .text {
  margin: 10px 0 40px 0;
  color: #525252;
  font-size: 16px;
}
.contents-section > .formrelay > .text > strong {
  color: #EA5C70;
}
.contents-section > .guest {
  inline-size: var(--contents-width);
  margin-inline: auto;
  background-color: #F5F5F5;
  border-radius: 10px;
  padding: 50px;
  margin-block-end: 64px;
  box-sizing: border-box;
}
.contents-section > .guest > p {
  font-size: 16px;
}
.contents-section > .guest > hgroup {
  display: flex;
  gap: 10px;
}
.contents-section > .guest > hgroup > p {
  width: fit-content;
  background-color: #2ea7e0;
  color: #FFFFFF;
  padding-inline: 10px;
  padding-block: 5px;
  font-weight: bold;
  border-radius: 5px;
  margin: 0;
  font-size: 16px;
}
.contents-section > .guest > hgroup > .title {
  margin: 0;
}
.contents-section > .guest > .image {
  display: flex;
}
.contents-section > .guest > .image > .item > img {
  aspect-ratio: 480 / 212;
  height: auto;
}
.contents-section > .header {
  background-image: url(/src/img/home2/bg-title.png);
  background-size: 160px 114px;
  padding-block: 26px;
}
.contents-section > .header > .headline {
  inline-size: var(--contents-width);
  margin-inline: auto;
  margin-block: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(46,167,224,1);
  font-size: clamp(0.875rem, 0.824rem + 0.26vw, 1rem);
}
.contents-section > .header > .headline::before {
  content: "";
  display: block;
  border-color: currentColor;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.4em;
  background-color: rgba(255,255,255,1);
  block-size: 0.6em;
  aspect-ratio: 1 / 1;
}
.contents-section > .header > .headline > small {
  margin-inline-start: 12px;
  color: rgba(0,0,0,0.5);
  font-size: 100%;
}
.contents-section > .header > .text {
  inline-size: var(--contents-width);
  margin-inline: auto;
  margin-block-start: 8px;
  margin-block-end: 0;
  font-size: clamp(1.375rem, 1.221rem + 0.77vw, 1.75rem);
  font-weight: 800;
  color: #222222;
}
.contents-section > .header + p {
  inline-size: var(--contents-width);
  margin-inline: auto;
  margin-block: 30px;
  font-weight: bold;
  color: #525252;
  font-size: 16px;
}
.contents-section > .link {
  list-style: none;
  margin-block-start: 40px;
  margin-block-end: 65px;
  padding: 0;
  text-align: center;
}
.contents-section > .schedulingform {
  inline-size: var(--contents-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.contents-section > .schedulingform > .item > .image {
  aspect-ratio: 113 / 173;
}
.contents-section > .schedulingform > .item > .image > img {
  display: block;
}
.contents-section > .schedulingform > .item > .text {
  margin: 0;
  text-align: center;
  color: #525252;
  font-size: 16px;
  font-weight: bold;
  word-break: keep-all;
}
.contents-section > .schedulingtype {
  inline-size: var(--contents-width);
  margin-inline: auto;
}
.contents-section > .schedulingtype > .content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(333px, 1fr));
}
.contents-section > .schedulingtype > .content > .item {
  background-color: #F5F5F5;
}
.contents-section > .schedulingtype > .content > .item > .image {
  margin-inline: 10px;
}
.contents-section > .schedulingtype > .content > .item > .image > img {
  display: block;
  block-size: 148px;
}
.contents-section > .schedulingtype > .content > .item > .label {
  inline-size: 100%;
  padding: 10px 25px;
  box-sizing: border-box;
  background-color: #E3F4F9;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}
.contents-section > .schedulingtype > .content > .item > .text {
  margin: 0 10px 10px;
}
.contents-section > .schedulingtype > .content > .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.contents-section > .schedulingtype > .header {
  display: flex;
  margin-block: 20px;
  gap: 16px;
}
.contents-section > .schedulingtype > .header > h3 {
  inline-size: fit-content;
  background-color: #525252;
  color: #FFFFFF;;
  font-size: 14px;
  padding: 8px 30px;
  margin: 0;
  letter-spacing: 0.1em;
}
.contents-section > .schedulingtype > .header > p {
  font-weight: bold;
  font-size: 16px;
  color: #525252;
  margin: 0;
}
.contents-section > .utilize {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.contents-section > .text {
  inline-size: var(--contents-width);
  margin-inline: auto;
}
.contents-section > .utilize {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin-inline: auto;
  padding-block-start: 20px;
  margin-block-end: 40px;
  inline-size: var(--contents-width);
}
.contents-section > .utilize > .position {
  flex-shrink: 0;
  inline-size: 22%;
}
.contents-section > .utilize > .position > .action {
  margin: 0;
  background-color: rgba(46,167,224,1);
  padding-block: 32px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1;
  color: rgba(255,255,255,1);
  container-type: inline-size;
}
.contents-section > .utilize > .position > .action > p {
  display: block;
  margin-block: 0;
  padding-inline: 0.618em;
  word-break: keep-all;
  font-size: 10cqi;
  font-weight: bold;
}
.contents-section > .utilize > .position > .action > svg {
  margin-block-end: 0.382em;
  inline-size: 38.2%;
  max-inline-size: 64px;
  aspect-ratio: 1 / 1;
}
.contents-section > .utilize > .position > .label {
  margin-block-end: 0.618em;
  margin-block-start: 0;
  margin-inline: auto;
  inline-size: fit-content;
  font-size: 80%;
  font-weight: bold;
}
.contents-section > .utilize > .position > .persons {
  margin: 0;
  padding: 0;
  inline-size: 100%;
  aspect-ratio: 34/19;
}
.contents-section > .utilize > .position > .persons > img {
  display: block;
  margin-inline: auto;
}
.contents-section > .utilize > .position.type\:customer {
  order: 3;
}
.contents-section > .utilize > .position.type\:customer > .action {
  margin-inline-start: -15%;
  padding-inline-start: 15%;
  clip-path: polygon(100% 0%, 15% 0%, 0% 50%, 15% 100%, 100% 100%);
}
.contents-section > .utilize > .position.type\:operator {
  order: 1;
}
.contents-section > .utilize > .position.type\:operator > .action {
  margin-inline-end: -15%;
  padding-inline-end: 15%;
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
}
.contents-section > .utilize > .service {
  order: 2;
  inline-size: 45%;
}
.contents-section > .utilize > .service > .content {
  display: block;
  border-color: rgba(0,0,0,0.1);
  border-radius: 8px;
  border-style: solid;
  border-width: thick;
  background-color: rgba(255,255,255,1);
  padding: 8px;
}
.contents-section > .utilize > .service > .content > img {
  display: block;
}
.contents-section > .utilize > .service > .label {
  margin-block-end: 0.618em;
  margin-block-start: 0;
  margin-inline: auto;
  inline-size: fit-content;
  font-size: 80%;
  font-weight: bold;
}
.contents-section > .webinar {
  display: flex;
  inline-size: min(calc(100% - 32px), 1120px);
  margin-inline: auto;
}
.contents-section > .webinar > .primary {
  max-inline-size: 826px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contents-section > .webinar > .primary > .image {
  display: block;
}
.contents-section > .webinar > .primary > .image > img {
  display: block;
}
.contents-section > .webinar > .primary > .point {
  padding: 0;
  margin: 0;
  display: flex;
}
.contents-section > .webinar > .primary > .point > li {
  display: flex;
  align-items: center;
  gap: 20px;
  line-height: 1.618;
  background-color: #2ea7e0;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 20px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}
.contents-section > .webinar > .primary > .point > li::before {
  content: "";
  display: block;
  border-radius: 50%;
  background-color: #FFFFFF;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" fill="rgba(46, 167, 224,1)" /></svg>');
  background-position: center;
  background-repeat: no-repeat;
  block-size: 2em;
  aspect-ratio: 1 / 1;
}
.contents-section > .webinar > .secondary {
  max-inline-size: 218px;
}
.contents-section > .webinar > .secondary > .image > img {
  display: block;
}
.contents-section > .webinar > .secondary > .text {
  text-align: center;
  font-weight: bold;
}
@media (min-width: 1px) and (max-width: 520.99px) {
  .contents-section > .formrelay > .headline,
  .contents-section > .formrelay > .sup,
  .contents-section > .formrelay > .text {
    display: none;
  }
  .contents-section > .guest > hgroup {
    flex-direction: column;
    gap: 10px;
  }
  .contents-section > .guest > .image {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .contents-section > .schedulingform {
    overflow-x: scroll;
    padding-block-end: 20px;
    gap: 20px;
  }
  .contents-section > .schedulingform > .item {
    inline-size: 200px;
  }
  .contents-section > .schedulingtype > .content {
    gap: 10px;
  }
  .contents-section > .schedulingtype > .header {
    flex-direction: column;
  }
  .contents-section > .utilize {
    gap: 0;
    font-size: 10px;
  }
  .contents-section > .utilize > .position > .action {
    padding-block: 20px;
  }
  .contents-section > .utilize > .service {
    margin-inline: -25%;
    inline-size: 50%;
  }
  .contents-section > .webinar {
    flex-direction: column;
    gap: 35px;
  }
  .contents-section > .webinar > .primary > .point {
    flex-direction: column;
    gap: 10px;
  }
  .contents-section > .webinar > .secondary {
    margin-inline: auto;
  }
}
@media (min-width: 521px) and (max-width: 768.99px) {
  .contents-section > .formrelay {
    border-width: 2px;
    border-style: solid;
    border-color: #D0EC94;
    background-color: #FAFFF4;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
  }
  .contents-section > .formrelay > .sup {
    bottom: 40%;
    right: 20px;
    inline-size: 17%;
  }
  .contents-section > .formrelay > .text {
    max-inline-size: 80%;
  }
  .contents-section > .guest > hgroup {
    flex-direction: column;
    gap: 10px;
  }
  .contents-section > .guest > .image {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .contents-section > .schedulingform {
    overflow-x: scroll;
    padding-block-end: 20px;
    gap: 20px;
  }
  .contents-section > .schedulingform > .item {
    inline-size: 200px;
  }
  .contents-section > .schedulingtype > .content {
    gap: 10px;
  }
  .contents-section > .schedulingtype > .header {
    flex-direction: column;
  }
  .contents-section > .utilize {
    align-items: center;
    gap: 1%;
    font-size: 12px;
  }
  .contents-section > .utilize > .service {
    margin-inline: -20px;
    inline-size: 60%;
  }
  .contents-section > .webinar {
    flex-direction: column;
    gap: 35px;
  }
  .contents-section > .webinar > .primary > .point {
    flex-direction: column;
    gap: 10px;
  }
  .contents-section > .webinar > .secondary {
    margin-inline: auto;
  }
}
@media (min-width: 769px) and (max-width: 1199.99px) {
  .contents-section > .formrelay {
    border-width: 2px;
    border-style: solid;
    border-color: #D0EC94;
    background-color: #FAFFF4;
    padding: 30px 40px 30px;
    box-sizing: border-box;
    border-radius: 8px;
  }
  .contents-section > .formrelay > .sup {
    bottom: 40%;
    right: 40px;
    inline-size: 16%;
  }
  .contents-section > .formrelay > .text {
    max-inline-size: 80%;
  }
  .contents-section > .guest > hgroup {
    gap: 10px;
    align-items: center;
  }
  .contents-section > .guest > .image {
    justify-content: space-between;
    gap: 10px;
  }
  .contents-section > .schedulingform {
    gap: 20px;
    padding-block-end: 20px;
  }
  .contents-section > .schedulingform > .item {
    max-inline-size: 333px;
  }
  .contents-section > .schedulingtype > .content {
    gap: 20px;
  }
  .contents-section > .schedulingtype > .header {
    align-items: center;
  }
  .contents-homebenefit > .utilize {
    gap: 1%;
    font-size: 14px;
  }
  .contents-section > .webinar {
    gap: 40px;
  }
  .contents-section > .webinar > .primary > .point {
    gap: 20px;
  }
}
@media (min-width: 1200px) {
  .contents-section > .formrelay {
    border-width: 2px;
    border-style: solid;
    border-color: #D0EC94;
    background-color: #FAFFF4;
    padding: 45px;
    box-sizing: border-box;
    border-radius: 8px;
  }
  .contents-section > .formrelay > .sup {
    bottom: 220px;
    right: 50px;
    max-inline-size: 175px;
  }
  .contents-section > .guest > hgroup {
    gap: 10px;
    align-items: center;
  }
  .contents-section > .guest > .image {
    justify-content: space-between;
  }
  .contents-section > .schedulingform {
    gap: 50px;
  }
  .contents-section > .schedulingform > .item {
    max-inline-size: 333px;
  }
  .contents-section > .schedulingtype > .content {
    gap: 50px;
  }
  .contents-section > .schedulingtype > .header {
    align-items: center;
  }
  .contents-section > .webinar {
    gap: 76px;
  }
  .contents-section > .webinar > .primary > .point {
    gap: 20px;
  }
}
@media (min-width: 1280px) {
  .contents-section > .cases {
    inline-size: calc(min(calc(100% - 32px), 1248px) + 32px);
  }
}
@media screen {
  .contents-features > .section {
    opacity: 0.3;
    transform: translateX(38.2%);
    transition-delay: 0s;
    transition-duration: 2.0s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }
  .contents-features > .section.view\:active {
    opacity: 1;
    transform: translateX(0%);
  }
  /**/
  .contents-section > .cases > .item {
    animation-delay: 0s;
    animation-duration: 32s;
    animation-fill-mode: forwards;
    animation-name: cases-item;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
  }
  .contents-section > .cases:hover > .item {
    animation-play-state: paused;
  }
  @keyframes cases-item {
    0% {}
    100% {
      /*transform: translateX(calc((100% + 24px) * 6 * -1));*/
      transform: translateX(calc(-700% - 168px));
    }
  }
  .contents-section > .cases > .item > .image::before {
    transition-delay: 0s;
    transition-duration: 0.6s;
    transition-property: all;
    transition-timing-function: ease;
  }
  /**/
  .contents-section > .formrelay > .sup {
    transform: rotate(0.682turn) scale(0.8);
    transform-origin: 50% 68.48%;
    transition-delay: 0.2s;
    transition-duration: 1.6s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }
  .contents-section > .formrelay > .sup.view\:active {
    transform: rotate(0turn) scale(1);
  }
  /**/
  .contents-section > .schedulingtype > .content > .item > .image {
    transform: scale(0.618);
    transform-origin: center center;
    transition-delay: 0.2s;
    transition-duration: 1.6s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }
  .contents-section > .schedulingtype > .content > .item.view\:active > .image {
    transform: scale(1);
    transform-origin: center center;
  }
  /**/
  .contents-section > .schedulingform > .item {
    opacity: 0.3;
    transform: translate(38.2%);
    transition-delay: 0.2s;
    transition-duration: 1.6s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }
  .contents-section > .schedulingform.view\:active > .item {
    opacity: 1;
    transform: translate(0%);
  }
  .contents-section > .schedulingform.view\:active > .item:nth-child(1) {
    transition-delay: 0.2s;
  }
  .contents-section > .schedulingform.view\:active > .item:nth-child(2) {
    transition-delay: 0.4s;
  }
  .contents-section > .schedulingform.view\:active > .item:nth-child(3) {
    transition-delay: 0.6s;
  }
  /**/
  .contents-section > .utilize > .position {
    transition-delay: 0.2s;
    transition-duration: 1.6s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }
  .contents-section > .utilize > .position.type\:customer {
    opacity: 0.3;
    transform: translateX(61.8%);
  }
  .contents-section > .utilize > .position.type\:operator {
    opacity: 0.3;
    transform: translateX(-61.8%);
  }
  .contents-section > .utilize.view\:active > .position.type\:customer {
    opacity: 1;
    transform: translateX(0%);
  }
  .contents-section > .utilize.view\:active > .position.type\:operator {
    opacity: 1;
    transform: translateX(0%);
  }
  /**/
  .contents-section > .webinar > .primary,
  .contents-section > .webinar > .secondary {
    opacity: 0.3;
    transform: translateY(38.2%);
    transition-delay: 0.2s;
    transition-duration: 1.6s;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  }
  .contents-section > .webinar > .secondary {
    transition-delay: 0.4s;
  }
  .contents-section > .webinar.view\:active > .primary,
  .contents-section > .webinar.view\:active > .secondary {
    opacity: 1;
    transform: translateY(0%);
  }
}
/**/
.contents-security {
  display: block;
}
.contents-security > .counterplan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  inline-size: var(--contents-width);
  margin-inline: auto;
  margin-block-start: 30px;
  margin-block-end: 80px;
}
.contents-security > .counterplan > .item {
  background-color: #F5F5F5;
  padding: 32px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contents-security > .counterplan > .item > h3 {
  color: #222222;
  font-size: 16px;
}
.contents-security > .counterplan > .item > img {
  aspect-ratio: 1 / 1;
}
.contents-security > .counterplan > .item > p {
  font-size: 14px;
  margin: 0;
}
.contents-security > .header {
  text-align: center;
  margin-block-end: 50px;
}
.contents-security > .header > h2 {
  margin: 0;
  color: #525252;
  font-size: clamp(1.375rem, 1.221rem + 0.77vw, 1.75rem);
}
.contents-security > .header > p {
  margin: 0;
  color: #2ea7e0;
  font-weight: bold;
  font-size: 16px;
}
.contents-security > .privacy {
  font-size: 16px;
  inline-size: var(--contents-width);
  margin-inline: auto;
  display: flex;
  gap: 25px;
  margin-block-end: 80px;
}
.contents-security > .privacy > .image {
  flex-shrink: 0;
}
.contents-security > .privacy > .image > img {
  aspect-ratio: 1 / 1;
}
.contents-security > .privacy > .text  > h3 {
  color: #222222;
  font-size: 16px;
  margin: 0;
}
.contents-security > .privacy > .text > p {
  font-size: 14px;
  margin: 8px 0 0 0;
}
.contents-security > .text {
  font-size: 16px;
  inline-size: var(--contents-width);
  margin-inline: auto;
}