@charset "UTF-8";

/*=======================================================
  KOE Main Setting
=============================================== */
:root {
/* Color */
--color-primary: #4845C9;
--color-primary-light-1: #6B68E9;
--color-primary-light-2: #9290EE;
--color-primary-light-3: #B0AEFD;
--color-primary-light-4: #C7C5FF;
--color-primary-light-5: #E5E4FF;
--color-primary-light-6: #F3F3FD;
--color-primary-dark-1: #252457;
--color-primary-dark-2: #0A053B;
--color-neutral: #FFFFFF;
--color-neutral-light-1: #F8F8F9;
--color-neutral-light-2: #F3F3F5;
--color-neutral-light-3: #E2E2E6;
--color-neutral-light-4: #F5F3F4;
--color-neutral-light-5: #D5D5D5;
--color-neutral-dark-1: #000000;
--color-neutral-dark-2: #333333;
--color-neutral-dark-3: #8D8CA9;
--color-neutral-dark-4: #DAD9EF;
--color-accsent-green: #E7FF85;
--color-accsent-pink: #F18BA9;
--color-btn-cp: #139102;
--color-btn-cp-hover: #4CAF50;
--color-link: #0033cc;
--color-text: #222222;
/* Font size  1rem=16px */
--font-size-12: calc(12 / 16 * 1rem); /* 0.75rem */
--font-size-14: calc(14 / 16 * 1rem); /* 0.875rem */
--font-size-16: calc(16 / 16 * 1rem); /* 1rem */
--font-size-18: calc(18 / 16 * 1rem); /* 1.125rem */
--font-size-20: calc(20 / 16 * 1rem); /* 1.25rem */
--font-size-24: calc(24 / 16 * 1rem); /* 1.5rem */
--font-size-28: calc(28 / 16 * 1rem); /* 1.75rem */
--font-size-30: calc(30 / 16 * 1rem); /* 1.875rem */
--font-size-36: calc(36 / 16 * 1rem); /* 2.25rem */
--font-size-40: calc(40 / 16 * 1rem); /* 2.5rem */
--font-size-60: calc(60 / 16 * 1rem); /* 3.75rem */
--font-size-xs: clamp(0.75rem, 1.0625rem - 0.3906vw, 0.875rem); /* 12px-14px */
--font-size-sm: clamp(0.875rem, 0.6875rem + 0.3906vw, 1rem); /* 14px-16px */
--font-size-lg: clamp(1.125rem, 2.0625rem - 0.01171875vw, 1.5rem); /* 18px-24px */
/* Space */
--space-04: 0.25rem;
--space-08: 0.5rem;
--space-12: 0.75rem;
--space-16: 1rem;
--space-18: 1.125rem;
--space-20: 1.25rem;
--space-24: 1.5rem;
--space-32: 2rem;
--space-40: 2.5rem;
--space-60: 3.75rem;
--space-80: 5rem;
--space-18-24: clamp(1.125rem, 0.5625rem + 1.1719vw, 1.5rem); /* 18px-24px */
--space-24-40: clamp(1.5rem, 3.125vw, 2.5rem); /* 24px-40px */
--space-30-60: clamp(1.875rem, -0.9375rem + 5.8594vw, 3.75rem); /* 30px-60px */
/* Border radias */
--border-radias-xxs: var(--space-04);
--border-radias-xs: var(--space-08);
--border-radias-sm: var(--space-18);
--border-radias: var(--space-24);
--border-radias-btn-cp: 0.625rem;
--border-radias-btn: 50vh;
/* Width */
--width-200: calc(200 / 16 * 1rem); /* 20rem */
/* Padding */
--inner-padding: var(--space-24-40) var(--space-24-40);
--inner-padding-md: var(--space-16) var(--space-24-40);
}

@media (max-width: 767px) {

  :root {
    --inner-padding: var(--space-24) var(--space-18);
    --inner-padding-md: var(--space-24) var(--space-18);
  }

}


/* Custom Setting
=============================================== */

/* Font Weight --
 weight400: Regular=normal
 weight700: Bold
 weight900: Black
*/

/* Base */
html {
  min-width: 320px;
  background-color: var(--color-primary);
  line-height: 1.7;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-primary);
  color: var(--color-text);
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 100%;
  font-style: normal;
  letter-spacing: 0.05em;
}

*, *::before, *::after {
  box-sizing: border-box;
}

@media (max-width: 767px) {

  html {
    letter-spacing: 0.02em;
    line-height: 1.6;
  }

  body {
    max-width: 100%;
    min-width: 320px;
    overflow: hidden;
  }

}

/* Link
--------------------------------------------------------------------------------- */
a {
  text-decoration: none;
  transition: 0.4s;
}

main a:link,
main a:visited {
  color: var(--color-link);
}

main a:hover,
main a:active,
main a:focus {
  color: var(--color-link);
  text-decoration: underline;
}

footer a:link,
footer a:visited,
footer a:hover,
footer a:active,
footer a:focus {
  color: var(--color-neutral-dark-4);
  text-decoration: none;
}

/* Image
--------------------------------------------------------------------------------- */
figure {
  display: block;
  margin: 0;
  text-align: center;
}

figure figcaption {
  display: block;
  margin-top: 0.5em;
  text-align: center;
  font-size: var(--font-size-14);
}

img {
  display: inline-block;
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Text
--------------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  font-feature-settings: "palt";
}

h1 {
  margin-bottom: 1em;
  font-size: var(--font-size-30);
}

h1.lead,
h2.lead {
  margin-bottom: 1em;
  color: var(--color-primary);
  text-align: center;
}

h1.lead + p,
h2.lead + p {
  margin-bottom: 2em;
  text-align: center;
}

h2 {
  margin-bottom: 1em;
  font-size: var(--font-size-30);
}

h2.column {
  color: var(--color-primary);
  text-align: center;
}

h2.column span {
  display: block;
}

h2.column span:first-child {
  margin-bottom: 0.5em;
  font-size: var(--font-size-20);
}

h1.color,
h2.color,
h3.color {
  color: var(--color-primary);
  text-align: center;
}

h3 {
  margin-bottom: 1.5em;
  font-size: var(--font-size-20);
}

h3.column {
  color: var(--color-primary);
}

h3.column span {
  display: block;
}

h3.column span:first-child {
  margin-bottom: 0.25em;
}

h3.column span:last-child {
  font-size: var(--font-size-16);
}

h4,
h5,
h6 {
  margin-bottom: 1.25em;
  font-size: var(--font-size-16);
}

h4.color,
h5.color,
h6.color {
  color: var(--color-primary);
}

p {
  margin-top: 0;
}

@media (max-width: 767px) {

  main h1 {
    font-size: var(--font-size-24);
  }

  h2 {
    margin-bottom: 1em;
    font-size: var(--font-size-24);
  }

  h1.lead + p,
  h2.lead + p {
    text-align: left;
  }

  h2.column span:first-child {
    font-size: var(--font-size-18);
  }

  h4, h5, h6 {
    font-size: var(--font-size-18);
  }

}

b, strong {
  font-weight: 700;
}

small {
  font-size: var(--font-size-14);
}

/* List
--------------------------------------------------------------------------------- */
ol,
ul {
  margin-top: 0;
  padding-left: 2.5em;
}

ol li,
ul li {
  margin-bottom: 1em;
}

dl {
  margin: 0 0 2em 0;
}

dl dt {
  margin-bottom: 1rem;
}

dl dd {
  margin-left: 0;
}

ol.check,
ul.check {
  padding-left: 0;
}

ol.check li,
ul.check li {
  position: relative;
  padding-left: 2em;
  list-style: none;
}

ol.check li::before,
ul.check li::before {
  content: '\f14a';
  position: absolute;
  left: 0;
  color: var(--color-primary-light-1);
  font-family: "Font Awesome 7 Free";
  font-size: 1.25em;
  line-height: 1.36;
}

dl.define {
  display: grid;
  grid-template-columns: auto 4fr;
  gap: 0.5em 0;
}

dl.define dt {
  position: relative;
  margin-bottom: 0;
  padding-right: 2em;
  font-weight: 400;
  vertical-align: baseline;
  white-space: nowrap;
}

dl.define dt::after {
  content: ':';
  position: absolute;
  top: 0;
  right: 0;
  width: 2em;
  font-weight: 400;
  text-align: center;
}

dl.define dd {
  word-break: break-all;
}

@media (max-width: 767px) {

  dl.define {
    grid-template-columns: 1fr;
    gap: 0;
  }

  dl.define dt {
    margin-bottom: 0.5em;
    padding-right: 0;
    font-weight: 700;
  }

  dl.define dt::after {
    right: auto;
  }

  dl.define dd + dt {
    margin-top: 1.5em;
  }

}

/* Table
--------------------------------------------------------------------------------- */
table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

caption,
th,
td {
  text-align: left;
}

/* Etc
--------------------------------------------------------------------------------- */

/* horizontal rule */
hr.line {
  position: relative;
  margin: 0 var(--space-24-40);
  border-top: 2px solid var(--color-neutral-light-3);
}

hr.line::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--color-primary);
}

/* Location */
.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.align-c-l {
  text-align: center;
}

@media (max-width: 767px) {

  hr.line {
    margin: 0 var(--space-18);
  }

  .align-c-l {
    text-align: left;
  }

}

/* Frame */
.frame-basic {
  max-width: calc(1440px + (var(--space-16) * 2));
  margin: 2.5em auto;
}

.frame-basic.line {
  padding: var(--inner-padding);
  border: 1px solid var(--color-neutral-dark-2);
}


/* Frame Work
=============================================== */
#container {
  display: flex;
  flex-flow: column;
  position:relative;
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
}

#container .breadcrumb,
#container main,
#container div[data-include-html] > aside,
#container .product-block,
#container .inquiry-block {
  max-width: 1280px;
  width: 100%;
  padding: 0 var(--space-16);
}

#container .breadcrumb {
  width: 100%;
  margin: 0 auto 1em auto;
}

#container main,
#container aside,
#container .product-block,
#container .inquiry-block {
  margin: 0 auto var(--space-40) auto;
}

#container header + main,
#container main + footer {
  margin-top: var(--space-20);
}

#container .breadcrumb *:last-child,
#container main *:last-child,
#container aside *:last-child,
#container .product-block *:last-child,
#container .inquiry-block *:last-child {
  margin-bottom: 0;
}

#container main > .inner,
#container aside > .inner,
#container .inquiry-block > .inner {
  max-width: calc(1280px + (var(--space-16) * 2));
  width: 100%;
  margin: 0 auto;
  background-color: var(--color-neutral);
  border-radius: var(--border-radias);
}


/* Header
=============================================== */
header {
  align-self: center;
  position: relative;
  width: 100%;
}

header *:last-child {
  margin-bottom: 0;
}

header > .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-20);
  max-width: calc(1440px + (var(--space-16) * 2));
  min-height: 100px;
  margin: 0 auto;
  padding: 0 var(--space-16);
}

header .logo {
  width: 18.75rem;
}

header .logo img {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}

header nav {
  display: flex;
  align-items: center;
  gap: 20px 20px;
  justify-content: flex-end;
  flex: 1;
  height: 100%;
  font-family: "Poppins", sans-serif;
}

header ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0 0 0 auto;
  padding-left: 0;
  list-style: none;
}

header li {
  margin-bottom: 0;
}

header li a {
  display: inline-block;
  position: relative;
  margin: 0 15px;
  padding: 5px 0;
  color: var(--color-neutral);
  line-height: 1em;
}

header li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: var(--color-primary);
  opacity: 0;
  transition: 0.4s;
}

header li a:visited,
header li a:hover,
header li a:active,
header li a:focus {
  color: var(--color-neutral);
}

header li a:visited::after,
header li a:hover::after,
header li a:active::after,
header li a:focus::after {
  background-color: var(--color-neutral);
  opacity: 1;
}

header li:first-child a {
  margin-left: 0;
}

header li:last-child a {
  margin-right: 0;
}

/* Button */
header .btn {
  display: flex;
  gap: 20px 20px;
}

header .btn a {
  background-color: var(--color-primary-dark-2);
  border-color: var(--color-primary-dark-2);
  border-radius: var(--border-radias-btn-cp);
  line-height: 1;
}

header .btn > span {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-content: center;
}

header .btn span span {
  display: inline-block;
}

@media (max-width: 767px) {

  header {
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    z-index: 9999;
  }

  header > .inner {
    gap: 0 var(--space-16);
  }

  header .logo {
    width: min(18.75rem, 50%);
  }

  header nav {
    gap: 20px 6px;
  }

  header nav ul {
    display: none;
  }

  header .btn {
    gap: 0.5rem;
  }

  header .btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-16) var(--space-12) !important;
    font-size: calc(13 / 16 * 1rem);
  }

  header .sp-none {
    display: none !important;
  }

}

/* humberger */

/* #menu-toggle {
  display: none;
}

@media (max-width: 1024px) {
  .hamburger-menu {
    position: relative;
  }

  #menu-toggle {
    display: block;
    width: 32px;
    height: 32px;
    opacity: 0;
  }

  #menu-toggle:checked + .menu-btn > span {
    transform: rotate(45deg);
  }

  #menu-toggle:checked + .menu-btn > span::before {
    top: 0;
    transform: rotate(0deg);
  }

  #menu-toggle:checked + .menu-btn > span::after {
    top: 0;
    transform: rotate(90deg);
  }

  #menu-toggle:checked ~ .menu-box {
    height: fit-content;
    opacity: 1;
  }

  .menu-btn {
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 32px;
    height: 32px;
    padding: 5px;
    cursor: pointer;
    z-index: 1;
  }

  .menu-btn > span,
  .menu-btn > span::before,
  .menu-btn > span::after {
    display: block;
    position: absolute;
    top: 15px;
    width: 22px;
    height: 2px;
    background-color: var(--color-neutral);
    transition-duration: 0.25s;
  }

  .menu-btn > span::before {
    content: '';
    top: -8px;
  }

  .menu-btn > span::after {
    content: '';
    top: 8px;
  }

  .menu-box {
    display: block;
    position: absolute;
    top: 40px;
    left: -220px;
    width: 488px;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--color-neutral);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    list-style: none;
    opacity: 0;
    overflow: hidden;
    transition-duration: 0.5s;
  }

  .menu-item {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    text-decoration: none;
    transition-duration: 0.25s;
  }

  .menu-item:hover {
    background-color: #3f444b;
  }

  .menu-item > a {
    color: #33373d !important;
    margin: 0;
  }

  .menu-item:hover > a {
    color: #ffffff !important;
  }

  header li.menu-item a:visited::after,
  header li.menu-item a:hover::after,
  header li.menu-item a:active::after,
  header li.menu-item a:focus::after {
    background-color: unset;
    opacity: 0;
  }

}

@media (max-width: 767px) {
  .menu-box {
    position: fixed;
    top: 100px;
    left: 16px;
    width: calc(100% - 32px);
  }

} */


/* Breadcrumb
=============================================== */
.breadcrumb ul {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
  padding-left: 0;
  color: var(--color-neutral);
  list-style: none;
}

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

.breadcrumb li:not(:first-child)::after {
  content: '\203A';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 1.5em;
  width: 1em;
  color: var(--color-neutral);
  font-size: var(--font-size-16);
}

.breadcrumb li + li {
  padding-left: 3em;
}

.breadcrumb a {
  color: var(--color-neutral);
  text-decoration: underline;
}

.breadcrumb a:hover,
.breadcrumb a:focus,
.breadcrumb a:active {
  text-decoration: none;
}

@media (max-width: 767px) {

  .breadcrumb {
    display: none;
  }

}


/* Main
=============================================== */
main {
  flex: 1 auto;
}

#container main > .inner {
  padding: var(--space-12) 0;
}

/* Category Top Title
--------------------------------------------------------------------------------- */
.category-top-title-block {
  padding: var(--inner-padding);
}

.category-top-title-block h1 {
  position: relative;
  margin-bottom: min(4vh, 1em);
  text-align: center;
}

.category-top-title-block h1::before {
  display: block;
  color: var(--color-neutral-light-2);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(7rem, 7vw, 9rem); /* 112px-144px */
  line-height: 0.75;
  pointer-events: none;
  word-break: break-word;
}

.category-top-title-block.usecase h1::before {
  content: 'USE CASE';
}

.category-top-title-block.download h1::before {
  content: 'DOWNLOAD';
}

.category-top-title-block h1 span {
  display: block;
  color: var(--color-primary);
}

.category-top-title-block h1 span:first-child {
  margin-top: -1em;
}

.category-top-title-block h1 span:last-child {
  font-size: var(--font-size-16);
  font-weight: 400;
}

@media (max-width: 767px) {

  .category-top-title-block h1::before {
    font-size: clamp(2rem, 13vw, 3.5rem); /* 32px-56px */
  }

  .category-top-title-block.download h1 span:first-child {
    margin-top: 0;
  }

}


/* Footer
=============================================== */
footer {
  position: relative;
  width: 100%;
  background-color: var(--color-primary-dark-1);
  font-size: var(--font-size-14);
}

footer *:last-child {
  margin-bottom: 0;
}

footer > .inner {
  display: grid;
  grid-template-areas:
    "footer-menu"
    "copyright";
  grid-template-columns: 1fr;
  gap: var(--space-40) 0;
  max-width: calc(1440px + (var(--space-16) * 2));
  margin: 0 auto;
  padding: var(--space-80) var(--space-80) var(--space-24) var(--space-80);
}

footer .footer-menu {
  grid-area: footer-menu;
  display: grid;
  grid-template-areas:
    "company sitemap";
  gap: var(--space-40) var(--space-60);
}

/* Copyright */
footer small {
  grid-area: copyright;
  display: block;
  padding-top: var(--space-20);
  border-top: 1px solid #626186;
  color: var(--color-neutral-dark-3);
}

footer h2 {
  margin-bottom: 0;
  color: var(--color-accsent-green);
  font-size: var(--font-size-14);
  font-weight: 400;
}

footer dt {
  margin-bottom: 0;
  color: var(--color-neutral-dark-3);
}

footer dd {
  color: var(--color-neutral-dark-4);
}

footer ul {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

@media (max-width: 767px) {

  footer h2 {
    font-size: var(--font-size-16);
  }

}

/* Company */
footer .company {
  grid-area: company;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

footer .company figure {
  width: var(--width-200);
}

footer .company dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-20);
  margin-bottom: 0;
}

footer .company dt {
  white-space: nowrap;
}

/* Sitemap */
footer .sitemap {
  grid-area: sitemap;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin-left: auto;
}

footer .sitemap dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin-top: auto;
}

footer .sitemap dd {
  display: flex;
  align-items: flex-end;
  gap: var(--space-60);
}

@media (max-width: 1100px) {

  footer .sitemap dd {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-40) var(--space-20);
  }

}

footer .sitemap dt {
  margin-top: auto;
}

footer .sitemap .site-list {
  padding-left: 0;
}

footer .sitemap .site-list li {
  position: relative;
  padding-left: 1.5em;
}

footer .sitemap .site-list li::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0.25em;
  width: 0.5em;
  height: 1px;
  background-color: var(--color-neutral-dark-3);
}

footer .sitemap .site-list li:not(:first-child) span {
  display: block;
}

footer .sitemap .pickup {
  display: flex;
  gap: var(--space-20) var(--space-16);
}

footer .sitemap .pickup li {
  min-width: 7em;
  flex: 1;
  margin-bottom: 0;
  text-align: center;
}

footer .sitemap .pickup p {
  margin-bottom: 0;
}

footer .sitemap .pickup a {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  gap: var(--space-16);
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 767px) {

  footer {
    margin: 0;
    padding: var(--space-24) var(--space-16);
    font-size: var(--font-size-16);
  }

  footer > .inner {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  footer .footer-menu {
    display: grid;
    grid-template-areas:
    "company"
    "sitemap";
    grid-template-columns: 1fr;
  }

  footer .sitemap {
    margin-left: 0;
  }

  footer .sitemap .pickup {
    width: 100%;
    justify-content: space-between;
    gap: var(--space-20) var(--space-08);
  }

  footer small {
    text-align: center;
  }

}


/* Error Block
=============================================== */
.error-block {
  padding: var(--inner-padding);
  border-radius: var(--border-radias-sm);
}

@media (max-width: 767px) {

  .error-block {
    padding:var(--space-24) var(--space-16);
  }

}

/* h1 */
.error-block  h1 {
  margin-bottom: min(6vh, 2em);
}

.error-block h1 span {
  display: block;
  text-align: center;
}

.error-block h1 span:first-child {
  color: var(--color-neutral-light-2);
  font-weight: 900;
  font-style: normal;
  font-size: 7vw;
  line-height: 1;
  word-break: break-word;
}

.error-block h1 span:last-child {
  color: var(--color-primary);
  font-size: var(--font-size-24);
  font-weight: 700;
}

/* Message */
.error-block .message {
  display: flex;
  justify-content: center;
  margin-bottom: 6vh;
}

.error-block .message .note {
  display: flex;
  justify-content: center;
  margin-top: 6vh;
}

@media (max-width: 767px) {

  .error-block h1 span:last-child {
    font-size: var(--font-size-20);
  }

  .error-block .message {
    text-align: left;
  }

  .error-block .message p br {
    display: none;
  }

}


/* Inquiry block
=============================================== */
.inquiry-block > .inner {
  padding: var(--inner-padding);
}

.inquiry-block .inquiry {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "img title"
    "img text"
    "img btn";
  gap: 0 var(--space-24-40);
}

.inquiry-block figure {
  grid-area: img;
  align-self: center;
}

.inquiry-block figure img {
  width: clamp(10rem, 2.5rem + 15.625vw, 15rem);
}

.inquiry-block h2 {
  grid-area: title;
  margin-bottom: 0.5em;
  font-size: var(--font-size-lg);
}

.inquiry-block .text {
  grid-area: text;
}

.inquiry-block .button-block {
  grid-area: btn;
  text-align: left;
}

@media (max-width: 767px) {

  .inquiry-block .inquiry {
    grid-template-columns: 7rem 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "title title"
      "img text"
      "btn btn";
    gap: var(--space-08) var(--space-16);
  }

  .inquiry-block .button-block {
    text-align: center;
  }

}


/* Set Button
=============================================== */

/* Button Block
--------------------------------------------------------------------------------- */
.button-block {
  text-align: center;
}

.button-block a > i {
  margin: 0 0.25em;
}

@media (max-width: 767px) {

  /* .button-block {
    padding: 0 2.5rem;
  } */

}

/* Button
--------------------------------------------------------------------------------- */
[class^="btn-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-08);
  padding: 0.75rem clamp(0.75rem, -0.375rem + 2.3438vw, 1.5rem); /* 12px-24px */
  border-radius: var(--border-radias-btn);
  white-space: nowrap;
}

[class^="btn-"]:hover,
[class^="btn-"]:active,
[class^="btn-"]:focus {
  text-decoration: none;
}

a.btn-solid,
span.btn-solid {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-neutral);
}

a.btn-line {
  background-color: var(--color-neutral);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

a.btn-line:hover,
a.btn-line:active,
a.btn-line:focus {
  color: var(--color-primary);
}

a.btn-line > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-08);
}

a.btn-line-w { /* transparent var. */
  background-color: transparent;
  border: 1px solid var(--color-neutral);
  color: var(--color-neutral);
}

a.btn-line-w:hover,
a.btn-line-w:active,
a.btn-line-w:focus {
  color: var(--color-neutral);
}

[class^="btn-"] .layout > span {
  display: inline-block;
}

[class^="btn-"]:has(.fa-solid, .fa-regular) {
  padding-left: var(--space-32);
}

@media (min-width: 768px) {

  [class^="btn-"] {
    min-width: 12.5rem;
    max-width: 100%;
    width: max-content;
  }

}

@media (max-width: 767px) {

  [class^="btn-"] {
    width: 100%;
    padding: var(--space-16) var(--space-24);
    font-size: var(--font-size-18);
  }

}

/* Conversion Button */
a.btn-download,
a.btn-anchor-link {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  background-color: var(--color-btn-cp);
  border: 1px solid var(--border-radias-btn-cp);
  border-radius: var(--border-radias-btn-cp);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: var(--color-neutral) !important;
}

a.btn-download:hover,
a.btn-download:active,
a.btn-download:focus,
a.btn-anchor-link:hover,
a.btn-anchor-link:active,
a.btn-anchor-link:focus {
  background-color: var(--color-btn-cp-hover);
}

a.btn-download .text {
  margin-bottom: 0;
  font-weight: 700;
}

a.btn-anchor-link .text {
  margin-bottom: 0;
  font-weight: 700;
}

@media (min-width: 1281px) {

  a.btn-download {
    min-width: 22.5rem;
  }

  a.btn-download .text {
    font-size: var(--font-size-24);
  }

}

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

  a.btn-download .text {
    font-size:var(--font-size-lg);
  }

}

@media (max-width: 767px) {

  a.btn-download,
  a.btn-anchor-link {
    min-width: 0 !important;
    width: 100%;
  }

  a.btn-download .text {
    font-size: var(--font-size-18);
  }

}

/* Font Awesome */
i.i-download {
  width: 3em;
  height: 115%;
}

i.i-anchor-link {
  font-size: 1.125em;
}

i.i-headset {
  width: 3.5em;
  height: 115%;
}

i.i-youtube {
  line-height: 1;
}

i.i-download::before,
i.i-headset::before {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  color: var(--color-accsent-green);
  font-size: 1.5em;
  line-height: 1;
}