@charset "UTF-8";

/*============================================
  Use Case
  Header Area
  Main Area - List
  Main Area - Detail
  Main Area - Thanks
============================================ */

/* Header Area
============================================ */

header a.btn-download,
header a.btn-anchor-link {
  background-color: var(--color-btn-cp);
  border-color: var(--color-btn-cp);
  box-shadow: none;
}

header a.btn-download .text,
header a.btn-anchor-link .text {
    font-size: var(--font-size-16);
    font-weight: 400;
}

header a.btn-download .i-anchor-link,
header a.btn-anchor-link .i-anchor-link {
    font-size: 100%;
}


/* Main Area - List
============================================ */

/* Use Case List
--------------------------------------------------------------------------------- */
.usecase-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-40) var(--space-18-24);
  align-items: stretch;
  width: 100%;
  padding: var(--inner-padding);
}

.usecase-list article {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc((100% - var(--space-18-24)) / 3);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radias-sm);
}

.usecase-list .point {
  position: absolute;
  top: -24px;
  display: flex;
  align-items: center;
  gap: var(--space-08);
  left: var(--space-24);
  margin-bottom: 0;
  padding: var(--space-08) var(--space-16);
  background-color: var(--color-accsent-green);
  border-radius: var(--border-radias-btn);
  font-size: var(--font-size-14);
  z-index: 10;
}

.usecase-list .point img {
  width: var(--space-20);
}

.usecase-list a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-18-24);
  color: var(--color-text) !important;
  text-decoration: none;
}

.usecase-list a:hover,
.usecase-list a:focus,
.usecase-list a:visited {
  text-decoration: none;
}

.usecase-list h2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin-bottom: .5em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usecase-list h2 span {
  display: block
}

.usecase-list h2 span.main {
  margin-bottom: 0.25em;
  font-size: var(--font-size-20);
}

.usecase-list h2 span.sub {
  font-size: var(--font-size-16);
}

.usecase-list figure {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 1em;
  background-color: var(--color-neutral-light-4);
  border-radius: var(--space-08);
  overflow: hidden;
}

.usecase-list h3 {
  flex-shrink: 0;
  margin-bottom: 0.25em;
  font-size: var(--font-size-16);
}

.usecase-list ul {
  flex-grow: 1;
  margin-bottom: 1em;
  padding-left: 0;
}
.usecase-list li {
  list-style: none;
  margin-bottom: 0.25em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usecase-list .button {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 0.75rem clamp(0.75rem, -0.375rem + 2.3438vw, 1.5rem); /* 12px-24px */
  background-color: var(--color-primary);
  color: var(--color-neutral);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .usecase-list {
      align-items: center;
      flex-direction: column;
    }

    .usecase-list article {
      width: 100%;
    }

}


/* Main Area - Detail
============================================ */

/* Main Title
--------------------------------------------------------------------------------- */
.main-title-block {
  display: grid;
  grid-template-areas:
    "main-title photo"
    "profile photo";
  gap: var(--space-24) var(--space-40);
  padding: var(--space-24) var(--space-24-40); /* 360px-460px */
}

.main-title-block .main-title { grid-area: main-title; }
.main-title-block .profile { grid-area: profile; }
.main-title-block .photo { grid-area: photo; }

.main-title-block h1 {
  display: flex;
  flex-direction: column;
  color: var(--color-primary);
}

.main-title-block .shoulder {
  margin-bottom: 0.25em;
  font-size: var(--font-size-20);
}

.main-title-block .title {
  margin-bottom: 0.25em;
  font-size: var(--font-size-36);
}

.main-title-block .sab-title {
  font-size: var(--font-size-24);
}

.main-title-block .profile {
  margin-bottom: 0;
}

.main-title-block .profile strong {
  display: block;
  margin-bottom: 0.5em;
  font-size: var(--font-size-18);
}

.main-title-block .profile span {
  display: block;
}

.main-title-block .profile span:not(:last-child) {
  margin-bottom: 0.25em;
}

@media (min-width: 1281px) {

  .main-title-block {
    grid-template-columns: 1fr calc(460 / 16 * 1rem);
    grid-template-areas:
      "main-title photo"
      "profile photo";
    gap: 1em var(--space-40);
  }

}

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

  .main-title-block {
    grid-template-areas:
      "main-title main-title"
      "photo profile";
    grid-template-columns: clamp(22.5rem, 13.125rem + 19.53vw, 28.75rem) 1fr; /* 360px-460px */
    grid-template-rows: auto auto;
    gap: 1em clamp(1.875rem, 0.9375rem + 1.9531vw, 2.5rem); /* 30px-40px */
  }

  .main-title-block .title {
    font-size: clamp(1.5rem, 0.375rem + 2.3438vw, 2.25rem); /* 24px-36px */
  }

  .main-title-block .sab-title {
    font-size: clamp(1.25rem, 0.875rem + 0.78vw, 1.5rem); /* 20px-24px */
  }

}

@media (max-width: 767px) {

  .main-title-block {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main-title"
      "photo"
      "profile";
    gap: var(--space-16) var(--space-20);
    padding: var(--space-24) var(--space-18);
  }

  .main-title-block .title {
    font-size: var(--font-size-24);
  }

  .main-title-block .sab-title,
  .main-title-block .profile strong {
    font-size: var(--font-size-18);
  }

}


/* Tag Brock
--------------------------------------------------------------------------------- */
.tag-block {
  display: flex;
  justify-content: space-between;
  gap:  var(--space-20) var(--space-40);
  padding: var(--inner-padding-md);
  background-color: var(--color-neutral-light-4);
}

.tag-block ul,
.tag-block dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1rem;
  padding-left: 0;
  list-style: none;
}

.tag-block ul {
  margin-bottom: 0.5em;
}

.tag-block li {
  position: relative;
  margin-bottom: 0;
}

.tag-block .tag > ul li {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-neutral-dark-3);
  white-space: nowrap;
}

.tag-block .tag > ul li strong {
  position: relative;
  padding-right: 1em;
  white-space: nowrap;
}

.tag-block .tag > ul li strong::after {
  content: '：';
  position: absolute;
}

.tag-block dl ul,
.tag-block dl,
.tag-block dt {
  margin-bottom: 0;
}

.tag-block dt {
  font-weight: 700;
}

.tag-block dl li {
  padding-left: 1em;
}

.tag-block dl li::after {
  content: '#';
  position: absolute;
  left: 0.2rem;
  width: 1em;
}

.tag-block .button-block {
  width: clamp(15rem, 3.75rem + 23.4375vw, 22.5rem);
  white-space: nowrap;
}

.tag-block .button-block a {
  width: 100%;
}

@media (max-width: 767px) {

  .tag-block {
    flex-direction: column;
  }

  .tag-block li {
    white-space: initial;
  }

  .tag-block .tag > ul li {
    white-space: inherit;
  }

  .tag-block .button-block {
    width: 100%;
  }

}

/* Point Block
--------------------------------------------------------------------------------- */
.point-block {
  padding: var(--inner-padding);
  border-radius: var(--border-radias-sm);
}

/* Summary */
.point-block .summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem var(--space-18-24);
  max-width: 1000px;
  margin: 2.5rem auto 1.5rem auto;
  padding:  var(--space-16) 2.5rem 2.5rem 2.5rem;
  background-color: var(--color-primary-light-5);
  border-radius: var(--border-radias-sm);
}

@media (max-width: 1280px) {

  .point-block .summary {
    padding: var(--space-16) var(--space-18-24) 2.5rem var(--space-18-24);
  }

}

@media (max-width: 767px) {

  .point-block .summary {
    grid-template-columns: 1fr;
    gap: var(--space-24);
    padding: var(--space-16) var(--space-16) var(--space-24) var(--space-16);
  }

}

.point-block .summary dl {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.point-block .summary dl::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    background-color: transparent;
    border-color: var(--color-primary) transparent transparent;
    border-style: solid;
    border-width: 16px 0 0 24px;
    transform-origin: top;
    transform: skew(20deg);
    translate: -50% 100%;
    z-index: 0;
}

.point-block .summary dl::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 0;
    background-color: transparent;
    border-color: var(--color-neutral) transparent transparent;
    border-style: solid;
    border-width: 16px 0 0 25px;
    translate: calc(-50% + -2px) 100%;
    transform-origin: top;
    transform: skew(20deg);
    z-index: 1;
}

.point-block .summary dt {
  align-self: center;
  margin-bottom: .75em;
  font-weight: normal;
}

.point-block .summary dt strong {
  display: inline-block;
  min-width: 8em;
  padding: 0.2rem 1rem;
  background-color: var(--color-primary);
  border-radius: var(--border-radias-btn);
  color: var(--color-neutral);
  font-weight: 400;
  text-align: center;
}

.point-block .summary dd {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: var(--space-16) var(--space-18-24) 2.25rem var(--space-18-24);
  background-color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radias-sm);
  font-size: var(--font-size-18);
}

.point-block .summary dd p {
  color: var(--color-primary);
  font-weight: 700;
}

.point-block .summary dd span {
  position: absolute;
  bottom: 0;
  left: var(--space-16);
  color: var(--color-neutral-light-3);
  font-size: clamp(1rem, 0.25rem + 1.5625vw, 1.5rem); /* 16px-24px */
  font-weight: 900;
  letter-spacing: -.005em;
  pointer-events: none;
  z-index: 3;
}

.point-block .summary dd img {
  position: absolute;
  right: var(--space-16);
  bottom: -1.6rem;
  max-width: 6rem;
  height: auto;
  z-index: 2;
}

@media (max-width: 767px) {

  .point-block .summary  dl + dl {
    margin-top: var(--space-18-24);
  }

  .point-block .summary dd span {
    left: var(--space-16);
    font-size: var(--font-size-24);
  }

  .point-block .summary dd img {
    right: var(--space-08);
    bottom: -2rem;
  }

}

/* Company table */
.point-block .company-table {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5em 1em;
  width: clamp(45.5rem, 20rem + 53.125vw, 62.5rem); /* 728px-1000px */
  margin: 1.5rem auto !important;
}

.point-block .company-table > dt {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  min-width: 12em;
  font-weight: 700;
}

.point-block .company-table > dt span {
  color: var(--color-primary-light-4);
  font-size: clamp(1.5rem, 2.4375rem - 1.1719vw, 1.875rem); /* 30px-24px */
  font-weight: 700;
  line-height: 1;
}

.point-block .company-table > dt strong {
  color: var(--color-primary);
  font-size: var(--font-size-18);
}

.point-block .company-table .logo {
  margin-bottom: 1em;
  text-align: left;
}

.point-block .company-table .logo img {
  width: min(17.5rem, 60vw);
  vertical-align: bottom;
}

@media (max-width: 960px) {

  .point-block .company-table {
    width: 100%;
  }

}

@media (max-width: 767px) {

  .point-block .company-table {
    grid-template-columns: 1fr;
  }

  .point-block .company-table {
    flex-direction: column-reverse;
    padding: 0;
  }

  .point-block .company-table > dt {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25em;
   }

  .point-block .company-table > dt span,
  .point-block .company-table > dt strong {
    font-size: var(--font-size-20);
    letter-spacing: 0;
  }

  .point-block .company-table > dt span br {
    display: none;
  }

  .point-block .company-table dl.define {
    grid-template-columns: 1fr auto;
    gap: 0.5em 0;
  }

  .point-block .company-table dl.define dt::after {
    right: 0;
  }

  .point-block .company-table  dl.define dt {
    margin: 0;
    padding-right: 2em;
    }

  .point-block .company-table >  dd + dt {
    margin-top: 1em;
  }

}


/* Form Block, Thanks Block
--------------------------------------------------------------------------------- */
.form-block,
.thanks-block {
  padding: var(--inner-padding);
  border-radius: var(--border-radias-sm);
}

.form-block .attention {
  margin: 1em 0;
  color: var(--color-neutral);
  font-size: var(--font-size-14);
}

.form-block .material,
.thanks-block .material {
  display: flex;
  gap: var(--space-16) var(--space-24);
  width: clamp(45.5rem, 20rem + 53.125vw, 62.5rem); /* 728px-1000px */
  margin: 2.5em auto;
  padding: var(--space-24) var(--space-18-24);
  background-color: var(--color-primary-light-5);
  border-radius: var(--border-radias-sm);
  align-items: flex-start;
}

.thanks-block .material {
  align-items: center;
  margin-top: 0;
  background-color: var(--color-neutral-light-4);
}

.thanks-block .material h2 {
  font-size: var(--font-size-24);
  text-align: left;
}

.thanks-block .material h2 span {
  display: block;;
}

.thanks-block .material h2 span:first-child {
  margin-bottom: 0.25em;
}

.thanks-block .material h2 span:last-child {
  font-size: var(--font-size-16);
}


.form-block .form-input {
  width: clamp(45.5rem, 20rem + 53.125vw, 62.5rem); /* 728px-1000px */
  margin: 0 auto;
}

@media (min-width: 1281px) {

  .form-block .material figure,
  .thanks-block .material figure  {
    flex: 0 0 25%;
    height: auto;
    overflow: visible;
  }

  .form-block .material figure img,
  .thanks-block .material figure img {
    object-fit: scale-down;
  }

}

.form-block .material figure,
.thanks-block .material figure {
  flex: 0 0 25%;
  height: 16rem;
  overflow: hidden;
}

.thanks-block .material figure {
  height: 6rem;
  border: 1px solid var(--color-neutral-dark-3);
  border-radius: 0 1rem;
}

.form-block .material figure img,
.thanks-block .material figure img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.thanks-block .button-block {
  margin-bottom: var(--space-30-60);
}

.thanks-block .button-block a {
  min-width: 30rem;
}

.form-block .material > .text {
  flex-grow: 1;
}

.form-block .form-input {
  padding: var(--space-20) var(--space-18-24) var(--space-40) var(--space-18-24);
  border: 10px solid var(--color-primary-light-5);
  border-radius: var(--border-radias-sm);
}

/* Usecase Navigation Block */
.usecase-nav-block {
  padding: var(--inner-padding);
  padding-top: var(--space-16);
}

.usecase-nav-block .catch-copy {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5em;
}

.usecase-nav-block .catch-copy span {
  position: relative;
  padding: 0 1.5em;
  color: #4845C9;
}

.usecase-nav-block .catch-copy span::before,
.usecase-nav-block .catch-copy span::after {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
}

.usecase-nav-block .catch-copy span::before {
  content: '\FF3C';
  left: 0;
}

.usecase-nav-block .catch-copy span::after {
  content: '\FF0F';
  right: 0;
}

/* Attention Block */
.attention-block {
  margin-top: 1em;
  color: var(--color-primary-light-6);
  font-size: var(--font-size-xs);
}

@media (max-width: 960px) {

  .form-block .material,
  .form-block .form-input,
  .thanks-block .material {
    width: 100%;
  }

}

@media (max-width: 767px) {

  .form-block .form-input {
    margin: 2.5em 0;
    padding: var(--space-20) var(--space-16) var(--space-32) var(--space-16);
  }

  .form-block .material,
  .thanks-block .material {
    flex-direction: column;
    margin: 2.5em 0;
    padding: var(--space-16);
  }

  .thanks-block .material {
    margin-top: 0;
  }

  .form-block .material h3,
  .thanks-block .material h2 {
    font-size: var(--font-size-18);
  }

  .form-block .material > figure,
  .thanks-block .material > figure {
      flex: 0 0 auto;
    }

}


/* Explore more Block
--------------------------------------------------------------------------------- */
.explore-more-block {
  width: 100%;
}

.explore-more-block > .inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-40) var(--space-24-40);
  padding: var(--inner-padding);
}

.explore-more-block > .inner > section {
  display: flex;
  flex-direction: column;
  flex-basis: calc((100% - 40px) / 3);
}

.explore-more-block h2 {
  margin-bottom: 0.5em;
  color: var(--color-primary);
  text-align: center;
}

.explore-more-block img {
  width: 50%;
}

.explore-more-block .button-block {
  margin-top: auto;
}

@media (max-width: 767px) {

  .explore-more-block {
    margin: 6vh 0 0 0;
    padding: 0 var(--space-16);
  }

  .explore-more-block > .inner {
    flex-direction: column;
  }

  .explore-more-block > .inner > section {
    flex-basis: 100%;
  }

  .explore-more-block img {
    width: 40%;
  }

}


/* Product Block
--------------------------------------------------------------------------------- */
.product-block {
  display: flex;
  justify-content: space-between;
  gap: var(--space-24-40);
  color: var(--color-neutral);
}

.product-block figure {
  flex-basis: clamp(15rem, 7.5rem + 15.625vw, 20rem); /* 240px-320px */
}

.product-block .text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-20) 0;
}

.product-block h2 {
  margin-bottom: 0;
  font-weight: normal;
}

.product-block p {
  margin-bottom: 0;
}

.product-block .button-block {
  text-align: left;
}

@media (max-width: 767px) {

  .product-block {
    flex-direction: column;
    width: calc(100% - (var(--space-24) * 2));
    margin: var(--space-40) var(--space-24);
  }

  .product-block figure {
    flex-basis: auto;
    text-align: left;
  }

  .product-block img {
    width: min(18rem, 80vw);
  }

}


/* Aside Area
============================================ */

/* Material Block
--------------------------------------------------------------------------------- */
.material-more-block > .inner {
  padding: var(--inner-padding) ;
}

.material-more-block h2 {
  color: var(--color-primary);
  text-align: center
}

.material-more-block .material-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24) var(--space-24-40);
  width: 100%;
}

.material-more-block .material-list dl {
  max-width: calc((100% - (var(--space-24-40) * 2)) / 3);
  flex-basis: calc((100% - var(--space-24-40)) / 3);
}

.material-more-block  .material-list dl {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding: var(--space-18-24);
  border: 1px solid var(--color-neutral-light-5);
}

.material-more-block  .material-list dt {
  font-size: var(--font-size-20);
  font-weight: 700;
}

.material-more-block .material-list dd {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.material-more-block  .material-list dd figure {
  flex-shrink: 0;
  height: 8rem;
  margin-bottom: 1em;
  border: 1px solid var(--color-neutral-dark-3);
  border-radius: 0 1rem;
  overflow: hidden;
}

.material-more-block  .material-list dd figure img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.material-more-block .material-list .company {
  flex-shrink: 0;
  margin-bottom: 0.5em;
  color: var(--color-primary);
  font-weight: 700;
}

.material-more-block .material-list .button-block {
  flex-shrink: 0;
  margin-top: auto;
}

@media (max-width: 960px) {

  .material-more-block .material-list dl {
    max-width: 100%;
    flex-basis: calc((100% - var(--space-24-40)) / 2);
  }

}

@media (max-width: 767px) {

  .material-more-block .material-list {
    gap: var(--space-16);
  }

  .material-more-block .material-list dl {
    flex-basis: 100%;
  }

  .material-more-block  .material-list dd figure {
    height: clamp(7.5rem, calc(5.2168375rem + 20.40816vw), 15rem);
  }

}