/**
* SP
**/
/**
* PC
**/
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Noto Sans", "Raleway", sans-serif;
  color: #000;
  background: #fff;
  position: relative;
  overflow-x: hidden;
  will-change: background-color;
  transition: background-color 0.6s ease-in-out;
}

body.opened {
  overflow-y: hidden;
}

body.opened .header__main {
  background-color: #fff;
  position: relative;
  z-index: 10;
}

body.is-gray,
body.is-gray .case-studies__box-des,
body.is-gray .case-studies__box-title {
  background-color: #D6D6D6;
}

main {
  padding-top: 7rem;
  position: relative;
}

@media (max-width: 767px) {
  main {
    padding-top: 3.5rem;
  }
}

img {
  max-width: 100%;
}

li {
  list-style: none;
}

a {
  transition: all 0.3s;
  text-decoration: none;
}

a:hover {
  transition: all 0.3s;
  opacity: 0.7;
}

a:active, a:visited, a:focus {
  opacity: 1;
}

button:hover {
  transition: all 0.3s;
  opacity: 0.7;
}

button:focus {
  outline: none;
  opacity: 1;
}

@media (max-width: 767px) {
  th,
  td {
    white-space: nowrap;
  }
}

.grid {
  width: 100%;
  display: block;
  padding: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1rem;
  margin-right: -1rem;
}

.row.no-gutters {
  margin-left: 0;
  margin-right: 0;
}

.container {
  width: 100%;
  max-width: 126rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3rem;
  padding-right: 3rem;
}

.col {
  padding-left: 1rem;
  padding-right: 1rem;
}

.row.no-gutters .col {
  padding-left: 0;
  padding-right: 0;
}

.col-0 {
  display: none;
}

.col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.col-5 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}

.col-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%;
}

.col-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-offset-1 {
  margin-left: 8.33333%;
}

.col-offset-2 {
  margin-left: 16.66667%;
}

.col-offset-3 {
  margin-left: 25%;
}

.col-offset-4 {
  margin-left: 33.33333%;
}

.col-offset-5 {
  margin-left: 41.66667%;
}

.col-offset-6 {
  margin-left: 50%;
}

.col-offset-7 {
  margin-left: 58.33333%;
}

.col-offset-8 {
  margin-left: 66.66667%;
}

.col-offset-9 {
  margin-left: 75%;
}

.col-offset-10 {
  margin-left: 83.33333%;
}

.col-offset-11 {
  margin-left: 91.66667%;
}

/* PC Medium & Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .row {
    margin-left: -2rem;
    margin-right: -2rem;
  }
  .col {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .col-md-0 {
    display: none;
  }
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    display: block;
  }
  .col-md-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-md-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-md-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-md-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-md-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-md-offset-1 {
    margin-left: 8.33333%;
  }
  .col-md-offset-2 {
    margin-left: 16.66667%;
  }
  .col-md-offset-3 {
    margin-left: 25%;
  }
  .col-md-offset-4 {
    margin-left: 33.33333%;
  }
  .col-md-offset-5 {
    margin-left: 41.66667%;
  }
  .col-md-offset-6 {
    margin-left: 50%;
  }
  .col-md-offset-7 {
    margin-left: 58.33333%;
  }
  .col-md-offset-8 {
    margin-left: 66.66667%;
  }
  .col-md-offset-9 {
    margin-left: 75%;
  }
  .col-md-offset-10 {
    margin-left: 83.33333%;
  }
  .col-md-offset-11 {
    margin-left: 91.66667%;
  }
}

/* PC Large */
@media (min-width: 1024px) {
  .row {
    margin-left: -2rem;
    margin-right: -2rem;
  }
  .row.col-gutter {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .col {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .row.col-gutter .col {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .col-lg-0 {
    display: none;
  }
  .col-lg-1,
  .col-lg-2,
  .col-lg-2-4,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    display: block;
  }
  .col-lg-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .col-lg-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .col-lg-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .col-lg-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .col-lg-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .col-lg-offset-1 {
    margin-left: 8.33333%;
  }
  .col-lg-offset-2 {
    margin-left: 16.66667%;
  }
  .col-lg-offset-3 {
    margin-left: 25%;
  }
  .col-lg-offset-4 {
    margin-left: 33.33333%;
  }
  .col-lg-offset-5 {
    margin-left: 41.66667%;
  }
  .col-lg-offset-6 {
    margin-left: 50%;
  }
  .col-lg-offset-7 {
    margin-left: 58.33333%;
  }
  .col-lg-offset-8 {
    margin-left: 66.66667%;
  }
  .col-lg-offset-9 {
    margin-left: 75%;
  }
  .col-lg-offset-10 {
    margin-left: 83.33333%;
  }
  .col-lg-offset-11 {
    margin-left: 91.66667%;
  }
}

/* > PC low resolution */
/**
* SP
**/
/**
* PC
**/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

.breadcrumb__item {
  display: inline;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.042rem;
}

.breadcrumb__item:not(:last-child) {
  padding-right: 1.2rem;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  display: inline-block;
  margin-right: 1.2rem;
}

.breadcrumb__item-link {
  color: #000;
}

.breadcrumb__item-link:hover {
  color: #009AFF;
  opacity: 1;
}

.breadcrumb__item-span {
  color: #000;
}

.breadcrumb__item-span:hover {
  color: #009AFF;
}

@media (max-width: 767px) {
  .breadcrumb {
    margin-bottom: 3.5rem;
  }
}

.footer {
  background-color: #000;
  color: #fff;
  padding-top: 15rem;
  padding-bottom: 5.5rem;
}

.footer.has-box-check {
  padding-top: 26rem;
}

@media (max-width: 767px) {
  .footer.has-box-check {
    padding-top: 20rem;
  }
}

@media (max-width: 767px) {
  .footer {
    padding-top: 11rem;
    padding-bottom: 7rem;
  }
}

.footer__container {
  width: 100%;
  max-width: 128.6rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4.3rem;
  padding-right: 4.3rem;
}

@media (max-width: 767px) {
  .footer__container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.footer__contact {
  text-align: right;
  border-bottom: 0.3rem solid #FFF;
  padding-bottom: 2.8rem;
  margin-bottom: 20rem;
  position: relative;
  display: block;
  color: #fff;
}

.footer__contact::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.3rem;
  z-index: 2;
  width: 0;
  right: 0;
  height: 0.3rem;
  background: #009aff;
  transition: all 0.6s ease;
}

@media (min-width: 768px) {
  .footer__contact:hover {
    opacity: 1;
  }
  .footer__contact:hover:after {
    width: 100%;
    left: 0;
    transition: all 0.6s ease;
  }
  .footer__contact:hover .cm-button-contact-us__icon:before {
    -webkit-animation-name: transformRightLeft;
            animation-name: transformRightLeft;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }
  .footer__contact:hover .cm-button-contact-us__icon:after {
    -webkit-animation-name: transformLeftRight;
            animation-name: transformLeftRight;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
}

@media (max-width: 767px) {
  .footer__contact {
    margin-bottom: 10rem;
  }
}

.footer__contact-des {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 190%;
  letter-spacing: 0.054rem;
  margin-top: 2.5rem;
  color: #fff;
}

@media (max-width: 767px) {
  .footer__contact-des {
    margin-bottom: 1rem;
  }
}

.footer__breadcrumb {
  padding-bottom: 3.5rem;
  border-bottom: 0.1rem solid rgba(75, 75, 75, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.footer__breadcrumb .breadcrumb__item-link,
.footer__breadcrumb .breadcrumb__item-span {
  color: #fff;
}

.footer__breadcrumb .breadcrumb__item-link:hover,
.footer__breadcrumb .breadcrumb__item-span:hover {
  color: #009AFF;
}

.footer__breadcrumb .breadcrumb__item + .breadcrumb__item::before {
  color: #fff;
}

@media (max-width: 767px) {
  .footer__breadcrumb {
    padding-bottom: 0rem;
    flex-direction: column-reverse;
    align-items: flex-start;
    border-bottom: 0.1rem solid #4b4b4b;
  }
  .footer__breadcrumb .cm-button-gototop {
    margin-left: auto;
    margin-bottom: 3.5rem;
  }
}

.footer__infor {
  padding-top: 3.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .footer__infor {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.footer__menu-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}

@media (max-width: 767px) {
  .footer__menu-wrap.footer__menu-en {
    gap: 1rem 3rem;
  }
}

.footer__menu-link {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 190%;
  letter-spacing: 0.054rem;
}

@media (max-width: 767px) {
  .footer__menu-link {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}

.footer__menu-jp {
  margin-top: 2.5rem;
}

@media (max-width: 767px) {
  .footer__menu-jp {
    justify-content: center;
  }
}

.footer__menu-jp-link {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.042rem;
  padding-right: 2rem;
  position: relative;
}

.footer__menu-jp-link::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(/assets/images/icon-link.svg) center/cover no-repeat;
  width: 1rem;
  height: 0.7rem;
}

.footer__menu-jp-link:hover::after {
  filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(2224%) hue-rotate(185deg) brightness(108%) contrast(102%);
}

.footer__menu a:hover {
  color: #009AFF;
  opacity: 1;
}

.footer__copyright {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.042rem;
}

@media (max-width: 767px) {
  .footer__copyright {
    margin-top: 6.5rem;
  }
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: transparent;
  transition: all .5s ease-in-out;
}

.header.fixed {
  background-color: #fff;
}

.header.fixed .header__link:not(.active):not(:hover) {
  color: #000;
}

.header.fixed .cm-button-menu:not(.active) {
  background-color: #F2F2F2;
}

.header__container {
  width: 100%;
  max-width: 151.2rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4.3rem;
  padding-right: 4.3rem;
}

@media (max-width: 767px) {
  .header__container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.header__top {
  background-color: #000;
  text-align: right;
  height: 7rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  transition: all 500ms;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (max-width: 767px) {
  .header__top {
    height: 3.5rem;
  }
  .header__top-img {
    max-width: 8.3rem;
  }
}

.header__main {
  padding: 1.8rem 0 1.9rem;
}

@media (max-width: 767px) {
  .header__main {
    padding: 2rem 0;
  }
}

.header__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.header__logo {
  position: relative;
  z-index: 10;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .header__logo-img {
    width: 5rem;
  }
}

@media (max-width: 767px) {
  .header__logo-img {
    width: 6.5rem;
  }
}

.header__menu {
  display: flex;
}

.header__nav {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .header__nav {
    display: none;
  }
}

.header__item {
  margin-right: 4rem;
}

.header__item:last-child {
  margin-right: 0;
}

@media (min-width: 1023.99px) and (max-width: 1160px) {
  .header__item {
    margin-right: 3rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .header__item {
    margin-right: 1rem;
  }
}

.header__link {
  color: #FFF;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 80%;
  letter-spacing: 0.072rem;
}

.header__link:hover, .header__link.active {
  color: #009AFF;
}

@media (min-width: 1023.99px) and (max-width: 1160px) {
  .header__link {
    font-size: 1.6rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .header__link {
    font-size: 1.4rem;
  }
}

.header__language {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .header__language {
    justify-content: flex-end;
    margin-bottom: 3.5rem;
  }
}

.header__language-link {
  position: relative;
}

.header__language-link:not(:last-child) {
  margin-right: 1.6rem;
  padding-right: 1rem;
}

@media (max-width: 767px) {
  .header__language-link:not(:last-child) {
    margin-right: 2.7rem;
    padding-right: 2rem;
  }
}

.header__language-link:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(../images/divider.svg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 0.6rem;
  height: 1rem;
}

@media (max-width: 767px) {
  .header__language-link:not(:last-child)::before {
    width: 0.7rem;
    height: 1.3rem;
  }
}

@media (max-width: 767px) {
  .header__language-link {
    color: #000;
    font-size: 2.2rem;
    letter-spacing: 0.088rem;
  }
}

.header__contact {
  display: flex;
  align-items: center;
  margin-left: 6rem;
  gap: 3rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 1023.99px) and (max-width: 1160px) {
  .header__contact {
    margin-left: 3rem;
    gap: 1.5rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .header__contact {
    margin-left: 1rem;
    gap: 1rem;
  }
}

@media (max-width: 767px) {
  .header__contact {
    gap: 1rem;
  }
  .header__contact .header__language {
    display: none;
  }
}

.header__menu-sp {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100vw;
  height: 100dvh;
  padding-top: 13.1rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
  transition: opacity 0.5s, visibility 0.5s;
}

.header__menu-sp.opened {
  opacity: 1;
  visibility: visible;
}

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

.header__item-sp + .header__item-sp {
  margin-top: 2rem;
}

.header__link-sp {
  color: #000;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 2.8rem;
  font-style: italic;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.084rem;
  position: relative;
  padding-right: 5rem;
  display: block;
}

.header__link-sp::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background: url(/assets/images/arrow-right-blue.svg) center/cover no-repeat;
  width: 2rem;
  height: 1.3rem;
}

.header__item-sp-contact {
  border-top: 0.3rem solid #000;
  margin-top: 3rem !important;
  padding-top: 3rem;
}

.header__item-sp-contact .header__link-sp {
  line-height: 80%;
  font-size: 3.6rem;
  padding-right: 7rem;
}

.header__item-sp-contact .header__link-sp::after {
  width: 4rem;
  height: 2.7rem;
}

.header__item-sp-contact-des {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.042rem;
  margin-top: 2.5rem;
}

.header__menu-sp-link {
  background-color: #000;
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding: 4rem 2.5rem;
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 3.5rem;
}

.header__menu-sp-link-item {
  color: #fff;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.048rem;
  position: relative;
  padding-right: 2rem;
}

.header__menu-sp-link-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(/assets/images/icon-link.svg) center/cover no-repeat;
  width: 1rem;
  height: 0.7rem;
}

.header a:hover {
  opacity: 1;
}

.cm-animate-underline {
  color: #009AFF;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  line-height: normal;
}

.cm-animate-underline::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 100%;
  left: 0;
  height: 0.1rem;
  background: #009aff;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  transition: 0.6s;
}

.cm-animate-underline:before {
  -webkit-animation-name: transformLeftRight;
          animation-name: transformLeftRight;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.cm-animate-underline:hover {
  opacity: 1;
}

.cm-animate-underline:hover:before {
  -webkit-animation-name: transformRightLeft;
          animation-name: transformRightLeft;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.cm-banner {
  min-height: 63.5rem;
  background-image: url(../images/cm-banner.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}

@media (max-width: 767px) {
  .cm-banner {
    min-height: auto;
    background-image: url(../images/cm-banner-sp.png);
  }
}

.cm-banner--contact, .cm-banner.collaboration-banner {
  background-image: url(../images/cm-banner-contact.png);
}

@media (max-width: 767px) {
  .cm-banner--contact, .cm-banner.collaboration-banner {
    background-image: url(../images/cm-banner-contact-sp.png);
  }
}

.cm-banner__container {
  max-width: 119.6rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 24rem;
  padding-bottom: 3rem;
}

@media (max-width: 767px) {
  .cm-banner__container {
    padding-top: 13.5rem;
    padding-bottom: 9rem;
  }
}

.cm-banner__title {
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 7.8rem;
  font-style: italic;
  font-weight: 700;
  line-height: 150%;
}

@media (max-width: 767px) {
  .cm-banner__title {
    font-size: 6rem;
    line-height: 130%;
  }
}

.cm-banner__des {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.066rem;
  margin-top: 2.8rem;
}

@media (max-width: 767px) {
  .cm-banner__des {
    font-size: 2rem;
    letter-spacing: 0.06rem;
  }
}

.cm-box-check {
  max-width: 95.6rem;
  width: 100%;
  min-height: 25rem;
  box-shadow: 0 0 1.8rem 0 rgba(0, 0, 0, 0.25);
  border-radius: 2rem;
  background-color: #fff;
  transform: translateY(12.5rem);
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

.cm-box-check__box {
  padding: 3rem 5rem;
  background-color: #F2F2F2;
  display: flex;
  align-items: center;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}

@media (max-width: 767px) {
  .cm-box-check__box {
    flex-direction: column;
    padding: 4.5rem 1.7rem 5.5rem;
  }
}

.cm-box-check__box::after {
  transition: 0.5s cubic-bezier(0.075, 0.73, 0.415, 1.005);
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #009AFF;
  z-index: 1;
}

.cm-box-check__box:hover .cm-box-check__title {
  color: #fff;
}

.cm-box-check__box:hover .cm-box-check__link-spanright::after,
.cm-box-check__box:hover .cm-box-check__link-span::after {
  filter: brightness(0) invert(1);
}

.cm-box-check__box:hover::after {
  width: 100%;
}

.cm-box-check__title {
  color: #009AFF;
  font-size: 3rem;
  font-weight: 700;
  line-height: 150%;
  width: 61%;
  position: relative;
  z-index: 2;
  padding-right: 2rem;
}

@media (max-width: 767px) {
  .cm-box-check__title {
    width: 100%;
    font-size: 2.4rem;
    text-align: center;
    padding-right: 0rem;
  }
}

.cm-box-check__btn {
  border-left: 0.1rem solid #D6D6D6;
  flex: 1;
  position: relative;
  z-index: 2;
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 767px) {
  .cm-box-check__btn {
    width: 100%;
    flex: unset;
    border-left: 0;
    min-height: auto;
    margin-top: 4.5rem;
  }
}

@media (min-width: 768px) {
  .cm-box-check__btn--en .cm-box-check__link {
    padding-left: 4rem;
  }
}

.cm-box-check__link {
  display: block;
  color: #000;
  font-size: 3rem;
  font-weight: 700;
  line-height: 150%;
  padding-left: 6rem;
  transition: all .3s;
}

.cm-box-check__link:hover {
  color: #fff;
  opacity: 1;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cm-box-check__link {
    padding-left: 2rem;
    font-size: 2.5rem;
  }
}

@media (max-width: 767px) {
  .cm-box-check__link {
    font-size: 2.4rem;
    padding-left: 0;
    text-align: center;
  }
}

.cm-box-check__link + .cm-box-check__link {
  border-top: 0.1rem solid #D6D6D6;
  padding-top: 2.5rem;
  margin-top: 2.5rem;
}

@media (max-width: 767px) {
  .cm-box-check__link + .cm-box-check__link {
    padding-top: 4rem;
    margin-top: 4rem;
  }
}

.cm-box-check__link-span {
  position: relative;
  padding-right: 5rem;
  display: inline-block;
}

.cm-box-check__link-span::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(../images/arrow-link.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 3.6rem;
  height: 3.6rem;
}

.cm-box-check__link-spanright {
  position: relative;
  padding-right: 5rem;
  display: inline-block;
}

.cm-box-check__link-spanright::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(../images/arrow-right-blue.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 4rem;
  height: 2.7rem;
}

.cm-btn {
  width: 80%;
  margin: 12rem 0 0 auto;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  border-bottom: 0.3rem solid #000;
  transition: all 0.3s ease;
  padding-bottom: 4rem;
  padding-right: 5rem;
  color: #000;
  text-align: right;
  leading-trim: both;
  text-edge: cap;
  text-overflow: ellipsis;
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 32.4px */
  letter-spacing: 0.054rem;
}

@media (max-width: 767px) {
  .cm-btn {
    width: 80%;
    margin: 7rem 0 0 auto;
  }
}

.cm-btn__icon {
  width: 2rem;
  height: 1.3rem;
  display: block;
  position: absolute;
  right: 0;
  overflow: hidden;
}

.cm-btn__icon::before, .cm-btn__icon::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 2rem;
  height: 1.3rem;
  background: url(../images/button-arrow.svg) 50% 50% no-repeat;
  background-size: 99%;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
}

.cm-btn__icon:before {
  -webkit-animation-name: transformLeftRight;
          animation-name: transformLeftRight;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.cm-btn__icon:after {
  -webkit-animation-name: transformRightLeft;
          animation-name: transformRightLeft;
  transform: translateX(-100%);
}

.cm-btn::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.3rem;
  z-index: 2;
  width: 0;
  right: 0;
  height: 0.3rem;
  background: #009aff;
  transition: all 0.6s ease;
}

@media (min-width: 768px) {
  .cm-btn:hover {
    opacity: 1;
  }
  .cm-btn:hover:after {
    width: 100%;
    left: 0;
    transition: all 0.6s ease;
  }
  .cm-btn:hover .cm-btn__icon:before {
    -webkit-animation-name: transformRightLeft;
            animation-name: transformRightLeft;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }
  .cm-btn:hover .cm-btn__icon:after {
    -webkit-animation-name: transformLeftRight;
            animation-name: transformLeftRight;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
}

.cm-btn--white {
  color: #fff;
  border-bottom-color: #fff;
}

@-webkit-keyframes transformLeftRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes transformLeftRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes transformRightLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes transformRightLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.cm-button-contact {
  display: flex;
  width: 18rem;
  min-height: 4.3rem;
  padding: 1rem 2.5rem;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  background: #009AFF;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 80%;
  letter-spacing: 0.072rem;
}

.cm-button-contact__span {
  color: #fff;
  position: relative;
  padding-right: 3.5rem;
  transition: all 0.3s;
}

@media (max-width: 767px) {
  .cm-button-contact__span {
    padding-right: 2rem;
  }
}

.cm-button-contact__span::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background-image: url(../images/mail.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 2rem;
  height: 1.3rem;
  display: inline-block;
  transition: all 0.3s;
}

@media (max-width: 767px) {
  .cm-button-contact__span::after {
    width: 1.5rem;
    height: 1rem;
    top: calc(50% - 0.1rem);
  }
}

.cm-button-contact:hover .cm-button-contact__span {
  color: #000;
}

.cm-button-contact:hover .cm-button-contact__span::after {
  background-image: url(../images/mail-black.svg);
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cm-button-contact {
    width: 12rem;
    font-size: 1.3rem;
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 767px) {
  .cm-button-contact {
    width: 12rem;
    min-height: 4rem;
    font-size: 1.2rem;
    letter-spacing: 0.048rem;
  }
}

.cm-button-menu {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: #fff;
  background-image: url(../images/icon-bar.svg);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.cm-button-menu.active {
  background-color: #009AFF;
  background-image: url(../images/icon-close.svg);
}

.cm-button-controller {
  width: 3rem;
  height: 3rem;
  display: inline-block;
  border: none;
  background-color: transparent;
  background-image: url(../images/icon-pause.svg);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.cm-button-controller.active {
  background-image: url(../images/icon-play.svg);
}

.cm-button-contact-us {
  color: #000;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 7rem;
  font-style: italic;
  font-weight: 700;
  line-height: 80%;
  position: relative;
  padding-right: 9rem;
  display: inline-block;
}

@media (max-width: 767px) {
  .cm-button-contact-us {
    font-size: 5rem;
    line-height: 150%;
  }
}

@media (min-width: 360px) and (max-width: 429px) {
  .cm-button-contact-us {
    font-size: 4rem;
  }
}

.cm-button-contact-us__icon {
  width: 4rem;
  height: 2.7rem;
  display: block;
  position: absolute;
  right: 0;
  overflow: hidden;
  top: 50%;
  transform: translateY(-50%);
}

.cm-button-contact-us__icon::before, .cm-button-contact-us__icon::after {
  content: '';
  position: absolute;
  right: 0;
  background: url(../images/arrow-right-blue.svg) center/cover no-repeat;
  width: 4rem;
  height: 2.7rem;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
}

.cm-button-contact-us__icon:before {
  -webkit-animation-name: transformLeftRight;
          animation-name: transformLeftRight;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.cm-button-contact-us__icon:after {
  -webkit-animation-name: transformRightLeft;
          animation-name: transformRightLeft;
  transform: translateX(-100%);
}

.cm-button-contact-us:hover {
  opacity: 1;
}

.cm-button-contact-us--white {
  color: #fff;
}

.cm-button-gototop {
  width: 4rem;
  height: 4rem;
  background-color: transparent;
  background-image: url(../images/btn-gototop.svg);
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

.cm-button-gototop:hover {
  opacity: 1;
  background-image: url(../images/btn-gototop-blue.svg);
}

.cm-colbox {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6%;
  margin-top: 8rem;
}

@media (max-width: 767px) {
  .cm-colbox {
    margin-top: 6rem;
    gap: 8rem;
  }
}

.cm-colbox__content {
  flex: 1;
}

@media (max-width: 767px) {
  .cm-colbox__content {
    width: 100%;
  }
}

.cm-colbox__image {
  width: 59rem;
  max-width: 50%;
}

@media (max-width: 767px) {
  .cm-colbox__image {
    width: 100%;
    max-width: 100%;
  }
}

.cm-container {
  max-width: 120rem;
  margin: 0 auto;
}

.cm-h2 {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.cm-h2--white .cm-h2__main,
.cm-h2--white .cm-h2__sub {
  color: #fff;
}

.cm-h2__main {
  width: 100%;
  color: #000;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 5rem;
  font-style: italic;
  font-weight: 700;
  line-height: 150%;
  /* 75px */
  margin: -2rem 0;
}

@media (max-width: 767px) {
  .cm-h2__main {
    font-size: 4rem;
    margin: -1.5rem 0;
  }
}

.cm-h2__sub {
  color: #000;
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 32.4px */
  letter-spacing: 0.054rem;
  padding-left: 8rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: 3rem 0 -1rem;
}

.cm-h2__sub::before {
  content: "";
  display: block;
  position: absolute;
  width: 6rem;
  height: 0.2rem;
  background: #009AFF;
  left: 0;
}

.cm-hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .cm-hidden--pc {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cm-hidden--pc--md {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .cm-hidden--pc--lg {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .cm-hidden--sp {
    display: none !important;
  }
}

.cm-image {
  width: 100%;
  position: relative;
  display: block;
}

@media (max-width: 767px) {
  .cm-image {
    padding-bottom: 2rem;
  }
}

.cm-image img {
  width: 100%;
  height: auto;
}

.cm-image__zoom {
  display: none;
}

@media (max-width: 767px) {
  .cm-image__zoom {
    display: block;
    width: 4rem;
    height: 4rem;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(../images/zoom.svg) 50% 50% no-repeat;
    background-size: 99%;
  }
}

.cm-link {
  color: #009AFF;
  text-decoration: underline;
}

.cm-listpost {
  background: #F2F2F2;
  padding-top: 10rem;
  padding-bottom: 10rem;
  width: 100%;
}

.cm-listpost__list {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 8rem;
  gap: 4rem;
}

.cm-listpost__item {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 0.3rem solid #000;
  transition: all 0.3s ease;
  padding-bottom: 4rem;
  padding-right: 4.4rem;
}

@media (max-width: 767px) {
  .cm-listpost__item {
    padding-right: 3rem;
    padding-bottom: 3rem;
  }
}

.cm-listpost__item::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.3rem;
  z-index: 2;
  width: 0;
  right: 0;
  height: 0.3rem;
  background: #009aff;
  transition: all 0.6s ease;
}

@media (min-width: 768px) {
  .cm-listpost__item:hover {
    opacity: 1;
  }
  .cm-listpost__item:hover:after {
    width: 100%;
    left: 0;
    transition: all 0.6s ease;
  }
  .cm-listpost__item:hover .cm-listpost__icon:before {
    -webkit-animation-name: transformRightLeft;
            animation-name: transformRightLeft;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }
  .cm-listpost__item:hover .cm-listpost__icon:after {
    -webkit-animation-name: transformLeftRight;
            animation-name: transformLeftRight;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
}

.cm-listpost__icon {
  width: 2rem;
  height: 1.3rem;
  display: block;
  position: absolute;
  right: 0;
  overflow: hidden;
}

.cm-listpost__icon::before, .cm-listpost__icon::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 2rem;
  height: 1.3rem;
  background: url(../images/button-arrow.svg) 50% 50% no-repeat;
  background-size: 99%;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
}

.cm-listpost__icon:before {
  -webkit-animation-name: transformLeftRight;
          animation-name: transformLeftRight;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.cm-listpost__icon:after {
  -webkit-animation-name: transformRightLeft;
          animation-name: transformRightLeft;
  transform: translateX(-100%);
}

.cm-listpost__info {
  width: 18.6rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 767px) {
  .cm-listpost__info {
    width: 100%;
  }
}

.cm-listpost__title {
  width: calc(100% - 18.6rem);
  color: #000;
  leading-trim: both;
  text-edge: cap;
  /* P_B */
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 32.4px */
  letter-spacing: 0.054rem;
  margin: -1rem 0;
}

@media (max-width: 767px) {
  .cm-listpost__title {
    width: 100%;
    margin-top: 2rem;
  }
}

.cm-listpost__date {
  color: #000;
  leading-trim: both;
  text-edge: cap;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  /* 22.4px */
  width: 12.2rem;
}

@media (max-width: 767px) {
  .cm-listpost__date {
    width: 13rem;
  }
}

.cm-section {
  padding-left: 4.3rem;
  padding-right: 4.3rem;
}

@media (max-width: 767px) {
  .cm-section {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.cm-text {
  margin-top: 6.8rem;
  max-width: 95.6rem;
}

.cm-text + .cm-text {
  margin-top: 5.8rem;
}

.cm-text--full {
  max-width: unset;
}

.cm-text__title {
  color: var(--calc_blue, #009AFF);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.66px;
  margin-bottom: 0.8rem;
}

.cm-text__text {
  color: var(--calc_black, #000);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 190%;
  letter-spacing: 0.54px;
}

.case-studies-box-check {
  background-color: #D6D6D6;
}

.case-studies {
  padding-top: 15rem;
  padding-bottom: 14rem;
}

.case-studies:last-child {
  padding-bottom: 8.5rem;
}

@media (max-width: 767px) {
  .case-studies:last-child {
    padding-bottom: 9rem;
  }
}

@media (max-width: 767px) {
  .case-studies {
    padding-top: 10rem;
    padding-bottom: 9rem;
  }
}

.case-studies--pb-0 {
  padding-bottom: 0;
}

.case-studies__box {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

@media (max-width: 767px) {
  .case-studies__box {
    flex-direction: column;
  }
}

.case-studies__box-text {
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (min-width: 768px) {
  .case-studies__box-text {
    width: 51.08%;
  }
}

@media (min-width: 768px) and (max-width: 1300px) {
  .case-studies__box-text .case-studies__box-des .cm-hidden--sp {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .case-studies__box-text {
    transform: scale(0.7);
    transform-origin: left bottom;
    width: 72.97%;
    bottom: -0.1rem;
  }
}

@media (max-width: 767px) {
  .case-studies__box-text {
    position: relative;
    z-index: 1;
    top: -3.5rem;
  }
}

.case-studies__box-image {
  width: calc(712 / 1200 * 100%);
  aspect-ratio: 712 / 503;
}

@media (max-width: 767px) {
  .case-studies__box-image {
    width: 100%;
    aspect-ratio: 380 / 268;
  }
}

.case-studies__box-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.case-studies__box-title {
  display: inline-block;
  color: #000;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-style: italic;
  font-size: 3rem;
  font-weight: 700;
  line-height: 100%;
  position: relative;
  bottom: -0.4rem;
  background-color: #fff;
  transition: background-color 0.6s ease-in-out;
}

@media (max-width: 767px) {
  .case-studies__box-title {
    padding-right: 1.4rem;
  }
}

.case-studies__box-title-span {
  position: relative;
  z-index: 1;
}

.case-studies__box-title-span::after {
  content: attr(data-num);
  position: relative;
  left: -1.5rem;
  bottom: 0.4rem;
  color: #009AFF;
  font-size: 8.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.176rem;
  z-index: -1;
}

@media (max-width: 767px) {
  .case-studies__box-title-span::after {
    bottom: 0.1rem;
    left: -1.9rem;
  }
}

.case-studies__box-des {
  background-color: #FFF;
  color: #000;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 150%;
  padding: 4.6rem 4rem 4.6rem 0;
  transition: background-color 0.6s ease-in-out;
}

@media (max-width: 767px) {
  .case-studies__box-des {
    font-size: 3rem;
    padding: 2rem 0 0;
  }
}

.case-studies__row {
  border-top: 0.3rem solid #000;
  border-bottom: 0.3rem solid #000;
  background: #F2F2F2;
  gap: 7rem;
  padding: 4rem 8.6rem;
  display: flex;
  margin-top: 12rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .case-studies__row {
    gap: 2.5rem;
    padding: 2rem 2.6rem;
  }
}

@media (max-width: 767px) {
  .case-studies__row {
    padding: 3.5rem 3.2rem 4rem;
    margin-top: 2.5rem;
    flex-direction: column;
    gap: 3.5rem;
  }
}

.case-studies__item {
  flex: 1;
}

@media (max-width: 767px) {
  .case-studies__item:last-child {
    padding-left: 0.6rem;
  }
  .case-studies__item:last-child .case-studies__item-content {
    padding-left: 2.5rem;
  }
}

.case-studies__item-icon {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.case-studies__item-name {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 150%;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .case-studies__item-name {
    font-size: 2rem;
  }
}

.case-studies__item-divider {
  height: 1.3rem;
  margin: 1.5rem 0;
  position: relative;
}

.case-studies__item-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 0.2rem;
  background: #009AFF;
}

@media (max-width: 767px) {
  .case-studies__item-divider::before {
    height: 100%;
    width: 0.2rem;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.case-studies__item-divider:not(.case-studies__item-divider--end)::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -0.2rem;
  background-image: url(../images/icon-arrow-blue.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 1rem;
  height: 1.5rem;
  display: block;
}

@media (max-width: 767px) {
  .case-studies__item-divider:not(.case-studies__item-divider--end)::after {
    top: calc(100% - 1rem);
    right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

@media (max-width: 767px) {
  .case-studies__item-divider {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.3rem;
    height: 100%;
    margin: 0;
  }
  .case-studies__item-divider--end {
    width: 0.2rem;
  }
  .case-studies__item-divider--end::before {
    left: 0;
    transform: translateX(0);
  }
}

.case-studies__item-des {
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.048rem;
}

@media (max-width: 767px) {
  .case-studies__item-des {
    transform: translateY(-8px);
  }
}

.case-studies__item-content {
  position: relative;
}

@media (max-width: 767px) {
  .case-studies__item-content {
    padding-left: 3.8rem;
    margin-top: 2rem;
    min-height: 10rem;
  }
}

.case-studies__content {
  margin-top: 10rem;
  max-width: 95.6rem;
}

@media (max-width: 767px) {
  .case-studies__content {
    margin-top: 6.5rem;
  }
}

.case-studies__content-title {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 5rem;
}

@media (max-width: 767px) {
  .case-studies__content-title {
    font-size: 2.4rem;
    margin-bottom: 4rem;
  }
}

.case-studies__p {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 190%;
  letter-spacing: 0.054rem;
}

.case-studies__p + .case-studies__p {
  margin-top: 3rem;
}

.collaboration-banner__container {
  padding-top: 18rem;
}

@media (max-width: 767px) {
  .collaboration-banner__container {
    padding-top: 13rem;
  }
}

.collaboration-banner__title {
  font-size: 5.6rem;
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-style: normal;
}

@media (max-width: 767px) {
  .collaboration-banner__title {
    font-size: 4rem;
    line-height: 140%;
  }
}

.collaboration-banner__des {
  margin-top: 4rem;
}

.collaboration {
  counter-reset: num;
  padding-top: 13.5rem;
  padding-bottom: 15rem;
}

@media (max-width: 767px) {
  .collaboration {
    padding-top: 8.5rem;
    padding-bottom: 10rem;
  }
}

.collaboration__container {
  max-width: 95.6rem;
  margin: 0 auto;
}

.collaboration__title {
  color: #009AFF;
  font-size: 3rem;
  font-weight: 700;
  line-height: 150%;
}

.collaboration__des {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: -0.022rem;
  margin-top: 3.5rem;
}

.collaboration__content {
  border-top: 0.3rem solid #000;
  padding: 6.5rem 0;
  margin-top: 7rem;
}

.collaboration__item {
  font-size: 2rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.06rem;
  position: relative;
  padding-left: 3.5rem;
}

.collaboration__item::before {
  counter-increment: num;
  content: counter(num) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
}

.collaboration__item + .collaboration__item {
  margin-top: 3.5rem;
}

.collaboration__item-bold-wrap {
  margin-top: 2rem;
}

.collaboration__item-bold {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.054rem;
}

.collaboration__item-small {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.048rem;
  margin-top: 2rem;
}

.collaboration__item-link {
  color: #000;
  font-size: 2rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.06rem;
  display: inline-block;
}

.collaboration__item-link:hover {
  opacity: 1;
}

.collaboration__clause {
  border-top: 0.3rem solid #000;
  padding-top: 6.5rem;
  text-align: center;
}

.collaboration__clause-title {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 150%;
}

@media (max-width: 767px) {
  .collaboration__clause-title {
    font-size: 2.4rem;
  }
}

.collaboration__clause-content {
  color: #4B4B4B;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.048rem;
  margin-top: 2.5rem;
}

.collaboration__clause-btn {
  margin-top: 6.5rem;
}

.collaboration__clause-btn-link {
  display: flex;
  width: 22.4rem;
  min-height: 6.3rem;
  padding: 1rem 2rem;
  justify-content: center;
  align-items: center;
  border-radius: 1rem;
  background: #D6D6D6;
  color: #000;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.054rem;
  margin: 0 auto;
  transition: all .6s;
}

.collaboration__clause-btn-link:hover {
  opacity: 1;
  background: #000;
  color: #009AFF;
}

.contact {
  padding-bottom: 15rem;
}

@media (max-width: 767px) {
  .contact {
    padding-bottom: 9rem;
  }
}

.contact__box {
  padding-top: 13.5rem;
}

@media (max-width: 767px) {
  .contact__box {
    padding-top: 9rem;
  }
}

.contact__title {
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 5rem;
  font-style: italic;
  font-weight: 700;
  line-height: 150%;
}

@media (max-width: 767px) {
  .contact__title {
    font-size: 4rem;
  }
}

.contact__list {
  padding-top: 0.5rem;
}

@media (max-width: 767px) {
  .contact__list {
    padding-top: 0;
  }
}

.contact__item {
  padding: 4.6rem 0;
  border-bottom: 0.3rem solid #D6D6D6;
  display: block;
  position: relative;
}

.contact__item:last-child {
  border-bottom: 0;
}

.contact__item:last-child::before {
  content: none;
}

.contact__item::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.3rem;
  z-index: 2;
  width: 0;
  right: 0;
  height: 0.3rem;
  background: #009aff;
  transition: all 0.6s ease;
}

.contact__item:hover::before {
  width: 100%;
  left: 0;
  transition: all 0.6s ease;
}

.contact__item:hover {
  opacity: 1;
}

@media (max-width: 767px) {
  .contact__item {
    padding: 5.2rem 0;
  }
}

.contact__item-link {
  color: #000;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 150%;
  position: relative;
  padding-right: 6.5rem;
  display: inline-block;
}

@media (max-width: 767px) {
  .contact__item-link {
    font-size: 2.4rem;
    display: block;
  }
}

.contact__item-link::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background-image: url(../images/arrow-link.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 3.6rem;
  height: 3.6rem;
}

.contact__item-link--arrowright::after {
  background-image: url(../images/arrow-right-blue2.svg);
  width: 3.2rem;
  height: 2.3rem;
}

.contact__item-des {
  color: #000;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.048rem;
  margin-top: 0.5rem;
}

@media (max-width: 767px) {
  .contact__item-des {
    margin-top: 1rem;
  }
}

.contact__map {
  margin-top: 6rem;
  display: flex;
}

@media (min-width: 768px) {
  .contact__map {
    margin-top: 4.5rem;
  }
}

@media (max-width: 767px) {
  .contact__map {
    flex-direction: column-reverse;
  }
}

.contact__map-text {
  flex: 1;
}

@media (max-width: 767px) {
  .contact__map-text {
    width: 100%;
    padding-top: 1rem;
  }
}

.contact__map-image {
  width: calc(590/1200 * 100%);
}

@media (max-width: 767px) {
  .contact__map-image {
    width: 100%;
  }
}

.contact__map-img {
  display: block;
}

.contact__map-title {
  color: #009AFF;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 150%;
}

.contact__map-des {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.054rem;
  margin-top: 3rem;
}

.contact__map-btn {
  margin-top: 3.5rem;
}

.contact__map-link {
  color: #000;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.054rem;
  position: relative;
  padding-right: 5rem;
  transition: color .3s;
}

.contact__map-link:hover {
  color: #009aff;
  opacity: 1;
}

.contact__map-link::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background-image: url(../images/icon-map.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 1.8rem;
  height: 2rem;
}

@media (max-width: 767px) {
  .product-about {
    margin-top: 5.5rem;
  }
}

.product-banner {
  background-image: url(../images/product/banner-pc.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 767px) {
  .product-banner {
    background-image: url(../images/product/banner-sp.png);
  }
}

@media (max-width: 767px) {
  .product-box-check {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .product-box-check__box {
    padding-bottom: 5.2rem;
  }
}

@media (max-width: 767px) {
  .product-box-check__btn {
    margin-top: 5.5rem;
    border-top: 0.1rem solid #D6D6D6;
    padding-top: 3.2rem;
  }
}

@media (max-width: 767px) {
  .product-box-check__link {
    font-size: 3rem;
  }
}

.product-calc {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.product-calc__main {
  width: 100%;
  color: #009AFF;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 5rem;
  font-style: italic;
  font-weight: 700;
  line-height: 150%;
  margin: -2rem 0 0;
}

@media (max-width: 767px) {
  .product-calc__main {
    font-size: 3.6rem;
    margin: -1.4rem 0 0;
  }
}

.product-calc__sub {
  color: #000;
  font-size: 5rem;
  font-weight: 700;
  line-height: 150%;
  margin: 0 0 -2rem;
}

@media (max-width: 767px) {
  .product-calc__sub {
    font-size: 3.6rem;
    margin: 0 0 -1.4rem;
  }
}

.product-calc__sub--en {
  font-style: italic;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
}

.product-col__text {
  margin: -1rem 0;
}

.product-section {
  padding-top: 15rem;
  width: 100%;
}

@media (max-width: 767px) {
  .product-section {
    padding-top: 10rem;
  }
}

.product-section__text {
  width: 100%;
  max-width: 95.6rem;
  margin-top: 8rem;
  color: #000;
  text-align: justify;
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 39.6px */
  letter-spacing: 0.066rem;
  margin: 7rem 0 -1rem;
}

@media (max-width: 767px) {
  .product-section__text {
    width: 100%;
    max-width: 100%;
    margin-top: 6rem;
    font-size: 1.8rem;
    letter-spacing: 0.054rem;
  }
}

.product-section__text--white {
  color: #fff;
}

.product-section__text--en {
  text-align: unset;
}

.product-section__image {
  margin-top: 7.5rem;
  width: 100%;
  display: block;
  position: relative;
}

.product-section__image img {
  width: 100%;
}

.product-section__fadeInUp {
  -webkit-animation-name: prdfadeInUp;
  animation-name: prdfadeInUp;
}

@-webkit-keyframes prdfadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes prdfadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

.technology-research-banner {
  background-image: url(../images/banner-technology-pc.png);
}

@media (max-width: 767px) {
  .technology-research-banner {
    background-image: url(../images/banner-technology-sp.png);
  }
}

@media (max-width: 426px) {
  .technology-research-banner__title {
    font-size: 5.1rem;
  }
}

.technology-research-features {
  padding-top: 14rem;
}

@media (max-width: 767px) {
  .technology-research-features {
    padding-top: 9rem;
  }
}

@media (max-width: 767px) {
  .technology-research-features__h2-sub {
    padding-left: 0;
    padding-top: 1.2rem;
    margin-top: 3.6rem;
  }
  .technology-research-features__h2-sub::before {
    top: 0;
  }
}

.technology-research-features__list {
  margin-top: 8rem;
}

.technology-research-features__item {
  position: relative;
  min-height: 14rem;
  padding: 5rem 4rem;
  border-top: 0.3rem solid #000;
  box-sizing: border-box;
}

.technology-research-features__item:last-child {
  border-bottom: 0.3rem solid #000;
}

.technology-research-features__item::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.3rem;
  z-index: 2;
  width: 0;
  right: 0;
  height: 0.3rem;
  background: #009aff;
  transition: all 0.6s ease;
}

@media (min-width: 768px) {
  .technology-research-features__item:hover:after {
    width: 100%;
    left: 0;
    transition: all 0.6s ease;
  }
}

@media (max-width: 767px) {
  .technology-research-features__item {
    min-height: 13.2rem;
    padding: 3rem 2rem;
  }
}

.technology-research-features__accordion {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 2.9rem;
  cursor: pointer;
  transition: all .3s ease;
}

.technology-research-features__accordion::after {
  position: absolute;
  content: "";
  right: 0;
  top: 1rem;
  display: flex;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: url(../images/icon-plus.svg);
  background-size: 3rem 3rem;
  transition: all .3s ease;
}

@media (max-width: 767px) {
  .technology-research-features__accordion {
    flex-direction: column;
    gap: 2rem;
  }
  .technology-research-features__accordion::after {
    top: auto;
    bottom: 0;
  }
}

.technology-research-features__number {
  color: #D6D6D6;
  font-family: 'Raleway';
  font-size: 5.6rem;
  font-style: italic;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: -0.112rem;
  margin: -3rem 0;
  transition: all .3s ease;
}

@media (max-width: 767px) {
  .technology-research-features__number {
    font-size: 5rem;
    letter-spacing: -0.1rem;
    margin: -2.8rem 0;
  }
}

.technology-research-features__title {
  flex: 1;
  color: #000;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  padding-right: 9.5833333333%;
  margin: -1rem 0;
  transition: all .3s ease;
}

@media (max-width: 767px) {
  .technology-research-features__title {
    font-size: 2.2rem;
    line-height: 180%;
    letter-spacing: 0.066rem;
    padding-right: 22.3684210526%;
  }
}

.technology-research-features__description {
  display: none;
  width: 85.3571428571%;
  color: #000;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 190%;
  /* 34.2px */
  letter-spacing: 0.054rem;
  margin: 5rem 0 -1rem;
}

@media (max-width: 767px) {
  .technology-research-features__description {
    margin: 3rem 0 -1rem;
    width: 100%;
  }
}

.technology-research-features__item--active {
  background: #F2F2F2;
}

@media (min-width: 768px) {
  .technology-research-features__item--active:hover:after {
    width: 0;
  }
}

.technology-research-features__item--active .technology-research-features__accordion::after {
  top: 3.8rem;
  height: 0.2rem;
  background: url(../images/icon-minus.svg);
  background-size: 3rem 0.2rem;
}

@media (max-width: 767px) {
  .technology-research-features__item--active .technology-research-features__accordion::after {
    top: auto;
    bottom: 0.2rem;
  }
}

.technology-research-features__item--active .technology-research-features__number,
.technology-research-features__item--active .technology-research-features__title {
  color: #009AFF;
}

.technology-research-infomation {
  margin-top: 15rem;
  background-color: #000;
}

@media (max-width: 767px) {
  .technology-research-infomation {
    margin-top: 10rem;
  }
}

@media (max-width: 767px) {
  .technology-research-infomation__h2-sub {
    padding-left: 0;
    padding-top: 1.2rem;
    margin-top: 3.6rem;
  }
  .technology-research-infomation__h2-sub::before {
    top: 0;
  }
}

.technology-research-infomation__container {
  padding-top: 15rem;
}

@media (max-width: 767px) {
  .technology-research-infomation__container {
    padding-top: 10rem;
  }
}

.technology-research-infomation__list {
  margin-top: 8rem;
}

.technology-research-infomation__item {
  width: 100%;
  position: relative;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 0.1rem solid #4B4B4B;
  transition: all 0.3s ease;
  padding-bottom: 4.2rem;
  margin-bottom: 5rem;
  display: none;
}

.technology-research-infomation__item:last-child {
  margin-bottom: 0;
}

.technology-research-infomation__item::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.1rem;
  z-index: 2;
  width: 0;
  right: 0;
  height: 0.1rem;
  background: #009aff;
  transition: all 0.6s ease;
}

@media (min-width: 768px) {
  .technology-research-infomation__item:hover:after {
    width: 100%;
    left: 0;
    transition: all 0.6s ease;
  }
}

.technology-research-infomation__item:hover {
  opacity: 1;
}

.technology-research-infomation__item:hover .technology-research-infomation__detail-icon::before {
  -webkit-animation-name: move-diagonal-reverse;
          animation-name: move-diagonal-reverse;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.technology-research-infomation__item:hover .technology-research-infomation__detail-icon::after {
  -webkit-animation-name: move-diagonal;
          animation-name: move-diagonal;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.technology-research-infomation__item.active {
  display: flex;
}

.technology-research-infomation__info {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
}

.technology-research-infomation__date {
  color: #FFF;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 80%;
}

.technology-research-infomation__category {
  display: flex;
  width: 16rem;
  height: 4rem;
  justify-content: center;
  align-items: center;
  border: 0.2rem solid #D6D6D6;
  color: #FFF;
  text-align: center;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
}

.technology-research-infomation__title {
  width: 100%;
  color: #FFF;
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  margin: 3rem 0 1rem;
  padding-right: 16rem;
}

@media (max-width: 767px) {
  .technology-research-infomation__title {
    font-size: 2.4rem;
    padding-right: 0;
  }
}

.technology-research-infomation__excerpt {
  padding-left: 3.15rem;
  padding-right: 21rem;
  color: #FFF;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 190%;
  /* 34.2px */
  letter-spacing: 0.054rem;
}

@media (max-width: 767px) {
  .technology-research-infomation__excerpt {
    padding: 0;
  }
}

.technology-research-infomation__detail {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: 5rem;
  overflow: hidden;
  padding-right: 5.2rem;
  color: #FFF;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 32.4px */
  letter-spacing: 0.054rem;
}

.technology-research-infomation__detail-icon {
  position: absolute;
  right: 0;
  overflow: hidden;
  width: 2.4rem;
  height: 2.4rem;
  display: block;
}

.technology-research-infomation__detail-icon::before, .technology-research-infomation__detail-icon::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/icon-read-more.svg) 50% 50% no-repeat;
  background-size: 2.4rem 2.4rem;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.technology-research-infomation__detail-icon::before {
  -webkit-animation-name: move-diagonal;
          animation-name: move-diagonal;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.technology-research-infomation__detail-icon::after {
  -webkit-animation-name: move-diagonal-reverse;
          animation-name: move-diagonal-reverse;
  transform: translateX(-100%);
}

@media (max-width: 767px) {
  .technology-research-infomation__detail {
    width: 100%;
    justify-content: flex-end;
    position: relative;
    bottom: 0;
    margin-top: 1.6rem;
  }
}

.technology-research-infomation__more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 7.5rem 0 -0.1rem;
  cursor: pointer;
  color: #FFF;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.054rem;
  transition: all .3s ease;
}

@media (min-width: 768px) {
  .technology-research-infomation__more:hover {
    color: #009AFF;
  }
}

.technology-research-infomation__icon {
  margin-top: 1.5rem;
  width: 2rem;
}

@-webkit-keyframes move-diagonal {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(2.4rem, -2.4rem);
  }
}

@keyframes move-diagonal {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(2.4rem, -2.4rem);
  }
}

@-webkit-keyframes move-diagonal-reverse {
  0% {
    transform: translate(-2.4rem, 2.4rem);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes move-diagonal-reverse {
  0% {
    transform: translate(-2.4rem, 2.4rem);
  }
  100% {
    transform: translate(0, 0);
  }
}

.technology-research-navigation {
  margin-top: 15rem;
  position: relative;
  pointer-events: all;
  transition: all .5s;
}

@media (max-width: 767px) {
  .technology-research-navigation {
    margin-top: 10rem;
  }
}

.technology-research-navigation--hide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

.technology-research-navigation__box {
  width: 39.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 1.5rem 5rem;
  border-radius: 10px;
  background: #000;
  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .technology-research-navigation__box {
    width: 38rem;
    max-width: 100%;
  }
}

@media (max-width: 375px) {
  .technology-research-navigation__box {
    padding: 1.5rem 4rem;
  }
}

.technology-research-navigation__item {
  color: #FFF;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.054rem;
  cursor: pointer;
  transition: all .2s ease;
}

@media (min-width: 1201px) {
  .technology-research-navigation__item:hover {
    color: #009AFF;
  }
}

@media (max-width: 375px) {
  .technology-research-navigation__item {
    font-size: 1.6rem;
  }
}

.technology-research-navigation__item--flex {
  display: flex;
  align-items: center;
  line-height: 0;
  margin-left: 1rem;
  gap: 0.3rem;
  cursor: unset;
}

.technology-research-navigation.fixed {
  position: fixed;
  bottom: 2rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  transition: all .3s ease-out;
}

.top-about {
  background-color: #000;
  color: #fff;
  padding-top: 22rem;
  padding-bottom: 22rem;
  position: relative;
}

@media (max-width: 767px) {
  .top-about {
    padding-top: 9rem;
    padding-bottom: 10rem;
  }
}

.top-about__container {
  position: relative;
  z-index: 1;
}

.top-about__des {
  max-width: 95.6rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7rem;
}

@media (max-width: 767px) {
  .top-about__des {
    margin-top: 5rem;
  }
}

.top-about__p {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.066rem;
}

@media (max-width: 767px) {
  .top-about__p {
    font-size: 1.8rem;
    letter-spacing: 0.054rem;
  }
}

.top-about__signature {
  max-width: 95.6rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7rem;
  text-align: right;
}

.top-about__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75rem;
  background-image: url(../images/top-about-bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left bottom;
  opacity: 0;
}

@media (max-width: 767px) {
  .top-about__bg {
    height: 37.4rem;
    background-image: url(../images/top-about-bg-sp.png);
  }
}

.top-casestudies {
  padding-top: 15rem;
  width: 100%;
}

@media (max-width: 767px) {
  .top-casestudies {
    padding-top: 10rem;
  }
}

.top-casestudies__text {
  width: 100%;
  max-width: 95.6rem;
  margin-top: 8rem;
  color: #000;
  text-align: justify;
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 39.6px */
  letter-spacing: 0.066rem;
  margin: 7rem 0 -1rem;
}

@media (max-width: 767px) {
  .top-casestudies__text {
    width: 100%;
    max-width: 100%;
    margin-top: 6rem;
  }
}

.top-casestudies__text--white {
  color: #fff;
}

.top-casestudies__text--en {
  text-align: unset;
}

.top-casestudies__list {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
  margin-top: 8rem;
}

.top-casestudies__item {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.top-casestudies__image {
  width: 100%;
  position: relative;
  display: block;
  aspect-ratio: 120/45;
  -o-object-fit: cover;
     object-fit: cover;
  height: auto;
  z-index: 1;
}

@media (max-width: 767px) {
  .top-casestudies__image {
    aspect-ratio: 38/30;
  }
}

.top-casestudies__detail {
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  width: 95.6rem;
  padding: 5rem 5rem 0px 0px;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: -8rem;
  max-width: 80%;
}

@media (max-width: 767px) {
  .top-casestudies__detail {
    max-width: 100%;
    width: 100%;
    margin-top: -5rem;
    padding: 5rem 0px 0px 0px;
  }
}

.top-casestudies__detail::before {
  content: "";
  width: calc(100% + 1px);
  height: 100%;
  display: block;
  position: absolute;
  background: #fff;
  top: 0;
  left: -1px;
}

@media (max-width: 767px) {
  .top-casestudies__detail::before {
    width: 80%;
    left: -1px;
  }
}

.top-casestudies__head {
  width: 24.4rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  color: #009AFF;
  leading-trim: both;
  text-edge: cap;
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 39.6px */
  letter-spacing: 0.066rem;
  margin: -1.2rem 0;
}

@media (max-width: 767px) {
  .top-casestudies__head {
    width: 100%;
  }
}

.top-casestudies__content {
  width: calc(100% - 24.4rem);
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .top-casestudies__content {
    width: 100%;
    margin-top: 4rem;
  }
}

.top-casestudies__ul {
  color: #000;
  text-align: justify;
  leading-trim: both;
  text-edge: cap;
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 32.4px */
  letter-spacing: 0.054rem;
  margin: -1rem 0;
}

.top-casestudies__ul li {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding-left: 2.6rem;
}

.top-casestudies__ul li::before {
  content: "";
  background-color: #000;
  display: block;
  position: absolute;
  left: 0.9rem;
  top: 1.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.5rem;
}

.top-casestudies__ul--en {
  text-align: unset;
}

.top-kv {
  height: 91.2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.top-kv::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

@media (min-width: 768px) {
  .top-kv::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(58.65% 58.61% at 50.79% 41.39%, rgba(0, 0, 0, 0) 82.43%, #000 100%);
  }
}

@media (max-width: 767px) {
  .top-kv {
    height: 69.3rem;
  }
  .top-kv__bg {
    position: absolute;
    top: -3.5rem;
    left: 0;
    width: 100%;
    height: calc(100% + 3.5rem);
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0;
  }
}

.top-kv__container {
  width: 100%;
  max-width: 142.6rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
  padding-bottom: 3rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

@media (max-width: 767px) {
  .top-kv__container {
    padding-bottom: 4rem;
  }
}

.top-kv__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
}

@media (max-width: 767px) {
  .top-kv__video {
    display: none;
  }
}

.top-kv__description {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  opacity: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .top-kv__description {
    width: calc(100% - 8.6rem);
  }
}

@media (max-width: 767px) {
  .top-kv__description {
    top: calc(50% - 4rem);
  }
}

.top-kv__scroll {
  height: 15rem;
  color: #fff;
  display: flex;
  align-items: flex-end;
  position: relative;
  margin-left: auto;
}

.top-kv__scroll::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 0.1rem;
  height: 10rem;
  margin: auto;
  background-color: #fff;
  opacity: 0;
  -webkit-animation: pathmove 2s ease-in-out infinite;
          animation: pathmove 2s ease-in-out infinite;
  content: "";
}

.top-kv__scroll-span {
  display: block;
  transform: rotate(-90deg) translateX(6px);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.042rem;
}

@media (max-width: 767px) {
  .top-kv__scroll {
    height: 7.5rem;
  }
  .top-kv__scroll::after {
    -webkit-animation-name: pathmovesp;
            animation-name: pathmovesp;
  }
}

@-webkit-keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 15rem;
    top: 0;
    opacity: 1;
  }
  to {
    height: 0;
    top: 15rem;
    opacity: 0;
  }
}

@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 15rem;
    top: 0;
    opacity: 1;
  }
  to {
    height: 0;
    top: 15rem;
    opacity: 0;
  }
}

@-webkit-keyframes pathmovesp {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 7.5rem;
    top: 0;
    opacity: 1;
  }
  to {
    height: 0;
    top: 7.5rem;
    opacity: 0;
  }
}

@keyframes pathmovesp {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 7.5rem;
    top: 0;
    opacity: 1;
  }
  to {
    height: 0;
    top: 7.5rem;
    opacity: 0;
  }
}

.top-message {
  background: #000;
  padding-top: 15rem;
  color: #fff;
}

@media (max-width: 767px) {
  .top-message {
    padding-top: 12rem;
  }
}

.top-message .top-casestudies__text {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.9;
}

.top-message .message {
  margin-top: 8rem;
  display: flex;
  max-width: 95.6rem;
  width: 100%;
}

@media (max-width: 767px) {
  .top-message .message {
    flex-direction: column;
  }
}

.top-message .message__img {
  flex-shrink: 0;
  width: 49%;
  margin-right: 2rem;
}

@media (max-width: 767px) {
  .top-message .message__img {
    width: 100%;
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .top-message .message__img img {
    aspect-ratio: 380/312;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.top-message .message__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.054rem;
  margin-top: -0.72rem;
}

@media (max-width: 767px) {
  .top-message .message__title {
    margin-top: 4px;
  }
}

.top-message .message__sub {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.048rem;
  margin-top: 2px;
}

.top-message .message__desc {
  text-align: justify;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 180%;
  letter-spacing: 0.048rem;
  margin-top: 3rem;
}

.top-message .message__desc--en {
  text-align: unset;
}

.top-news {
  background: #F2F2F2;
  padding-top: 10rem;
  padding-bottom: 10rem;
  width: 100%;
}

.top-news__list {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 8rem;
  gap: 4rem;
}

.top-news__item {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 0.3rem solid #000;
  transition: all 0.3s ease;
  padding-bottom: 4rem;
  padding-right: 4.4rem;
}

@media (max-width: 767px) {
  .top-news__item {
    padding-right: 3rem;
    padding-bottom: 3rem;
  }
}

.top-news__item::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.3rem;
  z-index: 2;
  width: 0;
  right: 0;
  height: 0.3rem;
  background: #009aff;
  transition: all 0.6s ease;
}

@media (min-width: 768px) {
  .top-news__item:hover {
    opacity: 1;
  }
  .top-news__item:hover:after {
    width: 100%;
    left: 0;
    transition: all 0.6s ease;
  }
  .top-news__item:hover .top-news__icon:before {
    -webkit-animation-name: transformRightLeft;
            animation-name: transformRightLeft;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }
  .top-news__item:hover .top-news__icon:after {
    -webkit-animation-name: transformLeftRight;
            animation-name: transformLeftRight;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
}

.top-news__icon {
  width: 2rem;
  height: 1.3rem;
  display: block;
  position: absolute;
  right: 0;
  overflow: hidden;
}

.top-news__icon::before, .top-news__icon::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  width: 2rem;
  height: 1.3rem;
  background: url(../images/button-arrow.svg) 50% 50% no-repeat;
  background-size: 99%;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
}

.top-news__icon:before {
  -webkit-animation-name: transformLeftRight;
          animation-name: transformLeftRight;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.top-news__icon:after {
  -webkit-animation-name: transformRightLeft;
          animation-name: transformRightLeft;
  transform: translateX(-100%);
}

.top-news__info {
  width: 36.6rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

@media (max-width: 767px) {
  .top-news__info {
    width: 100%;
  }
}

.top-news__title {
  width: calc(100% - 36.6rem);
  color: #000;
  leading-trim: both;
  text-edge: cap;
  /* P_B */
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 32.4px */
  letter-spacing: 0.054rem;
  margin: -1rem 0;
}

@media (max-width: 767px) {
  .top-news__title {
    width: 100%;
    margin-top: 2rem;
  }
}

.top-news__date {
  color: #000;
  leading-trim: both;
  text-edge: cap;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  /* 22.4px */
  width: 12.2rem;
}

@media (max-width: 767px) {
  .top-news__date {
    width: 13rem;
  }
}

.top-news__category {
  display: flex;
  width: 16rem;
  height: 4rem;
  justify-content: center;
  align-items: center;
  border: 0.2rem solid #4B4B4B;
  color: #000;
  text-align: center;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  /* 19.2px */
}

.top-partner {
  background: #000;
  padding-top: 15rem;
}

@media (max-width: 767px) {
  .top-partner {
    padding-top: 12rem;
  }
}

.partner {
  border: 1px solid #4B4B4B;
  transition: all .3s;
}

.partner:hover {
  border-color: #009AFF;
}

.partner:hover a {
  opacity: 1;
}

.partners {
  display: flex;
  justify-content: center;
  margin-top: 8rem;
}

@media (max-width: 767px) {
  .partners {
    flex-direction: column;
  }
}

.partner:not(:first-child) {
  margin-left: 2rem;
}

@media (max-width: 767px) {
  .partner:not(:first-child) {
    margin-top: 2rem;
    margin-left: 0;
  }
}

.partner img {
  width: 100%;
}

.partner--nohover:hover {
  border-color: #4B4B4B;
}

.top-prods {
  margin-top: 15rem;
}

@media (max-width: 767px) {
  .top-prods {
    margin-top: 12rem;
  }
}

.top-prods__text {
  width: 100%;
  max-width: 95.6rem;
  margin-top: 8rem;
  color: #000;
  font-family: "Noto Sans", "Raleway", sans-serif;
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 39.6px */
  letter-spacing: 0.066rem;
  margin: 7rem 0 -1rem;
}

@media (max-width: 767px) {
  .top-prods__text {
    width: 100%;
    max-width: 100%;
    margin-top: 8rem;
  }
}

.top-prods__text--white {
  color: #fff;
}

.prod-intro {
  position: relative;
  display: flex;
}

.prod-intro--en .prod-intro__desc {
  text-align: unset;
}

@media (max-width: 767px) {
  .prod-intro {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .prod-intro:first-child {
    margin-top: 2rem;
  }
}

.prod-intro:not(:last-child) {
  margin-bottom: 7.5rem;
}

@media (max-width: 767px) {
  .prod-intro:not(:last-child) {
    margin-bottom: 7.5rem;
  }
}

.prod-intro:last-child .prod-intro__arrow {
  display: none;
}

.prod-intro__num {
  flex-shrink: 0;
  width: 10.5rem;
  text-align: center;
  margin-right: 5.7rem;
}

@media (max-width: 767px) {
  .prod-intro__num {
    width: 7.2rem;
    margin-right: 2.5rem;
  }
}

@media (max-width: 429px) {
  .prod-intro__num {
    width: auto;
    margin-right: 1rem;
  }
}

.prod-intro__num span {
  color: var(--calc_gray50, #D6D6D6);
  text-align: center;
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 8.8rem;
  font-style: italic;
  font-weight: 700;
  line-height: 6.2rem;
  letter-spacing: -1.76px;
}

@media (max-width: 767px) {
  .prod-intro__num span {
    font-size: 6.8rem;
    line-height: 4.6rem;
    letter-spacing: -1.36px;
  }
}

@media (max-width: 429px) {
  .prod-intro__num span {
    font-size: 5rem;
    line-height: 2.5rem;
  }
}

.prod-intro__arrow {
  position: absolute;
  top: 9.2rem;
  left: 4.6rem;
  width: 1.3rem;
  height: 3.7rem;
}

@media (max-width: 767px) {
  .prod-intro__arrow {
    width: 1.3rem;
    top: auto;
    bottom: -6rem;
    left: 0;
  }
}

.prod-intro__head {
  display: flex;
  align-items: center;
  margin-bottom: 1.6rem;
}

.prod-intro__icon {
  flex-shrink: 0;
  width: 5rem;
  margin-right: 3.5rem;
}

@media (max-width: 767px) {
  .prod-intro__icon {
    margin-right: 2rem;
  }
}

@media (max-width: 429px) {
  .prod-intro__icon {
    width: 3.5rem;
  }
}

.prod-intro__title {
  color: var(--calc_black, #000);
  font-family: "Raleway", "Noto Sans", "Raleway", sans-serif;
  font-size: 4.8rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 767px) {
  .prod-intro__title {
    font-size: 4rem;
  }
}

@media (max-width: 429px) {
  .prod-intro__title {
    font-size: 3.4rem;
  }
}

.prod-intro__desc {
  color: var(--calc_black, #000);
  text-align: justify;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 0.066rem;
}

@media (max-width: 767px) {
  .prod-intro__desc {
    font-size: 1.8rem;
    letter-spacing: 0.054rem;
  }
}

.animate__prdfadeInDown {
  -webkit-animation-name: prdfadeInDown;
  animation-name: prdfadeInDown;
}

.animate__prdanimated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes prdfadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

@keyframes prdfadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

.top-techno {
  background: #000;
  padding-top: 15rem;
  margin-top: 15rem;
}

@media (max-width: 767px) {
  .top-techno {
    margin-top: 12rem;
    padding-top: 12rem;
  }
}

.top-techno__img {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin-top: 8rem;
}

@media (max-width: 767px) {
  .top-techno__img {
    padding: 0 2.5rem;
  }
}

.top-techno__diagram {
  position: relative;
}

@media (min-width: 768px) {
  .top-techno__diagram {
    max-width: calc(100% - 150px);
  }
}

.top-techno__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
}

.top-techno .top-casestudies__text {
  color: #fff;
}

/* リンク風見た目（同意行のラベル用） */
.link-like { color: #06c; cursor: pointer; text-decoration: underline; }
.link-like:hover { text-decoration: none; }

/* Modal base */
.modal { position: fixed; inset: 0; display: none; }

/* トグルONで表示（トグル直後の .modal を対象） */
#pp-toggle:checked + .modal { display: block; }

/* Backdrop（白・やや透過／クリックしても何もしない） */
.modal__backdrop{
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.95);
  z-index: 998;
  pointer-events: auto; /* クリックを吸収＝閉じない */
}

/* Dialog */
.modal__dialog{
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 720px; width: min(92vw, 720px);
  max-height: 85vh; overflow: auto;
  background:#fff; color:#222;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.2);
  padding: 2.0rem;
  z-index: 999; /* バックドロップより前面 */
}

/* タイトル等 */
.modal__title { font-size: 2.0rem; margin: 0 0 1.2rem; font-weight: 700; }
.modal__body p { margin: 0 0 1rem; line-height: 1.7; font-size: 1.6rem; }
.modal__body h4 { font-size: 1.6rem; margin: 1.2rem 0 .6rem; }

/* × ボタン（アンカーのみ使用：button は使わない） */
.modal__close{
  position: absolute; right: .6rem; top: .2rem;
  text-decoration: none; cursor: pointer;
  background: transparent; border: none;
  color: #666; font-size: 2.4rem; line-height: 1;
  padding: .4rem .8rem;
}
.modal__close:hover{ color:#000; }

/* アクション行（閉じる） */
.modal__actions{ margin-top: 1.2rem; text-align: right; }
.btn.btn--secondary{
  display:inline-block; padding:.8rem 1.2rem;
  border:1px solid #ccc; border-radius:.6rem;
  background:#f9f9f9; color:#333; text-decoration:none;
}
.btn.btn--secondary:hover{ background:#f0f0f0; }

/* Badge */
.badge--required {
  display: inline-block; margin-left: .6rem;
  font-size: 1.2rem; line-height: 1; padding: .3rem .5rem;
  color: #fff; background: #d32f2f; border-radius: .4rem;
}

/* Trademark Section */
.top-trademark {
  background-color: #000;
  padding: 24px 0;
}
.top-trademark .cm-container {
  display: flex;
  justify-content: flex-end;
}
.top-trademark__block {
  text-align: left;
}
.top-trademark__text {
  color: #fff;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}
@media (max-width: 767px) {
  .top-trademark__text {
    font-size: 14px;
  }
}