@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ul, ol {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* 
 * mixin
 *
*/
html {
  font-size: 62.5%;
  font-size: 61%;
}

body {
  font-family: "ryo-gothic-plusn", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1.6em;
  color: #222;
  text-align: center;
  letter-spacing: 0.1;
  font-weight: 400;
}

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

a {
  text-decoration: none;
  color: #222;
}
a:hover {
  color: #3c3c3c;
}
a:action {
  color: #222;
}
a:visited {
  color: #222;
}
a[href^=http] {
  word-break: break-word;
}
@media screen and (min-width: 640px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

img {
  vertical-align: top;
  max-width: 100%;
  height: auto;
}

div {
  box-sizing: border-box;
}

/* 
 * mixin
 *
*/
/* extend */
/* common class */
.content {
  max-width: 100%;
  margin: 0 auto;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 1.4rem;
}
@media screen and (min-width: 640px) {
  .content {
    width: 1000px;
  }
}

.pageHeader {
  height: 400px;
  margin-bottom: 50px;
  text-align: left;
}
.pageHeader .content {
  position: relative;
  padding-top: 110px;
}
.pageHeader .content::before {
  content: "";
  position: absolute;
  top: 65px;
  left: 40px;
  width: 40px;
  height: 3px;
  background: #000;
}
.pageHeader_en {
  padding: 0 0 10px 40px;
  font-size: 5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
}
.pageHeader_title {
  padding: 0 0 0 40px;
  font-size: 2rem;
  font-weight: normal;
}
@media screen and (max-width: 640px) {
  .pageHeader {
    height: 120px;
    margin-bottom: 20px;
  }
  .pageHeader .content {
    padding-top: 34px;
  }
  .pageHeader .content::before {
    content: none;
  }
  .pageHeader_en {
    padding: 0 0 5px 10px;
    font-size: 2.9rem;
  }
  .pageHeader_title {
    padding: 0 0 0 10px;
    font-size: 1.6rem;
  }
}

.company-background .pageHeader,
.contact-us .pageHeader {
  color: #fff;
}
.company-background .pageHeader .content::before,
.contact-us .pageHeader .content::before {
  background: #fff;
}

.subTitle {
  position: relative;
  font-size: 2.2rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 200;
  letter-spacing: 0.3em;
  text-indent: 0.15em;
}
@media screen and (max-width: 640px) {
  .subTitle {
    font-size: 1.8rem;
  }
}

.sectionTitle {
  margin: 20px 0 60px;
  font-weight: bold;
  font-size: 3.6rem;
  line-height: 1.6;
}
@media screen and (max-width: 640px) {
  .sectionTitle {
    margin-bottom: 20px;
    padding-top: 15px;
    font-size: 1.6rem;
  }
}

.vision_title, .homeService_title, .sectionTitle {
  position: relative;
  padding-top: 40px;
}
.vision_title::before, .homeService_title::before, .sectionTitle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 5px;
  margin-left: -15px;
  background: #000;
}
@media screen and (max-width: 640px) {
  .vision_title, .homeService_title, .sectionTitle {
    padding-top: 15px;
  }
}

.vision_lead, .homeService_lead {
  font-size: 2.4rem;
  font-weight: bold;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

.tl {
  text-align: left;
}

.footerContent .footerContact_link:hover, .siteHeader_btn a:hover {
  text-shadow: 0 0 5px #32add6;
}

.button-main {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  background: transparent;
  transition: all 0.5s;
}
.button-main:hover {
  background: #32add6;
}
.button-main::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 30px;
  height: 3px;
  margin-left: -15px;
  background: #32add6;
}

.piuaForm_button-back, .form_button-back, .form_button-submit {
  display: inline-block;
  border: 2px solid #000;
  font-weight: bold;
  transition: all 0.5s;
  color: #000;
}
.piuaForm_button-back:hover, .form_button-back:hover, .form_button-submit:hover {
  background: #000;
  color: #fff;
}
@media screen and (max-width: 640px) {
  .piuaForm_button-back:hover, .form_button-back:hover, .form_button-submit:hover {
    background: #fff;
    color: #000;
  }
}

.button-link {
  border: 1px solid #ddd;
  width: auto;
  min-width: 200px;
  display: inline-block;
  margin: 5px;
  padding: 22px 30px 15px;
  border-radius: 5px;
  font-size: 20px;
}
.button-link i {
  margin-right: 15px;
}
.button-link img {
  vertical-align: middle;
  margin-top: -4px;
  margin-right: 15px;
}
@media screen and (max-width: 640px) {
  .button-link {
    display: block;
  }
}

.button-trial {
  width: 220px;
  line-height: 44px;
  display: inline-block;
  text-align: center;
  transition: all 0.3s;
  font-size: 1.6rem;
  color: #fff;
  opacity: 0.8;
  background: #32add6;
  border: solid 1px #32add6;
}
.button-trial:hover {
  opacity: 1;
  color: #fff;
}

.button-content {
  line-height: 40px;
  display: inline-block;
  padding: 0 15px;
  text-align: center;
  transition: all 0.3s;
  font-size: 1.6rem;
  color: #fff;
  background: #222;
  border: none;
}
.button-content:hover {
  background: #32add6;
  color: #fff;
}
.button-content:visited {
  color: #fff;
}

.bnrSection {
  padding: 50px 0 130px;
}
.bnrSection .bnrSection_bnr {
  display: block;
  width: 90%;
  max-width: 560px;
  margin: auto;
  padding: 25px;
  border: 1px solid #111;
  font-size: 2rem;
  transition: all 0.4s linear;
  background: #111;
  color: #fff;
}
.bnrSection .bnrSection_bnr span {
  display: block;
  margin: 12px 0 -5px;
  font-size: 1.4rem;
  opacity: 0.5;
}
.bnrSection .bnrSection_bnr span::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  transform: rotate(45deg);
  transform-origin: top;
}
.bnrSection .bnrSection_bnr:hover {
  background: #fff;
  color: #111;
}
.bnrSection .bnrSection_bnr:hover span {
  opacity: 1;
}

.parallax-window {
  min-height: 300px;
  background: transparent;
}
@media screen and (max-width: 640px) {
  .parallax-window {
    min-height: 100px;
  }
}

.parallax-slider {
  top: 0;
  left: 0;
}

.js-fadein {
  opacity: 0;
  transition: all 0.8s ease-out;
}

.js-fadein.up {
  transform: translateY(20px);
}

.js-fadein.down {
  opacity: 0;
  transform: translateY(-20px);
}

.js-fadein.right {
  opacity: 0;
  transform: translateX(20px);
}

.js-fadein.left {
  opacity: 0;
  transform: translateX(-20px);
}

.js-fadein.up.active,
.js-fadein.down.active {
  opacity: 1;
  transform: translateY(0);
}

.js-fadein.left.active,
.js-fadein.right.active {
  opacity: 1;
  transform: translateX(0);
}

.delay_200 {
  transition-delay: 0.2s;
}

.delay_400 {
  transition-delay: 0.4s;
}

.delay_600 {
  transition-delay: 0.6s;
}

.delay_800 {
  transition-delay: 0.8s;
}

/* 
 * mixin
 *
*/
body {
  -webkit-text-size-adjust: 100%;
}
body.page-parent, body.page-child {
  padding-top: 0;
}
body.page-parent .subNav, body.page-child .subNav {
  display: block;
}
@media screen and (max-width: 640px) {
  body {
    padding-top: 0;
  }
  body.page-parent, body.page-child {
    padding-top: 0;
  }
}

/* header */
.siteHeader {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 500;
  height: 75px;
  background: rgba(34, 34, 34, 0.98);
}
.siteHeader .content {
  display: flex;
  justify-content: space-between;
}
.siteHeader_logo {
  flex: 0 0 158px;
  display: flex;
  align-items: center;
  justify-content: left;
}
.siteHeader_nav {
  flex: 1 1 auto;
  text-align: right;
  transition: all 0.4s;
}
.siteHeader_nav li {
  display: inline-block;
  margin: 0 5px;
  text-align: center;
  position: relative;
}
.siteHeader_nav li:hover .sub-menu {
  max-height: 500px;
  opacity: 1;
}
.siteHeader_nav a {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0 5px;
  line-height: 75px;
  text-align: center;
  color: #FFF;
}
.siteHeader_nav a:hover {
  color: #999;
}
@media screen and (max-width: 640px) {
  .siteHeader_nav a {
    color: inherit;
  }
}
.siteHeader_nav a[aria-current]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #32add6;
}
.siteHeader .sub-menu {
  position: absolute;
  top: 100%;
  min-width: 140px;
  max-height: 0;
  margin-top: -10px;
  padding-top: 10px;
  overflow: hidden;
  transition: all 0.5s;
  opacity: 0;
}
.siteHeader .sub-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  border-right: 10px solid #000;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
@media screen and (max-width: 640px) {
  .siteHeader .sub-menu {
    position: relative;
    top: auto;
    width: 100%;
    max-height: 500px;
    margin-top: 0;
    padding-top: 0;
    opacity: 1;
    border-bottom: 1px solid #ddd;
    margin-bottom: 2px;
  }
  .siteHeader .sub-menu::before {
    content: none;
  }
}
.siteHeader .sub-menu li {
  display: block;
  transition: all 0.3s;
  margin: 0;
  padding: 0 5px;
  background: #000;
  white-space: nowrap;
}
.siteHeader .sub-menu li:hover {
  background: #333;
}
@media screen and (max-width: 640px) {
  .siteHeader .sub-menu li {
    border-bottom: none !important;
    border-top: 1px solid #ddd;
    background: transparent;
    position: relative;
  }
  .siteHeader .sub-menu li:hover {
    background: transparent;
  }
  .siteHeader .sub-menu li::before {
    position: absolute;
    content: none;
    display: inline-block;
    width: 50%;
    height: 1px;
    top: 0;
    left: 25%;
    background: #ddd;
  }
}
.siteHeader .sub-menu a {
  padding: 0;
  line-height: 40px;
  color: #FFF;
}
.siteHeader .sub-menu a[aria-current]::before {
  content: none;
}
@media screen and (max-width: 640px) {
  .siteHeader .sub-menu a {
    color: inherit;
    font-size: 1.5rem !important;
  }
}
.siteHeader .menu-trigger {
  display: none;
}
.siteHeader_btn {
  flex: 1 1 auto;
  text-align: right;
}
.siteHeader_btn li {
  display: inline-block;
  margin-left: 5px;
}
.siteHeader_btn li + li::before {
  color: #666;
  margin: 0 10px;
}
.siteHeader_btn a {
  line-height: 75px;
  color: #FFF;
  text-decoration: underline;
  transition: all 0.3s;
}
.siteHeader_btn a:hover {
  text-decoration: none;
}
      .siteHeader_btn-signup {
  padding: 8px 10px;
  background: #32add6;
  opacity: 0.8;
  text-decoration: none !important;
  font-size: 1.3rem;
}
      .siteHeader_btn-signup:hover {
  opacity: 1;
}
@media screen and (max-width: 640px) {
  .siteHeader {
    height: 50px;
    position: relative;
  }
  .siteHeader .content {
    height: 50px;
  }
  .siteHeader_logo {
    padding: 5px 0;
    text-align: left;
    font-size: 1.6rem;
  }
  .siteHeader_logo img {
    max-height: 28px;
    width: auto;
  }
  .siteHeader_nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 100%;
    width: 0;
    padding: 100px 0;
    background: #FFF;
    box-sizing: border-box;
    visibility: hidden;
  }
  .siteHeader_nav a[aria-current]::before {
    content: none;
  }
  .siteHeader.menu-open .siteHeader_nav {
    width: 100%;
    left: 0;
    padding: 100px 20%;
    visibility: visible;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .siteHeader.menu-open .siteHeader_nav li {
    display: block;
    border-bottom: 1px solid #ddd;
  }
  .siteHeader.menu-open .siteHeader_nav a {
    display: block;
    width: 100%;
    padding: 10px;
    line-height: 1.6;
    text-align: center;
    font-size: 1.8rem;
    box-sizing: border-box;
  }
  .siteHeader.menu-open .siteHeader_nav a[aria-current] {
    color: #289fc7;
  }
  .siteHeader_btn {
    margin-right: 50px;
  }
  .siteHeader_btn a {
    line-height: 50px;
  }
  .siteHeader .menu-trigger {
    display: inline-block;
  }
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all 0.4s;
  box-sizing: border-box;
}

.menu-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
}
.menu-trigger span {
  position: absolute;
  left: 13px;
  width: 24px;
  height: 2px;
  background-color: #fff;
  border-radius: 1px;
}
.menu-trigger span:nth-of-type(1) {
  top: 15px;
}
.menu-trigger span:nth-of-type(2) {
  top: 24px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 15px;
}

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}
@media screen and (max-width: 640px) {
  .menu-trigger.active span {
    background-color: #ccc;
  }
}

.subNav {
  display: none;
  position: fixed;
  top: 75px;
  width: 100%;
  height: 44px;
  background: #e9e9e9;
  text-align: left;
  z-index: 490;
}
@media screen and (max-width: 640px) {
  .subNav {
    position: relative;
    top: 0;
    max-width: 100vw;
    overflow: auto;
  }
  .subNav .content {
    padding: 0;
  }
}
.subNav a {
  position: relative;
  display: inline-block;
  padding: 0 10px;
  font-size: 1.3rem;
  line-height: 44px;
}
.subNav a:hover {
  text-decoration: underline;
}
.subNav .current_page_item a {
  font-weight: bold;
}
.subNav ul {
  display: flex;
  justify-content: start;
}
.subNav li {
  margin: 0;
  padding: 0 10px;
  flex: 0 0 auto;
  display: inline-block;
  position: relative;
}
.subNav li + li::before {
  position: absolute;
  top: 13px;
  left: 0;
  content: "|";
  color: #999;
}
.subNav .subNav_parent {
  position: relative;
}
@media screen and (max-width: 640px) {
  .subNav .subNav_parent {
    margin-right: 0;
  }
}
.subNav .subNav_parent::after {
  content: none;
  position: absolute;
  top: 0;
  left: 100%;
  border-left: 8px solid #000;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.footerContent {
  padding: 0;
}
.footerContent .footerContact_link {
  display: block;
  width: 100%;
  padding: 35px 0;
  font-size: 2.6rem;
  font-family: "Montserrat", sans-serif;
  background: #222;
  color: #FFF;
  transition: all 0.3s;
}
.footerContent .footerContact_link span {
  display: block;
  margin-bottom: 15px;
  font-size: 1.2rem;
}
.footerContent .footerContact_link:hover {
  background: #000;
}
@media screen and (max-width: 640px) {
  .footerContent {
    padding: 30px 0;
  }
  .footerContent .footerContact_link {
    width: 100%;
    line-height: 1.4rem;
    font-size: 2.4rem;
  }
}

/* Footer */
.siteFooter {
  padding: 60px 0;
}
.siteFooter .content {
  position: relative;
}
.siteFooter_logo {
  max-width: 140px;
  width: 100%;
  float: left;
}
.siteFooter_sns {
  position: absolute;
  bottom: 100%;
  right: 10px;
  display: flex;
}
.siteFooter_sns li {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
}
.siteFooter_sns img {
  width: auto;
  height: auto;
  max-width: 26px;
  max-height: 26px;
}
.siteFooter_nav {
  float: right;
  padding-top: 15px;
  font-size: 1.2rem;
}
.siteFooter_nav li {
  display: inline-block;
  padding: 0 5px;
}
.siteFooter_nav a {
  transition: all 0.5s;
}
.siteFooter_nav a:hover {
  text-decoration: underline;
  color: #289fc7;
}
.siteFooter_copy {
  clear: both;
  display: block;
  margin-top: 30px;
  font-size: 1.1rem;
  text-align: right;
  color: #ccc;
}
@media screen and (max-width: 640px) {
  .siteFooter {
    padding: 20px 0 0;
  }
  .siteFooter_logo {
    position: relative;
    margin: auto;
  }
  .siteFooter_logo img {
    width: 160px;
  }
  .siteFooter_sns {
    position: relative;
  }
  .siteFooter_nav {
    display: none;
  }
  .siteFooter_copy {
    margin: 20px 0 10px;
    text-align: center;
  }
}

.error404-content {
  height: calc(100vh - 530px);
  padding: 100px 0;
}
.error404-content .entry-title {
  margin-bottom: 20px;
}

/* 
 * mixin
 *
*/
/* home */
.heroHeader {
  position: relative;
  height: 640px;
  overflow: hidden;
  background: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFF;
  text-shadow: 0 0 5px rgba(64, 59, 58, 0.6);
}
.heroHeader_title {
  margin-top: 50px;
  margin-bottom: 50px;
  font-size: 5rem;
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  z-index: 100;
}
.heroHeader_lead {
  width: 520px;
  max-width: 95%;
  margin-top: 40px;
  margin-bottom: 20px;
  font-size: 3.8rem;
  font-weight: bold;
  z-index: 100;
  line-height: 1.4;
  letter-spacing: 0.2em;
}
.heroHeader_text {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 1.9rem;
  z-index: 100;
  line-height: 1.4;
  opacity: 0.5;
}
.heroHeader_name {
  margin-top: 20px;
  font-size: 7rem;
  font-weight: normal;
}
.heroHeader    video {
  position: absolute;
  width: 100%;
  -ms-filter: blur(1px);
  filter: blur(1px);
}
.heroHeader_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.heroHeader_btn {
  margin-top: 60px;
}
.heroHeader_btn li {
  display: inline-block;
  margin: 0 10px;
}
.heroHeader_btn a {
  width: 220px;
  line-height: 44px;
  display: inline-block;
  text-align: center;
  transition: all 0.3s;
  font-size: 1.6rem;
  color: #FFF;
  opacity: 0.8;
}
.heroHeader_btn a:hover {
  opacity: 1;
  box-shadow: 0 0 15px rgba(50, 173, 214, 0.5);
}
.heroHeader_btn-signup {
  background: #32add6;
  border: solid 1px #32add6;
}
.heroHeader_btn-login {
  border: 1px solid #f5f5f5;
}
.heroHeader::after {
  content: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(68, 68, 68, 0.3);
  z-index: 10;
}
@media screen and (max-width: 640px) {
  .heroHeader {
    height: calc(100vh - 50px);
  }
  .heroHeader_title {
    margin-bottom: 50px;
    font-size: 2.2rem;
  }
  .heroHeader_text {
    line-height: 1.6;
    font-size: 1.8rem;
    width: 100%;
  }
  .heroHeader_lead {
    font-size: 2.2rem;
    letter-spacing: 0;
  }
  .heroHeader_name {
    margin: 20px;
    position: relative;
  }
  .heroHeader_btn {
    width: 100%;
  }
  .heroHeader_btn li {
    width: 40%;
    margin: 0;
  }
  .heroHeader_btn li + li {
    margin-left: 10px;
  }
  .heroHeader_btn a {
    width: 100%;
  }
}

@media screen and (max-width: 1300px) {
  .heroHeader video {
    height: 100%;
    width: auto;
  }
}
.homeIntroduce {
  padding: 130px 0;
}
.homeIntroduce_text {
  margin-bottom: 100px;
  line-height: 2;
  font-size: 2.9rem;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  .homeIntroduce {
    padding: 40px 0;
  }
  .homeIntroduce_text {
    margin-bottom: 40px;
    font-size: 1.8rem;
  }
}

.homeService {
  padding: 100px 0;
  background-size: cover;
}
.homeService_title {
  margin: 20px 0 60px;
  font-size: 6.4rem;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
}
.homeService_lead {
  margin-bottom: 20px;
}
.homeService_text {
  margin-bottom: 20px;
  font-size: 1.7rem;
}
.homeService_name {
  margin-bottom: 60px;
  font-size: 2.7rem;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1em;
}
.homeService_subtext {
  font-size: 1.3rem;
  background: #444;
  width: 22em;
  padding: 8px;
  margin: 0 auto 15px;
  color: #fff;
}
@media screen and (max-width: 640px) {
  .homeService {
    padding: 40px 0;
  }
  .homeService_title {
    margin-bottom: 30px;
    padding-top: 30px;
    font-size: 3.8rem;
  }
  .homeService_lead {
    font-size: 2rem;
    line-height: 1.2;
  }
  .homeService_text {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  .homeService_name {
    margin-bottom: 30px;
    font-size: 2.4rem;
  }
}

.index .serviceBackground {
  padding: 20px 0;
}

.index .featureSection {
  padding: 60px 0;
}

.topFeatureList {
  display: flex;
  flex-wrap: wrap;
}
.topFeatureList li {
  flex: 1 0 25%;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: center;
}
.topFeatureList_img {
  margin-bottom: 25px;
}
.topFeatureList_img img {
  width: 100px;
  max-width: 100%;
  height: auto;
}
.topFeatureList_title {
  margin-bottom: 15px;
  font-size: 2rem;
  font-weight: bold;
}
.topFeatureList_text {
  font-size: 1.6rem;
  line-height: 1.6;
}
@media screen and (max-width: 640px) {
  .topFeatureList li {
    flex: 1 0 50%;
    margin-bottom: 30px;
  }
}

.homeNews {
  position: relative;
  overflow: auto;
  text-align: left;
  border-top: 1px solid #ddd;
}
.homeNews_content {
  position: relative;
  padding: 70px 0;
  display: flex;
  justify-content: start;
}
.homeNews_title {
  flex: 0 0 20%;
  font-size: 24px;
}
.homeNews_title span {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: normal;
  color: #999;
}
.homeNews_title a {
  display: block;
  width: 5em;
  margin-top: 10px;
  border-bottom: 2px solid #ccc;
  color: #ccc;
  font-size: 1.6rem;
  font-weight: normal;
}
.homeNews_title a:hover {
  border-color: #FFF;
}
.homeNews_list {
  flex: 1 1 auto;
}
.homeNews_list li {
  display: flex;
  font-size: 1.4rem;
}
.homeNews_list li + li {
  margin-top: 14px;
}
.homeNews_date {
  font-family: "Barlow Semi Condensed", sans-serif;
  flex: 0 0 80px;
}
.homeNews_text:hover {
  text-decoration: underline;
}
@media screen and (max-width: 640px) {
  .homeNews_content {
    display: block;
    padding: 30px 0;
  }
  .homeNews_title {
    margin-bottom: 40px;
    text-align: center;
    position: relative;
  }
  .homeNews_title a {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .homeNews_list {
    width: 100%;
  }
  .homeNews_list li {
    display: block;
    position: relative;
    border-top: 1px solid #eee;
    padding-top: 10px;
  }
  .homeNews_list a {
    display: block;
    padding: 20px 10px 10px;
  }
  .homeNews_date {
    padding-left: 10px;
  }
}

.partner {
  padding-bottom: 100px;
  border-top: 1px solid #ddd;
}
.partner_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.partner_list li {
  width: 19%;
  max-width: 19%;
  min-width: 100px;
  flex: 1 1 auto;
  margin: 0 0.5% 10px;
}
.partner_list li a {
  display: block;
  border: 1px solid #eee;
  transition: all 0.3s;
}
.partner_list li a:hover {
  opacity: 0.8;
}
.partner_list li img {
  width: 100%;
  height: auto;
}
.partner_list.primary {
  margin-bottom: 20px;
}
.partner_list.primary li {
  max-width: 24%;
}

/* 
 * mixin
 *
*/
/* archive */
.newsCommon {
  margin: 40px 0;
}
@media screen and (max-width: 768px) {
  .newsCommon {
    margin: 20px 0;
    padding-top: 0px !important;
  }
}
.newsCommon__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
}
@media screen and (max-width: 999px) {
  .newsCommon__grid {
    grid-template-columns: 1fr;
  }
}
.newsCommon__main {
  width: 100%;
}
@media screen and (max-width: 999px) {
  .newsCommon__main {
    grid-row: 1/2;
  }
}
.newsCommon__sideMenus {
  width: 100%;
}
@media screen and (max-width: 999px) {
  .newsCommon__sideMenus {
    grid-row: 2/3;
  }
}
.newsCommon__sideMenus-list {
  width: 100%;
}
.newsCommon__sideMenus-list li {
  font-size: 1.4rem;
  font-weight: 600;
  text-align: left;
  margin-bottom: 5px;
}
.newsCommon__sideMenus-list li a {
  display: block;
  padding: 12px 12px 12px 40px;
  border-radius: 25px;
  color: #bbb;
  transition: 0.3s;
}
.newsCommon__sideMenus-list li a:hover {
  color: #000;
  background-color: #f7f7f7;
}
.newsCommon__sideMenus-all.is-active {
  border-radius: 25px;
  background-color: #f7f7f7;
}
.newsCommon__sideMenus-all.is-active a {
  color: #000;
}
.newsCommon__sideMenus-info {
  position: relative;
}
.newsCommon__sideMenus-info::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  background-color: #fff;
}
.newsCommon__sideMenus-info.is-active {
  border-radius: 25px;
  background-color: #f7f7f7;
}
.newsCommon__sideMenus-info.is-active a {
  color: #000;
}
.newsCommon__sideMenus-event {
  position: relative;
}
.newsCommon__sideMenus-event::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #e91e63;
  background-color: #e91e63;
}
.newsCommon__sideMenus-event.is-active {
  border-radius: 25px;
  background-color: #f7f7f7;
}
.newsCommon__sideMenus-event.is-active a {
  color: #000;
}
.newsCommon__sideMenus-press-release {
  position: relative;
}
.newsCommon__sideMenus-press-release::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #00c6ab;
  background-color: #00c6ab;
}
.newsCommon__sideMenus-press-release.is-active {
  border-radius: 25px;
  background-color: #f7f7f7;
}
.newsCommon__sideMenus-press-release.is-active a {
  color: #000;
}
.newsCommon__sideMenus-press-release {
  position: relative;
}
.newsCommon__sideMenus-press-release::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #00c6ab;
  background-color: #00c6ab;
}
.newsCommon__sideMenus-press-release.is-active {
  border-radius: 25px;
  background-color: #f7f7f7;
}
.newsCommon__sideMenus-press-release.is-active a {
  color: #000;
}
.newsCommon__sideMenus-media {
  position: relative;
}
.newsCommon__sideMenus-media::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #181818;
  background-color: #181818;
}
.newsCommon__sideMenus-media.is-active {
  border-radius: 25px;
  background-color: #f7f7f7;
}
.newsCommon__sideMenus-media.is-active a {
  color: #000;
}

.newsListItem {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 40px 20px;
  transition: 0.3s;
  text-align: left;
}
.newsListItem::after {
  position: absolute;
  content: "";
  background-image: url("/2022/08/arrow-right-black.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  transition: 0.3s;
}
.newsListItem:hover {
  background: #fafafa;
}
.newsListItem:hover::after {
  right: 10px;
}
.newsListItem:last-of-type {
  border-bottom: 1px solid #cbcbcb;
}
.newsListItem__upper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.newsListItem_date {
  font-size: 1.4rem;
  color: #999;
  margin-right: 20px;
}
.newsListItem_cat {
  font-size: 1.2rem;
}
.newsListItem_catMark-info {
  border-radius: 10px;
  padding: 3px 8px;
  color: #333333;
  border: 1px solid #333333;
  background-color: #fff;
}
.newsListItem_catMark-event {
  border-radius: 10px;
  padding: 3px 8px;
  color: #fff;
  border: 1px solid #e91e63;
  background-color: #e91e63;
}
.newsListItem_catMark-press-release {
  border-radius: 10px;
  padding: 3px 8px;
  color: #fff;
  border: 1px solid #00c6ab;
  background-color: #00c6ab;
}
.newsListItem_catMark-media {
  border-radius: 10px;
  padding: 3px 8px;
  color: #fff;
  border: 1px solid #181818;
  background-color: #181818;
}
.newsListItem_ttlArea {
  width: 100%;
  height: auto;
  padding-right: 40px;
}
.newsListItem_ttl {
  display: block;
  position: relative;
  width: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (max-width: 640px) {
  .newsListItem_date {
    display: block;
    font-size: 1.4rem;
  }
  .newsListItem_title {
    display: block;
    margin-top: 5px;
    font-size: 1.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.paginate {
  position: relative;
  margin: 80px 0;
  font-size: 1.5rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  text-align: center;
}
.paginate .nav-links {
  text-align: center;
}
.paginate a,
.paginate span {
  display: inline-block;
  margin: 0 10px;
}
.paginate a {
  color: #ccc;
  transition: all 0.3s;
}
.paginate a:hover {
  color: #222;
}
@media screen and (max-width: 640px) {
  .paginate {
    margin: 40px 0;
  }
}
.paginate .current {
  color: #222;
}

/* single */
.newsDetail {
  text-align: left;
}
@media screen and (max-width: 640px) {
  .newsDetail {
    padding: 10px;
  }
}
.newsDetail_header {
  padding: 40px 0;
  margin-bottom: 40px;
  border-bottom: 1px solid #cbcbcb;
}
.newsDetail_header-lower {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.newsDetail_date {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 300;
  margin-left: 20px;
}
.newsDetail_ttl {
  margin-bottom: 40px;
  font-size: 2.3rem;
  line-height: 1.5;
  font-weight: 600;
}
.newsDetail_content {
  line-height: 2;
  font-size: 1.5rem;
}
.newsDetail_content p {
  margin-bottom: 2em;
}
.newsDetail_content a {
  text-decoration: underline;
}
.newsDetail_content a:hover {
  text-decoration: none;
}
.newsDetail_content ul {
  list-style: disc;
  padding-left: 20px;
}
.newsDetail_content ol {
  list-style: decimal;
  padding-left: 20px;
}
.newsDetail_nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid #cbcbcb;
  border-bottom: 1px solid #cbcbcb;
  margin-top: 60px;
}
.newsDetail_nav-upper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
@media screen and (max-width: 640px) {
  .newsDetail_nav-upper {
    flex-direction: column;
  }
}
.newsDetail_nav-date {
  font-size: 1.2rem;
  font-weight: 600;
  margin-right: 10px;
}
@media screen and (max-width: 640px) {
  .newsDetail_nav-date {
    margin-bottom: 10px;
  }
}
.newsDetail_nav-cat {
  font-size: 1.2rem;
  font-weight: 600;
}
.newsDetail_nav-ttl {
  position: relative;
  text-align: left;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 640px) {
  .newsDetail_nav-ttl {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}
.newsDetail_nav-prev {
  flex: 1;
  text-align: left;
  align-self: stretch;
}
@media screen and (max-width: 640px) {
  .newsDetail_nav-prev {
    border-right: 1px solid #cbcbcb;
  }
}
.newsDetail_nav-prev--bt {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px 20px 40px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background-color: #fff;
  transition: 0.3s;
}
@media screen and (max-width: 640px) {
  .newsDetail_nav-prev--bt {
    padding: 20px 10px 20px 20px;
  }
}
.newsDetail_nav-prev--bt::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-up.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 10px;
  transform: translateY(-50%) rotate(-90deg);
  width: 16px;
  height: 16px;
}
@media screen and (max-width: 640px) {
  .newsDetail_nav-prev--bt::before {
    left: -10px;
  }
}
.newsDetail_nav-prev--bt img {
  margin-bottom: 20px;
  transition: 0.3s;
}
.newsDetail_nav-prev--bt:hover {
  background-color: #f7f7f7;
}
.newsDetail_nav-prev--bt:hover img {
  transform: scale(1.1);
}
.newsDetail_nav-list {
  width: 200px;
  text-align: center;
  border-left: 1px solid #cbcbcb;
  border-right: 1px solid #cbcbcb;
  align-self: stretch;
}
@media screen and (max-width: 999px) {
  .newsDetail_nav-list {
    width: 100px;
  }
}
@media screen and (max-width: 640px) {
  .newsDetail_nav-list {
    display: none;
  }
}
.newsDetail_nav-list--bt {
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  transition: 0.3s;
}
.newsDetail_nav-list--bt img {
  margin-bottom: 20px;
  transition: 0.3s;
}
.newsDetail_nav-list--bt:hover {
  background-color: #f7f7f7;
}
.newsDetail_nav-list--bt:hover img {
  transform: scale(1.1);
}
.newsDetail_nav-next {
  flex: 1;
  text-align: right;
  align-self: stretch;
}
.newsDetail_nav-next--bt {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px 60px 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  background-color: #fff;
  transition: 0.3s;
}
@media screen and (max-width: 640px) {
  .newsDetail_nav-next--bt {
    padding: 20px 20px 20px 10px;
  }
}
.newsDetail_nav-next--bt::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-up.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) rotate(90deg);
  width: 16px;
  height: 16px;
}
@media screen and (max-width: 640px) {
  .newsDetail_nav-next--bt::before {
    right: -10px;
  }
}
.newsDetail_nav-next--bt img {
  margin-bottom: 20px;
  transition: 0.3s;
}
.newsDetail_nav-next--bt:hover {
  background-color: #f7f7f7;
}
.newsDetail_nav-next--bt:hover img {
  transform: scale(1.1);
}
.newsDetail_nav-next img {
  display: none;
}
.newsDetail_nav-ttl {
  font-size: 12px;
  font-weight: 600;
}

/* 
 * mixin
 *
*/
/* aboutus */
.company-background .pageHeader {
  position: relative;
  height: 54vw;
  max-height: 700px;
  overflow: hidden;
}
.company-background .pageHeader video {
  position: absolute;
  width: 100%;
  -ms-filter: blur(1px);
  filter: blur(1px);
}

.vision {
  padding: 40px 0 160px;
}
.vision_title {
  margin: 25px 0 60px;
  font-size: 5rem;
  font-weight: bold;
  font-family: "Montserrat", sans-serif;
}
.vision_lead {
  margin-top: 90px;
}
@media screen and (max-width: 640px) {
  .vision {
    padding: 20px 0 60px;
  }
  .vision_title {
    margin: 10px 0 20px;
    font-size: 2.6rem;
  }
  .vision_lead {
    margin: 0;
    font-size: 1.8rem;
  }
}

.message {
  padding: 100px 0;
  line-height: 2;
}
.message .content {
  display: flex;
}
.message-ceo {
  background: #fafafa;
}
.message-cto {
  background: #605d5d;
}
.message_text {
  flex: 1 1 calc(100% - 320px);
  font-size: 1.5rem;
  text-align: left;
}
.message_text-ceo {
  line-height: 2;
}
.message_text-ceo p {
  margin-bottom: 2em;
}
.message_text-en {
  margin-bottom: 30px;
  line-height: 1.4;
  color: #ccc;
  font-size: 1.4rem;
}
.message_text-cto {
  line-height: 1.6;
  color: #fff;
}
.message_text-cto p {
  margin-bottom: 0;
}
.message_photo {
  flex: 0 0 320px;
}
.message_photo img {
  margin-bottom: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.message_name {
  line-height: 1.6;
}
.message_name-ceo {
  color: #666;
}
.message_name-cto {
  color: #ccc;
  font-family: "Montserrat", sans-serif;
}
@media screen and (max-width: 640px) {
  .message {
    padding: 50px 0 240px;
    position: relative;
  }
  .message .content {
    display: block;
  }
  .message_text {
    flex: none;
    padding: 0 10px;
  }
  .message_photo {
    flex: none;
    position: absolute;
    bottom: 40px;
    right: 0;
    left: 0;
  }
  .message_photo img {
    width: 140px;
    height: 140px;
    margin-bottom: 10px;
  }
}

.companyPforile {
  padding-top: 100px;
}
.companyPforile_content {
  margin: 80px auto 0;
  width: 540px;
  max-width: 100%;
  text-align: left;
}
.companyPforile_content tr {
  border-bottom: 1px solid #ddd;
}
.companyPforile_content th, .companyPforile_content td {
  padding: 20px;
  font-size: 1.6rem;
}
.companyPforile_content th {
  color: #999;
  font-weight: normal;
}
.companyPforile_map {
  margin-top: 120px;
}
.companyPforile_map_title {
  margin-bottom: 20px;
  font-size: 2.2rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: normal;
}
.companyPforile .gmap {
  position: relative;
  padding-bottom: 420px;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.companyPforile .gmap iframe,
.companyPforile .gmap object,
.companyPforile .gmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 640px) {
  .companyPforile {
    padding-top: 40px;
  }
  .companyPforile .sectionTitle {
    font-size: 2.7rem;
  }
  .companyPforile_content {
    margin: 20px auto 0;
    width: 100%;
  }
  .companyPforile_content th, .companyPforile_content td {
    display: block;
    width: 100%;
    padding: 5px;
    font-size: 1.3rem;
  }
  .companyPforile_content th {
    padding-top: 10px;
  }
  .companyPforile_content td {
    padding-top: 0;
    padding-bottom: 10px;
  }
  .companyPforile_map {
    margin-top: 60px;
  }
}

/* 
 * mixin
 *
*/
/* aboutus */
.siteHeader.siteHeader--renew {
  background: transparent;
  font-weight: 400;
}
@media screen and (max-width: 640px) {
  .siteHeader.siteHeader--renew .siteHeader_logo {
    flex: 0 0 100px;
  }
}
.siteHeader.siteHeader--renew .content {
  width: 1200px;
}
.siteHeader.siteHeader--renew .siteHeader_nav .menu > li > a {
  color: #222;
  font-size: 1.4rem;
  font-weight: 500;
}
.siteHeader.siteHeader--renew .siteHeader_btn-signup {
  padding: 6px 10px;
  background: #222;
}
.siteHeader.siteHeader--renew .siteHeader_btn-login {
  color: #222;
  text-decoration: none;
}
.siteHeader.siteHeader--renew .menu-trigger span {
  background-color: #222;
}

.our-company .content {
  width: 1120px;
}
.our-company .pageHeader {
  position: relative;
  max-width: 100vw;
  height: 720px;
  max-height: 100vh;
  background: #f2f2f2 !important;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .our-company .pageHeader {
    max-height: calc(100vh - 50px);
  }
}
.our-company .pageHeader .content {
  width: 1120px;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.our-company .pageHeader .content::before {
  content: none;
}
.our-company .pageHeader_en {
  padding: 0;
  font-size: 6rem;
  position: relative;
  font-weight: 400;
}
.our-company .pageHeader_en::before {
  position: absolute;
  top: -10px;
  content: "";
  width: 30px;
  height: 1px;
  background: #222;
}
.our-company .pageHeader_title {
  padding: 20px 0 0 10px;
  font-size: 1.3rem;
  letter-spacing: 0.05em;
}
.our-company .pageHeader_catch {
  z-index: 10;
  margin: auto 0 10% auto;
  text-align: right;
}
.our-company .pageHeader_catch_sub {
  font-size: 1.8rem;
  font-weight: 200;
  font-family: "Montserrat", sans-serif;
}
.our-company .pageHeader_catch_en {
  font-family: "Montserrat", sans-serif;
  font-size: 6rem;
  font-weight: 200;
}
@media screen and (max-width: 768px) {
  .our-company .pageHeader_catch_en {
    font-size: 4rem;
  }
}
.our-company .pageHeader_catch_en strong {
  font-weight: 600;
}
.our-company .pageHeader_catch_jp {
  margin-top: 20px;
  font-size: 1.9rem;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .our-company .pageHeader_catch_jp {
    font-size: 1.4rem;
  }
}
.our-company .bgText-white {
  position: absolute;
  top: 40%;
  width: 100%;
  font-size: 26rem;
  letter-spacing: -0.05em;
  opacity: 0;
  color: #fff;
  transform-origin: center;
  margin: auto;
  animation-name: bgTextWhite;
  animation-duration: 10s;
  animation-delay: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  white-space: nowrap;
  z-index: 0;
  text-align: center;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 640px) {
  .our-company .bgText-white {
    font-size: 30vw;
  }
}
.our-company .bgText-black {
  position: absolute;
  top: 49%;
  font-size: 40rem;
  letter-spacing: -0.05em;
  opacity: 0;
  color: #222;
  transform-origin: center;
  animation-name: bgTextBlack;
  animation-duration: 150s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  white-space: nowrap;
  z-index: 0;
}
.our-company .corpSection {
  text-align: left;
  padding: 120px 10px;
}
@media screen and (max-width: 640px) {
  .our-company .corpSection {
    padding: 60px 10px;
  }
}
.our-company .corpSection-bg {
  background: #f2f2f2;
}
.our-company .contentTitle {
  display: inline-block;
  position: relative;
  margin-bottom: 65px;
  padding: 0 5px 15px;
  font-family: "Montserrat", sans-serif;
  font-size: 4.6rem;
  font-weight: 400;
}
.our-company .contentTitle::before {
  content: "";
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 1px;
  margin-left: -5px;
  background: #222;
}
@media screen and (max-width: 640px) {
  .our-company .contentTitle::before {
    left: 5px;
  }
}
.our-company .contentTitle::after {
  content: "";
  width: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1px;
  background: #222;
  transform: rotate(-35deg);
  transform-origin: right top;
}
.our-company .achieve {
  position: relative;
  width: 1120px;
  max-width: 100%;
  margin: -110px auto -60px;
  padding: 100px;
  background: #fff;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
}
@media screen and (max-width: 640px) {
  .our-company .achieve {
    display: block;
    width: 90%;
    margin: -40px auto -20px;
    padding: 64px 16px;
  }
}
.our-company .achieve .messageTitle {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.05;
  font-weight: 600;
  margin-bottom: 24px;
}
@media screen and (max-width: 640px) {
  .our-company .achieve .messageTitle {
    font-size: 1.8rem;
  }
}
.our-company .achieve .messageText {
  font-size: 1.6rem;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.05;
  margin-bottom: 64px;
}
@media screen and (max-width: 640px) {
  .our-company .achieve .messageText {
    padding-left: 0;
    font-size: 1.4rem;
    margin-bottom: 32px;
  }
}
.our-company .achieve .messageButtonArea {
  width: 100%;
  text-align: center;
}
.our-company .achieve .messageButtonArea_bt {
  width: 20vw;
  font-size: 1.8rem;
  font-weight: 600;
  padding: 16px 24px;
  border: 1px solid #000;
  border-radius: 4px;
}
.our-company .ceo {
  width: 100%;
  padding: 40px 0;
}
@media screen and (max-width: 640px) {
  .our-company .ceo {
    padding: 40px 0 0 0;
  }
}
.our-company .ceo_header {
  width: 100%;
  text-align: center;
}
.our-company .ceo_contents {
  width: 1120px;
  max-width: 100%;
  margin: 60px auto;
  padding: 0;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
@media screen and (max-width: 640px) {
  .our-company .ceo_contents {
    display: block;
  }
}
.our-company .ceo_contents-left {
  flex: 2;
}
.our-company .ceo_contents-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 640px) {
  .our-company .ceo_contents-right {
    padding: 50px 20px 0 20px;
  }
}
.our-company .ceo_contents-ttl {
  display: block;
  font-size: 3rem;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  font-weight: 900;
  margin-bottom: 40px;
}
@media screen and (max-width: 640px) {
  .our-company .ceo_contents-ttl {
    font-size: 2.4rem;
    padding: 0 20px;
  }
}
.our-company .ceo_contents-message {
  display: block;
  font-size: 1.6rem;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-weight: 200;
}
@media screen and (max-width: 640px) {
  .our-company .ceo_contents-message {
    padding: 0 20px;
  }
}
.our-company .ceo_contents-message:not(:last-of-type) {
  margin-bottom: 20px;
}
.our-company .ceo_contents-post {
  display: block;
  margin-bottom: 5px;
  font-size: 1.4rem;
  letter-spacing: 0.4rem;
  line-height: 2;
}
.our-company .ceo_contents-name {
  display: block;
  margin-bottom: 30px;
  font-size: 2.2rem;
  letter-spacing: 0.4rem;
  line-height: 2;
  font-weight: 600;
}
.our-company .ceo_contents-prof {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.05rem;
  line-height: 2;
  font-weight: 200;
}
.our-company .ceo_contents-photo {
  width: 70%;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .our-company .ceo_contents-photo {
    width: 50%;
  }
}
.our-company .ceo .contentTitle {
  white-space: nowrap;
  margin-bottom: 10px;
}
@media screen and (max-width: 640px) {
  .our-company .ceo .contentTitle {
    white-space: normal;
  }
}
.our-company .ceo .achieve-text {
  flex: 1 1 auto;
  padding-left: 12%;
  font-size: 2.2rem;
  text-align: left;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 640px) {
  .our-company .ceo .achieve-text {
    padding-left: 0;
    font-size: 1.8rem;
  }
}
.our-company .members {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media screen and (max-width: 640px) {
  .our-company .members {
    flex-wrap: wrap;
    margin: 0 -10px;
  }
}
.our-company .members li {
  flex: 1 0 14.4%;
  margin-left: 1px;
  text-align: center;
  font-size: 1.5rem;
}
@media screen and (max-width: 640px) {
  .our-company .members li {
    flex: 1 0 25%;
    max-width: calc(25% - 1px);
    margin-bottom: 20px;
  }
}
.our-company .members .member {
  width: 100%;
  position: relative;
}
.our-company .members .member_photo {
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
}
.our-company .members .member img {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}
.our-company .members .member img:hover {
  transform: scale(1.1);
}
.our-company .members .member_post {
  display: block;
  margin-bottom: 5px;
  font-size: 1.1rem;
}
.our-company .members-engineer_title {
  margin: 120px auto 40px;
  font-size: 2.8rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  text-align: center;
  letter-spacing: 0.15em;
}
.our-company .members-engineer li {
  max-width: 200px;
}
@media screen and (max-width: 640px) {
  .our-company .members-engineer li {
    max-width: calc(25% - 1px);
  }
}
.our-company .member-detail {
  z-index: 600;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0;
  overflow: hidden;
  padding: 40px 0;
  transition: width 0.2s ease-out;
  background: -moz-linear-gradient(top left, rgba(34, 34, 34, 0.8) 0, rgba(34, 34, 34, 0.8) 15%, #222 15.1%, #222);
  background: -webkit-linear-gradient(top left, rgba(34, 34, 34, 0.8) 0, rgba(34, 34, 34, 0.8) 15%, #222 15.1%, #222);
  background: linear-gradient(to bottom right, rgba(34, 34, 34, 0.8) 0, rgba(34, 34, 34, 0.8) 15%, #222 15.1%, #222);
}
@media screen and (max-width: 640px) {
  .our-company .member-detail {
    display: block;
  }
}
.our-company .member-detail.member-detail-show {
  overflow-y: auto;
  width: 100vw;
}
.our-company .member-detail.member-detail-show .member-detail_wrap {
  max-height: 600px;
  overflow: auto;
}
@media screen and (max-width: 640px) {
  .our-company .member-detail.member-detail-show .member-detail_wrap {
    max-height: 1000px;
  }
}
.our-company .member-detail_wrap {
  overflow: hidden;
  max-width: 1000px;
  max-height: 0;
  margin: auto;
  display: flex;
  justify-content: space-between;
  color: #fff;
  text-align: left;
  transition: max-height 0.3s 0.3s ease-in;
}
@media screen and (max-width: 640px) {
  .our-company .member-detail_wrap {
    display: block;
  }
}
.our-company .member-detail_photo {
  flex: 0 0 32%;
  width: 32%;
}
@media screen and (max-width: 640px) {
  .our-company .member-detail_photo {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
  }
  .our-company .member-detail_photo img {
    width: 80%;
    max-width: 200px;
  }
}
.our-company .member-detail_content {
  flex: 0 0 56%;
  width: 56%;
}
@media screen and (max-width: 640px) {
  .our-company .member-detail_content {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
  }
}
.our-company .member-detail_post {
  margin-bottom: 20px;
  font-size: 1.6rem;
  line-height: 1.4;
}
.our-company .member-detail_name {
  margin-bottom: 60px;
  font-size: 3rem;
  font-weight: normal;
}
@media screen and (max-width: 640px) {
  .our-company .member-detail_name {
    margin-bottom: 20px;
  }
}
.our-company .member-detail_message {
  font-size: 1.4rem;
  line-height: 1.8;
}
.our-company .member-detail_message p {
  margin-bottom: 24px;
}
.our-company .member-detail .btn-close {
  display: inline-block;
  margin: 10px auto 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  opacity: 0.2;
  transition: all 0.3s;
}
.our-company .member-detail .btn-close:hover {
  opacity: 1;
}
.our-company .memberList {
  text-align: left;
  padding: 0 10px 60px 10px;
}
.our-company .memberList_ttl {
  font-family: "Montserrat", sans-serif;
  font-size: 4rem;
  letter-spacing: 0.05rem;
  font-weight: 500;
  text-align: left;
  margin-bottom: 60px;
}
.our-company .memberList_area {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}
.our-company .memberList li {
  width: 196px;
}
@media screen and (max-width: 1199px) {
  .our-company .memberList li {
    width: calc((100% - 90px) / 4);
  }
}
@media screen and (max-width: 999px) {
  .our-company .memberList li {
    width: calc((100% - 60px) / 3);
  }
}
@media screen and (max-width: 640px) {
  .our-company .memberList li {
    width: calc((100% - 30px) / 2);
  }
}
.our-company .memberList_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 40px;
  cursor: pointer;
  transition: 0.3s;
}
.our-company .memberList_box:hover {
  background-color: #f2f2f2;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.1));
}
.our-company .memberList_box:hover img {
  filter: grayscale(0);
}
.our-company .memberList_box img {
  filter: grayscale(1);
  transition: 0.3s;
}
.our-company .memberList_box-positionEn {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  font-weight: 300;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 5px;
}
.our-company .memberList_box-positionJp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  font-weight: 300;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 5px;
}
.our-company .memberList_box-nameEn {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
}
.our-company .memberList_box-nameJp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
}
.our-company .memberProfile {
  position: relative;
  width: 100%;
}
.our-company .memberProfile_bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.6);
  z-index: 11;
}
.our-company .memberProfile_bg.is_open {
  opacity: 1;
  visibility: visible;
}
.our-company .memberProfile_prof {
  margin-top: 60px;
}
@media screen and (max-width: 640px) {
  .our-company .memberProfile_prof {
    margin-top: 40px;
  }
}
.our-company .memberProfile_base {
  position: fixed;
  content: "";
  top: 0;
  right: -560px;
  width: 500px;
  height: 100vh;
  background-color: #181818;
  padding: 160px 30px 60px 30px;
  z-index: 12;
  transition: 0.3s;
}
@media screen and (max-width: 640px) {
  .our-company .memberProfile_base {
    width: calc(100% - 60px);
    padding: 160px 20px 60px 20px;
  }
}
.our-company .memberProfile_base.is_open {
  right: 0;
}
.our-company .memberProfile_contents {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
.our-company .memberProfile_contents::-webkit-scrollbar {
  width: 5px;
}
.our-company .memberProfile_contents::-webkit-scrollbar-track {
  background: #181818;
}
.our-company .memberProfile_contents::-webkit-scrollbar-thumb {
  background: #000;
}
.our-company .memberProfile_close {
  display: inline-block;
  position: absolute;
  content: "";
  color: #fff;
  background-color: #181818;
  top: 100px;
  left: -60px;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
}
.our-company .memberProfile_close:hover {
  background-color: #555;
}
.our-company .memberProfile_close span {
  color: #fff;
}
.our-company .memberProfile_box {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 640px) {
  .our-company .memberProfile_box {
    padding: 0 10px;
  }
}
.our-company .memberProfile_box-positionEn {
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 5px;
  color: #fff;
}
.our-company .memberProfile_box-positionJp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  font-weight: 300;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 5px;
  color: #fff;
}
.our-company .memberProfile_box-nameEn {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
  color: #fff;
  padding-top: 10px;
}
.our-company .memberProfile_box-nameJp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.4rem;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
  color: #fff;
  padding-top: 10px;
}
.our-company .memberProfile_box-textEn {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.6;
  font-weight: 300;
  text-align: left;
  color: #fff;
}
.our-company .memberProfile_box-textJp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.6;
  font-weight: 300;
  text-align: left;
  color: #fff;
}
.our-company .memberProfile_list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.our-company .memberProfile_list dt {
  flex: 30%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: left;
  color: #fff;
  margin-bottom: 10px;
}
@media screen and (max-width: 640px) {
  .our-company .memberProfile_list dt {
    font-size: 1.2rem;
  }
}
.our-company .memberProfile_list dd {
  flex: 70%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  font-weight: 300;
  text-align: left;
  color: #fff;
  margin-bottom: 10px;
}
@media screen and (max-width: 640px) {
  .our-company .memberProfile_list dd {
    font-size: 1.2rem;
  }
}
.our-company .whyText {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 60px;
  font-size: 1.5rem;
  line-height: 2;
}
@media screen and (max-width: 640px) {
  .our-company .whyText {
    display: block;
    padding: 0 5vw;
  }
}
.our-company .whyText p {
  flex: 0 0 48%;
}
.our-company .value_wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
@media screen and (max-width: 640px) {
  .our-company .value_wrap {
    display: block;
  }
}
.our-company .value_img {
  flex: 0 0 35%;
}
@media screen and (max-width: 640px) {
  .our-company .value_img {
    margin-top: -70px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
  }
}
.our-company .value_img img {
  display: none;
}
.our-company .value_img figcaption {
  display: block;
  margin-top: 40px;
  text-indent: 0.2em;
  font-family: "Montserrat", sans-serif;
  font-size: 3rem;
  font-style: italic;
}
.our-company .value_img figcaption span {
  font-size: 8rem;
  display: inline-block;
  margin: -15px 10px 0 0;
  float: left;
}
.our-company .values {
  flex: 0 0 55%;
  margin-top: -100px;
  width: 55%;
  counter-reset: value;
}
@media screen and (max-width: 640px) {
  .our-company .values {
    margin-top: 0;
    width: 100%;
  }
}
.our-company .values_title {
  margin-bottom: 50px;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 0.4em;
}
@media screen and (max-width: 640px) {
  .our-company .values_title {
    margin-top: 60px;
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0.3em;
  }
}
.our-company .value {
  margin-bottom: 40px;
}
.our-company .value_title {
  margin-bottom: 24px;
  padding-bottom: 8px;
  font-size: 2.4rem;
  border-bottom: 1px solid #222;
  font-weight: normal;
}
.our-company .value_title::before {
  counter-increment: value;
  content: "0" counter(value);
  display: block;
  margin-bottom: 10px;
  font-size: 2rem;
  font-family: "Montserrat", sans-serif;
  color: #888;
}
.our-company .value_subTitle {
  margin-bottom: 12px;
  font-size: 1.5rem;
}
.our-company .value_message {
  font-size: 1.2rem;
  line-height: 1.8;
}
.our-company .companyInfo {
  padding: 0 60px;
  font-size: 1.4rem;
  line-height: 2.2rem;
}
@media screen and (max-width: 640px) {
  .our-company .companyInfo {
    padding: 0;
  }
}
.our-company .companyInfo dt {
  padding: 26px 73% 0 5px;
  border-top: 1px solid #222;
}
.our-company .companyInfo dd {
  margin-top: -2.2rem;
  padding: 0 5px 26px 27%;
}
.our-company .companyInfo dd:last-child {
  border-bottom: 1px solid #222;
}
.our-company .companyInfo small {
  font-size: 1.1rem;
}
.our-company .footerLink {
  padding: 80px 40px;
}
@media screen and (max-width: 640px) {
  .our-company .footerLink {
    padding: 40px 20px;
  }
}
.our-company .footerLink ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 640px) {
  .our-company .footerLink ul {
    display: block;
  }
}
.our-company .footerLink ul li {
  flex: 0 0 400px;
  margin: 0 2%;
  max-width: 46%;
  white-space: nowrap;
}
@media screen and (max-width: 640px) {
  .our-company .footerLink ul li {
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
  }
}
.our-company .footerLink ul a {
  display: block;
  background: #222;
  color: #fff;
  font-size: 1.6rem;
  line-height: 76px;
}
.our-company .gmap_title {
  margin-bottom: 20px;
  font-size: 3.4rem;
  font-family: "almanach", sans-serif;
  text-align: center;
  font-weight: normal;
}
.our-company .investorsSection {
  text-align: left;
  padding: 120px 10px 60px 10px;
}
@media screen and (max-width: 640px) {
  .our-company .investorsSection {
    padding: 60px 10px;
  }
}
.our-company .investors_logoArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.our-company .investors_logoArea a {
  display: inline-block;
  width: 245px;
  margin-bottom: 40px;
}
@media screen and (max-width: 1099px) {
  .our-company .investors_logoArea a {
    width: calc(25% - 30px);
  }
}
@media screen and (max-width: 640px) {
  .our-company .investors_logoArea a {
    width: calc(50% - 30px);
  }
}
.our-company .investors_logoArea a:not(:nth-of-type(4n)) {
  margin-right: 30px;
}
@media screen and (max-width: 640px) {
  .our-company .investors_logoArea a:not(:nth-of-type(4n)) {
    margin-right: 0;
  }
}
@media screen and (max-width: 640px) {
  .our-company .investors_logoArea a:not(:nth-of-type(2n)) {
    margin-right: 20px;
  }
}
.our-company .investors_logoArea a:hover img {
  transform: scale(1.05);
}
.our-company .investors_logoArea a img {
  transition: 0.3s;
}

@keyframes bgTextWhite {
  0% {
    transform: scale(85%);
    opacity: 0;
    filter: blur(20px);
  }
  10% {
    transform: scale(100%);
    opacity: 0.8;
    filter: blur(0);
  }
  20% {
    transform: scale(105%);
    opacity: 0.8;
    filter: blur(20px);
  }
  30% {
    transform: scale(100%);
    opacity: 0.8;
    filter: blur(0);
  }
  45% {
    transform: scale(100%);
    opacity: 0.8;
    filter: blur(0);
  }
  60% {
    opacity: 0;
    transform: scale(98%);
    filter: blur(30px);
  }
  100% {
    opacity: 0;
  }
}
@keyframes bgTextBlack {
  0% {
    transform: translate(-10%, 0);
    opacity: 0;
  }
  5% {
    opacity: 0.05;
  }
  90% {
    transform: translate(-80%, 0);
    opacity: 0.05;
  }
  100% {
    transform: translate(-100%, 0);
    opacity: 0;
  }
}
/* 
 * mixin
 *
*/
/* br */
/* Careers */
.recruitTop_MVArea {
  background-image: url("/2024/05/recruit-mv-bg-pc.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: 100%;
  background-repeat: repeat;
  overflow: hidden;
  margin: 0 auto;
  padding: 24px 20px 0;
}
@media screen and (max-width: 768px) {
  .recruitTop_MVArea {
    background-image: url("/2024/05/recruit-mv-bg-sp.png");
    background-attachment: scroll;
    padding: 48px 20px 0;
  }
}

.recruitTop_MV {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding-top: 100px;
  gap: 124px;
}
@media screen and (max-width: 768px) {
  .recruitTop_MV {
    padding-top: 48px;
    gap: 96px;
  }
}

.nav_recruitWrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding-top: 24px;
}
@media screen and (max-width: 768px) {
  .nav_recruitWrapper {
    padding-top: 48px;
  }
}

.nav_recruit {
  max-width: 1312px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 0 24px;
}
@media screen and (max-width: 768px) {
  .nav_recruit {
    margin-right: auto;
    flex-direction: row;
  }
}
.nav_recruit_inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  font-size: 1.2rem;
  padding: 24px 0;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  .nav_recruit_inner {
    max-width: 100%;
    flex-wrap: wrap;
    white-space: initial;
    padding: 0;
    justify-content: flex-start;
  }
}

.recruit_button {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  transition: 0.3s;
  position: relative;
  padding-bottom: 8px;
}
@media screen and (max-width: 768px) {
  .recruit_button {
    width: 150px;
    text-align: left;
    padding-left: 20px;
  }
}
.recruit_button.is-active {
  font-weight: 700;
  color: #000;
  border-bottom: 2px solid;
  text-align: left;
  padding: 0 0 8px 15px;
}
@media screen and (max-width: 768px) {
  .recruit_button.is-active {
    width: 150px;
    text-align: left;
    padding-left: 20px;
  }
}
.recruit_button.is-active::before {
  position: absolute;
  content: "";
  top: 40%;
  left: 5px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid;
  background-color: #000;
}

.message_area {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 1312px;
}
@media screen and (max-width: 768px) {
  .message_area {
    width: 100%;
  }
}

.message_inner {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 40px;
}

.catch_En {
  font-family: "Montserrat", sans-serif;
  font-size: 12rem;
  font-weight: 700;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .catch_En {
    font-size: 4.8rem;
  }
}

.catch_Jp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .catch_Jp {
    font-size: 1.6rem;
  }
}

.message_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
}
@media screen and (max-width: 1000px) {
  .message_description {
    max-width: 100%;
  }
}

.scroll_assist_area {
  display: flex;
  justify-content: center;
  padding: 56px 0;
}

.recruitRelated_mv {
  background-color: #00c6ab;
  box-shadow: 0 -1px 0 0 #00c6ab;
}

.recruitTop_bg {
  background-image: url("/2024/05/recruit-mv-bg-pc.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: 100%;
  background-repeat: repeat;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .recruitTop_bg {
    background-image: url("/2024/05/recruit-mv-bg-sp.png");
    background-attachment: scroll;
    background-position: top;
  }
}

.recruitTop_title_right {
  text-align: right;
  padding: 48px 0;
}
@media screen and (max-width: 768px) {
  .recruitTop_title_right {
    padding: 0 0 24px 0;
  }
}

.recruitTop_title_left {
  text-align: left;
  padding: 48px 0;
}
@media screen and (max-width: 768px) {
  .recruitTop_title_left {
    padding: 0 0 24px 0;
  }
}
@media screen and (max-width: 768px) {
  .recruitTop_title_left .right {
    text-align: right;
  }
}

.recruitTop_titleEN {
  font-family: "Montserrat", sans-serif;
  font-size: 7.2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .recruitTop_titleEN {
    font-size: 3.6rem;
  }
}

.primary_btn {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background-color: #00c6ab;
  width: 280px;
  height: 80px;
  padding: 12px;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .primary_btn {
    padding: 0 20px;
    align-self: center;
  }
}
.primary_btn:hover {
  background-color: #00af97;
}

.rectangle-4139 {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 964px;
  height: 380px;
  background: #f8f8f8;
  border-radius: 10px;
  z-index: -1;
}
@media screen and (max-width: 1000px) {
  .rectangle-4139 {
    width: auto;
  }
}

.rectangle-4138 {
  content: "";
  position: absolute;
  top: 10;
  left: 0;
  width: 1000px;
  height: 551px;
  background: #f8f8f8;
  border-radius: 10px;
  z-index: -1;
}
@media screen and (max-width: 1000px) {
  .rectangle-4138 {
    width: auto;
  }
}

.message_section {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 80px 24px;
  color: #fff;
  background-image: url("/2024/05/recruit-mv-bg-pc.png");
  background-size: cover;
  background-position: bottom;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1000px) {
  .message_section {
    padding: 56px 24px;
  }
}

.message_section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff346b;
  opacity: 1;
  mix-blend-mode: overlay;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .message_section::before {
    padding: 56px 0;
  }
}

.message_contents {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .message_contents {
    align-items: flex-start;
    flex-direction: column;
    gap: 48px;
  }
}

.message_JP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .message_JP {
    font-size: 3.2rem;
  }
}

.message_container {
  border-left: 1px solid #eaeaea;
  text-align: left;
  padding-left: 24px;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .message_container {
    width: 100%;
  }
}

.message_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

.CEO_message {
  background-color: #00af97;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 126px;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .CEO_message {
    padding-top: 56px;
  }
}
.CEO_message_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.CEO_message_container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1314px;
  align-items: flex-start;
  text-align: left;
  justify-content: center;
  padding-bottom: 20px;
}
.CEO_message_container .max-width {
  max-width: 100%;
}
.CEO_message_area {
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 61px;
  padding-left: 24px;
}
.CEO_message_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .CEO_message_title {
    font-size: 3.2rem;
  }
}
.CEO_message_content {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 2.4;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .CEO_message_content {
    font-size: 1.6rem;
  }
}
.CEO_message_signature {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .CEO_message_signature {
    font-size: 1.4rem;
  }
}

.CEO_image_container {
  position: absolute;
  right: 20px;
  bottom: -80px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .CEO_image_container {
    align-self: flex-end;
    right: 0;
    bottom: -150px;
  }
}
@media screen and (max-width: 640px) {
  .CEO_image_container {
    bottom: -120px;
  }
}
@media screen and (max-width: 400px) {
  .CEO_image_container {
    bottom: -80px;
  }
}

.ceo_image {
  width: 290px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .ceo_image {
    width: 123px;
    height: 252px;
  }
}

.hexa_parts_bottomImg {
  width: 100%;
  height: auto;
  z-index: 1;
  position: relative;
}

.gradient_bg_bot {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 70%, white 30%);
}

.recruitTop_contents {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  font-size: 16px;
  color: #000;
  font-weight: 700;
  white-space: nowrap;
  line-height: 150%;
}
@media screen and (max-width: 768px) {
  .recruitTop_contents {
    white-space: initial;
  }
}

.position {
  width: 100%;
  max-width: 1312px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 64px 24px 160px;
}
@media screen and (max-width: 768px) {
  .position {
    max-width: 100%;
    white-space: initial;
    padding: 64px 24px 48px;
  }
}
.position_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
  justify-content: center;
}
@media screen and (max-width: 1312px) {
  .position_list {
    grid-template-columns: repeat(2, 1fr);
    align-self: center;
  }
}
@media screen and (max-width: 768px) {
  .position_list {
    grid-template-columns: 1fr;
    align-self: center;
    gap: 16px;
  }
}
.position_button {
  align-items: center;
  border-radius: 8px;
  border-color: #d3d3d3;
  border-style: solid;
  border-width: 1px;
  background-color: #fff;
  display: flex;
  width: 400px;
  height: 100px;
  padding: 32px 24px;
  transition: 0.3s;
  cursor: pointer;
}
@media screen and (max-width: 1000px) {
  .position_button {
    width: 345px;
  }
}
.position_button:hover {
  border-color: #00dabc;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.1));
}
.position_box {
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border-color: #d3d3d3;
  border-style: solid;
  border-width: 1px;
  background-color: #fff;
  display: flex;
  width: 400px;
  height: 100px;
  padding: 32px 24px;
  transition: 0.3s;
}
@media screen and (max-width: 1000px) {
  .position_box {
    width: 345px;
  }
}
.position_title {
  font-family: "Noto Sans JP", sans-serif;
  flex: 1;
}
.position_btArea {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.position_txtArea {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 40px;
  font-size: 2rem;
  letter-spacing: 1.2px;
}
@media screen and (max-width: 768px) {
  .position_txtArea {
    font-size: 1.5rem;
  }
}

.section_title_left {
  text-align: left;
}

.recruitTop_title_en {
  font-family: "Montserrat", sans-serif;
  font-size: 7.2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .recruitTop_title_en {
    font-size: 4rem;
  }
}

.recruitTop_title_jp {
  display: flex;
  gap: 15px;
  font-size: 2.4rem;
  letter-spacing: 1.2px;
}
@media screen and (max-width: 768px) {
  .recruitTop_title_jp {
    font-size: 1.5rem;
  }
}

.line_decorator {
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-width: 1px;
  width: 48px;
  margin: auto 0;
}

.icon_external-link-img {
  width: 26px;
  height: 26px;
}

.recruitTop_work {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  padding: 64px 24px;
}

.recruitTop_section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section_title_center {
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
  text-align: center;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .section_title_center {
    gap: 24px;
    padding-bottom: 0;
  }
}

.section_title_en {
  font-family: "Montserrat", sans-serif;
  font-size: 7.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #212121;
}
@media screen and (max-width: 768px) {
  .section_title_en {
    font-size: 4rem;
  }
}

.section_title_jp {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.line_left,
.line_right {
  border: 1px solid #000;
  width: 48px;
}

.title_jp_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
}

.intro_text {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  max-width: 668px;
}

@media (max-width: 991px) {
  .intro_text {
    max-width: 100%;
  }
}
.values {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 60px 0;
}
@media screen and (max-width: 768px) {
  .values {
    padding: 60px 0 0;
  }
}
.values_cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  justify-content: center;
}
@media screen and (max-width: 1000px) {
  .values_cards {
    grid-template-columns: repeat(2, 1fr);
    align-self: center;
  }
}
@media screen and (max-width: 768px) {
  .values_cards {
    grid-template-columns: 1fr;
  }
}
.values_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}
.values_card_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding: 0 24px;
  width: 300px;
  height: 120px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .values_card_title {
    padding: 0 0 16px;
    width: 100%;
    height: auto;
  }
}
.values_card_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding: 16px 24px;
  width: 300px;
}
@media screen and (max-width: 768px) {
  .values_card_description {
    padding: 16px 0;
    width: 100%;
  }
}
.values_card img {
  width: 311px;
  height: 178px;
  padding: 0 24px;
}
@media screen and (max-width: 768px) {
  .values_card img {
    width: 100%;
    height: auto;
    padding: 0;
  }
}

.CTA {
  background-image: url("/2024/05/cta-bg-pc.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: 100%;
  background-repeat: repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
@media screen and (max-width: 640px) {
  .CTA {
    background-image: url("/2024/05/cta-bg-sp.png");
    background-attachment: scroll;
  }
}
.CTA_inner {
  display: flex;
  flex-direction: column;
  text-align: left;
  max-width: 1312px;
  padding: 80px 60px;
  gap: 70px;
}
@media screen and (max-width: 768px) {
  .CTA_inner {
    max-width: 100%;
    padding: 0 24px 80px;
  }
}
.CTA_btnArea {
  display: flex;
  flex-direction: column;
  gap: 29px;
}
@media screen and (max-width: 768px) {
  .CTA_btnArea {
    max-width: 100%;
  }
}
.CTA_title {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 7.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .CTA_title {
    max-width: 100%;
    font-size: 3.2rem;
  }
}
.CTA_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #fff;
}
.CTA_button {
  display: flex;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  width: 686px;
  max-width: 100%;
  letter-spacing: 4.8px;
  padding: 40px;
  font-family: "LINE SEED JP_OTF", sans-serif;
  font-weight: 700;
}
.CTA_button:hover {
  border-color: #00dabc;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.1));
}

.hexa_parts {
  transform: rotate(180deg);
}
@media screen and (max-width: 768px) {
  .hexa_parts {
    max-width: 100%;
  }
}

.engineer-life {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .engineer-life {
    display: block;
    padding: 56px 0 0;
  }
}
.engineer-life_inner {
  display: flex;
  flex-direction: column;
  max-width: 1312px;
  padding: 0 24px;
}
@media screen and (max-width: 768px) {
  .engineer-life_inner {
    padding: 0;
  }
}
.engineer-life_container {
  display: flex;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .engineer-life_container {
    flex-direction: column;
  }
}
.engineer-life_wrapperLeft {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 2;
  background: #fff;
  border-radius: 20px;
  width: 653px;
  transform: translate(20%, 8%);
  padding: 80px;
  text-align: left;
  gap: 24px;
}
@media screen and (max-width: 768px) {
  .engineer-life_wrapperLeft {
    transform: translate(0, -10%);
    width: auto;
    align-self: center;
    padding: 32px;
    margin: 0 15px;
    order: 2;
  }
}
@media screen and (max-width: 768px) {
  .engineer-life_imgContainerRight {
    order: 1;
  }
}
.engineer-life_wrapperRight {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  width: 653px;
  transform: translate(-8%, 5%);
  padding: 80px;
  text-align: left;
  gap: 24px;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .engineer-life_wrapperRight {
    align-self: center;
    transform: translate(0, -5%);
    width: auto;
    margin: 0 15px;
    padding: 32px;
  }
}
.engineer-life_imgContainer_left {
  transform: translate(8%, 40%);
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .engineer-life_imgContainer_left {
    transform: none;
    border-radius: 0;
  }
}
.engineer-life_imgContainer_left img {
  border-radius: 15px;
}
@media screen and (max-width: 768px) {
  .engineer-life_imgContainer_left img {
    border-radius: 0;
  }
}
.engineer-life_titleArea {
  align-self: flex-start;
  text-align: left;
}
.engineer-life_subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .engineer-life_subtitle {
    max-width: 100%;
  }
}
.engineer-life_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .engineer-life_title {
    max-width: 100%;
    font-size: 2.3rem;
  }
}
.engineer-life_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .engineer-life_description {
    max-width: 100%;
  }
}
.engineer-life_wrapperCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  background: #fff;
  border-radius: 20px;
  width: 894px;
  transform: translateY(-12%);
  padding: 80px 80px 0;
  text-align: left;
  gap: 24px;
}
@media screen and (max-width: 1000px) {
  .engineer-life_wrapperCenter {
    transform: none;
    width: auto;
    padding: 32px 32px 0;
  }
}
@media screen and (max-width: 768px) {
  .engineer-life_wrapperCenter {
    transform: translateY(-4%);
    width: auto;
    margin: 0 15px;
  }
}
.engineer-life_containerCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  .engineer-life_containerCenter {
    display: flex;
    width: 100%;
  }
}
.engineer-life_column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.engineer-life_columnGray {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width: 768px) {
  .engineer-life_columnGray {
    background-color: #f8f8f8;
  }
}
.engineer-life_columnInner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  padding: 0 24px;
}
@media screen and (max-width: 1200px) {
  .engineer-life_columnInner {
    flex-direction: column;
  }
}
.engineer-life_columnCard {
  display: flex;
  border-radius: 8px;
  border-color: #d3d3d3;
  border-style: solid;
  border-width: 1px;
  flex-grow: 1;
  gap: 16px;
  padding: 32px 24px;
  transition: 0.3s;
}
.engineer-life_columnCard:hover {
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 768px) {
  .engineer-life_columnCard {
    background-color: #fff;
  }
}
.engineer-life_columnContent {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 458px;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .engineer-life_columnContent {
    width: 100%;
  }
}
.engineer-life_columnContent img {
  width: 455px;
  height: 250px;
}
@media screen and (max-width: 768px) {
  .engineer-life_columnContent img {
    width: 100%;
    height: auto;
  }
}
.engineer-life_nameArea {
  display: flex;
  flex-direction: row;
  gap: 4px;
}
.engineer-life_nameJP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #000;
}
@media screen and (max-width: 768px) {
  .engineer-life_nameJP {
    font-weight: 400;
  }
}
.engineer-life_nameEN {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #828282;
}
.engineer-life_position {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: #828282;
}
.engineer-life_columnTitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .engineer-life_columnTitle {
    font-size: 1.6rem;
  }
}

.interview_title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 56px 0 48px;
}
@media screen and (max-width: 768px) {
  .interview_title {
    background-color: #f8f8f8;
  }
}
.interview_title_EN {
  align-self: center;
  width: 221px;
  height: 54px;
}
@media screen and (max-width: 768px) {
  .interview_title_EN {
    width: 197px;
    height: 48px;
  }
}
.interview_title_JP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .interview_title_JP {
    font-size: 1.6rem;
  }
}

/* 
 * mixin
 *
*/
/* contact us */
.contact-us .pageHeader {
  margin-bottom: 0;
}
.contact-us .pageBody {
  background: #fafafa;
  padding: 80px 0;
}
@media screen and (max-width: 640px) {
  .contact-us .pageBody {
    padding: 0;
  }
}

.form {
  padding: 80px 10px;
  background: #FFF;
}
@media screen and (max-width: 640px) {
  .form {
    padding: 20px;
    margin: 5px;
  }
  .form .horizontal-item + .horizontal-item {
    margin-left: 0;
  }
}
.form_list {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  text-align: left;
}
.form_list dt {
  margin: 30px 0 10px;
  font-size: 1.5rem;
  color: #666;
}
@media screen and (max-width: 640px) {
  .form_list dt {
    margin: 20px 0 5px;
  }
}
.form_consent {
  margin: 80px 0 -20px;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .form_consent {
    margin: 20px 0 -20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }
  .mw_wp_form_confirm .form_consent {
    border-top: none;
  }
}
.form_require::after {
  content: "*";
  color: #cf0e0e;
  margin-left: 10px;
}
.form_input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #f5f5f5;
  font-size: 1.5rem;
  background: #f5f5f5;
  transition: all 0.3s;
  box-sizing: border-box;
}
.form_input-s {
  width: 180px;
}
.form_input:hover {
  background: #fafafa;
}
.form_input:focus {
  background: #fff;
  border: 1px solid #ddd;
}
.form_input::placeholder {
  color: #ccc;
}
@media screen and (max-width: 640px) {
  .form_input {
    font-size: 1.6rem;
  }
  .mwform-tel-field .form_input {
    max-width: 80px;
  }
}
.form .mwform-checkbox-field {
  display: inline-block;
  margin-right: 10px;
  padding: 10px 5px;
  white-space: nowrap;
  font-size: 1.6rem;
}
.form_list .horizontal-item + .horizontal-item {
  margin-left: 0;
}
.form label {
  cursor: pointer;
}
.form_privacyLink {
  text-decoration: underline;
}
.form .error {
  margin: 5px 0;
  color: #cf0e0e;
}
.form .error + .form_input,
.form .error + .mwform-tel-field .form_input {
  border-color: rgba(207, 14, 14, 0.5);
  background-color: rgba(207, 14, 14, 0.03);
}
.form_footer {
  margin: 60px 0;
}
@media screen and (max-width: 640px) {
  .form_footer {
    margin: 40px 0;
  }
}
.form_button-submit {
  width: 320px;
  margin: 0 20px;
  font-size: 2.5rem;
  line-height: 70px;
  cursor: pointer;
  background: #FFF;
  vertical-align: middle;
}
@media screen and (max-width: 640px) {
  .form_button-submit {
    width: 80%;
    font-size: 2rem;
    line-height: 50px;
  }
}
.form_button-back {
  width: 200px;
  margin: 0 20px;
  font-size: 1.5rem;
  line-height: 70px;
  cursor: pointer;
  background: #FFF;
  vertical-align: middle;
}
@media screen and (max-width: 640px) {
  .form_button-back {
    width: 100px;
    font-size: 1.5rem;
    line-height: 40px;
    margin-bottom: 50px;
  }
}
.form_confirmMessage {
  display: none;
  margin-bottom: 40px;
  font-size: 2rem;
}
.mw_wp_form_confirm .form_confirmMessage {
  display: block;
}
@media screen and (max-width: 640px) {
  .form_confirmMessage {
    font-size: 1.6rem;
  }
}
.form_completeMessage {
  display: none;
  padding: 40px 10px;
  background: #FFF;
  width: 80%;
  margin: auto;
  font-size: 2rem;
}
.mw_wp_form_complete .form_completeMessage {
  display: block;
}
.form_completeMessage p {
  margin-bottom: 20px;
}
.form_completeMessage a {
  text-decoration: underline;
}

.mw_wp_form_confirm .form_list {
  border-top: 1px solid #ddd;
}
.mw_wp_form_confirm .form_list dt {
  color: #ccc;
}
.mw_wp_form_confirm .form_list dd {
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
  padding: 10px 20px 30px;
  font-size: 1.6rem;
}
.mw_wp_form_confirm .form_list .form_consent {
  text-align: left;
  margin-top: -10px;
}
.mw_wp_form_confirm    .form_privacyLink,
.mw_wp_form_confirm .form_privacyText {
  display: none;
}

@media screen and (max-width: 640px) {
  .mw_wp_form_complete {
    padding-top: 40px;
  }
}

.contactTel {
  padding: 60px 0;
}
.contactTel_title {
  margin-bottom: 20px;
  font-size: 2.8rem;
  font-weight: normal;
}
.contactTel_phone {
  font-size: 5rem;
}
@media screen and (max-width: 640px) {
  .contactTel_title {
    font-size: 1.8rem;
  }
  .contactTel_phone {
    font-size: 3rem;
  }
}

.page.trial-form .pageHeader,
.page.trial-form-confirm .pageHeader,
.page.trial-form-complete .pageHeader {
  color: #fff;
  height: 160px;
}
.page.trial-form .trial-text,
.page.trial-form-confirm .trial-text,
.page.trial-form-complete .trial-text {
  margin-bottom: 60px;
  font-size: 2rem;
  line-height: 2;
}
.page.trial-form .form,
.page.trial-form-confirm .form,
.page.trial-form-complete .form {
  padding: 0 10px 40px;
}
.page.trial-form .mw_wp_form_confirm .trial-text,
.page.trial-form .mw_wp_form_complete .trial-text,
.page.trial-form-confirm .mw_wp_form_confirm .trial-text,
.page.trial-form-confirm .mw_wp_form_complete .trial-text,
.page.trial-form-complete .mw_wp_form_confirm .trial-text,
.page.trial-form-complete .mw_wp_form_complete .trial-text {
  display: none;
}
.page.trial-form input[value=個人情報の取り扱い及び利用規約に同意する],
.page.trial-form-confirm input[value=個人情報の取り扱い及び利用規約に同意する],
.page.trial-form-complete input[value=個人情報の取り扱い及び利用規約に同意する] {
  margin-rihgt: -5px;
}
.page.trial-form input[value=個人情報の取り扱い及び利用規約に同意する] + .mwform-checkbox-field-text,
.page.trial-form-confirm input[value=個人情報の取り扱い及び利用規約に同意する] + .mwform-checkbox-field-text,
.page.trial-form-complete input[value=個人情報の取り扱い及び利用規約に同意する] + .mwform-checkbox-field-text {
  display: none;
}
@media screen and (max-width: 640px) {
  .page.trial-form .trial-text,
  .page.trial-form-confirm .trial-text,
  .page.trial-form-complete .trial-text {
    font-size: 1.5rem;
    margin-bottom: 40px;
    line-height: 1.6;
  }
}

/* HubSpot Form Loading and Error States */
.form-loading-indicator {
  text-align: center;
  padding: 60px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 20px 0;
}
.form-loading-indicator .spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #00c6ab;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}
.form-loading-indicator p {
  color: #666;
  font-size: 1.6rem;
  margin: 0;
}
@media screen and (max-width: 640px) {
  .form-loading-indicator {
    padding: 40px 15px;
  }
  .form-loading-indicator .spinner {
    width: 40px;
    height: 40px;
  }
  .form-loading-indicator p {
    font-size: 1.4rem;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fallback-form {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 30px;
  margin: 20px 0;
  text-align: center;
}
.fallback-form h3 {
  color: #856404;
  font-size: 2rem;
  margin-bottom: 15px;
  font-weight: 600;
}
.fallback-form p {
  color: #856404;
  font-size: 1.6rem;
  margin-bottom: 15px;
  line-height: 1.6;
}
.fallback-form p:last-child {
  margin-bottom: 0;
}
.fallback-form a {
  color: #495057;
  text-decoration: underline;
}
.fallback-form a:hover {
  color: #00c6ab;
}
@media screen and (max-width: 640px) {
  .fallback-form {
    padding: 20px;
  }
  .fallback-form h3 {
    font-size: 1.8rem;
  }
  .fallback-form p {
    font-size: 1.4rem;
  }
}

/* 
 * mixin
 *
*/
/* privacy policy */
.privacy-policy .pageHeader {
  background: #f5f5f5;
}

.privacyPolicy {
  margin-bottom: 100px;
  text-align: left;
  line-height: 1.8;
}
.privacyPolicy .content {
  font-size: 1.5rem;
  padding: 0 40px;
}
@media screen and (max-width: 640px) {
  .privacyPolicy .content {
    padding: 0 10px;
  }
}
.privacyPolicy_title {
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: normal;
}
.privacyPolicy_lead {
  margin-bottom: 80px;
}

.privacyPolicySection {
  margin-bottom: 60px;
}
.privacyPolicySection_title {
  margin-bottom: 30px;
  font-weight: bold;
}
.privacyPolicySection p {
  margin-bottom: 30px;
}
.privacyPolicySection_list li {
  margin: 0 0 30px 20px;
  list-style: decimal;
}
.privacyPolicySection_list .privacyPolicySection_list {
  font-size: 1.4rem;
}
.privacyPolicySection_list .privacyPolicySection_list li {
  margin: 0 0 0 20px;
}
.privacyPolicySection_list .privacyPolicySection_listDefault {
  font-size: 1.4rem;
}
.privacyPolicySection_list .privacyPolicySection_listDefault li {
  margin: 0 0 0 20px;
  list-style: disc;
}
.privacyPolicySection .font-bold {
  font-weight: 900;
}

/* 
 * mixin
 *
*/
/* service */
.serviceBackground {
  margin-top: 50px;
  padding: 10px 0 100px;
}
.serviceBackground_text {
  margin-bottom: 80px;
  font-size: 2rem;
  line-height: 2;
}
.serviceBackground_text p {
  margin-bottom: 2em;
}
.serviceBackground_note {
  font-size: 1.2rem;
  color: #ccc;
}
@media screen and (max-width: 640px) {
  .serviceBackground {
    margin-top: 20px;
    padding-bottom: 80px;
  }
  .serviceBackground_text {
    margin-bottom: 40px;
    font-size: 1.4rem;
    text-align: left;
  }
  .serviceBackground_note {
    line-height: 1.4;
  }
}

.serviceTarget {
  position: relative;
  text-align: left;
}
.serviceTarget_title {
  position: relative;
  display: inline-block;
  width: auto;
  margin-bottom: 20px;
  padding: 10px 15px;
  font-size: 2.8rem;
  font-family: "Montserrat", sans-serif;
  border-bottom: 5px solid #32add6;
  z-index: 100;
  letter-spacing: 0.05em;
}
.serviceTarget p {
  position: relative;
  padding: 10px;
  font-size: 1.8rem;
  line-height: 1.8;
  z-index: 100;
  color: #20303c;
}
.serviceTarget_img {
  position: absolute;
  z-index: 1;
}
.serviceTarget_bg {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #fafafa;
  z-index: -2;
}
.serviceTarget.serviceTarget-engineers {
  padding: 80px 80px 0 320px;
  border-top: 1px solid #ddd;
}
.serviceTarget.serviceTarget-engineers .serviceTarget_img {
  top: 80px;
  left: 60px;
}
.serviceTarget.serviceTarget-engineers .serviceTarget_bg {
  top: 130px;
  left: 100px;
  border-top: 180px solid transparent;
  border-right: 100px solid #fff;
  border-left: 100px solid #fff;
  transform: scale(1.5) rotate(90deg);
}
.serviceTarget.serviceTarget-endusers {
  padding: 100px 320px 80px 80px;
}
.serviceTarget.serviceTarget-endusers .serviceTarget_img {
  top: 100px;
  right: 0;
}
.serviceTarget.serviceTarget-endusers .serviceTarget_bg {
  top: 100px;
  right: 0px;
  width: 360px;
  height: 220px;
}
.serviceTarget.serviceTarget-spa {
  padding: 50px 80px 0 320px;
  padding-top: 20px;
}
.serviceTarget.serviceTarget-spa .serviceTarget_title {
  font-size: 2.2rem;
}
.serviceTarget.serviceTarget-spa .serviceTarget_img {
  top: 0;
  left: 60px;
}
.serviceTarget.serviceTarget-spa .serviceTarget_bg {
  top: 0;
  left: 60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
}
@media screen and (max-width: 640px) {
  .serviceTarget.serviceTarget-engineers, .serviceTarget.serviceTarget-endusers, .serviceTarget.serviceTarget-spa {
    padding: 15px 0 130px;
  }
  .serviceTarget.serviceTarget-engineers .serviceTarget_img, .serviceTarget.serviceTarget-endusers .serviceTarget_img, .serviceTarget.serviceTarget-spa .serviceTarget_img {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    height: 150px;
    text-align: center;
  }
  .serviceTarget.serviceTarget-engineers .serviceTarget_img img, .serviceTarget.serviceTarget-endusers .serviceTarget_img img, .serviceTarget.serviceTarget-spa .serviceTarget_img img {
    width: auto;
    height: 150px;
  }
  .serviceTarget.serviceTarget-engineers .serviceTarget_bg, .serviceTarget.serviceTarget-endusers .serviceTarget_bg, .serviceTarget.serviceTarget-spa .serviceTarget_bg {
    top: auto;
    bottom: -30px;
    transform: scale(0.8);
    max-width: 90%;
  }
  .serviceTarget_title {
    margin-bottom: 10px;
    padding: 10px 20px 10px 5px;
    font-size: 1.8rem;
  }
  .serviceTarget.serviceTarget-spa .serviceTarget_title {
    font-size: 1.6rem;
  }
  .serviceTarget p {
    padding: 10px 0;
    font-size: 1.4rem;
  }
}

.serviceEbaas {
  padding: 100px 0;
}
.serviceEbaas_text {
  font-size: 2rem;
  line-height: 2;
}
@media screen and (max-width: 640px) {
  .serviceEbaas {
    padding: 30px 0 60px;
  }
  .serviceEbaas_text {
    padding: 0 10px;
    font-size: 1.4rem;
    text-align: left;
  }
}

.serviceNotification {
  margin-bottom: 40px;
  padding: 30px 10px;
  background: #e9e9e9;
  font-size: 22px;
  color: #222;
  line-height: 1.2;
}
@media screen and (max-width: 640px) {
  .serviceNotification {
    margin-bottom: 20px;
    font-size: 16px;
  }
}

.ebaas_img {
  padding: 0 10px;
}

.featureSection {
  padding: 100px 0;
  border-top: 1px solid #ddd;
}
@media screen and (max-width: 640px) {
  .featureSection {
    padding: 20px 0;
  }
  .featureSection .sectionTitle {
    font-size: 2.4rem;
  }
}

.featureList {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 800px) {
  .featureList {
    flex-wrap: wrap;
  }
}

.feature {
  flex: 1 1 25%;
}
.feature_title {
  position: relative;
  width: 220px;
  height: 220px;
  max-width: calc(25vw - 20px);
  max-height: calc(25vw - 20px);
  margin: 0 auto 10px;
  background: #f5f5f5;
  border-radius: 50%;
  font-size: 2.4rem;
  line-height: 1.3;
}
.feature_title::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  width: 24px;
  height: 1px;
  margin-left: -12px;
  background: #000;
}
.feature_num {
  display: block;
  margin-bottom: 20%;
  padding-top: 15%;
  font-size: 5rem;
  font-family: "Oswald", sans-serif;
  font-weight: normal;
  letter-spacing: 0.08em;
  line-height: 1;
}
.feature_text {
  margin: 0 20px 20px;
  text-align: left;
  font-size: 1.8rem;
  line-height: 1.6;
}
.feature_img {
  width: 760px;
  max-width: 100%;
  margin: 80px auto;
  padding: 30px;
  box-sizing: border-box;
  border: 1px solid #ddd;
}
@media screen and (max-width: 800px) {
  .feature {
    flex: 1 1 50%;
    margin-bottom: 10px;
  }
  .feature_title {
    width: 240px;
    height: 240px;
    max-width: calc(50vw - 20px);
    max-height: calc(50vw - 20px);
    margin: 0 auto;
    font-size: 4vw;
  }
  .feature_num {
    font-size: 8vw;
  }
  .feature_text {
    text-align: center;
    font-size: 1.4rem;
  }
  .feature_img {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    border: none;
  }
}

.featureDetail {
  position: relative;
  margin-top: 40px;
  padding: 40px 0;
  border-top: 1px solid #ddd;
  text-align: left;
}
.featureDetail_title {
  width: 12em;
  font-size: 28px;
  float: left;
}
.featureDetail_num {
  margin: -5px 15px 0 0;
  display: inline-block;
  color: #ccc;
  font-family: "Oswald", sans-serif;
  font-size: 40px;
  font-weight: normal;
  vertical-align: sub;
}
.featureDetail_text {
  overflow: hidden;
  margin-top: -6px;
  font-size: 17px;
  line-height: 1.5;
}
.featureDetail_img {
  clear: both;
  margin-top: 50px;
  text-align: center;
  border: 1px solid #f5f5f5;
  padding: 10px;
}
@media screen and (max-width: 640px) {
  .featureDetail_title {
    float: none;
    font-size: 2.5rem;
  }
  .featureDetail_text {
    float: none;
    margin-top: 20px;
  }
}

.otherService {
  padding: 100px 0;
  background: #f5f5f5;
}
.otherService_text {
  margin-top: 60px;
  font-size: 2rem;
  line-height: 1.8;
}
@media screen and (max-width: 640px) {
  .otherService {
    padding: 40px 0;
  }
}

.serviceBox {
  display: flex;
  margin: 10px 0;
  padding: 30px;
  background: #FFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  text-align: left;
}
@media screen and (max-width: 640px) {
  .serviceBox {
    display: block;
    padding: 20px;
  }
}
.serviceBox_img {
  flex: 0 0 300px;
}
.serviceBox_img img {
  width: 100%;
  border: 1px solid #ddd;
  transition: all 0.5s;
}
.serviceBox_img img:hover {
  opacity: 0.8;
}
@media screen and (max-width: 640px) {
  .serviceBox_img {
    flex: none;
    margin-bottom: 20px;
  }
}
.serviceBox_content {
  flex: 1 1 auto;
  padding-left: 30px;
  line-height: 1.6;
}
@media screen and (max-width: 640px) {
  .serviceBox_content {
    flex: none;
    padding: 10px;
  }
}
.serviceBox_title {
  margin-bottom: 15px;
  font-size: 2.4rem;
}
.serviceBox_text {
  font-size: 1.5rem;
}
.serviceBox_summary {
  margin-bottom: 10px;
  font-size: 1.8rem;
  font-weight: bold;
}
.serviceBox .button-main {
  margin-top: 10px;
  display: block;
  float: right;
  text-align: center;
}
@media screen and (max-width: 640px) {
  .serviceBox .button-main {
    float: none;
    margin: 20px auto 0;
  }
}

.table-price {
  margin: 40px auto 20px;
  max-width: 1200px;
  font-size: 1.4rem;
}
.table-price_note {
  margin: 10px;
  text-align: left;
  font-size: 1.2rem;
  color: #999;
}
.table-price th, .table-price td {
  vertical-align: middle;
  line-height: 1.4;
}
.table-price thead th {
  padding: 10px;
  font-weight: normal;
}
.table-price thead th:not(:first-child) {
  width: 15%;
  background: #222;
  color: #FFF;
  min-height: 20px;
  font-size: 1.4rem;
  letter-spacing: -0.08em;
}
.table-price thead th:not(:first-child)::after {
  content: "プラン";
  white-space: nowrap;
}
.table-price thead th:nth-child(even) {
  background: #333;
}
.table-price thead th:first-child {
  text-align: right;
  background: transparent;
}
.table-price tbody th {
  padding: 15px 5px;
  background: #ddd;
  font-weight: 500;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #fff;
  font-size: 1.2rem;
  color: #555;
  line-height: 1.2;
}
.table-price tbody td {
  padding: 10px 10px;
  min-height: 20px;
  border-bottom: 1px solid #ccc;
  font-size: 1.4rem;
  color: #111;
}
.table-price tbody td:nth-child(odd) {
  background: #f4f4f4;
}
.table-price tbody td .price {
  margin: 0 3px;
  font-size: 1.8rem;
}
.table-price tbody td .note {
  font-size: 1.2rem;
}

.table-option-price {
  margin: 20px auto 40px;
  font-size: 1.4rem;
}
.table-option-price caption {
  margin-bottom: 10px;
  font-size: 7rem;
  font-family: "Montserrat", sans-serif;
  opacity: 0.1;
}
.table-option-price th, .table-option-price td {
  width: 33%;
  border: 1px solid #ccc;
  vertical-align: middle;
}
.table-option-price thead th {
  padding: 10px;
  background: #333;
  color: #fff;
  font-weight: normal;
  font-size: 1.4rem;
}
.table-option-price tbody th, .table-option-price tbody td {
  padding: 10px;
  line-height: 1.2;
}
.table-option-price tbody th {
  background: #f5f5f5;
  font-size: 1.4rem;
  font-weight: normal;
}
.table-option-price tbody td {
  font-size: 1.6rem;
}

.page.security .pageHeader {
  color: #fff;
  height: 160px;
}

.security-box {
  width: 680px;
  max-width: 96%;
  margin: 0 auto 40px;
  padding: 30px 30px 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-sizing: border-box;
}
.security-box .security-box-title {
  font-size: 2.2rem;
  margin-bottom: 30px;
  font-weight: 500;
}
.security-box p {
  margin-bottom: 1em;
  line-height: 1.8;
  font-size: 1.4rem;
  text-align: left;
}
.security-box .button-wrap {
  margin: 20px 0 10px;
  text-align: center;
}
.security-box .button-content {
  max-width: 100%;
  margin: 5px;
  text-align: center;
  font-size: 1.3rem;
}
.security-box .last-update {
  text-align: right;
  font-size: 1.2rem;
}

.effort {
  padding: 40px 8% 20px;
  margin: 0 -30px;
  border-top: 1px solid #ddd;
  text-align: left;
}
.effort_title {
  margin-bottom: 20px;
  font-size: 1.6rem;
  font-weight: 500;
}
.effort p {
  font-size: 1.3rem;
  color: #666;
}

.security_text {
  margin: 0 10px 40px;
  font-size: 1.5rem;
  line-height: 1.8;
}

/* 
 * mixin
 *
*/
/* column */
.columnBody {
  padding: 30px 10px 100px;
  display: flex;
  text-align: left;
}
.columnBody .columnList {
  flex: 0 1 100%;
  margin-right: 6%;
}
.columnBody .columnDetail {
  flex: 0 1 100%;
  margin-right: 8%;
}
.columnBody .columnDetail ul {
  list-style: disc;
  padding-left: 20px;
}
.columnBody .columnDetail ol {
  list-style: decimal;
  padding-left: 20px;
}
.columnBody .columnSidebar {
  flex: 0 0 21%;
}
@media screen and (max-width: 640px) {
  .columnBody {
    padding: 20px 15px 40px;
    display: block;
  }
  .columnBody .columnList, .columnBody .columnDetail {
    flex: none;
    width: 100%;
    margin: 0 0 100px;
  }
  .columnBody .columnSidebar {
    flex: none;
    width: 100%;
    margin: 0;
  }
}

.columnSidebar_link {
  display: block;
  position: relative;
  margin: 0 0 25px;
  padding: 13px 10px;
  background: #000;
  color: #fff;
}
.columnSidebar_link:hover, .columnSidebar_link:visited {
  color: #FFF;
}
.columnSidebar_link::after {
  content: ">";
  position: absolute;
  right: 10px;
  font-size: 1rem;
  line-height: 1.4rem;
}

.columnNav {
  margin-bottom: 20px;
}
.columnNav > li {
  position: relative;
  padding: 24px 4px;
  font-size: 1.8rem;
  font-weight: bold;
}
.columnNav > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 1px;
  background: #605d5d;
}
.columnNav ul {
  margin: 24px -4px 10px;
  border-top: 1px solid #ddd;
}
.columnNav ul > li {
  position: relative;
  padding: 12px 4px;
  border-bottom: 1px solid #ddd;
  font-weight: normal;
  font-size: 1.2rem;
  text-align: right;
  color: #999;
  transition: all 0.5s;
}
.columnNav ul > li a:hover {
  background: rgba(96, 93, 93, 0.05);
}
@media screen and (max-width: 640px) {
  .columnNav ul > li {
    padding: 15px 30px 15px 4px;
  }
}
.columnNav ul > li > ul {
  margin: 13px -4px -13px -4px;
}
.columnNav ul > li > ul li::before {
  content: "└ ";
  position: absolute;
  left: 3px;
  top: 14px;
}
.columnNav ul > li > ul a {
  padding-left: 22px;
}
.columnNav a {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  padding: 12px 30px 12px 4px;
  color: #222;
  font-size: 1.4rem;
  text-align: left;
}
@media screen and (max-width: 640px) {
  .columnNav a {
    padding: 15px 30px 15px 4px;
  }
}

.columnList_title {
  position: relative;
  margin-bottom: 40px;
  padding: 30px 0;
  font-size: 2.2rem;
}
.columnList_title::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 30px;
  height: 5px;
  background: #000;
}

.columnItem {
  margin-bottom: 20px;
  border: 1px solid #e9e9e9;
  transition: all 0.5s;
}
@media screen and (max-width: 640px) {
  .columnItem {
    margin-bottom: 10px;
  }
}
.columnItem:hover {
  border: 1px solid #ddd;
  box-shadow: 1px 1px 10px #ddd;
}
.columnItem > a {
  display: flex;
  align-items: stretch;
}
.columnItem_img {
  flex: 0 0 224px;
  width: 224px;
  min-height: 140px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  color: #ccc;
}
.columnItem_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 640px) {
  .columnItem_img {
    flex: 0 0 30%;
    width: auto;
    min-height: 100px;
  }
}
.columnItem_content {
  position: relative;
  flex: 0 1 100%;
  padding: 25px 25px 10px;
}
@media screen and (max-width: 640px) {
  .columnItem_content {
    padding: 20px 15px 10px;
  }
}
.columnItem_date {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2rem;
  color: #999;
}
@media screen and (max-width: 640px) {
  .columnItem_date {
    top: 5px;
    right: 8px;
  }
}
.columnItem_title {
  min-height: 50px;
  line-height: 1.4;
  font-size: 1.8rem;
  margin-bottom: 15px;
}
@media screen and (max-width: 640px) {
  .columnItem_title {
    min-height: 38px;
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 10px;
  }
}
.columnItem_tag, .columnItem_category {
  margin-top: 5px;
  font-size: 1.2rem;
  color: #999;
}
.columnItem_tag a, .columnItem_category a {
  color: #666;
  line-height: 1.2;
}
.columnItem_tag a:hover, .columnItem_category a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 640px) {
  .columnItem_tag, .columnItem_category {
    margin-top: 0;
  }
}

.columnSingle .pageHeader {
  height: 300px;
}
@media screen and (max-width: 640px) {
  .columnSingle .pageHeader {
    height: 100px;
  }
}

.columnFooter {
  padding: 100px 0;
  background: #f5f5f5;
}
@media screen and (max-width: 640px) {
  .columnFooter {
    padding: 60px 0;
  }
}
.columnFooter_title {
  font-size: 2rem;
  margin-bottom: 40px;
}
.columnFooter .content {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
@media screen and (max-width: 640px) {
  .columnFooter .content {
    flex-direction: column;
  }
}

.relatedItem {
  flex: 1 1 100%;
  max-width: 340px;
  margin: 0 10px;
  border: 1px solid #e9e9e9;
  transition: all 0.5s;
  background: #fff;
}
.relatedItem:hover {
  border: 1px solid #ddd;
  box-shadow: 1px 1px 10px #ddd;
}
.relatedItem:hover img {
  opacity: 0.8;
}
.relatedItem > a {
  display: block;
}
@media screen and (max-width: 640px) {
  .relatedItem {
    max-width: 100%;
    margin-bottom: 10px;
  }
  .relatedItem > a {
    display: flex;
  }
}
.relatedItem_img {
  width: 100%;
  padding-bottom: 70%;
  position: relative;
  background: #fafafa;
  display: none;
}
.relatedItem_img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s;
}
@media screen and (max-width: 640px) {
  .relatedItem_img {
    flex: 0 0 30%;
    padding-bottom: 21%;
  }
}
.relatedItem_noimg {
  position: absolute;
  top: calc(50% - 10px);
  left: 0;
  width: 100%;
  font-size: 1.8rem;
  color: #ccc;
}
.relatedItem_content {
  position: relative;
  padding: 25px 20px 15px;
  text-align: left;
}
@media screen and (max-width: 640px) {
  .relatedItem_content {
    flex: 1 1 100%;
  }
}
.relatedItem_date {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 1.2rem;
  color: #999;
}
.relatedItem_title {
  line-height: 1.4;
  font-size: 1.5rem;
}
.relatedItem_tag {
  margin-top: 15px;
  font-size: 1.3rem;
}
.relatedItem_tag a {
  color: #666;
  line-height: 1.2;
}
.relatedItem_tag a:hover {
  text-decoration: underline;
}

.columnDetail_head {
  position: relative;
  margin-bottom: 40px;
  padding: 40px 0;
  border-bottom: 1px solid #ddd;
}
.columnDetail_head::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 30px;
  height: 3px;
  background: #000;
}
.columnDetail_date {
  position: absolute;
  top: 0;
  right: 0;
}
.columnDetail_title {
  margin-bottom: 30px;
  font-size: 2.8rem;
  line-height: 1.4;
}
.columnDetail_category, .columnDetail_tag {
  margin-bottom: 10px;
  color: #999;
  font-weight: bold;
}
.columnDetail_category a, .columnDetail_tag a {
  font-weight: normal;
  color: #999;
}
.columnDetail_category a:hover, .columnDetail_tag a:hover {
  text-decoration: underline;
}
.columnDetail_img {
  width: 100%;
  margin-top: 40px;
}
.columnDetail_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.columnDetail_content {
  line-height: 1.8;
}
.columnDetail_content h1, .columnDetail_content h2 {
  position: relative;
  margin: 50px 0 20px;
  padding-top: 20px;
  font-size: 2.2rem;
}
.columnDetail_content h1::before, .columnDetail_content h2::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: #000;
}
.columnDetail_content h3 {
  margin: 50px 0 20px;
  font-size: 1.8rem;
}
.columnDetail_content h4 {
  margin: 20px 0 10px;
  font-size: 1.6rem;
}
.columnDetail_content p {
  margin-bottom: 1.5em;
}
.columnDetail_content blockquote {
  margin: 2em 0;
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 3px;
}
.columnDetail_content blockquote p:last-child {
  margin-bottom: 0;
}
.columnDetail_content a {
  text-decoration: underline;
}
.columnDetail_content a:hover {
  text-decoration: none;
}

/* 
 * mixin
 *
*/
/* Personal Information Use Agreement */
.piua {
  padding: 40px 0;
}
.piua_grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 40px;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .piua_grid {
    grid-template-columns: 1fr;
  }
}
.piua_lead {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
}
.piua_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.piua_list-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  padding-top: 40px;
  padding-bottom: 10px;
}
.piua_list-contents {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  padding-left: 30px;
}
.piua_completeArea {
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.piuaForm {
  position: sticky;
  top: 80px;
  padding: 20px;
  border-radius: 4px;
  background-color: #fff;
}
.piuaForm_list {
  margin: 0 auto;
  text-align: left;
}
.piuaForm_list dt {
  margin: 30px 0 10px;
  font-size: 1.4rem;
  color: #666;
}
@media screen and (max-width: 640px) {
  .piuaForm_list dt {
    margin: 20px 0 5px;
  }
}
.piuaForm_consent {
  margin: 20px 0 -20px;
  text-align: left;
}
@media screen and (max-width: 640px) {
  .piuaForm_consent {
    margin: 20px 0 -20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }
  .mw_wp_form_confirm .piuaForm_consent {
    border-top: none;
  }
}
.piuaForm_consent .mwform-checkbox-field label span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
}
.piuaForm_require::after {
  content: "*";
  color: #cf0e0e;
  margin-left: 10px;
}
.piuaForm_input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #f5f5f5;
  font-size: 1.4rem;
  background: #f5f5f5;
  transition: all 0.3s;
  box-sizing: border-box;
}
.piuaForm_input:hover {
  background: #fafafa;
}
.piuaForm_input:focus {
  background: #fff;
  border: 1px solid #ddd;
}
.piuaForm_input::placeholder {
  color: #ccc;
}
@media screen and (max-width: 640px) {
  .piuaForm_input {
    font-size: 1.6rem;
  }
  .mwform-tel-field .piuaForm_input {
    max-width: 80px;
  }
}
.piuaForm .mwform-checkbox-field {
  display: inline-block;
  margin-right: 10px;
  padding: 10px 5px;
  white-space: nowrap;
  font-size: 1.6rem;
}
.piuaForm_list .horizontal-item + .horizontal-item {
  margin-left: 0;
}
.piuaForm label {
  cursor: pointer;
}
.piuaForm_privacyLink {
  text-decoration: underline;
}
.piuaForm .error {
  margin: 5px 0;
  color: #cf0e0e;
}
.piuaForm .error + .form_input,
.piuaForm .error + .mwform-tel-field .form_input {
  border-color: rgba(207, 14, 14, 0.5);
  background-color: rgba(207, 14, 14, 0.03);
}
.piuaForm_button-submit {
  display: inline-block;
  width: 200px;
  padding: 10px 20px;
  background-color: #00c6ab;
  color: #fff !important;
  text-shadow: 0 0 4px rgba(1, 165, 143, 0.5);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 25px;
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  transition: 0.3s;
  cursor: pointer;
}
.piuaForm_button-submit:hover {
  background-color: #01a58f;
}
@media screen and (max-width: 640px) {
  .piuaForm_button-submit {
    width: 80%;
    font-size: 2rem;
    line-height: 50px;
  }
}
.piuaForm_button-back {
  width: 200px;
  margin: 0 20px;
  font-size: 1.5rem;
  line-height: 70px;
  cursor: pointer;
  background: #FFF;
  vertical-align: middle;
}
@media screen and (max-width: 640px) {
  .piuaForm_button-back {
    width: 100px;
    font-size: 1.5rem;
    line-height: 40px;
    margin-bottom: 50px;
  }
}
.piuaForm_footer {
  width: 100%;
  padding: 30px 0 20px 0;
}
.piuaForm_confirmMessage {
  padding: 30px 0 20px 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
}
.piuaForm_completeMessage {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
}
.mw_wp_form_complete .piuaForm_completeMessage {
  display: block;
}
.piuaForm_completeMessage p {
  margin-bottom: 20px;
}
.piuaForm_completeMessage a {
  text-decoration: underline;
}
.piuaForm_completeIcon span {
  font-size: 10rem;
  color: #00c6ab;
}

.mw_wp_form_confirm .form_list {
  border-top: 1px solid #ddd;
}
.mw_wp_form_confirm .form_list dt {
  color: #ccc;
}
.mw_wp_form_confirm .form_list dd {
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
  padding: 10px 20px 30px;
  font-size: 1.6rem;
}
.mw_wp_form_confirm .form_list .form_consent {
  text-align: left;
  margin-top: -10px;
}
.mw_wp_form_confirm    .form_privacyLink,
.mw_wp_form_confirm .form_privacyText {
  display: none;
}

@media screen and (max-width: 640px) {
  .mw_wp_form_complete {
    padding-top: 40px;
  }
}

.page.trial-form .pageHeader,
.page.trial-form-confirm .pageHeader,
.page.trial-form-complete .pageHeader {
  color: #fff;
  height: 160px;
}
.page.trial-form .trial-text,
.page.trial-form-confirm .trial-text,
.page.trial-form-complete .trial-text {
  margin-bottom: 60px;
  font-size: 2rem;
  line-height: 2;
}
.page.trial-form .form,
.page.trial-form-confirm .form,
.page.trial-form-complete .form {
  padding: 0 10px 40px;
}
.page.trial-form .mw_wp_form_confirm .trial-text,
.page.trial-form .mw_wp_form_complete .trial-text,
.page.trial-form-confirm .mw_wp_form_confirm .trial-text,
.page.trial-form-confirm .mw_wp_form_complete .trial-text,
.page.trial-form-complete .mw_wp_form_confirm .trial-text,
.page.trial-form-complete .mw_wp_form_complete .trial-text {
  display: none;
}
.page.trial-form input[value=個人情報の取り扱い及び利用規約に同意する],
.page.trial-form-confirm input[value=個人情報の取り扱い及び利用規約に同意する],
.page.trial-form-complete input[value=個人情報の取り扱い及び利用規約に同意する] {
  margin-rihgt: -5px;
}
.page.trial-form input[value=個人情報の取り扱い及び利用規約に同意する] + .mwform-checkbox-field-text,
.page.trial-form-confirm input[value=個人情報の取り扱い及び利用規約に同意する] + .mwform-checkbox-field-text,
.page.trial-form-complete input[value=個人情報の取り扱い及び利用規約に同意する] + .mwform-checkbox-field-text {
  display: none;
}
@media screen and (max-width: 640px) {
  .page.trial-form .trial-text,
  .page.trial-form-confirm .trial-text,
  .page.trial-form-complete .trial-text {
    font-size: 1.5rem;
    margin-bottom: 40px;
    line-height: 1.6;
  }
}

/* 
 * mixin
 *
*/
.ctaContact {
  width: 100%;
  background-color: #f7f7f7;
  padding: 100px 0 100px 0;
}
@media screen and (max-width: 640px) {
  .ctaContact {
    padding: 60px 0 40px 0;
  }
}
.ctaContact__grid {
  display: grid;
  grid-template-columns: 300px 1fr 1fr;
  gap: 30px;
}
@media screen and (max-width: 999px) {
  .ctaContact__grid {
    grid-template-columns: 0px 1fr 1fr;
  }
}
@media screen and (max-width: 640px) {
  .ctaContact__grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}
@media screen and (max-width: 640px) {
  .ctaContact__grid-emp {
    display: none;
  }
}
.ctaContact__grid-ctaArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 20px;
}
.ctaContact__ttl {
  font-size: 3rem;
  font-weight: 600;
  text-align: left;
  margin-bottom: 20px;
}
.ctaContact__text {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
  margin-bottom: 40px;
}
.ctaContact__btArea {
  width: 100%;
  text-align: center;
}
.ctaContact .bt22_strong {
  display: inline-block;
}
.ctaContact .bt22_standard {
  width: 100%;
}

/* 
 * mixin
 *
*/
@keyframes spMenusAnime {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
.header22 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: #181818;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 45px;
  z-index: 300;
}
@media screen and (max-width: 768px) {
  .header22 {
    padding: 0 24px;
  }
}
.header22_logo {
  min-width: 162px;
  text-align: left;
  margin-right: 60px;
  z-index: 1000;
}
.header22_logo-pc {
  display: none;
  width: 162px;
  height: 30px;
}
@media screen and (max-width: 1200px) {
  .header22_logo-pc {
    height: 30px;
  }
}
.header22_logo-pc.active {
  display: block;
}
.header22_logo-sp {
  text-align: left;
  margin-right: 60px;
  height: 30px;
  display: none;
}
@media screen and (max-width: 1200px) {
  .header22_logo-sp {
    height: 30px;
  }
}
.header22_logo-sp.active {
  display: block;
}
.header22_globalMenu {
  flex-grow: 1;
  flex: 1;
}
@media screen and (max-width: 1200px) {
  .header22_globalMenu {
    display: none;
  }
}
.header22_globalMenu > ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  z-index: 200;
}
.header22_globalMenu > ul > li {
  margin-right: 15px;
}
@media screen and (max-width: 1449px) {
  .header22_globalMenu > ul > li {
    margin-right: 10px;
  }
}
.header22_globalMenu > ul > li.current-menu-item > a {
  color: #00c6ab;
}
.header22_globalMenu > ul > li > a {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 64px;
  letter-spacing: 0.2rem;
  color: #fff;
  white-space: nowrap;
  transition: 0.3s;
  text-align: left;
  padding: 0 10px;
}
@media screen and (max-width: 1311px) {
  .header22_globalMenu > ul > li > a {
    letter-spacing: 0.05rem;
  }
}
.header22_globalMenu > ul > li > a:hover {
  color: #00c6ab;
}
.header22_globalMenu > ul > li.pcMultiLevel:hover > .subMenu_base {
  opacity: 1;
  visibility: visible;
}
.header22_globalMenu > ul > li.pcMultiLevel > a {
  display: inline-block;
  position: relative;
  padding-right: 20px;
}
.header22_globalMenu > ul > li.pcMultiLevel > a::after {
  position: absolute;
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%227.41%22%20viewBox%3D%220%200%2012%207.41%22%3E%3Cpath%20d%3D%22M16.59%2C8.59%2C12%2C13.17%2C7.41%2C8.59%2C6%2C10l6%2C6%2C6-6Z%22%20transform%3D%22translate(-6%20-8.59)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: 0;
  width: 9.7px;
  height: 6px;
  margin-top: -3px;
  transition: 0.3s;
}
.header22_globalMenu > ul > li.pcMultiLevel.mmActive > a {
  color: #00c6ab;
}
.header22_globalMenu > ul > li.pcMultiLevel.mmActive > a::after {
  transform: rotate(-180deg);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%227.41%22%20viewBox%3D%220%200%2012%207.41%22%3E%3Cpath%20d%3D%22M16.59%2C8.59%2C12%2C13.17%2C7.41%2C8.59%2C6%2C10l6%2C6%2C6-6Z%22%20transform%3D%22translate(-6%20-8.59)%22%20fill%3D%22%2300C6AB%22%2F%3E%3C%2Fsvg%3E");
}
.header22_globalMenu > ul > li.pcMultiLevel.mmActive .subMenu_base {
  opacity: 1;
  visibility: visible;
}
.header22_globalMenu > ul > li .subMenu_base {
  opacity: 0;
  visibility: hidden;
  width: 100%;
  position: absolute;
  top: 64px;
  left: 0;
  background-color: #181818;
  transition: 0.3s;
}
.header22_globalMenu > ul > li .subMenu_inner {
  max-width: 1312px;
  height: 100%;
  margin: 0 auto;
  padding: 45px;
}
.header22_globalMenu > ul > li .subMenu_3c {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.header22_globalMenu > ul > li .subMenu_3c-ttlArea {
  width: 320px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 40px;
  border-right: 1px solid #333333;
}
.header22_globalMenu > ul > li .subMenu_3c-ttlArea .ttl {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2;
  text-align: left;
  color: #fff;
  margin-bottom: 20px;
}
.header22_globalMenu > ul > li .subMenu_3c-ttlArea .textArea {
  flex-grow: 1;
}
.header22_globalMenu > ul > li .subMenu_3c-ttlArea .text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  text-align: left;
  color: #fff;
}
.header22_globalMenu > ul > li .subMenu_3c-ttlArea .btArea {
  width: 100%;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea {
  height: 100%;
  flex-grow: 1;
  padding: 10px 0 10px 40px;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea--2c, .header22_globalMenu > ul > li .subMenu_3c-btArea--column {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea--2c .btTtl, .header22_globalMenu > ul > li .subMenu_3c-btArea--column .btTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: left;
  color: #aaaaaa;
  margin-bottom: 5px;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea--2c > ul, .header22_globalMenu > ul > li .subMenu_3c-btArea--column > ul {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea--2c > ul > li, .header22_globalMenu > ul > li .subMenu_3c-btArea--column > ul > li {
  position: relative;
  text-align: left;
  padding-bottom: 16px;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea--2c > ul > li > ul > li, .header22_globalMenu > ul > li .subMenu_3c-btArea--column > ul > li > ul > li {
  padding-bottom: 16px;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea--2c > ul > li > ul > li > a, .header22_globalMenu > ul > li .subMenu_3c-btArea--column > ul > li > ul > li > a {
  font-family: "Noto Sans JP", sans-serif;
  display: block;
  position: relative;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2;
  color: #fff;
  padding-left: 40px;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea--2c > ul > li > ul > li > a:hover, .header22_globalMenu > ul > li .subMenu_3c-btArea--column > ul > li > ul > li > a:hover {
  color: #00c6ab;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea--2c > ul.mmActive, .header22_globalMenu > ul > li .subMenu_3c-btArea--column > ul.mmActive {
  overflow: hidden;
}
.header22_globalMenu > ul > li .subMenu_3c-btArea--column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
}
.header22_globalMenu > ul > li .subMenu_3c-topicsArea {
  height: 100%;
  padding: 10px 0;
}
.header22_globalMenu > ul > li .megamenuTopics {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 20px;
  height: 100%;
  padding-left: 40px;
  padding-right: 40px;
}
.header22_globalMenu > ul > li .topicsCard {
  width: 200px;
  height: 100%;
  font-size: 1.4rem;
  color: #fff;
  align-self: stretch;
}
.header22_globalMenu > ul > li .topicsCard .setup {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #333333;
  padding-bottom: 10px;
  transition: 0.3s;
}
.header22_globalMenu > ul > li .topicsCard .setup:hover {
  background-color: #555;
}
.header22_globalMenu > ul > li .topicsCard .setup:hover .imgArea img {
  transform: scale(1.1);
}
.header22_globalMenu > ul > li .topicsCard .imgArea {
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.header22_globalMenu > ul > li .topicsCard .imgArea img {
  width: 100%;
  transition: 0.3s;
}
.header22_globalMenu > ul > li .topicsCard .textArea {
  width: 100%;
  padding: 20px 12px 10px 12px;
  flex-grow: 1;
}
.header22_globalMenu > ul > li .topicsCard .textArea .ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2;
  text-align: left;
  color: #fff;
}
.header22_globalMenu > ul > li .topicsCard .link {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 2;
  text-align: left;
  color: #00c6ab;
  padding: 0 12px;
}
.header22_globalMenu > ul > li .topicsList {
  width: 400px;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.header22_globalMenu > ul > li .topicsList_ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}
.header22_globalMenu > ul > li .topicsList_ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: left;
  color: #aaaaaa;
  margin-bottom: 15px !important;
}
.header22_globalMenu > ul > li .topicsList_li {
  width: 100%;
}
.header22_globalMenu > ul > li .topicsList_li:not(:last-of-type) {
  margin-bottom: 10px;
}
.header22_globalMenu > ul > li .topicsList_linkArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  width: 100%;
  border-radius: 0px 4px 4px 0px;
  transition: 0.3s;
}
.header22_globalMenu > ul > li .topicsList_linkArea:hover {
  background-color: #333333;
}
.header22_globalMenu > ul > li .topicsList_linkArea .imgArea {
  flex: 140px;
  height: 70px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}
.header22_globalMenu > ul > li .topicsList_linkArea .textArea {
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 10px;
}
.header22_globalMenu > ul > li .topicsList_linkArea .textArea p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: left;
  color: #fff;
}
.header22_globalMenu > ul > li .topicsList_newsLinkArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  width: 100%;
  border-radius: 0px 4px 4px 0px;
  transition: 0.3s;
}
.header22_globalMenu > ul > li .topicsList_newsLinkArea:hover {
  background-color: #333333;
}
.header22_globalMenu > ul > li .topicsList_newsLinkArea .imgArea {
  flex: 140px;
  height: 70px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
}
.header22_globalMenu > ul > li .topicsList_newsLinkArea .textArea {
  flex-grow: 1;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 10px;
}
.header22_globalMenu > ul > li .topicsList_newsLinkArea .textArea p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  text-align: left;
  color: #fff;
}
.header22_globalMenu > ul > li .topicsList_newsLinkArea .dateArea {
  width: 100px;
}
.header22_globalMenu > ul > li .topicsList_newsLinkArea .dateArea p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #666666;
}
.header22_blackBg {
  position: fixed;
  top: 64px;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  cursor: pointer;
  z-index: -1;
}
.header22_blackBg.is-open {
  opacity: 1;
  visibility: visible;
}
.header22 .gmenu_product-hexabase > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-com22-hexa.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-price > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/12/icon-price.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-freetrial > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-freetrial.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-devguide > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-dev.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-comunity > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-comunity.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-biztpl > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-biztpl.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-api > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-about22-db.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-strage > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-about22-strage.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-code > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-about22-code.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-notice > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-about22-notification.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-certification > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-about22-certification.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-enterprise > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-about22-enterprise.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-devguide > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-dev.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-apiguide > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-api.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-samplecode > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-code.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-faq > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/08/icon-doc22-faq.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-comunity > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-comunity.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-column > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-column.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-interview > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/07/icon-interview.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_usecase-casestudy > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-usecase.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_usecase-partner > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-partner.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_usecase-sampleapp > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-sampleapp.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_usecase-businessapp > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-usecase.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_service-newbusiness > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/05/icon-newbusiness.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_service-top > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/12/icon-service.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_com-overview > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-company-profile.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_com-recruit > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-com22-recruit.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_com-press > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-pressrelease.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_com-security > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-com22-sec.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_com-pap > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/11/icon-com22-assessment.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_com-wpir > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-wpir.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_com-quality > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/05/icon-quality.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_com-news > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/05/icon-news.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_com-magazine > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/09/icon-magazine.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
@media screen and (max-width: 1200px) {
  .header22_globalSubMenu {
    display: none;
  }
}
.header22_globalSubMenu ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.header22_globalSubMenu-contact a {
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
  font-size: 1.4rem;
  line-height: 60px;
  letter-spacing: 0.2rem;
  margin-right: 20px;
  white-space: nowrap;
  transition: 0.3s;
}
@media screen and (max-width: 1311px) {
  .header22_globalSubMenu-contact a {
    letter-spacing: 0.05rem;
  }
}
.header22_globalSubMenu-contact a:hover {
  color: #00c6ab;
}
.header22_globalSubMenu-login a {
  font-family: "Noto Sans JP", sans-serif;
  color: #00c6ab;
  border: 1px solid #00c6ab;
  border-radius: 4px;
  font-size: 1.4rem;
  line-height: 40px;
  letter-spacing: 0.2rem;
  padding: 8px 20px;
  margin-right: 20px;
  white-space: nowrap;
  transition: 0.2s;
}
@media screen and (max-width: 1449px) {
  .header22_globalSubMenu-login a {
    font-size: 1.2rem;
    line-height: 40px;
    padding: 8px 10px;
    margin-right: 12px;
  }
}
.header22_globalSubMenu-login a:hover {
  background-color: #00c6ab;
  color: #fff;
  transition: 0.2s;
}
.header22_globalSubMenu-start a {
  font-family: "Noto Sans JP", sans-serif;
  color: #fff;
  border-radius: 4px;
  border: 1px solid #e91e63;
  background-color: #e91e63;
  font-size: 1.4rem;
  line-height: 40px;
  letter-spacing: 0.2rem;
  padding: 8px 20px;
  white-space: nowrap;
  transition: 0.2s;
}
@media screen and (max-width: 1449px) {
  .header22_globalSubMenu-start a {
    font-size: 1.2rem;
    line-height: 40px;
    padding: 8px 10px;
  }
}
.header22_globalSubMenu-start a:hover {
  background-color: #c2185b;
  border: 1px solid #c2185b;
  transition: 0.2s;
}
.header22_toggle {
  display: inline-block;
  visibility: hidden;
  z-index: 1000;
}
@media screen and (max-width: 1200px) {
  .header22_toggle {
    visibility: visible;
    display: block;
    position: fixed;
    width: 64px;
    height: 64px;
    top: 0;
    right: 0;
    cursor: pointer;
  }
}
.header22_toggle span {
  position: absolute;
  height: 3px;
  width: 24px;
  background: #fff;
  top: 50%;
  left: 50%;
}
.header22_toggle span:nth-of-type(1) {
  transform: translate(-50%, -6px);
  transition: 0.3s;
}
.header22_toggle span:nth-of-type(2) {
  transform: translate(-50%, 6px);
  transition: 0.3s;
}
.header22_toggle.active span:nth-of-type(1) {
  transform: translate(-50%, 0);
  background: #000;
}
.header22_toggle.active span:nth-of-type(2) {
  transform: translate(-50%, 0);
  background: #000;
}
.header22_spMenu {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #f7f7f7;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 64px;
  padding-bottom: 50px;
}
.header22_spMenu.active {
  animation: spMenusAnime ease-out 1s backwards;
  opacity: 1;
  visibility: visible;
}
.header22_spMenu-bg {
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  transition: 0.3s;
  z-index: -1;
}
.header22_spMenu-bg.active {
  height: 100vh;
}
.header22_spMenu > ul {
  width: 100%;
  padding: 30px 45px;
  background-color: #fff;
}
.header22_spMenu > ul > li {
  text-align: left;
}
.header22_spMenu > ul > li:not(:last-of-type) {
  margin-bottom: 30px;
}
.header22_spMenu > ul > li > a {
  display: block;
  height: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #000;
}
.header22_spMenu > ul > li.multiLevel > a {
  position: relative;
}
.header22_spMenu > ul > li.multiLevel > a::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-down.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: 0;
  width: 16px;
  height: 9.8px;
  margin-top: -4.9px;
  transition: 0.3s;
}
.header22_spMenu > ul > li.multiLevel > a.active::after {
  transform: rotate(-180deg);
}
.header22_spMenu > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: 0.3s;
}
.header22_spMenu > ul > li > ul > li {
  position: relative;
  padding: 0 30px;
  text-align: left;
}
.header22_spMenu > ul > li > ul > li:last-of-type {
  margin-bottom: 30px;
}
.header22_spMenu > ul > li > ul > li::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 10px;
  width: 10px;
  height: 1px;
  color: #000;
  background-color: #000;
}
.header22_spMenu > ul > li > ul > li > a {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 3;
}
.header22_spMenu > ul > li > ul.active {
  opacity: 1;
  visibility: visible;
  margin-top: 30px;
  height: auto;
  overflow: hidden;
}
.header22_spSubMenuArea {
  width: 100%;
  flex-grow: 1;
  background-color: #f7f7f7;
  padding: 30px 45px 45px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.header22_spSubMenu {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.header22_spSubMenu li {
  width: 50%;
}
.header22_spSubMenu li a {
  width: 100%;
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.4rem;
  padding: 15px 20px;
  border-radius: 4px;
}
.header22_spSubMenu .spSubLogin {
  margin-right: 20px;
}
.header22_spSubMenu .spSubLogin a {
  color: #000;
  border: 1px solid #000;
  background-color: #fff;
}
.header22_spSubMenu .spSubContact a {
  color: #fff;
  border: 1px solid #00c6ab;
  background-color: #00c6ab;
}
.header22_spCtaArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.header22 .gmenu_service-ai-dev > a::before {
  position: absolute;
  content: "";
  background-image: url("/2025/07/icon/icon-app-modeler.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_service-ai-feature > a {
  position: relative;
  padding-left: 40px;
}
.header22 .gmenu_service-ai-feature > a::before {
  position: absolute;
  content: "";
  background-image: url("/2025/07/icon/icon_ai.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_service-ai-training > a {
  position: relative;
  padding-left: 40px;
}
.header22 .gmenu_service-ai-training > a::before {
  position: absolute;
  content: "";
  background-image: url("/2025/07/icon/icon_engineer.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-ai-modeler > a::before {
  position: absolute;
  content: "";
  background-image: url("/2025/02/app-modeler/icon-app-modeler.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-container > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-about22-deploy.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-hexabase > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-com22-hexa.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-templates > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/01/icon-biztpl.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_product-price > a::before {
  position: absolute;
  content: "";
  background-image: url("/2023/12/icon-price.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-devguide > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-dev.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-comunity > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-comunity.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}
.header22 .gmenu_dev-apiguide > a::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-api.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 28px;
  height: 28px;
}

html.is-fixed,
html.is-fixed body {
  position: fixed;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  html.is-fixed,
  html.is-fixed body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* 
 * mixin
 *
*/
.header24Shizugin {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  z-index: 100;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .header24Shizugin {
    padding: 0 8px;
  }
}
.header24Shizugin_logos {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
}
@media screen and (max-width: 768px) {
  .header24Shizugin_logos {
    width: 100%;
    padding: 10px 8px;
    margin: 0 auto;
  }
}
.header24Shizugin_logos_shizugin_logo-pc {
  height: 40px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .header24Shizugin_logos_shizugin_logo-pc {
    height: auto;
    width: 50%;
  }
}
.header24Shizugin_logos_cross_logo-pc {
  max-width: 39px;
  height: 32px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .header24Shizugin_logos_cross_logo-pc {
    height: 18px;
  }
}
.header24Shizugin_logos_hexabase_logo-pc {
  height: 32px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .header24Shizugin_logos_hexabase_logo-pc {
    height: auto;
    width: 30%;
  }
}

html.is-fixed,
html.is-fixed body {
  position: fixed;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  html.is-fixed,
  html.is-fixed body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* 
 * mixin
 *
*/
.footer22 {
  width: 100%;
  background-color: #181818;
}
.footer22_area {
  display: block;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 45px 0;
}
@media screen and (max-width: 768px) {
  .footer22_area {
    flex-direction: column;
  }
}
.footer22_logoArea {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .footer22_logoArea {
    flex-direction: initial;
    margin-bottom: 45px;
  }
}
.footer22_logoArea-bt {
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .footer22_logoArea-bt {
    margin-bottom: 0;
  }
}
.footer22_logoArea-bt img {
  width: 164px;
  height: 30px;
}
@media screen and (max-width: 768px) {
  .footer22_logoArea-bt img {
    width: 136px;
    height: 25px;
  }
}
.footer22_snsArea {
  width: 160px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .footer22_snsArea {
    padding-left: 20px;
  }
}
.footer22_snsArea a {
  opacity: 1;
  transition: 0.1s;
}
.footer22_snsArea a:hover {
  opacity: 0.5;
}
.footer22_menuArea {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .footer22_menuArea {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 45px;
    border-top: 1px solid #333333;
  }
}
.footer22_menuBox {
  flex-grow: 1;
}
@media screen and (max-width: 768px) {
  .footer22_menuBox {
    width: calc(50% - 45px);
  }
}
.footer22_menuBox:not(:last-of-type) {
  margin-right: 45px;
}
@media screen and (max-width: 768px) {
  .footer22_menuBox:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 768px) {
  .footer22_menuBox:not(:nth-of-type(2n-1)) {
    margin-left: 10px;
  }
}
.footer22_menuBox-catTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  color: #bbb;
  text-align: left;
  margin-bottom: 20px;
}
.footer22_menuBox-list {
  text-align: left;
}
.footer22_menuBox-list li a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  color: #fff;
  transition: 0.3s;
}
.footer22_menuBox-list li a:hover {
  color: #00c6ab;
}
.footer22_menuBox-list li:not(:last-of-type) {
  margin-bottom: 14px;
}
.footer22_copyArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 45px 0;
  border-top: 1px solid #333333;
}
@media screen and (max-width: 768px) {
  .footer22_copyArea {
    flex-direction: column;
  }
}
.footer22_copyArea-copy {
  flex-grow: 1;
}
@media screen and (max-width: 768px) {
  .footer22_copyArea-copy {
    order: 4;
    align-self: flex-start;
  }
}
.footer22_copyArea-copy p {
  font-family: "Montserrat", sans-serif;
  text-align: left;
  font-size: 1.2rem;
  color: #bbb;
}
.footer22_copyArea-policy {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .footer22_copyArea-policy {
    width: 100%;
    order: 1;
    flex-wrap: wrap;
    margin-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .footer22_copyArea-policy li {
    margin-bottom: 15px;
  }
}
.footer22_copyArea-policy li:not(:last-of-type) {
  margin-right: 20px;
}
.footer22_copyArea-policy li a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  color: #fff;
  transition: 0.3s;
}
.footer22_copyArea-policy li a:hover {
  color: #00c6ab;
}
.footer22_markArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
}
@media screen and (max-width: 768px) {
  .footer22_markArea {
    order: 3;
    margin-left: 0;
    margin-bottom: 20px;
    align-self: flex-start;
  }
}
.footer22_markArea img {
  height: 49px;
}

/* 
 * mixin
 *
*/
.footer24Shizugin {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  z-index: 100;
  background: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .footer24Shizugin {
    padding: 0 24px;
  }
}
.footer24Shizugin_logos {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
}
@media screen and (max-width: 768px) {
  .footer24Shizugin_logos {
    width: 100%;
    padding: 10px 8px;
    margin: 0 auto;
  }
}
.footer24Shizugin_logos_shizugin_logo-pc {
  height: 40px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .footer24Shizugin_logos_shizugin_logo-pc {
    height: auto;
    width: 50%;
  }
}
.footer24Shizugin_logos_cross_logo-pc {
  max-width: 39px;
  height: 32px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .footer24Shizugin_logos_cross_logo-pc {
    height: 18px;
  }
}
.footer24Shizugin_logos_hexabase_logo-pc {
  height: 32px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .footer24Shizugin_logos_hexabase_logo-pc {
    height: auto;
    width: 30%;
  }
}

html.is-fixed,
html.is-fixed body {
  position: fixed;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 768px) {
  html.is-fixed,
  html.is-fixed body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
}

/* 
 * mixin
 *
*/
main {
  display: block;
  position: relative;
  padding-top: 64px;
  overflow: inherit !important;
}

/* 
 * mixin
 *
*/
main.main24Shizugin {
  width: 100%;
  display: inline-block;
  position: relative;
  padding-top: 80px;
  overflow: inherit !important;
}

/* styles/atom-one-dark.css */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background-color: #000 !important; /* Change background color */
  color: #abb2bf;
  border-radius: 8px;
  max-width: 100%;
}

.hljs-comment,
.hljs-quote {
  color: #5c6370;
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #dd78a0;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr,
.hljs-tag .hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #d19a66;
}

.hljs-string,
.hljs-doctag,
.hljs-regexp,
.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: #98c379;
}

.hljs-deletion,
.hljs-meta {
  color: #e06c75;
}

.hljs-addition,
.hljs-attribute {
  color: #56b6c2;
}

.hljs-built_in,
.hljs-builtin-name {
  color: #e6c07b;
}

.hljs-section {
  color: #61afef;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/* 
 * mixin
 *
*/
.bt22_standard {
  display: inline-block;
  padding: 20px 25px;
  background-color: #00c6ab;
  color: #fff !important;
  text-shadow: 0 0 4px rgba(1, 165, 143, 0.5);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  transition: 0.2s;
}
.bt22_standard:hover {
  background-color: #01a58f;
}
.bt22_slim {
  display: inline-block;
  width: 100%;
  padding: 15px 25px;
  background-color: #00c6ab;
  color: #fff !important;
  text-shadow: 0 0 4px rgba(1, 165, 143, 0.5);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  font-weight: 600;
  transition: 0.3s;
}
.bt22_slim:hover {
  background-color: #01a58f;
}
.bt22_strong {
  display: block;
  width: 100%;
  padding: 20px 25px;
  background-color: #e91e63;
  color: #fff !important;
  text-shadow: 0 0 4px rgba(221, 45, 93, 0.5);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  transition: 0.2s;
}
.bt22_strong:hover {
  background-color: #c2185b;
}
.bt22_text {
  display: inline-block;
  position: relative;
  padding: 10px;
  color: #00c6ab !important;
  text-shadow: 0 0 4px rgba(1, 165, 143, 0.5);
  font-size: 1.2rem;
  transition: 0.2s;
}
.bt22_text::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: -10px;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}
.bt22_text:hover::after {
  right: -15px;
}
.bt22_textBgWhite {
  display: inline-block;
  position: relative;
  color: #00c6ab !important;
  font-size: 1.2rem;
  padding-right: 20px;
  margin-top: 20px;
  transition: 0.2s;
}
.bt22_textBgWhite::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: -10px;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}
.bt22_textBgWhite:hover::after {
  right: -15px;
}
.bt22_long {
  display: block;
  position: relative;
  padding: 10px 60px 10px 10px;
  color: #00c6ab !important;
  font-size: 1.2rem;
  transition: 0.2s;
}
.bt22_long::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: -10px;
  margin-top: -11px;
  width: 60px;
  height: 22px;
  transition: 0.3s;
}
.bt22_long:hover::after {
  right: -15px;
}
.bt22_border {
  display: block;
  position: relative;
  padding: 12px 10px;
  color: #00c6ab !important;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  border: 1px solid #00c6ab;
  border-radius: 20px;
  transition: 0.2s;
}
.bt22_border::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  width: 40px;
  height: 14px;
  transition: 0.3s;
}
.bt22_border:hover::after {
  right: 5px;
}

/* 
 * mixin
 *
*/
.shadow22_black {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.shadow22_black-strong {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}
.shadow22_black-left {
  box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.3);
}
.shadow22_black-bottom {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 
 * mixin
 *
*/
.container22 {
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 48px;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .container22 {
    padding: 0 24px;
  }
}

/* 
 * mixin
 *
*/
.new_code22 {
  position: absolute;
  padding: 8px 16px;
  background-color: #e91e63;
  color: #fff;
  font-size: 1.2rem;
  top: 0;
  right: 0;
  z-index: 10;
}

/* 
 * mixin
 *
*/
@media screen and (max-width: 768px) {
  .hide-in-sp {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .hide-in-pc {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .br-pc {
    display: block;
  }
  .br-sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .br-pc {
    display: none;
  }
  .br-sp {
    display: block;
  }
}
/* 
 * mixin
 *
*/
.text_strong {
  font-weight: 600;
}
.text_color-main {
  color: #00c6ab;
}

/* 
 * mixin
 *
*/
.ttl_large {
  height: 563px;
  background-color: #f7f7f7;
}
.ttl_large .container22 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ttl_largeProduct {
  padding: 128px 0;
  background-color: #181818;
}
@media screen and (max-width: 768px) {
  .ttl_largeProduct {
    padding: 128px 0 32px 0;
  }
}
.ttl_largeProduct .container22 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.ttl_largeProduct-ttlArea {
  z-index: 1;
}
.ttl_largeProduct-ttlWhite {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #f7f7f7;
  margin-top: 60px;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .ttl_largeProduct-ttlWhite {
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
}
.ttl_largeProduct-textWhite {
  width: 50%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #f7f7f7;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .ttl_largeProduct-textWhite {
    width: 100%;
  }
}
.ttl_largeEnterprise {
  position: relative;
  height: 563px;
  background: linear-gradient(-135deg, #006356, #00c6ab);
  background-repeat: no-repeat;
  background-position: 0;
  background-size: contain;
  overflow: hidden;
}
.ttl_largeEnterprise::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/product-enterprise-deco.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  right: -150px;
  width: 1054px;
  height: 563px;
}
@media screen and (max-width: 1312px) {
  .ttl_largeEnterprise::before {
    right: -300px;
  }
}
@media screen and (max-width: 1000px) {
  .ttl_largeEnterprise::before {
    right: -500px;
  }
}
@media screen and (max-width: 768px) {
  .ttl_largeEnterprise::before {
    right: -800px;
  }
}
.ttl_largeEnterprise .container22 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ttl_largeEnterprise-secTtlEn {
  font-family: "Montserrat", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.4rem;
  color: #fff;
  text-align: left;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .ttl_largeEnterprise-secTtlEn {
    font-size: 2.6rem;
  }
}
.ttl_largeEnterprise-secTtlJp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #fff;
}
.ttl_largeEnterprise-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #fff;
  margin-top: 60px;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .ttl_largeEnterprise-ttl {
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
}
.ttl_largeEnterprise-text {
  width: 60%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #fff;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .ttl_largeEnterprise-text {
    width: 100%;
  }
}
.ttl_small {
  height: 272px;
  background-color: #f7f7f7;
}
.ttl_small .container22 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.ttl_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
}
.ttl_box-secTtlEn {
  font-family: "Montserrat", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.4rem;
  color: #333333;
  text-align: left;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .ttl_box-secTtlEn {
    font-size: 2.6rem;
  }
}
.ttl_box-secTtlWhiteEn {
  font-family: "Montserrat", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.4rem;
  color: #fff;
  text-align: left;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .ttl_box-secTtlWhiteEn {
    font-size: 2.6rem;
  }
}
.ttl_box-secTtlJp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #333333;
}
.ttl_box-secTtlWhiteJp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #f7f7f7;
}
.ttl_box-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #333333;
  margin-top: 60px;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .ttl_box-ttl {
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
}
.ttl_box-ttlWhite {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #f7f7f7;
  margin-top: 60px;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .ttl_box-ttlWhite {
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
}
.ttl_box-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #333333;
  padding-bottom: 24px;
}
.ttl_box-text {
  width: 60%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #333333;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .ttl_box-text {
    width: 100%;
  }
}
.ttl_box-textWhite {
  width: 60%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #f7f7f7;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .ttl_box-textWhite {
    width: 100%;
  }
}
.ttl_secTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #333333;
  margin-bottom: 40px;
}

/* 
 * mixin
 *
*/
.column22_top2c {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .column22_top2c {
    flex-direction: column;
  }
}
.column22_text {
  flex: 50%;
}
.column22_text-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #000;
  padding-bottom: 40px;
}
.column22_text-ttl span {
  display: block;
}
.column22_text-ttlLarge {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #000;
  padding-bottom: 40px;
}
.column22_text-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.05rem;
  text-align: left;
}
.column22_text-textSmall {
  font-size: 1.2rem;
}
.column22_img {
  flex: 50%;
}
.column22_2c {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .column22_2c {
    flex-direction: column;
  }
}
.column22_2ctext {
  flex: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  padding: 60px;
  margin-bottom: 40px;
  background-color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .column22_2ctext {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .column22_2ctext:last-of-type {
    margin-bottom: 40px;
  }
}
.column22_2ctext-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #000;
}
.column22_2ctext-ttl span {
  display: block;
}
.column22_pf {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .column22_pf {
    gap: 0;
  }
}
.column22_1c {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .column22_1c {
    gap: 0;
  }
}
.column22_pfBox {
  width: calc((1312px - 136px) / 2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  padding: 60px;
  margin-bottom: 40px;
  background-color: #f7f7f7;
}
@media screen and (max-width: 1311px) {
  .column22_pfBox {
    width: calc(50% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .column22_pfBox {
    width: 100%;
    padding: 30px;
  }
}
.column22_pfBox-no {
  font-family: "Montserrat", sans-serif;
  display: block;
  flex-shrink: 1;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: left;
  color: #333333;
  padding-bottom: 10px;
}
.column22_pfBox-ttl {
  font-family: "Noto Sans JP", sans-serif;
  display: block;
  flex-shrink: 1;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #333333;
  padding-bottom: 30px;
}
.column22_pfBox-text {
  font-family: "Noto Sans JP", sans-serif;
  flex-grow: 1;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #333333;
  margin-bottom: 20px;
}
.column22_pfBox-btarea {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  text-align: left;
}
.column22_pfOne {
  display: block;
  width: 100%;
}
.column22_pfOneBox {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 60px;
  margin-bottom: 40px;
  gap: 40px;
  background-color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .column22_pfOneBox {
    flex-direction: column;
    padding: 30px;
  }
}
.column22_pfOneBox-left {
  flex: 40%;
}
.column22_pfOneBox-right {
  flex: 60%;
}
.column22_pfOneBoxColumn {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding: 60px;
  margin-bottom: 40px;
  background-color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .column22_pfOneBoxColumn {
    flex-direction: column;
    padding: 30px;
  }
}
.column22_pfOneBoxColumn-textArea {
  width: 100%;
}
.column22_pfOneBoxColumn-imgArea {
  width: 100%;
  margin-top: 40px;
  text-align: center;
}
.column22_pfOneBoxColumn-imgArea img {
  width: 80%;
}
@media screen and (max-width: 768px) {
  .column22_pfOneBoxColumn-imgArea img {
    width: 100%;
  }
}

/* 
 * mixin
 *
*/
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 20px);
}

.fade-in-down {
  transform: translate(0, -20px);
}

.fade-in-left {
  transform: translate(-20px, 0);
}

.fade-in-right {
  transform: translate(20px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes upAnimation {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate_elm {
  opacity: 0;
}
.animate_elm.animateIn {
  animation: upAnimation ease-out 1s backwards;
  animation-fill-mode: both;
}
.animate_elm.type02 {
  animation-delay: 0.4s;
}
.animate_elm.type03 {
  animation-delay: 0.8s;
}

/* 
 * mixin
 *
*/
@keyframes upAnimation {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate_elm {
  opacity: 0;
}
.animate_elm.animateIn {
  animation: upAnimation ease-out 1s backwards;
  animation-fill-mode: both;
}
.animate_elm.type02 {
  animation-delay: 0.4s;
}
.animate_elm.type03 {
  animation-delay: 0.8s;
}

/* 
 * mixin
 *
*/
.langSwitch {
  position: relative;
  width: 60px;
  padding-left: 20px;
}
@media screen and (max-width: 1199px) {
  .langSwitch {
    display: none;
  }
}
.langSwitch_langBt {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 40px;
  background-color: #181818;
  border-radius: 4px;
  padding-top: 5px;
  transition: 0.3s;
  cursor: pointer;
}
.langSwitch_langBt:hover {
  background-color: #333333;
}
.langSwitch_langBt::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-down-white.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 9.7px;
  height: 6px;
}
.langSwitch_langBt-jpText {
  font-family: "Noto Sans JP", sans-serif;
  color: #f7f7f7;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  white-space: nowrap;
}
.langSwitch_langSelect {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  content: "";
  top: 90%;
  left: 0;
  width: 100px;
  height: 50px;
  background-color: #333333;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.langSwitch_langSelect.active {
  opacity: 1;
  visibility: visible;
  top: 110%;
}
.langSwitch_langSelect-bt {
  font-family: "Montserrat", sans-serif;
  color: #f7f7f7 !important;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  white-space: nowrap;
  transition: 0.3s;
}
.langSwitch_langSelect-bt:hover {
  color: #00c6ab !important;
}

.langSwitchFlex {
  position: relative;
  margin-left: 20px;
}
@media screen and (max-width: 768px) {
  .langSwitchFlex {
    order: 2;
    width: 100%;
    text-align: left;
    margin-left: 0;
    margin-bottom: 40px;
  }
}
.langSwitchFlex_langBt {
  position: relative;
  display: inline-block;
  width: 100%;
  background-color: #181818;
  border-left: 1px solid #333;
  border-radius: 4px;
  padding: 5px;
  padding-right: 20px;
  padding-left: 40px;
  transition: 0.3s;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .langSwitchFlex_langBt {
    order: 2;
    width: 100px;
    border-left: 0;
  }
}
.langSwitchFlex_langBt:hover {
  background-color: #333333;
}
.langSwitchFlex_langBt::before {
  position: absolute;
  content: "";
  background-image: url("/2022/05/icon-lang.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
}
.langSwitchFlex_langBt::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-down-white.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  top: calc(50% - 3px);
  right: 0;
  width: 9.7px;
  height: 6px;
}
.langSwitchFlex_langBt-jpText {
  font-family: "Noto Sans JP", sans-serif;
  color: #f7f7f7;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  white-space: nowrap;
}
.langSwitchFlex_langSelect {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  content: "";
  bottom: 0;
  left: 0;
  width: 100px;
  height: 50px;
  background-color: #333333;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.langSwitchFlex_langSelect.active {
  opacity: 1;
  visibility: visible;
  bottom: 110%;
}
.langSwitchFlex_langSelect-bt {
  font-family: "Montserrat", sans-serif;
  color: #f7f7f7 !important;
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  white-space: nowrap;
  transition: 0.3s;
}
.langSwitchFlex_langSelect-bt:hover {
  color: #00c6ab !important;
}

/* 
 * mixin
 *
*/
@keyframes floatingBannerAnimation {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.floatingBt__careers {
  position: fixed;
  width: 300px;
  height: 220px;
  bottom: 40px;
  right: 40px;
  background-image: url("/2022/12/top-floating-bt-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  z-index: 2;
  opacity: 1;
  transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
  .floatingBt__careers {
    width: 260px;
    bottom: 20px;
    right: 20px;
  }
}
.floatingBt__careers.hideFloatBox {
  opacity: 0;
  visibility: hidden;
}
.floatingBt__careers.hideFloatBoxStrong {
  display: none !important;
}
.floatingBt__careers-linkArea {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.floatingBt__careers-linkArea:hover .floatingBt__careers-inner {
  width: 100%;
  height: 100%;
  padding: 35px;
  border-radius: 20px;
  background-color: #00c6ab;
}
.floatingBt__careers-linkArea:hover .bt22_text {
  color: #fff !important;
}
.floatingBt__careers-linkArea:hover .bt22_text::after {
  background-image: url("/2022/12/arrow-right-whitte.svg");
  right: -30px;
}
.floatingBt__careers-linkArea:hover .floatingBt__closeBtArea {
  opacity: 0;
}
.floatingBt__careers-inner {
  position: relative;
  width: 90%;
  height: 90%;
  padding: 20px;
  background-color: #000;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  transition: all 0.3s ease;
}
.floatingBt__careers-ttl {
  font-size: 2rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fff;
  padding-bottom: 10px;
}
.floatingBt__careers-message {
  font-size: 1.6rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  text-align: left;
  line-height: 2;
  color: #fff;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .floatingBt__careers-message {
    font-size: 1.2rem;
  }
}
.floatingBt__careers-textBtArea {
  padding-top: 10px;
}
.floatingBt__careers-textBtArea .bt22_text {
  padding: 0;
  font-size: 1.4rem;
}
.floatingBt__careers-textBtArea .bt22_text::after {
  right: -20px;
}
.floatingBt__closeBtArea {
  position: absolute;
  top: -15px;
  right: -15px;
  transition: all 0.3s;
}
.floatingBt__closeBt {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  border: 1px solid #fff;
  cursor: pointer;
  z-index: 2;
}
.floatingBt__closeBt::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background-color: #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.floatingBt__closeBt::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background-color: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.floatingBt__aiDrivenDev {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  animation: floatingBannerAnimation 0.3s;
  transition: 0.3s;
}
.floatingBt__aiDrivenDev.hideFloatBanner {
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 768px) {
  .floatingBt__aiDrivenDev {
    right: 0;
  }
}
.floatingBt__aiDrivenDev--floatingBox {
  background-image: url(/2024/07/ai-bg-dot.png);
  background-color: #000;
  background-attachment: fixed;
  background-position: 100%;
  background-repeat: repeat;
  width: 371px;
  height: 193px;
  border-radius: 20px;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 10, 0.32);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.floatingBt__aiDrivenDev--floatingBox:hover {
  transform: scale(1.05);
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 20, 0.16);
}
.floatingBt__aiDrivenDev--floatingBox:hover .material-symbols-outlined {
  color: #000;
}
.floatingBt__aiDrivenDev--floatingBox:hover .arrowCircle {
  width: 30px;
  height: 30px;
  background-color: #00c6ab;
}
.floatingBt__aiDrivenDev--floatingBox:hover .arrowCircle::before {
  width: 100%;
  height: 100%;
}
.floatingBt__aiDrivenDev--floatingBox:hover .floatingBt__aiDrivenDev--imgArea {
  width: 65%;
  margin-right: -80px;
}
.floatingBt__aiDrivenDev--title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 24px;
  font-weight: 600;
  color: #fff;
}
.floatingBt__aiDrivenDev--imgArea {
  width: 60%;
  margin-right: -70px;
}
.floatingBt__aiDrivenDev--description {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1px;
  position: absolute;
  bottom: 32px;
  left: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
}
.floatingBt__aiDrivenDev--linkArea {
  color: #00c6ab;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  position: absolute;
  bottom: 16px;
  left: 24px;
  height: 32px;
}
.floatingBt__aiDrivenDev--linkArea-label {
  font-size: 1.2rem;
  font-weight: 600;
}
.floatingBt__aiDrivenDev--linkArea .arrowCircle {
  position: relative;
  height: 24px;
  width: 24px;
  border: 2px solid #00c6ab;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
  overflow: hidden;
}
.floatingBt__aiDrivenDev--linkArea .arrowCircle::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #00c6ab;
  border-radius: 50%;
}
.floatingBt__aiDrivenDev--linkArea .material-symbols-outlined {
  font-size: 1.2rem;
  color: #00c6ab;
  z-index: 100;
}
.floatingBt__appModeler {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  animation: floatingBannerAnimation 0.3s ease-out 1.5s backwards;
  transition: opacity 0.3s ease, visibility 0s ease 1s;
}
.floatingBt__appModeler.hideFloatBanner {
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 768px) {
  .floatingBt__appModeler {
    right: 6px;
  }
}
.floatingBt__appModeler:hover {
  transform: scale(1.05);
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 20, 0.16);
}
@media screen and (max-width: 768px) {
  .floatingBt__appModeler:hover {
    transform: none;
  }
}
.floatingBt__appModeler:hover .material-symbols-outlined {
  color: #000;
}
.floatingBt__appModeler:hover .arrowCircle {
  width: 30px;
  height: 30px;
  background-color: #00c6ab;
}
.floatingBt__appModeler:hover .arrowCircle::before {
  width: 100%;
  height: 100%;
}
.floatingBt__appModeler--closeBtn {
  position: absolute;
  background: none;
  background-image: url("/2024/08/close.svg");
  border: none;
  width: 24px;
  height: 24px;
  top: -15px;
  right: -13px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .floatingBt__appModeler--closeBtn {
    right: -5px;
    top: -10px;
  }
}
.floatingBt__appModeler--floatingBanner {
  background-image: url(/2024/07/ai-bg-dot.png);
  background-color: #000;
  background-attachment: fixed;
  background-position: 100%;
  background-repeat: repeat;
  width: 365px;
  height: 300px;
  border-radius: 20px;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 10, 0.32);
  display: flex;
  overflow: hidden;
}
.floatingBt__appModeler--container {
  display: flex;
  flex-direction: column;
  padding: 24px 0;
}
.floatingBt__appModeler--linkArea {
  color: #00c6ab;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding: 24px 0 0 24px;
  height: 32px;
}
.floatingBt__appModeler--linkArea-label {
  font-size: 1.2rem;
  font-weight: 600;
}
.floatingBt__appModeler--linkArea .arrowCircle {
  position: relative;
  height: 24px;
  width: 24px;
  border: 2px solid #00c6ab;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
  overflow: hidden;
}
.floatingBt__appModeler--linkArea .arrowCircle::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #00c6ab;
  border-radius: 50%;
}
.floatingBt__appModeler--linkArea .material-symbols-outlined {
  font-size: 1.2rem;
  color: #00c6ab;
  z-index: 100;
}

/* 
 * mixin
 *
*/
.supportPlans {
  padding-top: 100px;
}
.supportPlans h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding-bottom: 30px;
  text-align: center;
}
.supportPlans .container22 > .explain {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .supportPlans .container22 > .explain {
    text-align: left;
  }
}
.supportPlans_area {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  padding: 60px 0;
}
@media screen and (max-width: 768px) {
  .supportPlans_area {
    flex-direction: column;
    padding: 60px 0 0 0;
  }
}
.supportPlans_card {
  width: 1312px-156px/4;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .supportPlans_card {
    padding-bottom: 40px;
  }
}
.supportPlans_card img {
  width: 270px;
  height: 254px;
}
.supportPlans_card > h3 {
  position: relative;
  height: 50px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 40px;
}
.supportPlans_card > h3::before {
  position: absolute;
  display: inline-block;
  font-family: "Material Symbols Outlined";
  content: "\e86c";
  top: 50%;
  left: -5px;
  transform: translateY(-50%);
  color: #FF6666;
  font-size: 36px;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 200, "opsz" 48;
  animation: pulse 3s infinite;
}
.supportPlans_card > .explain {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
}

@keyframes pulse {
  0% {
    font-variation-settings: "wght" 200;
  }
  50% {
    font-variation-settings: "wght" 500;
  }
  100% {
    font-variation-settings: "wght" 200;
  }
}
/* 
 * mixin
 *
*/
.ctaContact {
  padding: 60px 0;
  background-color: #fff;
}
.ctaContact_card {
  padding: 60px;
  width: 100%;
  background-color: #000;
  border-radius: 40px;
}
@media screen and (max-width: 768px) {
  .ctaContact_card {
    padding: 40px;
  }
}
.ctaContact_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  color: #fff;
  text-align: left;
  padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .ctaContact_text {
    font-size: 2rem;
  }
}
.ctaContact_btArea {
  width: 100%;
  text-align: left;
}
.ctaContact_btArea .bt22_standard {
  width: 300px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .ctaContact_btArea .bt22_standard {
    width: 100%;
  }
}

/* 
 * mixin
 *
*/
/* 
 * mixin
 *
*/
.topLinkBt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.topLinkBt:hover .topLinkBt_ttl {
  opacity: 0.6;
}
.topLinkBt:hover .topLinkBt_arrow {
  transform: scale(1.1);
  border: 1px solid #fff;
}
.topLinkBt:hover .topLinkBt_arrow span {
  color: #fff;
}
.topLinkBt:hover .topLinkBt_arrow::before {
  width: 100%;
  height: 100%;
}
.topLinkBt_ttl {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-right: 20px;
  transition: 0.3s;
}
.topLinkBt_arrow {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #fff;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.topLinkBt_arrow::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #00c6ab;
  border-radius: 50%;
  transition: 0.5s;
}
.topLinkBt_arrow span {
  color: #00c6ab;
  z-index: 1;
  transition: 0.3s;
}

.bt__static {
  display: block;
  margin: 0 auto;
  padding: 14px 40px;
  background-color: #000;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 0.05rem;
  font-weight: 400;
  color: #fff;
  transition: 0.3s;
}

.bt__static:hover {
  background-color: #666;
}

.bt__static:active,
.bt__static:visited {
  color: #fff;
}

.addtoany_content {
  clear: both;
  margin: 16px auto;
}

.addtoany_header {
  margin: 0 0 16px;
}

.addtoany_list {
  display: inline;
  line-height: 16px;
}

.addtoany_list a,
.widget .addtoany_list a {
  border: 0;
  box-shadow: none;
  display: inline-block;
  font-size: 16px;
  padding: 0 4px;
  vertical-align: middle;
}

.addtoany_list a img {
  border: 0;
  display: inline-block;
  opacity: 1;
  overflow: hidden;
  vertical-align: baseline;
}

.addtoany_list a span {
  display: inline-block;
  float: none;
}

.addtoany_list.a2a_kit_size_32 a {
  font-size: 32px;
}

.addtoany_list.a2a_kit_size_32 a:not(.addtoany_special_service) > span {
  height: 32px;
  line-height: 32px;
  width: 32px;
}

.addtoany_list a:not(.addtoany_special_service) > span {
  border-radius: 4px;
  display: inline-block;
  opacity: 1;
}

.addtoany_list a .a2a_count {
  position: relative;
  vertical-align: top;
}

.site .a2a_kit.addtoany_list a:focus,
.addtoany_list a:hover,
.widget .addtoany_list a:hover {
  background: none;
  border: 0;
  box-shadow: none;
}

.addtoany_list a:hover img,
.addtoany_list a:hover span {
  opacity: 0.7;
}

.addtoany_list a.addtoany_special_service:hover img,
.addtoany_list a.addtoany_special_service:hover span {
  opacity: 1;
}

.addtoany_special_service {
  display: inline-block;
  vertical-align: middle;
}

.addtoany_special_service a,
.addtoany_special_service div,
.addtoany_special_service div.fb_iframe_widget,
.addtoany_special_service iframe,
.addtoany_special_service span {
  margin: 0;
  vertical-align: baseline !important;
}

.addtoany_special_service iframe {
  display: inline;
  max-width: none;
}

a.addtoany_share.addtoany_no_icon span.a2a_img_text {
  display: none;
}

a.addtoany_share img {
  border: 0;
  width: auto;
  height: auto;
}

.a2a_hide {
  display: none;
}

.a2a_logo_color {
  background-color: #0166ff;
}

.a2a_menu,
.a2a_menu * {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  float: none;
  margin: 0;
  padding: 0;
  position: static;
  height: auto;
  width: auto;
}

.a2a_menu {
  border-radius: 6px;
  display: none;
  direction: ltr;
  background: #fff;
  font: 16px sans-serif-light, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Arial, Helvetica, "Liberation Sans", sans-serif;
  color: #000;
  line-height: 12px;
  border: 1px solid #ccc;
  vertical-align: baseline;
  overflow: hidden;
}

.a2a_mini {
  min-width: 200px;
  position: absolute;
  width: 300px;
  z-index: 9999997;
}

.a2a_overlay {
  display: none;
  background: rgba(97, 108, 125, 0.9215686275);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999998;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.14s, backdrop-filter 0.14s;
}

.a2a_full {
  background: #fff;
  border: 1px solid #fff;
  box-shadow: rgba(42, 42, 42, 0.1019607843) 0 0 20px 10px;
  height: auto;
  height: 320px;
  top: 15%;
  left: 50%;
  margin-left: -320px;
  position: fixed;
  text-align: center;
  width: 640px;
  z-index: 9999999;
  transition: transform 0.14s, opacity 0.14s;
}

.a2a_full_footer,
.a2a_full_header,
.a2a_full_services {
  border: 0;
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
}

.a2a_full_header {
  padding-bottom: 8px;
}

.a2a_full_services {
  height: 280px;
  overflow-y: scroll;
  padding: 0 12px;
  -webkit-overflow-scrolling: touch;
}

.a2a_full_services .a2a_i {
  display: inline-block;
  float: none;
  width: 181px;
  width: calc(33.334% - 18px);
}

div.a2a_full_footer {
  font-size: 12px;
  text-align: center;
  padding: 8px 14px;
}

div.a2a_full_footer a,
div.a2a_full_footer a:visited {
  display: inline;
  font-size: 12px;
  line-height: 14px;
  padding: 8px 14px;
}

div.a2a_full_footer a:focus,
div.a2a_full_footer a:hover {
  background: 0 0;
  border: 0;
  color: #0166ff;
}

div.a2a_full_footer a span.a2a_s_a2a,
div.a2a_full_footer a span.a2a_w_a2a {
  background-size: 14px;
  border-radius: 3px;
  display: inline-block;
  height: 14px;
  line-height: 14px;
  margin: 0 3px 0 0;
  vertical-align: top;
  width: 14px;
}

.a2a_modal {
  height: 0;
  left: 50%;
  margin-left: -320px;
  position: fixed;
  text-align: center;
  top: 15%;
  width: 640px;
  z-index: 9999999;
  transition: transform 0.14s, opacity 0.14s;
  -webkit-tap-highlight-color: transparent;
}

.a2a_modal_body {
  background: 0 0;
  border: 0;
  font: 24px sans-serif-light, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Arial, Helvetica, "Liberation Sans", sans-serif;
  position: relative;
  height: auto;
  width: auto;
}

.a2a_thanks {
  color: #fff;
  height: auto;
  margin-top: 20px;
  width: auto;
}

.a2a_thanks > div:first-child {
  margin: 0 0 40px 0;
}

.a2a_thanks div * {
  height: inherit;
}

#a2a_copy_link {
  background: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  margin-top: 15%;
}

span.a2a_s_link#a2a_copy_link_icon,
span.a2a_w_link#a2a_copy_link_icon {
  background-size: 48px;
  border-radius: 0;
  display: inline-block;
  height: 48px;
  left: 0;
  line-height: 48px;
  margin: 0 3px 0 0;
  position: absolute;
  vertical-align: top;
  width: 48px;
}

#a2a_modal input#a2a_copy_link_text {
  background-color: transparent;
  border: 0;
  color: #2a2a2a;
  cursor: pointer;
  font: inherit;
  height: 48px;
  left: 62px;
  max-width: initial;
  min-height: auto;
  padding: 0;
  position: relative;
  width: 564px;
  width: calc(100% - 76px);
}

#a2a_copy_link_copied {
  background-color: #0166ff;
  color: #fff;
  display: none;
  font: inherit;
  font-size: 16px;
  margin-top: 1px;
  padding: 3px 8px;
}

@media (prefers-color-scheme: dark) {
  .a2a_menu a,
  .a2a_menu a.a2a_i,
  .a2a_menu a.a2a_i:visited,
  .a2a_menu a.a2a_more,
  i.a2a_i {
    border-color: #2a2a2a !important;
    color: #fff !important;
  }
  .a2a_menu a.a2a_i:active,
  .a2a_menu a.a2a_i:focus,
  .a2a_menu a.a2a_i:hover,
  .a2a_menu a.a2a_more:active,
  .a2a_menu a.a2a_more:focus,
  .a2a_menu a.a2a_more:hover,
  .a2a_menu_find_container {
    border-color: #444 !important;
    background-color: #444 !important;
  }
  .a2a_menu:not(.a2a_thanks) {
    background-color: #2a2a2a;
    border-color: #2a2a2a;
  }
  .a2a_menu_find {
    color: #fff !important;
  }
  .a2a_menu span.a2a_s_find svg {
    background-color: transparent !important;
  }
  .a2a_menu span.a2a_s_find svg path {
    fill: #fff !important;
  }
  .a2a_full {
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px 10px;
  }
  .a2a_overlay {
    background-color: rgba(55, 55, 55, 0.9215686275);
  }
}
@media print {
  .a2a_floating_style,
  .a2a_menu,
  .a2a_overlay {
    visibility: hidden;
  }
}
@keyframes a2aFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.a2a_starting {
  opacity: 0;
}

.a2a_starting.a2a_full,
.a2a_starting.a2a_modal {
  transform: scale(0.8);
}

@media (max-width: 639px) {
  .a2a_full {
    border-radius: 0;
    top: 15%;
    left: 0;
    margin-left: auto;
    width: 100%;
  }
  .a2a_modal {
    left: 0;
    margin-left: 10px;
    width: calc(100% - 20px);
  }
}
@media (min-width: 318px) and (max-width: 437px) {
  .a2a_full .a2a_full_services .a2a_i {
    width: calc(50% - 18px);
  }
}
@media (max-width: 317px) {
  .a2a_full .a2a_full_services .a2a_i {
    width: calc(100% - 18px);
  }
}
@media (max-height: 436px) {
  .a2a_full {
    bottom: 40px;
    height: auto;
    top: 40px;
  }
}
@media (max-height: 550px) {
  .a2a_modal {
    top: 30px;
  }
}
@media (max-height: 360px) {
  .a2a_modal {
    top: 20px;
  }
  .a2a_thanks > div:first-child {
    margin-bottom: 20px;
  }
}
.a2a_menu a {
  color: #0166ff;
  text-decoration: none;
  font: 16px sans-serif-light, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Arial, Helvetica, "Liberation Sans", sans-serif;
  line-height: 14px;
  height: auto;
  width: auto;
  outline: 0;
}

.a2a_menu a.a2a_i:visited,
.a2a_menu a.a2a_more {
  color: #0166ff;
}

.a2a_menu a.a2a_i:active,
.a2a_menu a.a2a_i:focus,
.a2a_menu a.a2a_i:hover,
.a2a_menu a.a2a_more:active,
.a2a_menu a.a2a_more:focus,
.a2a_menu a.a2a_more:hover {
  color: #2a2a2a;
  border-color: #eee;
  border-style: solid;
  background-color: #eee;
  text-decoration: none;
}

.a2a_menu span.a2a_s_find {
  background-size: 24px;
  height: 24px;
  left: 8px;
  position: absolute;
  top: 7px;
  width: 24px;
}

.a2a_menu span.a2a_s_find svg {
  background-color: #fff;
}

.a2a_menu span.a2a_s_find svg path {
  fill: #ccc;
}

#a2a_menu_container {
  display: inline-block;
}

.a2a_menu_find_container {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 2px 24px 2px 0;
  position: relative;
  text-align: left;
}

.a2a_cols_container .a2a_col1 {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#a2a_modal input,
#a2a_modal input[type=text],
.a2a_menu input,
.a2a_menu input[type=text] {
  display: block;
  background-image: none;
  box-shadow: none;
  line-height: 100%;
  margin: 0;
  outline: 0;
  overflow: hidden;
  padding: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -webkit-appearance: none;
}

#a2afeed_find_container input,
#a2afeed_find_container input[type=text],
#a2apage_find_container input,
#a2apage_find_container input[type=text] {
  background-color: transparent;
  border: 0;
  box-sizing: content-box;
  color: #2a2a2a;
  font: inherit;
  font-size: 16px;
  height: 28px;
  line-height: 20px;
  left: 38px;
  outline: 0;
  margin: 0;
  max-width: initial;
  min-height: initial;
  padding: 2px 0;
  position: relative;
  width: 99%;
}

.a2a_clear {
  clear: both;
}

.a2a_svg {
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
  height: 32px;
  line-height: 32px;
  padding: 0;
  pointer-events: none;
  width: 32px;
}

.a2a_svg svg {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border: none;
  display: block;
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  top: 0;
  width: auto;
  height: auto;
}

a.a2a_i,
i.a2a_i {
  display: block;
  float: left;
  border: 1px solid #fff;
  line-height: 24px;
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 132px;
}

a.a2a_i span,
a.a2a_more span {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

a.a2a_i .a2a_svg {
  margin: 0 6px 0 0;
}

a.a2a_i .a2a_svg,
a.a2a_more .a2a_svg {
  background-size: 24px;
  height: 24px;
  line-height: 24px;
  width: 24px;
}

a.a2a_sss:hover {
  border-left: 1px solid #ccc;
}

a.a2a_more {
  border-bottom: 1px solid #fff;
  border-left: 0;
  border-right: 0;
  line-height: 24px;
  margin: 6px 0 0;
  padding: 6px;
  -webkit-touch-callout: none;
}

a.a2a_more span {
  height: 24px;
  margin: 0 6px 0 0;
}

.a2a_kit .a2a_svg {
  background-repeat: repeat;
}

.a2a_default_style a:empty,
.a2a_flex_style a:empty,
.a2a_floating_style a:empty,
.a2a_overlay_style a:empty {
  display: none;
}

.a2a_color_buttons a,
.a2a_floating_style a {
  text-decoration: none;
}

.a2a_default_style:not(.a2a_flex_style) a {
  float: left;
  line-height: 16px;
  padding: 0 2px;
}

.a2a_default_style a:hover .a2a_svg,
.a2a_floating_style a:hover .a2a_svg,
.a2a_overlay_style a:hover .a2a_svg svg {
  opacity: 0.7;
}

.a2a_overlay_style.a2a_default_style a:hover .a2a_svg {
  opacity: 1;
}

.a2a_default_style .a2a_count,
.a2a_default_style .a2a_svg,
.a2a_floating_style .a2a_svg,
.a2a_menu .a2a_svg,
.a2a_vertical_style .a2a_count,
.a2a_vertical_style .a2a_svg {
  border-radius: 4px;
}

.a2a_default_style .a2a_counter img,
.a2a_default_style .a2a_dd,
.a2a_default_style .a2a_svg {
  float: left;
}

.a2a_default_style .a2a_img_text {
  margin-right: 4px;
}

.a2a_default_style .a2a_divider {
  border-left: 1px solid #000;
  display: inline;
  float: left;
  height: 16px;
  line-height: 16px;
  margin: 0 5px;
}

.a2a_kit a {
  cursor: pointer;
  transition: none;
}

.a2a_floating_style {
  background-color: #fff;
  border-radius: 6px;
  position: fixed;
  z-index: 9999995;
}

.a2a_overlay_style {
  z-index: 2147483647;
}

.a2a_floating_style,
.a2a_overlay_style {
  animation: a2aFadeIn 0.2s ease-in;
  padding: 4px;
}

.a2a_vertical_style:not(.a2a_flex_style) a {
  clear: left;
  display: block;
  overflow: hidden;
  padding: 4px;
}

.a2a_floating_style.a2a_default_style {
  bottom: 0;
}

.a2a_floating_style.a2a_default_style a,
.a2a_overlay_style.a2a_default_style a {
  padding: 4px;
}

.a2a_count {
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
  color: #2a2a2a;
  display: block;
  float: left;
  font: 12px Arial, Helvetica, sans-serif;
  height: 16px;
  margin-left: 4px;
  position: relative;
  text-align: center;
  width: 50px;
}

.a2a_count:after,
.a2a_count:before {
  border: solid transparent;
  border-width: 4px 4px 4px 0;
  content: "";
  height: 0;
  left: 0;
  line-height: 0;
  margin: -4px 0 0 -4px;
  position: absolute;
  top: 50%;
  width: 0;
}

.a2a_count:before {
  border-right-color: #ccc;
}

.a2a_count:after {
  border-right-color: #fff;
  margin-left: -3px;
}

.a2a_count span {
  animation: a2aFadeIn 0.14s ease-in;
}

.a2a_vertical_style .a2a_counter img {
  display: block;
}

.a2a_vertical_style .a2a_count {
  float: none;
  margin-left: 0;
  margin-top: 6px;
}

.a2a_vertical_style .a2a_count:after,
.a2a_vertical_style .a2a_count:before {
  border: solid transparent;
  border-width: 0 4px 4px 4px;
  content: "";
  height: 0;
  left: 50%;
  line-height: 0;
  margin: -4px 0 0 -4px;
  position: absolute;
  top: 0;
  width: 0;
}

.a2a_vertical_style .a2a_count:before {
  border-bottom-color: #ccc;
}

.a2a_vertical_style .a2a_count:after {
  border-bottom-color: #fff;
  margin-top: -3px;
}

.a2a_color_buttons .a2a_count,
.a2a_color_buttons .a2a_count:after,
.a2a_color_buttons .a2a_count:before,
.a2a_color_buttons.a2a_vertical_style .a2a_count:after,
.a2a_color_buttons.a2a_vertical_style .a2a_count:before {
  background-color: transparent;
  border: none;
  color: #fff;
  float: none;
  width: auto;
}

.a2a_color_buttons.a2a_vertical_style .a2a_count {
  margin-top: 0;
}

.a2a_flex_style {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.a2a_default_style.a2a_flex_style {
  left: 0;
  right: 0;
  width: 100%;
}

.a2a_vertical_style.a2a_flex_style {
  flex-direction: column;
  top: 0;
  bottom: 0;
}

.a2a_flex_style a {
  display: flex;
  justify-content: center;
  flex: 1;
  padding: 4px;
}

.a2a_flex_style.a2a_vertical_style a {
  flex-direction: column;
}

.a2a_floating_style.a2a_color_buttons,
.a2a_floating_style.a2a_flex_style {
  border-radius: 0;
  padding: 0;
}

.a2a_floating_style.a2a_default_style.a2a_flex_style {
  bottom: 0;
}

.a2a_kit.a2a_flex_style .a2a_counter img,
.a2a_kit.a2a_flex_style .a2a_dd,
.a2a_kit.a2a_flex_style .a2a_svg {
  float: none;
}

.a2a_nowrap {
  white-space: nowrap;
}

.a2a_note {
  margin: 0 auto;
  padding: 9px;
  font-size: 12px;
  text-align: center;
}

.a2a_note .a2a_note_note {
  margin: 0;
  color: #2a2a2a;
}

.a2a_wide a {
  display: block;
  margin-top: 3px;
  border-top: 1px solid #eee;
  text-align: center;
}

.a2a_label {
  position: absolute !important;
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  overflow: hidden;
  height: 1px;
  width: 1px;
}

.a2a_kit,
.a2a_menu,
.a2a_modal,
.a2a_overlay {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  outline: 0;
}

.a2a_dd {
  -webkit-user-drag: none;
}

.a2a_dd img {
  border: 0;
}

.a2a_button_facebook_like iframe {
  max-width: none;
}

/* 
 * mixin
 *
*/
.form_footer {
  margin: 60px 0;
}
@media screen and (max-width: 640px) {
  .form_footer {
    margin: 40px 0;
  }
}
.form_footer .form_button-submit {
  width: 320px;
  padding: 10px 20px;
  background-color: #01c6ab;
  font-size: 14px;
  color: #fff;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
@media screen and (max-width: 640px) {
  .form_footer .form_button-submit {
    width: 80%;
    font-size: 2rem;
    line-height: 50px;
  }
  .form_footer .form_button-submit:hover {
    background: #000;
    color: #fff;
  }
}
.form_footer .form_button-submit:hover {
  background: #000;
  color: #fff;
}
.form_footer .form_button-submit:disabled {
  cursor: not-allowed;
}

/* 
 * mixin
 *
*/
.ctaConsider {
  background-image: linear-gradient(#00c6ab 0, #00c6ab calc(100% - 285px), #f7f7f7 calc(100% - 285px), #f7f7f7 100%);
  padding-bottom: 135px;
}
@media screen and (max-width: 768px) {
  .ctaConsider {
    padding-bottom: 80px;
  }
}
.ctaConsider__wrapper {
  margin-top: 56px;
  width: 100%;
}
.ctaConsider__inner {
  padding: 85px 0 0;
}
@media screen and (max-width: 768px) {
  .ctaConsider__inner {
    padding: 40px 24px 0;
  }
}
.ctaConsider__ttl {
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 50px;
  font-size: 4.5rem;
  font-weight: 700;
  text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
  line-height: 1.45;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .ctaConsider__ttl {
    font-size: 3.2rem;
  }
}
.ctaConsider__ttl_serviceWrap {
  text-align: center;
  margin-bottom: 40px;
}
.ctaConsider__ttl_service {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4.5rem;
  font-weight: 700;
  text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
  line-height: 1.45;
  color: #fff;
  text-align: center;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .ctaConsider__ttl_service {
    font-size: 3.2rem;
  }
}
.ctaConsider__lead_service {
  max-width: 800px;
  margin: 0 auto 65px;
  text-align: center;
}
.ctaConsider__lead_service p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  color: #fff;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .ctaConsider__lead_service p {
    font-size: 1.4rem;
    line-height: 1.7;
    padding: 0 20px;
  }
}
.ctaConsider__lead {
  max-width: 495px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .ctaConsider__lead {
    font-size: 1.8rem;
  }
}
.ctaConsider__lead .bg-white {
  background-color: #fff;
  padding: 10px;
  color: #00c6ab;
  box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.25);
}
.ctaConsider__lead .plus-text {
  padding: 0 15px;
  font-size: 1.5em;
}
.ctaConsider__lead .text {
  margin-left: 0.5em;
  text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 768px) {
  .ctaConsider__lead .text {
    display: block;
    margin-top: 1.5em;
    margin-left: 0;
  }
}
.ctaConsider__contents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: #fff;
  box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.1);
  width: min(100% - 80px, 992px);
  margin: 65px auto 0;
  padding: 48px 32px;
}
@media screen and (max-width: 900px) {
  .ctaConsider__contents {
    grid-template-columns: 1fr;
    padding: 30px 20px;
  }
}
@media screen and (max-width: 768px) {
  .ctaConsider__contents {
    width: 100%;
  }
}
@media screen and (max-width: 900px) {
  .ctaConsider__contents .ctaConsiderContent + .ctaConsiderContent {
    margin-top: 50px;
    padding-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .ctaConsider__contents .ctaConsiderContent + .ctaConsiderContent {
    margin-top: 25px;
    padding-top: 25px;
  }
}
.ctaConsider__contents .ctaConsiderContent + .ctaConsiderContent:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #cfcfcf;
  width: 1px;
  height: 100%;
}
@media screen and (max-width: 900px) {
  .ctaConsider__contents .ctaConsiderContent + .ctaConsiderContent:before {
    width: 100%;
    height: 1px;
  }
}

.ctaConsiderContent {
  position: relative;
}
.ctaConsiderContent__ttlWrap {
  text-align: center;
}
.ctaConsiderContent__ttl {
  font-family: "Noto Sans JP", sans-serif;
  display: inline-grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 15px;
  min-height: 56px;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .ctaConsiderContent__ttl {
    gap: 10px;
  }
}
.ctaConsiderContent__ttl .text {
  font-family: "Noto Sans JP", sans-serif;
  display: grid;
  gap: 10px;
}
.ctaConsiderContent__ttl .text .sub-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  color: #979797;
}
@media screen and (max-width: 768px) {
  .ctaConsiderContent__ttl .text .sub-text {
    font-size: 1.2rem;
  }
}
.ctaConsiderContent__ttl .text .main-text {
  font-family: "Noto Sans JP", sans-serif;
  padding: 0;
  font-size: 2.2rem;
  color: #000;
}
@media screen and (max-width: 768px) {
  .ctaConsiderContent__ttl .text .main-text {
    font-size: 1.8rem;
  }
}
.ctaConsiderContent__text {
  font-family: "Noto Sans JP", sans-serif;
  margin-top: 33px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.5;
}
.ctaConsiderContent__btnWrap {
  margin-top: 32px;
}
.ctaConsiderContent__btn1, .ctaConsiderContent__btn2 {
  display: grid;
  place-content: center;
  border-radius: 10px;
  border: 3px solid #00c6ab;
  width: 300px;
  height: 100px;
  margin-inline: auto;
  padding: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  transition: 0.3s;
  transition-property: background, color;
}
@media screen and (max-width: 768px) {
  .ctaConsiderContent__btn1, .ctaConsiderContent__btn2 {
    width: min(100%, 400px);
    height: 75px;
  }
}
.ctaConsiderContent__btn1 {
  background-color: #00c6ab;
  font-weight: 700;
  color: #fff;
}
.ctaConsiderContent__btn1:visited {
  color: #fff;
}
@media screen and (min-width: 769px) {
  .ctaConsiderContent__btn1:hover {
    background-color: #fff;
    color: #00c6ab;
  }
}
.ctaConsiderContent__btn2 {
  text-align: center;
  font-weight: 700;
  color: #00c6ab;
}
.ctaConsiderContent__btn2 .sub-text {
  margin-bottom: 0.5em;
  font-size: 1.2rem;
}
.ctaConsiderContent__btn2 .main-text {
  padding: 0;
  font-size: 2.4rem;
}
.ctaConsiderContent__btn2:visited {
  color: #00c6ab;
}
@media screen and (min-width: 769px) {
  .ctaConsiderContent__btn2:hover {
    background-color: #00c6ab;
    color: #fff;
  }
}

/* 
 * mixin
 *
*/
.modal__wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}
.modal__wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.modal__wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s, visibility 0.4s;
}
.modal__wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  vertical-align: middle;
  content: "";
}
.modal__overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}
.modal__close {
  z-index: 1000;
  position: absolute;
  top: 32px;
  right: 32px;
}
.modal__close::before, .modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 30px;
  background: #333;
}
.modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modal__bg {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.2;
}
.modal__movie {
  position: relative;
  width: 80vw;
  height: 80vh;
  background-color: #fff;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal__content {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 900px;
  border-radius: 8px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 300;
  max-height: 80vh;
  overflow-y: auto;
}
.modal__mainContents {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 2.4rem;
  letter-spacing: 0.05rem;
  background-color: white;
  padding: 32px;
}
.modal__mainContents h1 {
  font-size: 2.4rem;
  padding-bottom: 10px;
}
.modal__mainContents h2 {
  font-size: 2rem;
  border-bottom: 2px solid #ccc;
  padding: 15px 0;
}
.modal__mainContents h3 {
  font-size: 1.8rem;
  padding: 15px 0;
}
.modal__mainContents ul {
  list-style-type: disc;
  margin-left: 20px;
}
.modal__mainContents .section {
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .modal__mainContents body {
    padding: 10px;
  }
  .modal__mainContents .container {
    padding: 15px;
  }
}
.modal__top {
  padding: 16px 32px;
  background-color: #fafafa;
}
.modal__ttlArea {
  display: flex;
  flex-direction: row;
  padding: 8px 0px 16px 0px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.modal__ttl {
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.7rem;
  background: linear-gradient(90deg, #00c6ab, #00c6ab 33%, #8c00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modal__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.08rem;
}
.modal__mainTtlArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}
.modal__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.modal__inner h3 {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.08rem;
}
.modal__description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background-color: #fff;
  gap: 8px;
  border-radius: 8px;
  padding: 8px 16px;
}
.modal__subTitle {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2.1rem;
  letter-spacing: 0.05rem;
}

.fixed-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
}
.fixed-modal .modal-container {
  position: relative;
  max-width: 100%;
  background-color: white;
  padding: 2.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.fixed-modal .modal-container .close-button {
  z-index: 300;
  position: absolute;
  top: -360px;
  right: -410px;
  width: 32px;
  height: 32px;
}
.fixed-modal .modal-container .close-button::before, .fixed-modal .modal-container .close-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 30px;
  background: #333;
}
.fixed-modal .modal-container .close-button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.fixed-modal .modal-container .close-button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.fixed-modal .modal-container .modal-title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: bold;
}
.fixed-modal .modal-container .modal-content {
  margin-bottom: 1.5rem;
}

.usecaseList__mainContents {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6rem;
  letter-spacing: 0.05rem;
  margin: 0;
  padding: 32px;
  background-color: #000000;
  color: #ffffff;
}
.usecaseList__container {
  border-radius: 8px;
}
.usecaseList__container h1,
.usecaseList__container h2,
.usecaseList__container span {
  color: #ffffff !important;
}
.usecaseList__container h1 {
  font-size: 24px;
  padding-bottom: 34px;
}
.usecaseList__container ul {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 20px;
  color: #ffffff !important;
}
.usecaseList__container .use-case {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.usecaseList__container .use-case-title {
  font-weight: bold;
}
.usecaseList__container .use-case-desc {
  font-style: italic;
}
@media (max-width: 600px) {
  .usecaseList__container body {
    padding: 10px;
  }
  .usecaseList__container .container {
    padding: 15px;
  }
}

.tecReaderList {
  position: relative;
  background-color: #000;
  padding-top: 0;
  overflow: hidden;
}
.tecReaderList .ttl_large {
  position: relative;
  background-color: #000;
  height: auto;
  padding-top: 150px;
  padding-bottom: 160px;
  z-index: 1;
}
.tecReaderList .ttl_large:before {
  position: absolute;
  content: "";
  background-image: url(/2024/02/tecreader-deco.png);
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  bottom: -200px;
  left: -800px;
  width: 1101px;
  height: 956px;
  z-index: 0;
}
.tecReaderList .ttl_large:after {
  position: absolute;
  content: "";
  background-image: url(/2024/02/tecreader-deco.png);
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  bottom: -200px;
  right: -400px;
  width: 1101px;
  height: 956px;
}
.tecReaderList .ttl_large .container22 {
  position: relative;
  z-index: 2;
}
.tecReaderList .ttl_large .ttl_box {
  position: relative;
  z-index: 2;
}
.tecReaderList .ttl_large .ttl_box-secTtlEn {
  color: #fff;
  margin-bottom: 64px;
  font-size: 7.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.tecReaderList .ttl_large .ttl_box-secTtlJp {
  color: #000;
  font-weight: 600;
  font-size: 1.6rem;
  padding: 8px 16px;
  background-color: #fff;
  margin-bottom: 8px;
  display: inline-block;
  border-radius: 4px;
}
.tecReaderList .ttl_large .ttl_box .subTtl {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.5;
  font-feature-settings: "palt";
  color: #fff;
  margin-top: 24px;
}
.tecReaderList_inner {
  z-index: 2;
  position: relative;
}
.tecReaderList_main {
  z-index: 1;
  background-color: #000;
  padding: 80px 0;
}
.tecReaderList_featureArea {
  width: 100%;
  margin-top: 160px;
}
.tecReaderList_featureArea .ttlMain {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-align: left;
  padding-left: 16px;
  margin-bottom: 16px;
}
.tecReaderList_featureArea .card {
  width: 100%;
  padding: 24px;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 20px;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  text-decoration: none;
  color: inherit;
}
.tecReaderList_featureArea .card:hover {
  filter: brightness(110%);
}
.tecReaderList_featureArea .card:hover img {
  transform: scale(1.05);
}
.tecReaderList_featureArea .card .imgArea {
  flex: 100% 1;
  margin-bottom: 32px;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
}
.tecReaderList_featureArea .card .imgArea img {
  width: 100%;
  height: auto;
  transition: 0.3s;
  display: block;
}
.tecReaderList_featureArea .card .textArea {
  flex: 100% 1;
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
}
.tecReaderList_featureArea .card .textArea .txt_overtitle {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.tecReaderList_featureArea .card .textArea .txt_siteTitle {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.tecReaderList_featureArea .card .textArea .txt_content {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
}
.tecReaderList_featureArea .card .textArea .txt_meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.tecReaderList_listArea {
  padding: 80px 0;
}
.tecReaderList_listArea .ttlMain {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 48px;
  text-align: left;
}
.tecReaderList_listArea .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 1024px) {
  .tecReaderList_listArea .list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .tecReaderList_listArea .list {
    grid-template-columns: 1fr;
  }
}
.tecReaderList_listArea .list .card {
  background-color: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  transition: 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.tecReaderList_listArea .list .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.tecReaderList_listArea .list .card .imgArea {
  position: relative;
  padding-top: 60%;
  overflow: hidden;
  background: #000;
}
.tecReaderList_listArea .list .card .imgArea img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tecReaderList_listArea .list .card .textArea {
  padding: 24px;
}
.tecReaderList_listArea .list .card .textArea .infoArea {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.tecReaderList_listArea .list .card .textArea .infoArea .date,
.tecReaderList_listArea .list .card .textArea .infoArea .time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.tecReaderList_listArea .list .card .textArea .txt_overtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tecReaderList_listArea .list .card .textArea .txt_overtitle img {
  height: 16px;
  width: auto;
}
.tecReaderList_listArea .list .card .textArea .txt_siteTitle {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.4;
}
.tecReaderList_listArea .list .card .textArea .txt_content {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tecReaderList_listArea .list .card .textArea .gestNameTtl {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tecReaderList_listArea .list .card .textArea .gestName {
  font-size: 14px;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 16px;
}
.tecReaderList_listArea .list .card .textArea .txt_meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.tecReaderList_youtubeArea {
  padding: 80px 0;
}
.tecReaderList_youtubeArea .card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  padding: 48px;
  text-decoration: none;
  color: #000;
  transition: 0.3s;
  border: 1px solid #eee;
}
.tecReaderList_youtubeArea .card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .tecReaderList_youtubeArea .card {
    flex-direction: column;
    padding: 32px;
  }
}
.tecReaderList_youtubeArea .card .textArea {
  flex: 1;
}
.tecReaderList_youtubeArea .card .textArea .ttlMain {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #000;
}
.tecReaderList_youtubeArea .card .textArea .description {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.tecReaderList_youtubeArea .card .imgArea {
  flex: 0 0 240px;
  margin-left: 48px;
}
@media (max-width: 768px) {
  .tecReaderList_youtubeArea .card .imgArea {
    margin-left: 0;
    margin-top: 24px;
  }
}
.tecReaderList_youtubeArea .card .imgArea img {
  width: 100%;
  height: auto;
}

.ctoInterview_card {
  background-color: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  transition: 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.ctoInterview_card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tecReaderDetails {
  position: relative;
  background-color: #000;
  min-height: 100vh;
}
.tecReaderDetails .ttl_large {
  position: relative;
  background-color: #000;
  padding: 100px 0 80px;
  z-index: 1;
}
.tecReaderDetails .ttl_large:before {
  position: absolute;
  content: "";
  background-image: url(/2024/02/tecreader-deco.png);
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  bottom: -200px;
  left: -800px;
  width: 1101px;
  height: 956px;
  z-index: 0;
}
.tecReaderDetails .ttl_large:after {
  position: absolute;
  content: "";
  background-image: url(/2024/02/tecreader-deco.png);
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  transform: rotate(180deg);
  bottom: -200px;
  right: -400px;
  width: 1101px;
  height: 956px;
}
.tecReaderDetails .ttl_large .container22 {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
.tecReaderDetails .ttl_large .ttl_box {
  position: relative;
  z-index: 2;
}
.tecReaderDetails .ttl_large .ttl_box-secTtlEn {
  font-size: 60px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  font-family: "Montserrat", sans-serif;
}
@media (max-width: 768px) {
  .tecReaderDetails .ttl_large .ttl_box-secTtlEn {
    font-size: 40px;
  }
}
.tecReaderDetails_inner {
  position: relative;
  z-index: 2;
}
.tecReaderDetails_main {
  background-color: #000;
  padding: 80px 0;
  position: relative;
  z-index: 1;
}
.tecReaderDetails_main .container22 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 768px) {
  .tecReaderDetails_main .container22 {
    padding: 0 20px;
  }
}
.tecReaderDetails_grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: flex-start;
}
@media (max-width: 1024px) {
  .tecReaderDetails_grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.tecReaderDetails_grid .main .mainContents {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  padding: 48px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
  .tecReaderDetails_grid .main .mainContents {
    padding: 32px 24px;
  }
}
.tecReaderDetails_grid .main .mainContents .imgArea {
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
}
.tecReaderDetails_grid .main .mainContents .imgArea img {
  width: 100%;
  height: auto;
  display: block;
}
.tecReaderDetails_grid .main .mainContents .ttlMain {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .tecReaderDetails_grid .main .mainContents .ttlMain {
    font-size: 28px;
  }
}
.tecReaderDetails_grid .main .mainContents .description {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
}
.tecReaderDetails_grid .main .mainContents .sectionArea {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.tecReaderDetails_grid .main .mainContents .sectionArea .sectionTtl {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
}
.tecReaderDetails_grid .main .mainContents .sectionArea .sectionTag {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tecReaderDetails_grid .main .mainContents .sectionArea .sectionTag li .tagItem {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}
.tecReaderDetails_grid .main .mainContents .sectionArea .sectionTag li .tagItem:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.tecReaderDetails_grid .main .mainContents .sectionArea .sectionList {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tecReaderDetails_grid .main .mainContents .sectionArea .sectionList li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
}
.tecReaderDetails_grid .main .mainContents .sectionArea .sectionList li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: #00d4ff;
  font-size: 20px;
}
.tecReaderDetails_grid .side {
  position: sticky;
  top: 100px;
}
@media (max-width: 1024px) {
  .tecReaderDetails_grid .side {
    position: relative;
    top: 0;
  }
}
.tecReaderDetails_grid .side .sideContents {
  background: #1a1a1a;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.tecReaderDetails_grid .side .sideContents_ttl {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
  text-align: center;
}
.tecReaderDetails_grid .side .sideContents .imgArea {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.tecReaderDetails_grid .side .sideContents .imgArea:hover {
  transform: scale(1.02);
}
.tecReaderDetails_grid .side .sideContents .imgArea:hover .playMark {
  transform: scale(1.1);
}
.tecReaderDetails_grid .side .sideContents .imgArea .playMark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  z-index: 2;
  transition: transform 0.3s ease;
}
.tecReaderDetails_grid .side .sideContents .imgArea .infoArea {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  gap: 16px;
  z-index: 2;
}
.tecReaderDetails_grid .side .sideContents .imgArea .infoArea .date,
.tecReaderDetails_grid .side .sideContents .imgArea .infoArea .time {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  font-size: 12px;
  color: #fff;
}
.tecReaderDetails_grid .side .sideContents .imgArea img:not(.playMark) {
  width: 100%;
  height: auto;
  display: block;
}
.tecReaderDetails_grid .side .sideContents .movieTtl {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
  line-height: 1.5;
}
.tecReaderDetails_grid .side .sideContents .gestNameTtl {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tecReaderDetails_grid .side .sideContents .gestName {
  font-size: 14px;
  color: #fff;
  line-height: 1.6;
}
.tecReaderDetails_grid .side .sideContents .snsArea {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  gap: 16px;
}
.tecReaderDetails_grid .side .sideContents .snsArea a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}
.tecReaderDetails_grid .side .sideContents .snsArea a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.tecReaderDetails_grid .side .sideContents .snsArea a svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.tecReaderDetails_moreArea {
  background-color: #000;
  padding: 100px 0;
}
.tecReaderDetails_moreArea .container22 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 768px) {
  .tecReaderDetails_moreArea .container22 {
    padding: 0 20px;
  }
}
.tecReaderDetails_listArea .ttlMain {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 48px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tecReaderDetails_listArea .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 60px;
}
@media (max-width: 1024px) {
  .tecReaderDetails_listArea .list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .tecReaderDetails_listArea .list {
    grid-template-columns: 1fr;
  }
}
.tecReaderDetails_listArea .list .ctoInterview_card,
.tecReaderDetails_listArea .list > a,
.tecReaderDetails_listArea .list .card {
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.tecReaderDetails_listArea .list .ctoInterview_card:hover,
.tecReaderDetails_listArea .list > a:hover,
.tecReaderDetails_listArea .list .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.tecReaderDetails_listArea .list .ctoInterview_card .imgArea,
.tecReaderDetails_listArea .list > a .imgArea,
.tecReaderDetails_listArea .list .card .imgArea {
  position: relative;
  padding-top: 60%;
  overflow: hidden;
  background: #000;
}
.tecReaderDetails_listArea .list .ctoInterview_card .imgArea img,
.tecReaderDetails_listArea .list > a .imgArea img,
.tecReaderDetails_listArea .list .card .imgArea img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tecReaderDetails_listArea .list .ctoInterview_card .textArea,
.tecReaderDetails_listArea .list > a .textArea,
.tecReaderDetails_listArea .list .card .textArea {
  padding: 24px;
}
.tecReaderDetails_listArea .list .ctoInterview_card .textArea .ttlMain,
.tecReaderDetails_listArea .list > a .textArea .ttlMain,
.tecReaderDetails_listArea .list .card .textArea .ttlMain {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tecReaderDetails_listArea .list .ctoInterview_card .textArea .gestNameTtl,
.tecReaderDetails_listArea .list > a .textArea .gestNameTtl,
.tecReaderDetails_listArea .list .card .textArea .gestNameTtl {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tecReaderDetails_listArea .list .ctoInterview_card .textArea .gestName,
.tecReaderDetails_listArea .list > a .textArea .gestName,
.tecReaderDetails_listArea .list .card .textArea .gestName {
  font-size: 14px;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 16px;
}
.tecReaderDetails_listArea .list .ctoInterview_card .textArea .infoArea,
.tecReaderDetails_listArea .list > a .textArea .infoArea,
.tecReaderDetails_listArea .list .card .textArea .infoArea {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.tecReaderDetails_listArea .btArea {
  text-align: center;
}
.tecReaderDetails_listArea .btArea .bt22_border {
  display: inline-block;
  padding: 16px 48px;
  border: 2px solid #fff;
  border-radius: 30px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.tecReaderDetails_listArea .btArea .bt22_border:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}

/* 
 * mixin
 *
*/
@keyframes mvDecoAnimetion {
  0% {
    opacity: 0;
    transform: translate(20px, 20px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes mvLeadAnimetion {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.mv22 {
  width: 100%;
  height: 638px;
  position: relative;
  background: linear-gradient(#181818, #000);
  overflow: hidden;
}
@media screen and (max-width: 1311px) {
  .mv22 {
    height: 100vh;
  }
}
@media screen and (max-width: 768px) {
  .mv22 {
    height: 400px;
  }
}
.mv22::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/deco22-main-dot.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  width: 692px;
  height: 68px;
}
.mv22_deco-right {
  position: absolute;
  width: 826px;
  height: 700px;
  top: 50%;
  right: 0;
  margin-top: -350px;
  animation: mvDecoAnimetion ease-out 2s backwards;
  animation-delay: 2s;
}
@media screen and (max-width: 1311px) {
  .mv22_deco-right {
    width: 826px;
    height: 700px;
    top: 100%;
    margin-top: -700px;
  }
}
@media screen and (max-width: 1000px) {
  .mv22_deco-right {
    width: 708px;
    height: 600px;
    top: 100%;
    margin-top: -600px;
  }
}
@media screen and (max-width: 768px) {
  .mv22_deco-right {
    width: 354px;
    height: 300px;
    right: -100px;
    top: 100%;
    margin-top: -300px;
  }
}
.mv22_container {
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 48px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .mv22_container {
    padding: 0 24px;
  }
}
@media screen and (max-width: 1311px) {
  .mv22_container {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .mv22_container {
    justify-content: flex-start;
  }
}
.mv22_aws {
  position: absolute;
  bottom: 2%;
  left: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 30px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
@media screen and (max-width: 768px) {
  .mv22_aws {
    display: none;
  }
}
.mv22_aws-left {
  width: 120px;
}
@media screen and (max-width: 768px) {
  .mv22_aws-left {
    width: 80px;
  }
}
.mv22_aws-left img {
  width: 120px;
  height: 120px;
}
@media screen and (max-width: 768px) {
  .mv22_aws-left img {
    width: 80px;
    height: 80px;
  }
}
.mv22_aws-right {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.mv22_aws-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  text-align: left;
  color: #fff;
  letter-spacing: 0.4rem;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .mv22_aws-text {
    font-size: 1.2rem;
  }
}
.mv22_awsSp {
  display: none;
  background-color: #000;
}
@media screen and (max-width: 768px) {
  .mv22_awsSp {
    display: block;
  }
}
.mv22_awsSp .container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 20px;
  padding: 40px 20px;
}
.mv22_awsSp-left {
  width: 120px;
}
.mv22_awsSp-img {
  width: 120px;
  height: 120px;
  max-width: 120px;
}
.mv22_awsSp-right {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.mv22_awsSp-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  text-align: left;
  color: #fff;
  letter-spacing: 0.4rem;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .mv22_awsSp-text {
    font-size: 1.2rem;
  }
}
.mv22_lead {
  position: absolute;
  top: 20%;
  left: 3%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 1;
}
@media screen and (max-width: 1311px) {
  .mv22_lead {
    top: 10%;
    left: 5%;
  }
}
@media screen and (max-width: 768px) {
  .mv22_lead {
    top: 10%;
    left: 6%;
  }
}
.mv22_lead-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: left;
  color: #fff;
  margin-bottom: 30px;
  letter-spacing: 0.4rem;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .mv22_lead-text {
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
    margin-bottom: 20px;
  }
}
.mv22_lead-text span:first-of-type {
  margin-bottom: 20px;
  animation: mvLeadAnimetion ease-out 2s backwards;
  animation-delay: 0.4s;
}
@media screen and (max-width: 768px) {
  .mv22_lead-text span:first-of-type {
    margin-bottom: 10px;
  }
}
.mv22_lead-text span:last-of-type {
  animation: mvLeadAnimetion ease-out 2s backwards;
  animation-delay: 0.8s;
}
.mv22_lead-h1 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4.2rem;
  font-weight: 600;
  text-align: left;
  color: #00c6ab;
  letter-spacing: 1rem;
  line-height: 3rem;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 1311px) {
  .mv22_lead-h1 {
    font-size: 3.2rem;
  }
}
@media screen and (max-width: 768px) {
  .mv22_lead-h1 {
    font-size: 2.2rem;
    letter-spacing: 0.6rem;
  }
}
.mv22_lead-h1 span {
  animation: mvLeadAnimetion ease-out 2s backwards;
}
.mv22_lead-h1 span:nth-child(1) {
  margin-bottom: 30px;
}
@media screen and (max-width: 1311px) {
  .mv22_lead-h1 span:nth-child(1) {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .mv22_lead-h1 span:nth-child(1) {
    margin-bottom: 6px;
  }
}
.mv22_lead-h1 span:nth-child(2) {
  animation: mvLeadAnimetion ease-out 2s backwards;
  animation-delay: 0.4s;
  margin-bottom: 30px;
}
@media screen and (max-width: 1311px) {
  .mv22_lead-h1 span:nth-child(2) {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) {
  .mv22_lead-h1 span:nth-child(2) {
    margin-bottom: 6px;
  }
}
.mv22_lead-h1 span:nth-child(3) {
  animation: mvLeadAnimetion ease-out 2s backwards;
  animation-delay: 0.8s;
}

/* 
 * mixin
 *
*/
.about22 {
  position: relative;
  width: 100%;
  background-color: #181818;
  padding: 100px 0 40px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .about22 {
    padding: 40px 0 40px 0;
  }
}
.about22::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/deco22-green-dot-tate.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 85px;
  height: 344px;
  bottom: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .about22::before {
    display: none;
  }
}
.about22::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/deco22-green-dot-tate.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 85px;
  height: 344px;
  top: 50%;
  right: 0;
  margin-top: -172px;
}
@media screen and (max-width: 768px) {
  .about22::after {
    display: none;
  }
}
.about22_area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .about22_area {
    display: block;
  }
}
.about22_left {
  flex: 1;
}
@media screen and (max-width: 768px) {
  .about22_left {
    display: none;
  }
}
.about22_right {
  flex: 1;
  margin-left: 48px;
}
@media screen and (max-width: 768px) {
  .about22_right {
    margin-left: 0;
  }
}
.about22_ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #fff;
  margin-bottom: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.about22_ttl:not(:first-of-type) {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .about22_ttl {
    font-size: 1.8rem;
    line-height: 1.8;
  }
}
.about22_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #fff;
}
.about22_img-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .about22_img-sp {
    display: block;
    margin: 40px 0;
  }
}
.about22_btArea {
  margin-top: 60px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .about22_btArea {
    text-align: center;
  }
}
.about22_list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 100px;
}
.about22_box {
  display: inline-block;
  width: calc((1312px - 186px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  margin-bottom: 80px;
  padding: 20px;
  cursor: pointer;
  transition: 0.2s;
}
.about22_box:hover {
  transform: translate(-5px, -5px);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.7);
}
.about22_box:hover .bt22_text::after {
  right: -15px;
}
@media screen and (max-width: 1311px) {
  .about22_box {
    width: calc(33.3333333333% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .about22_box {
    width: 100%;
  }
}
.about22_box:not(:nth-of-type(3n)) {
  margin-right: 45px;
}
@media screen and (max-width: 768px) {
  .about22_box:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
}
.about22_box-ttlarea {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
.about22_box-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #fff;
  padding: 10px 0 10px 40px;
}
.about22_box-icon {
  position: absolute;
  width: 33px;
  height: 33px;
  margin-top: -16px;
  top: 50%;
  left: 0;
}
.about22_box-textarea {
  flex-grow: 1;
}
.about22_box-text {
  font-family: "Noto Sans JP", sans-serif;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 200;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #fff;
  margin-bottom: 20px;
}
.about22_box-btarea {
  width: 100%;
  text-align: left;
}

/* 
 * mixin
 *
*/
.partner {
  width: 100%;
  padding: 100px 0 0 0;
  overflow: hidden;
}
.partner__h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #000;
  margin-bottom: 40px;
}
.partner__text {
  flex-grow: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #000;
}
.partner__header-bg {
  position: relative;
  background: linear-gradient(to right, #00c6ab, #009dff);
}
.partner__header-bg::after {
  position: absolute;
  content: "";
  background-image: url("/2022/08/partner-deco.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  right: 0;
  width: 543px;
  height: 272px;
}
.partner__lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.partner__lead h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #000;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .partner__lead h2 {
    font-size: 2.6rem;
  }
}
.partner__lead p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #000;
}
.partner__lead--btArea {
  margin: 60px 0;
}
.partner__features {
  width: 100%;
  text-align: left;
  padding-top: 60px;
}
@media screen and (max-width: 768px) {
  .partner__features {
    padding: 0 0 60px 0;
  }
}
.partner__featuresBox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 60px;
  padding: 0 40px;
}
@media screen and (max-width: 768px) {
  .partner__featuresBox {
    flex-direction: column;
    padding: 40px 0;
  }
}
.partner__features-text {
  flex: 1;
}
.partner__features-img {
  flex: 1;
}
.partner__aws {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 60px 20px;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .partner__aws {
    width: 100%;
  }
}
.partner__aws p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #000;
}
.partner__card {
  width: 100%;
  background-color: #f7f7f7;
  padding: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 60px;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .partner__card {
    flex-direction: column;
  }
}
.partner__card--text {
  flex: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.partner__card--img {
  flex: 40%;
}
.partner__merit {
  width: 100%;
  text-align: left;
  padding: 60px 0;
}
@media screen and (max-width: 768px) {
  .partner__merit {
    padding: 0 0 60px 0;
  }
}
.partner__meritBox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 40px;
  gap: 60px;
}
@media screen and (max-width: 768px) {
  .partner__meritBox {
    flex-direction: column;
    padding: 0;
  }
}
.partner__meritBox:not(:last-of-type) {
  margin-bottom: 200px;
}
@media screen and (max-width: 768px) {
  .partner__meritBox:not(:last-of-type) {
    margin-bottom: 100px;
  }
}
.partner__meritBox--textArea {
  flex: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .partner__meritBox--textArea {
    order: 1;
  }
}
.partner__meritBox--imgArea {
  flex: 60%;
}
@media screen and (max-width: 768px) {
  .partner__meritBox--imgArea {
    order: 2;
  }
}
.partner__meritBox--no {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #000;
  margin-bottom: 5px;
}
.partner__meritBox h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #000;
  margin-bottom: 20px;
}
.partner__meritBox--text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #000;
}
.partnerEx {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 40px 0 0 0;
}
@media screen and (max-width: 768px) {
  .partnerEx {
    padding: 20px 0 0 0;
  }
}
.partnerEx_area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .partnerEx_area {
    flex-direction: column;
  }
}
.partnerEx_box {
  width: calc((1312px - 186px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  background-color: #fff;
  padding: 40px;
  margin-bottom: 80px;
  transition: 0.2s;
}
@media screen and (max-width: 768px) {
  .partnerEx_box {
    padding: 40px 0;
    margin-bottom: 0;
  }
}
.partnerEx_box:hover {
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
  transform: translate(-10px, -10px);
}
.partnerEx_box:hover .partnerDoc_box-link p::after {
  right: -15px;
}
@media screen and (max-width: 768px) {
  .partnerEx_box {
    width: 100%;
    margin-bottom: 0;
  }
}
.partnerEx_box:not(:last-of-type) {
  margin-right: 45px;
}
@media screen and (max-width: 768px) {
  .partnerEx_box:not(:last-of-type) {
    margin-right: 0;
  }
}
.partnerEx_box-imgArea {
  width: 100%;
  height: 180px;
  overflow: hidden;
  margin-bottom: 20px;
}
.partnerEx_box-imgArea img {
  width: 100%;
}
.partnerEx_box-ttl {
  font-family: "Noto Sans JP", sans-serif;
  display: inline-block;
  flex-grow: 1;
  width: 100%;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.4rem;
  font-weight: 600;
  text-align: left;
  color: #000;
}
.partnerEx_box-text {
  font-family: "Noto Sans JP", sans-serif;
  width: 100%;
  font-size: 1.2rem;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #000;
  margin-top: 30px;
  margin-bottom: 20px;
}
.partnerDoc {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 100px 0 40px 0;
}
@media screen and (max-width: 768px) {
  .partnerDoc {
    padding: 80px 0 40px 0;
  }
}
.partnerDoc_area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .partnerDoc_area {
    flex-direction: column;
  }
}
.partnerDoc_box {
  width: calc((1312px - 186px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  background-color: #f7f7f7;
  padding: 40px;
  margin-bottom: 80px;
  transition: 0.2s;
}
.partnerDoc_box:hover {
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
  transform: translate(-10px, -10px);
}
.partnerDoc_box:hover .partnerDoc_box-link p::after {
  right: -15px;
}
@media screen and (max-width: 768px) {
  .partnerDoc_box {
    width: 100%;
    margin-bottom: 0;
  }
}
.partnerDoc_box:not(:last-of-type) {
  margin-right: 45px;
}
@media screen and (max-width: 768px) {
  .partnerDoc_box:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 40px;
  }
}
.partnerDoc_box-ttl {
  font-family: "Noto Sans JP", sans-serif;
  display: inline-block;
  width: 100%;
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.4rem;
  font-weight: 600;
  text-align: left;
  color: #000;
  margin-bottom: 30px;
}
.partnerDoc_box-text {
  font-family: "Noto Sans JP", sans-serif;
  flex-grow: 1;
  width: 100%;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #000;
  margin-bottom: 20px;
}
.partnerDoc_box-link {
  display: block;
  text-align: center;
  padding-top: 20px;
}
.partnerDoc_box-link p {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.05rem;
  color: #00c6ab;
  padding-right: 10px;
}
.partnerDoc_box-link p::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: -10px;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}

/* 
 * mixin
 *
*/
.partner22 {
  width: 100%;
  background-color: #fff;
}
.partner22_container {
  max-width: 1312px;
  margin: 0 auto;
  padding: 0 48px;
  height: 100%;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .partner22_container {
    padding: 0 24px;
  }
}
@media screen and (max-width: 1311px) {
  .partner22_container {
    padding: 0 45px;
  }
}
@media screen and (max-width: 768px) {
  .partner22_container {
    padding: 0 24px;
  }
}
.partner22_area {
  position: relative;
  width: 100%;
  padding: 45px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .partner22_area {
    padding: 45px 0;
    margin: -50px auto;
  }
}
.partner22_primary {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .partner22_primary {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
}
.partner22_primary li {
  width: calc(1126px / 4);
}
@media screen and (max-width: 768px) {
  .partner22_primary li {
    width: 50%;
  }
}
.partner22_secondary {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.partner22_secondary li {
  width: calc(1126px / 6);
}
@media screen and (max-width: 768px) {
  .partner22_secondary li {
    width: 50%;
  }
}

/* 
 * mixin
 *
*/
.features22 {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 100px 0 40px 0;
}
@media screen and (max-width: 768px) {
  .features22 {
    padding: 80px 0 40px 0;
  }
}
.features22_ttl {
  margin-bottom: 45px;
}
.features22_ttl span {
  display: block;
  width: 100%;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: #000;
  line-height: 2;
  letter-spacing: 0.4rem;
}
@media screen and (max-width: 768px) {
  .features22_ttl span {
    font-size: 1.8rem;
  }
}
.features22_area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .features22_area {
    flex-direction: column;
  }
}
.features22_box {
  width: calc((1312px - 186px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  background-color: #f7f7f7;
  padding: 40px;
  margin-bottom: 80px;
  transition: 0.2s;
}
.features22_box:hover {
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.features22_box:hover .features22_box-link p::after {
  right: -15px;
}
@media screen and (max-width: 768px) {
  .features22_box {
    width: 100%;
    margin-bottom: 0;
  }
}
.features22_box:not(:last-of-type) {
  margin-right: 45px;
}
@media screen and (max-width: 768px) {
  .features22_box:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 40px;
  }
}
.features22_box-iconarea {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 30px;
}
.features22_box-ttl {
  font-family: "Noto Sans JP", sans-serif;
  display: inline-block;
  width: 100%;
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: 0.4rem;
  font-weight: 600;
  text-align: center;
  color: #000;
  margin-bottom: 30px;
}
.features22_box-text {
  font-family: "Noto Sans JP", sans-serif;
  flex-grow: 1;
  width: 100%;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #000;
  margin-bottom: 20px;
}
.features22_box-link {
  display: block;
  text-align: center;
  padding-top: 20px;
}
.features22_box-link p {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.05rem;
  color: #00c6ab;
  padding-right: 10px;
}
.features22_box-link p::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: -10px;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}

/* 
 * mixin
 *
*/
.code22 {
  position: relative;
  width: 100%;
  background-color: #181818;
  padding: 100px 0 40px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .code22 {
    padding: 80px 0 40px 0;
  }
}
.code22_ttl {
  margin-bottom: 35px;
}
.code22_ttl span {
  display: block;
  width: 100%;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: #fff;
  line-height: 2;
  letter-spacing: 0.4rem;
}
@media screen and (max-width: 768px) {
  .code22_ttl span {
    font-size: 1.8rem;
    line-height: 1.8;
  }
}
.code22_docTop-btarea {
  display: inline-block;
  position: relative;
  text-align: center;
  padding: 15px 40px;
  margin-bottom: 45px;
}
.code22_docTop-icon {
  position: absolute;
  width: 33px;
  height: 33px;
  margin-top: -16px;
  top: 50%;
  left: 0;
}
.code22_list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media screen and (max-width: 1000px) {
  .code22_list {
    justify-content: space-between;
  }
}
.code22_box {
  position: relative;
  width: calc((1312px - 186px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  margin-bottom: 80px;
  border: 1px solid #333333;
  border-radius: 4px;
}
@media screen and (max-width: 1311px) {
  .code22_box {
    width: calc(33.3333333333% - 30px);
  }
}
@media screen and (max-width: 1000px) {
  .code22_box {
    width: calc(50% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .code22_box {
    width: 100%;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  .code22_box:not(:last-of-type) {
    margin-bottom: 40px;
  }
}
.code22_box:not(:nth-of-type(3n)) {
  margin-right: 45px;
}
@media screen and (max-width: 1000px) {
  .code22_box:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .code22_box:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
}
.code22_box-ttl {
  font-family: "Noto Sans JP", sans-serif;
  display: block;
  flex-shrink: 1;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #fff;
  padding: 40px 40px 10px 40px;
}
.code22_box-text {
  font-family: "Noto Sans JP", sans-serif;
  flex-grow: 1;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 200;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #fff;
  padding: 10px 40px 20px 40px;
  margin-bottom: 20px;
}
.code22_box-btarea {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  border-top: 1px solid #333333;
  text-align: left;
  padding: 15px 40px 15px 70px;
}
.code22_box-icon {
  position: absolute;
  width: 33px;
  height: 33px;
  margin-top: -16px;
  top: 50%;
  left: 40px;
}

/* 
 * mixin
 *
*/
.join22 {
  width: 100%;
  background-color: #181818;
  padding: 40px 0 100px 0;
}
.join22_area {
  position: relative;
  width: 100%;
  padding: 80px 45px 85px 45px;
  background: linear-gradient(#181818, #333333);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .join22_area {
    padding: 60px 25px 60px 25px;
  }
}
.join22_area::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/deco22-join-dot.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: -33px;
  left: 50%;
  margin-left: -149px;
  width: 298px;
  height: 67px;
}
@media screen and (max-width: 768px) {
  .join22_area::after {
    margin-left: -88px;
    width: 177px;
    height: 40px;
  }
}
.join22_ttl {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #fff;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .join22_ttl {
    line-height: 1.4;
  }
}
.join22_text {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
}
.join22_btArea {
  flex-shrink: 0;
  position: relative;
  text-align: center;
  padding: 15px 40px;
}
@media screen and (max-width: 768px) {
  .join22_btArea {
    padding: 0;
  }
}

/* 
 * mixin
 *
*/
.voice22 {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 150px 0 100px 0;
}
@media screen and (max-width: 768px) {
  .voice22 {
    padding: 80px 0 40px 0;
  }
}
.voice22_ttl {
  display: block;
  width: 100%;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: #000;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 90px;
}
@media screen and (max-width: 768px) {
  .voice22_ttl {
    font-size: 1.8rem;
    line-height: 1.8;
  }
}
.voice22_area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
@media screen and (max-width: 1311px) {
  .voice22_area {
    justify-content: space-between;
  }
}
@media screen and (max-width: 768px) {
  .voice22_area {
    display: block;
  }
}
.voice22 li {
  width: calc((1312px - 186px) / 2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  margin-bottom: 80px;
}
@media screen and (max-width: 1311px) {
  .voice22 li {
    width: calc(50% - 45px);
  }
}
@media screen and (max-width: 768px) {
  .voice22 li {
    width: 100%;
    margin-bottom: 0;
  }
}
.voice22 li:not(:nth-of-type(2n)) {
  margin-right: 90px;
}
@media screen and (max-width: 1311px) {
  .voice22 li:not(:nth-of-type(2n)) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .voice22 li:not(:last-of-type) {
    margin-bottom: 60px;
  }
}
.voice22_box-ttl {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: left;
  color: #000;
  padding: 30px 40px 0 40px;
  border-top: 1px solid #181818;
  border-left: 1px solid #181818;
  margin-bottom: 30px;
}
.voice22_box-info {
  font-size: 1.4rem;
  line-height: 2;
  text-align: left;
  color: #333333;
  padding: 0 40px;
}
.voice22_box-text {
  flex-grow: 1;
  width: 100%;
  font-size: 1.4rem;
  line-height: 2;
  text-align: left;
  color: #000;
  padding: 0 40px;
  margin-top: 30px;
  margin-bottom: 20px;
}
.voice22_btArea {
  flex-shrink: 0;
  position: relative;
  text-align: center;
  padding: 15px 40px;
}

/* 
 * mixin
 *
*/
.topics22 {
  position: relative;
  width: 100%;
  margin-top: 100px;
  background-color: #fff;
  padding: 0 0 100px 0;
}
@media screen and (max-width: 768px) {
  .topics22 {
    padding: 0 0 40px 0;
  }
}
.topics22_ttl {
  display: block;
  width: 100%;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: #000;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.topics22_area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.topics22 li {
  width: 100%;
}
.topics22 li a {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  background-color: #fff;
  padding: 20px 60px 20px 30px;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .topics22 li a {
    flex-direction: column;
  }
}
.topics22 li a::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: 20px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  transition: 0.3s;
}
.topics22 li a:hover {
  background-color: #f7f7f7;
}
.topics22 li a:hover::after {
  right: 10px;
}
.topics22 li a time {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  color: #333333;
  padding-right: 40px;
  border-right: 1px solid #00c6ab;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .topics22 li a time {
    font-size: 1.2rem;
    padding-right: 0;
    border-right: none;
    margin-bottom: 20px;
  }
}
.topics22_box-ttl {
  display: block;
  width: 100%;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #000;
  letter-spacing: 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 30px;
}
@media screen and (max-width: 768px) {
  .topics22_box-ttl {
    font-size: 1.4rem;
    padding-left: 0;
  }
}
.topics22_btArea {
  width: 100%;
  text-align: right;
  padding: 15px 40px;
}

/* 
 * mixin
 *
*/
.cta22 {
  width: 100%;
  background-color: #f7f7f7;
  padding: 40px 0 40px 0;
}
.cta22_area {
  position: relative;
  width: 100%;
  padding: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .cta22_area {
    padding: 45px 0;
  }
}
.cta22_ttl {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #000;
  line-height: 2;
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .cta22_ttl {
    font-size: 3rem;
    line-height: 1.4;
  }
}
.cta22_ttl span:not(:last-of-type) {
  margin-bottom: 20px;
}
.cta22_text {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  color: #000;
  line-height: 2;
  letter-spacing: 0.1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .cta22_text {
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 60px;
  }
}
.cta22_text span:not(:last-of-type) {
  margin-bottom: 20px;
}
.cta22_btArea {
  flex-shrink: 0;
  position: relative;
  text-align: center;
  padding: 15px 40px;
}
@media screen and (max-width: 1000px) {
  .cta22_btArea {
    padding: 0;
  }
}

/* 
 * mixin
 *
*/
.product22 {
  position: relative;
  width: 100%;
  background-color: #181818;
  padding: 100px 0 150px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .product22 {
    padding: 40px 0 40px 0;
  }
}
.product22_headerLogo {
  width: 210px;
}
.product22_deco {
  position: relative;
  width: 100%;
}
.product22_deco::before {
  position: absolute;
  content: "";
  background-image: url("/2024/01/productMainVisual.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  right: 0;
  width: 900px;
  height: 659px;
  z-index: 1;
}
@media screen and (max-width: 1312px) {
  .product22_deco::before {
    transform-origin: top right;
    transform: scale(0.8);
  }
}
@media screen and (max-width: 1000px) {
  .product22_deco::before {
    transform-origin: top right;
    transform: scale(0.6);
  }
}
@media screen and (max-width: 768px) {
  .product22_deco::before {
    top: -200px;
    right: 0;
    transform: scale(0.6);
  }
}
.product22_kpiWrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 164px;
}
@media screen and (max-width: 768px) {
  .product22_kpiWrapper {
    padding-top: 32px;
  }
}
.product22_kpi {
  width: 100%;
  padding: 64px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #000;
}
@media screen and (max-width: 1312px) {
  .product22_kpi {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  .product22_kpi {
    padding: 24px 24px;
    flex-direction: column;
  }
}
.product22_kpiCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  width: calc((1312px - 144px) / 5);
}
@media screen and (max-width: 1312px) {
  .product22_kpiCard {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .product22_kpiCard {
    width: 100%;
    padding-bottom: 24px;
  }
}
.product22_kpiCard a {
  color: #7d7d7d;
  border-bottom: 1px solid #7d7d7d;
}
.product22_kpiCard .newOpen {
  position: relative;
}
.product22_kpiCard .newOpen::after {
  position: absolute;
  font-family: "Material Symbols Outlined";
  content: "\e89e";
  font-size: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
  right: -24px;
}
.product22_kpiCard .afterPlus {
  position: relative;
}
.product22_kpiCard .afterPlus::after {
  position: absolute;
  font-family: "Material Symbols Outlined";
  content: "\e145";
  font-size: 4rem;
  top: 50%;
  transform: translateY(-50%);
  right: -24px;
}
.product22_kpiCard-num {
  font-size: 4rem;
  font-weight: 900;
  color: #fff;
  padding: 24px 16px;
  text-align: center;
}
.product22_kpiCard-num .small {
  font-size: 3rem;
}
.product22_kpiCard-description {
  width: 100%;
  display: inline-block;
  font-size: 1.4rem;
  color: #7d7d7d;
  text-align: left;
  line-height: 1.5;
  padding: 0 16px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .product22_kpiCard-description {
    font-size: 1.2rem;
  }
}
.product22_currentStatus {
  width: 100%;
  padding: 32px 24px;
  border-top: 1px solid #333333;
  color: #fff;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.product22_currentStatus-title {
  font-size: 16px;
  padding-bottom: 32px;
}
.product22 .statusBt {
  padding: 16px 32px;
  border: 2px solid #323232;
  border-radius: 100px;
  transition: 0.3s;
}
.product22 .statusBt:hover {
  background-color: #323232;
  border: 2px solid #929292;
}
.product22 .statusBtImg {
  width: 200px;
}
.product22_features {
  width: 100%;
  padding: 64px 32px;
  margin: 64px 0;
  background-color: #000;
}
.product22_features-inner {
  padding-bottom: 128px;
}
@media screen and (max-width: 768px) {
  .product22_features-inner .container22 {
    padding: 0;
  }
}
.product22_features-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.4rem;
  color: #fff;
  padding-bottom: 24px;
}
.product22_features-itemTtlArea {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .product22_features-itemTtlArea {
    height: auto;
  }
}
.product22_features-itemIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 37px;
  height: 37px;
  background-color: #333333;
  border-radius: 4px;
}
.product22_features-itemTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.4rem;
  padding-left: 16px;
  color: #fff;
}
.product22_features-description {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
  color: #fff;
}
.product22_features-aws {
  text-align: center;
  padding: 32px 0;
}
.product22_features-ttlArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  padding-bottom: 128px;
}
@media screen and (max-width: 768px) {
  .product22_features-ttlArea {
    flex-direction: column;
    padding-bottom: 32px;
  }
}
.product22_features-ttlArea-textArea {
  flex: 50%;
  text-align: left;
  padding: 16px;
}
@media screen and (max-width: 768px) {
  .product22_features-ttlArea-textArea {
    order: 1;
  }
}
.product22_features-ttlArea-imgArea {
  flex: 50%;
}
@media screen and (max-width: 768px) {
  .product22_features-ttlArea-imgArea {
    order: 2;
  }
}
.product22_features-items {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  padding: 16px;
}
@media screen and (max-width: 768px) {
  .product22_features-items {
    flex-direction: column;
    gap: 64px;
  }
}
.product22_features-itemsCard {
  width: calc((1312px - 64px) / 3);
  text-align: left;
}
@media screen and (max-width: 1311px) {
  .product22_features-itemsCard {
    width: calc(50% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .product22_features-itemsCard {
    width: 100%;
  }
}
.product22_tech {
  width: 100%;
  margin: 64px 16px;
  background-color: #000;
}
@media screen and (max-width: 768px) {
  .product22_tech {
    width: auto;
  }
}
.product22_tech-stackArea {
  width: 100%;
  padding: 16px;
  border: 1px solid #545454;
}
.product22_techTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #fff;
  border-bottom: 1px solid #545454;
}
.product22_techItems {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 16px;
}
@media screen and (max-width: 768px) {
  .product22_techItems {
    flex-direction: column;
  }
}
.product22_techItems-card {
  min-width: 200px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
}
.product22_techItems-card:not(:last-of-type) {
  border-right: 1px solid #545454;
}
@media screen and (max-width: 768px) {
  .product22_techItems-card:not(:last-of-type) {
    border-right: none;
  }
}
.product22_techItems-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #909090;
  padding-bottom: 8px;
}
.product22_techItems-item {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #fff;
}
.product22_techItems-itemList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.product22_techItems-itemListBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.product22_techItems-itemListBox:not(:last-of-type) {
  padding-right: 16px;
}
.product22_ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #fff;
  margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .product22_ttl {
    padding: 40px 0 40px 0;
    margin-bottom: 20px;
  }
}
.product22_area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.product22_left {
  flex: 1;
}
@media screen and (max-width: 768px) {
  .product22_left {
    display: none;
  }
}
.product22_right {
  flex: 1;
  margin-left: 48px;
}
@media screen and (max-width: 768px) {
  .product22_right {
    margin-left: 0;
  }
}
.product22_btArea {
  margin-top: 60px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .product22_btArea {
    text-align: center;
  }
}
.product22_baas {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 150px 0;
}
@media screen and (max-width: 768px) {
  .product22_baas {
    flex-direction: column;
  }
}
.product22_baas-left {
  flex: 1;
}
.product22_baas-right {
  flex: 1;
}
.product22_baas-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #fff;
  margin-bottom: 30px;
}
.product22_baas-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .product22_baas-text {
    margin-bottom: 40px;
  }
}
.product22_list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 100px;
}
.product22_box {
  display: inline-block;
  width: calc((1312px - 186px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  margin-bottom: 80px;
  padding: 20px;
  cursor: pointer;
  transition: 0.2s;
}
.product22_box:hover {
  transform: translate(-5px, -5px);
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.7);
}
.product22_box:hover .bt22_text::after {
  right: -15px;
}
@media screen and (max-width: 1311px) {
  .product22_box {
    width: calc(33.3333333333% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .product22_box {
    width: 100%;
  }
}
.product22_box:not(:nth-of-type(3n)) {
  margin-right: 45px;
}
@media screen and (max-width: 768px) {
  .product22_box:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
}
.product22_box-ttlarea {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}
.product22_box-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  text-align: left;
  color: #fff;
  padding: 10px 0 10px 40px;
}
.product22_box-icon {
  position: absolute;
  width: 33px;
  height: 33px;
  margin-top: -16px;
  top: 50%;
  left: 0;
}
.product22_box-textarea {
  flex-grow: 1;
}
.product22_box-text {
  font-family: "Noto Sans JP", sans-serif;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #fff;
  margin-bottom: 20px;
}
.product22_box-btarea {
  width: 100%;
  text-align: left;
}
.product22_scrollSection {
  display: flex;
  flex-direction: column;
  gap: 248px;
  padding: 32px 48px;
}
@media screen and (max-width: 768px) {
  .product22_scrollSection {
    padding: 32px 0;
    gap: 32px;
  }
}
.product22_section {
  width: 100%;
  max-width: 1312px;
  margin: 0 auto;
}
.product22_section-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 38% 43%;
  grid-gap: 1rem;
  align-items: start;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .product22_section-inner {
    grid-template-columns: 1fr;
  }
}
.product22_section-leftArea {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .product22_section-leftArea {
    position: static;
  }
}
.product22_section-rightArea {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 80px;
}
@media screen and (max-width: 768px) {
  .product22_section-rightArea {
    padding-top: 0;
  }
}
.product22_section-titleArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .product22_section-titleArea {
    flex-direction: column;
    padding: 0 32px 16px;
    gap: 16px;
  }
}
.product22_section-titleEN {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #00c6ab;
  padding: 16px 16px 4px 16px;
}
@media screen and (max-width: 768px) {
  .product22_section-titleEN {
    font-size: 1.2rem;
  }
}
.product22_section-titleJP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #fff;
  padding: 4px 16px 16px 16px;
}
.product22_section-textBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 40px 0;
  border-radius: 16px;
  background: #000000;
}
.product22_section-textBox.bg-white {
  background: #fff;
}
.product22_section-textBox.bg-gray {
  background-color: #c2c2c2;
}
.product22_section-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  padding: 0 48px 16px 48px;
  border-bottom: 1px solid #d8d8d8;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .product22_section-title {
    padding: 0 32px 16px 32px;
  }
}
.product22_section-title.text-white {
  color: #fff;
  border-bottom: none;
}
.product22_section-titleStyle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  background: #000000;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 100px;
  margin: 0 48px 16px 48px;
}
.product22_section-descriptionBlack {
  display: flex;
  flex-direction: column;
  align-self: center;
  gap: 24px;
  padding: 0 48px;
}
@media screen and (max-width: 768px) {
  .product22_section-descriptionBlack {
    padding: 0 32px;
  }
}
.product22_section-description {
  display: flex;
  flex-direction: column;
  padding: 0 48px;
}
@media screen and (max-width: 768px) {
  .product22_section-description {
    padding: 0 32px;
  }
}
.product22_section-description ol {
  list-style: decimal inside;
  padding-bottom: 24px;
}
.product22_section-description ol p {
  padding-left: 16px;
}
.product22_section-description ul {
  list-style: disc inside;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding-bottom: 24px;
}
.product22_section-description ul li {
  padding-bottom: 8px;
}
.product22_section-description ul li.list-style {
  padding-left: 16px;
}
.product22_section-sentence {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  padding: 24px 0;
  color: #000;
  border-bottom: 1px solid #d8d8d8;
}
.product22_section-sentence h3 {
  font-weight: 700;
  display: inline-block;
  margin-bottom: 20px;
  vertical-align: top;
}
.product22_section-sentence span {
  font-weight: 700;
}
.product22_section-sentence.no-border-bottom {
  border-bottom: none;
}
.product22_section-sentence.text-white {
  color: #fff;
  border-bottom: none;
}
.product22_section-url {
  text-decoration: underline;
  color: inherit;
}
.product22_section-url:visited {
  color: inherit;
}
.product22_section-imageArea, .product22_section-imageContainer {
  align-self: center;
}
.product22_section-leftImage {
  width: 100%;
  height: 60vh;
}
.product22_section-image {
  display: flex;
  justify-content: center;
  align-self: center;
  border-radius: 10px;
  padding-top: 24px;
}
@media screen and (max-width: 768px) {
  .product22_section-image {
    width: auto;
    padding-top: 0;
  }
}
.product22_section-documentBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 32px;
  border-radius: 16px;
  background: #fff;
}
.product22_section-boxTitle {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  align-self: flex-end;
  padding: 16px 24px;
}
.product22_section-contents {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.product22_section-documentTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  padding-left: 56px;
  width: 250px;
  position: relative;
  border-right: 1px solid #d8d8d8;
}
.product22_section-documentTtl::before {
  position: absolute;
  content: "";
  background-image: url("/2022/03/icon-doc22-dev.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateX(80%);
  left: 0;
  width: 28px;
  height: 28px;
}
.product22_section-btnList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 24px;
  width: 100%;
}
.product22_section-btn {
  padding: 8px 0;
  border-bottom: 1px solid #d8d8d8;
  justify-content: flex-start;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  transition: 0.3s;
}
.product22_section-btn::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  right: 30px;
  margin-top: -2px;
  width: 24px;
  height: 24px;
  transition: 0.3s;
}
.product22_section-btn:hover {
  color: #000000;
  background-color: #f7f7f7;
}
.product22_section-btn:hover::after {
  transform: translateX(5px);
  animation-timing-function: ease-out;
  animation-duration: 300ms;
}

.underline-link {
  line-height: 1.5;
  text-decoration: underline;
}

/* 
 * mixin
 *
*/
.database22 {
  width: 100%;
  padding: 100px 0 50px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .database22 {
    padding: 40px 0 40px 0;
  }
}
.database22_features {
  display: block;
  text-align: left;
  padding: 30px 0 0 0;
}

/* 
 * mixin
 *
*/
.strage22 {
  width: 100%;
  padding: 100px 0 50px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .strage22 {
    padding: 40px 0 40px 0;
  }
}
.strage22_features {
  display: block;
  text-align: left;
  padding: 30px 0 0 0;
}
.strage22_img-1 {
  text-align: center;
}
.strage22_img-1 img {
  width: 50%;
}
@media screen and (max-width: 768px) {
  .strage22_img-1 img {
    width: 80%;
  }
}

/* 
 * mixin
 *
*/
.excode22 {
  width: 100%;
  padding: 100px 0 150px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .excode22 {
    padding: 40px 0 40px 0;
  }
}
.excode22_article {
  width: 100%;
  background-color: #181818;
  padding: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 60px;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .excode22_article {
    display: block;
    padding: 20px;
  }
}
.excode22_articleBox {
  width: calc((1312px - 256px) / 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .excode22_articleBox {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .excode22_articleBox:first-of-type {
    margin-bottom: 30px;
  }
}
.excode22_articleBox-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #fff;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .excode22_articleBox-ttl {
    font-size: 1.4rem;
  }
}
.excode22_articleBox-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #fff;
}
.excode22_features {
  display: block;
  text-align: left;
  padding: 30px 0 40px 0;
}
@media screen and (max-width: 768px) {
  .excode22_features {
    padding: 30px 0 0 0;
  }
}

/* 
 * mixin
 *
*/
.notification22 {
  width: 100%;
  padding: 100px 0 50px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .notification22 {
    padding: 40px 0 40px 0;
  }
}
.notification22_features {
  display: block;
  text-align: left;
  padding: 30px 0 0 0;
}

/* 
 * mixin
 *
*/
.certification22 {
  width: 100%;
  padding: 100px 0 50px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .certification22 {
    padding: 40px 0 40px 0;
  }
}
.certification22_features {
  display: block;
  text-align: left;
  padding: 30px 0 0 0;
}

/* 
 * mixin
 *
*/
.document22 {
  position: relative;
  width: 100%;
  background-color: #f7f7f7;
  padding: 40px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .document22 {
    padding: 0 0 40px 0;
  }
}
.document22_dgBase {
  width: 100%;
  padding: 60px;
  text-align: left;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .document22_dgBase {
    padding: 60px 20px;
  }
}
.document22_dgBase-ttl {
  display: inline-block;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #333333;
  padding-left: 40px;
  margin-bottom: 60px;
}
.document22_dgBase-ttl::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/18170047/icon-doc22-dev.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 0;
  margin-top: -16px;
  width: 33px;
  height: 33px;
}
.document22_dgBase-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.05rem;
  text-align: left;
}
.document22_dgBase-contents {
  font-family: "Montserrat", sans-serif;
  display: block;
  flex-shrink: 1;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: left;
  color: #333333;
  padding-top: 40px;
  padding-bottom: 10px;
  border-bottom: 1px solid #00c6ab;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .document22_dgBase-contents {
    padding-top: 60px;
    margin-bottom: 0;
  }
}
.document22_dgca {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
.document22_dgBox {
  width: calc((1312px - 276px) / 4);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 40px;
  transition: 0.3s;
}
@media screen and (max-width: 1311px) {
  .document22_dgBox {
    width: calc((100% - 60px) / 4);
  }
}
@media screen and (max-width: 999px) {
  .document22_dgBox {
    width: calc((100% - 20px) / 2);
  }
}
@media screen and (max-width: 768px) {
  .document22_dgBox {
    width: 100%;
    margin-bottom: 10px;
  }
}
.document22_dgBox:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.document22_dgBox-ttl {
  display: inline-block;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.4rem;
  line-height: 2;
  text-align: left;
  color: #333333;
  margin-bottom: 20px;
}
.document22_dgBox-text {
  flex-grow: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05rem;
  color: #333333;
  text-align: left;
}
.document22_dgBox-link {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  color: #00c6ab;
  text-align: left;
  margin-top: 20px;
}
.document22_dgBox-link::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/18170041/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: -20px;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}
.document22_2c {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .document22_2c {
    gap: 0;
  }
}
.document22_2cBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  width: calc((1312px - 160px) / 2);
  padding: 60px;
  text-align: left;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 40px;
  margin-bottom: 40px;
  transition: 0.3s;
}
@media screen and (max-width: 1311px) {
  .document22_2cBox {
    width: calc((100% - 60px) / 2);
  }
}
@media screen and (max-width: 768px) {
  .document22_2cBox {
    width: 100%;
    margin-bottom: 0;
    padding: 40px;
  }
}
.document22_2cBox:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.document22_2cBox-ttlApi {
  display: inline-block;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #333333;
  padding-left: 40px;
  margin-bottom: 30px;
}
.document22_2cBox-ttlApi::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/18170046/icon-doc22-api.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 0;
  margin-top: -16px;
  width: 33px;
  height: 33px;
}
.document22_2cBox-ttlComu {
  display: inline-block;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #333333;
  padding-left: 40px;
  margin-bottom: 30px;
}
.document22_2cBox-ttlComu::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/18170047/icon-doc22-comunity.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 0;
  margin-top: -16px;
  width: 33px;
  height: 33px;
}
.document22_2cBox-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.05rem;
  text-align: left;
  flex-grow: 1;
}
.document22_2cBox-link {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  color: #00c6ab;
  text-align: left;
  margin-top: 40px;
}
.document22_2cBox-link::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/18170041/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: -20px;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  transition: 0.3s;
}

/* 
 * mixin
 *
*/
.enterprise22 {
  width: 100%;
  padding: 100px 0 50px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .enterprise22 {
    padding: 40px 0 40px 0;
  }
}
.enterprise22_features {
  display: block;
  text-align: left;
  padding: 30px 0 0 0;
}

/* 
 * mixin
 *
*/
.security22 {
  width: 100%;
  padding: 100px 0 50px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .security22 {
    padding: 40px 0 40px 0;
  }
}
.security22_col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.security22_deco {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.security22_deco::before {
  position: absolute;
  content: "";
  background-image: url("/2022/04/ttl-deco-security.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  bottom: 0;
  right: 0;
  width: 581px;
  height: 563px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .security22_deco::before {
    right: -80%;
  }
}
.security22_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.4rem;
  text-align: left;
  color: #000;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .security22_text {
    font-size: 1.6rem;
    padding-bottom: 0;
  }
}
.security22_features {
  display: block;
  text-align: left;
  padding: 30px 0 0 0;
}
.security22_ttlPadding {
  padding: 20px;
}
.security22_ttlBgColor {
  background-color: #fff;
}
.security22_list li {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #333333;
  margin-bottom: 20px;
  padding-left: 30px;
}
.security22_list li::after {
  position: absolute;
  content: "";
  background-image: url("/2022/04/icon-check.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
}
.security22_certification {
  width: 100%;
  margin-bottom: 40px;
}
.security22_certification-box {
  display: grid;
  grid-template-rows: 120px 1fr;
  gap: 40px;
  padding: 40px;
  border-radius: 4px;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .security22_certification-box {
    flex-direction: column;
  }
}
.security22_certification-box:hover {
  transform: scale(1.05);
  background-color: #f7f7f7;
}
.security22_certification-box:hover .bt22_textBgWhite::after {
  right: -15px;
}
.security22_certification-box .awsFtrLogo {
  width: 120px;
}
.security22_certification-ismsLogoArea {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.security22_certification-ismsLogoArea .ismsLogo {
  height: 70px;
}
.security22_certification-textArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.security22_certification-text {
  flex-grow: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #000;
  padding-bottom: 10px;
}

/* 
 * mixin
 *
*/
.newsTopics {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(24, 24, 24) 100%);
  padding: 80px 0 40px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .newsTopics {
    padding: 40px 0 40px 0;
  }
}
.newsTopics_area {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .newsTopics_area {
    display: block;
    gap: 40px;
  }
}
.newsTopics_mark {
  position: absolute;
  content: "News";
  top: 0;
  left: 0;
  padding: 5px 10px;
  background-color: #e91e63;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  color: #fff;
  text-align: center;
}
.newsTopics_box {
  display: inline-block;
  position: relative;
  flex: 1;
  width: 100%;
  background: #2C2C2C;
  border-radius: 4px;
  align-self: stretch;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .newsTopics_box:first-of-type {
    margin-bottom: 40px;
  }
}
.newsTopics_box:hover {
  transform: scale(1.05);
  background: #1f1f1f;
}
.newsTopics_box:hover .bt22_text::after {
  right: -15px;
}
.newsTopics_box-btArea {
  text-align: left;
  padding: 20px;
}
.newsTopics_ttlArea {
  padding: 50px 20px 20px 20px;
  text-align: left;
}
.newsTopics_ttlArea-upper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.newsTopics_ttlArea time {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #fff;
  text-align: left;
  margin-left: 10px;
}
.newsTopics_ttlArea-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.4rem;
  color: #fff;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .newsTopics_ttlArea-ttl {
    font-size: 1.8rem;
    line-height: 1.8;
  }
}

/* 
 * mixin
 *
*/
.price22 {
  width: 100%;
  padding: 50px 0 50px 0;
  overflow-x: hidden;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .price22 {
    padding: 40px 0 40px 0;
  }
}
.price22_join {
  grid-column-start: 1;
  grid-column-end: 6;
}
.price22_selectPlansArea {
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (min-width: 1000px) {
  .price22_selectPlansArea {
    display: none;
  }
}
.price22 .selectPlansTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  margin-bottom: 10px;
  margin-top: 20px;
}
.price22_selectPlans {
  position: relative;
  width: 100%;
  height: 40px;
  cursor: pointer;
  background-color: #fff;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.1));
  border: 2px solid #00c6ab;
  border-radius: 4px;
  padding: 5px 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: #000;
}
.price22_ttlWrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 100;
}
@media screen and (max-width: 999px) {
  .price22_ttlWrapper {
    grid-template-columns: 1fr;
  }
}
.price22_ttlWrapper div {
  padding: 10px;
}
.price22_ttlDetailWrapper {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(50px, auto);
  width: 100%;
}
@media screen and (max-width: 999px) {
  .price22_ttlDetailWrapper {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}
.price22_contentsWrapper {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(30px, auto);
  width: 100%;
}
@media screen and (max-width: 999px) {
  .price22_contentsWrapper {
    grid-template-columns: 180px 1fr;
  }
}
.price22_contentsWrapper div {
  padding: 10px 20px;
}
.price22_contentsWrapper .ttl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  text-align: left;
  border-top: 1px solid #eee;
}
.price22_contentsWrapper .ttl_join {
  grid-column-start: 1;
  grid-column-end: 6;
  background-color: #cbcbcb;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 999px) {
  .price22_contentsWrapper .ttl_join {
    grid-column-end: 3;
  }
}
.price22_contentsWrapper .ttl_join p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
}
.price22_contentsWrapper .ttl_text {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
}
.price22_contentsWrapper .font_small {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.price22_contentsWrapper .font_sub {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
}
.price22_contentsWrapper .font_note {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.price22_contentsWrapper .qbtArea {
  position: relative;
  padding: 0;
}
.price22_contentsWrapper .qbt {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  background-color: #00c6ab;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}
.price22_contentsWrapper .qbt:hover {
  background-color: #006356;
}
.price22_contentsWrapper .qContents {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  content: "";
  top: -60px;
  right: -250px;
  width: 240px;
  min-height: 100px;
  background-color: #333333;
  border-radius: 4px;
  padding: 15px;
  text-align: left;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .price22_contentsWrapper .qContents {
    top: -100px;
    right: -150px;
  }
}
.price22_contentsWrapper .qContents.has_active {
  opacity: 1;
  visibility: visible;
  top: -80px;
}
@media screen and (max-width: 768px) {
  .price22_contentsWrapper .qContents.has_active {
    top: -130px;
  }
}
.price22_contentsWrapper .valueBox {
  border-top: 1px solid #eee;
  border-left: 1px solid #aaa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 999px) {
  .price22_contentsWrapper .valueBox {
    border-right: 1px solid #aaa;
  }
}
.price22_contentsWrapper .valueBox.business {
  border-right: 2px solid #e91e63;
  border-left: 2px solid #e91e63;
}
.price22_contentsWrapper .valueBox.business .i_check {
  color: #e91e63;
}
@media screen and (max-width: 999px) {
  .price22_contentsWrapper .valueBox.business {
    border-right: 1px solid #aaa;
    border-left: 1px solid #aaa;
  }
}
.price22_contentsWrapper .valueBox.enterprise {
  border-right: 1px solid #aaa;
  border-left: none;
}
@media screen and (max-width: 999px) {
  .price22_contentsWrapper .valueBox.enterprise {
    border-right: 1px solid #aaa;
    border-left: 1px solid #aaa;
  }
}
.price22_contentsWrapper .valueBox .value_subArea {
  width: 100%;
  text-align: left;
}
@media screen and (max-width: 999px) {
  .price22_contentsWrapper .valueBox .value_subArea {
    padding: 0;
    padding-top: 5px;
  }
}
.price22_contentsWrapper .valueBox .value_text {
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.4;
}
.price22_contentsWrapper .valueBox .value_textMiddle {
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.4;
}
.price22_contentsWrapper .valueBox .value_textStandard {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
}
.price22 .checkArea {
  grid-auto-rows: minmax(30px, auto);
}
.price22 .checkArea div {
  padding: 10px 20px;
}
.price22 .lead {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  padding: 10px 0;
}
.price22 .caption {
  position: relative;
  display: inline-block;
  padding: 3px 10px;
  color: #fff;
  background-color: #e91e63;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
}
.price22 .caption::after {
  position: absolute;
  content: "";
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 30px solid #e91e63;
}
.price22_priceName {
  color: #000;
  font-family: "Montserrat", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05rem;
  text-align: left;
  padding: 40px 30px 0 30px;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-radius: 4px 4px 0 0;
}
@media screen and (max-width: 999px) {
  .price22_priceName {
    border-right: 1px solid #aaa;
  }
}
.price22_priceName.hobby {
  border-top: none;
  border-left: none;
  border-radius: none;
  padding: 40px 0 30px 0;
}
@media screen and (max-width: 999px) {
  .price22_priceName.hobby {
    border-right: none;
    padding: 40px 0 0 0;
  }
}
.price22_priceName.business {
  position: relative;
  color: #e91e63;
  border-right: 2px solid #e91e63;
  border-top: 2px solid #e91e63;
  border-left: 2px solid #e91e63;
  border-radius: 4px 4px 0 0;
}
.price22_priceName.enterprise {
  border-right: 1px solid #aaa;
  border-left: none;
}
@media screen and (max-width: 999px) {
  .price22_priceName.enterprise {
    border-left: 1px solid #aaa;
  }
}
.price22 .business_captionSp {
  display: none;
}
@media screen and (max-width: 999px) {
  .price22 .business_captionSp {
    display: block;
    width: 100%;
    padding: 10px;
    color: #fff;
    background-color: #e91e63;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 2;
    letter-spacing: 0.05rem;
    text-align: center;
    margin-bottom: 20px;
  }
}
.price22_priceNameScroll {
  color: #000;
  font-family: "Montserrat", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05rem;
  text-align: center;
  padding: 10px 40px 10px 40px;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
}
.price22_priceNameScroll.business {
  position: relative;
  color: #e91e63;
  border-right: 2px solid #e91e63;
  border-top: 2px solid #e91e63;
  border-left: 2px solid #e91e63;
  border-bottom: 2px solid #e91e63;
}
.price22_priceNameScroll.enterprise {
  border-left: none;
  border-right: 1px solid #aaa;
}
.price22 .ttlDetailBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 30px 20px 30px;
  border-left: 1px solid #aaa;
}
@media screen and (max-width: 999px) {
  .price22 .ttlDetailBox {
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-radius: 0 0 4px 4px;
    justify-content: initial;
  }
}
.price22 .ttlDetailBox.hobby {
  border-top: 1px solid #aaa;
  border-radius: 4px 4px 0 0;
}
.price22 .ttlDetailBox.hobby .ttlDetailText {
  align-self: stretch;
  width: 100%;
  min-height: 60px;
  margin: 0 auto;
  color: #666;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.price22 .ttlDetailBox.business {
  border-left: 2px solid #e91e63;
  border-right: 2px solid #e91e63;
}
.price22 .ttlDetailBox.business .bt22_slim {
  background-color: #e91e63;
}
.price22 .ttlDetailBox.business .bt22_slim:hover {
  background-color: #c2185b;
}
@media screen and (max-width: 999px) {
  .price22 .ttlDetailBox.business {
    border-bottom: 2px solid #e91e63;
  }
}
.price22 .ttlDetailBox.business .ttlDetailText {
  align-self: stretch;
  width: 100%;
  min-height: 60px;
  margin: 0 auto;
  color: #e91e63;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.price22 .ttlDetailBox.enterprise {
  border-right: 1px solid #aaa;
  border-left: none;
}
@media screen and (max-width: 999px) {
  .price22 .ttlDetailBox.enterprise {
    border-left: 1px solid #aaa;
  }
}
.price22 .ttlDetailText {
  align-self: stretch;
  width: 100%;
  min-height: 60px;
  margin: 0 auto;
  color: #00c6ab;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.price22_priceArea {
  width: 100%;
  min-height: 50px;
  flex-grow: 1;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.price22_price {
  display: block;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
}
.price22_priceInitial {
  display: block;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  margin-top: 10px;
}
.price22_contact {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  margin-bottom: 5px;
}
.price22_discription {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
}
.price22_btArea {
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 999px) {
  .price22_btArea {
    width: 100%;
  }
}
.price22_btArea .bt22_standard {
  width: 100%;
}
.price22 .ttlCtaBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
}
.price22 .ttlCtaBox.business .bt22_slim {
  background-color: #e91e63;
}
.price22 .ttlCtaBox.business .bt22_slim:hover {
  background-color: #c2185b;
}
.price22 .bb {
  border-bottom: 1px solid #eee;
}
.price22 .bb_val {
  border-bottom: 1px solid #aaa;
  border-radius: 0 0 4px 4px;
}
.price22 .bb_val.business {
  border-bottom: 2px solid #e91e63;
  border-radius: 0 0 4px 4px;
}
@media screen and (max-width: 999px) {
  .price22 .bb_val.business {
    border-bottom: 1px solid #aaa;
  }
}
.price22 .i_check {
  color: #00c6ab;
  font-weight: 900;
}

.hobby {
  background-color: #f7f7f7;
}
@media screen and (max-width: 999px) {
  .hobby {
    display: none !important;
  }
  .hobby.select_plan {
    display: inherit !important;
  }
}

.starter {
  background-color: #fff;
}
@media screen and (max-width: 999px) {
  .starter {
    display: none !important;
  }
  .starter.select_plan {
    display: inherit !important;
  }
}

.business {
  background-color: #fff;
}
@media screen and (max-width: 999px) {
  .business {
    display: none !important;
  }
  .business.select_plan {
    display: inherit !important;
  }
}

.enterprise {
  background-color: #fff;
}
@media screen and (max-width: 999px) {
  .enterprise {
    display: none !important;
  }
  .enterprise.select_plan {
    display: inherit !important;
  }
}

@media screen and (max-width: 999px) {
  .emp {
    display: none !important;
  }
}

.font_large {
  font-size: 2.4rem;
}

.ttlSticky_container {
  display: none;
  position: fixed;
  top: 64px;
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  z-index: 200;
  transition: 0.3s;
}
@media screen and (max-width: 999px) {
  .ttlSticky_container {
    padding: 0;
  }
}
.ttlSticky_container.is_active {
  display: block;
  animation: showPlanName 0.5s ease;
}

@keyframes showPlanName {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ttlSticky {
  width: 100%;
  max-width: 1312px;
}

/* 
 * mixin
 *
*/
.biztmp22 {
  width: 100%;
}
.biztmp22 .objArea {
  position: absolute;
  width: 1312px;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .biztmp22 .objArea {
    width: 140%;
    top: 110px;
  }
}
.biztmp22 .objArea img {
  display: inline-block;
  width: 552px;
  height: 691px;
  text-align: right;
}
@media screen and (max-width: 768px) {
  .biztmp22 .objArea img {
    width: 250px;
    height: 312px;
  }
}
.biztmp22 .main {
  position: relative;
  width: 100%;
  padding: 100px 0 100px 0;
}
@media screen and (max-width: 768px) {
  .biztmp22 .main {
    padding: 40px 0 40px 0;
  }
}
.biztmp22 .main_text {
  width: 50%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.05rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .biztmp22 .main_text {
    width: 100%;
  }
}
.biztmp22 .issue {
  width: 100%;
  padding: 100px 0 100px 0;
  background-color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .biztmp22 .issue {
    padding: 60px 0 40px 0;
  }
}
.biztmp22 .issue .column22_text-ttlLarge {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .biztmp22 .issue .column22_text-ttlLarge {
    text-align: left;
  }
}
.biztmp22 .issue-details {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .biztmp22 .issue-details {
    flex-direction: column;
  }
}
.biztmp22 .issue-details .subject {
  flex: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.biztmp22 .issue-details .subject .box {
  width: 90%;
  height: 150px;
  padding: 20px;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .biztmp22 .issue-details .subject .box {
    width: 100%;
  }
}
.biztmp22 .issue-details .subject .box:not(:last-of-type) {
  margin-bottom: 20px;
}
.biztmp22 .issue-details .subject .box_ttlArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
.biztmp22 .issue-details .subject .box .mark {
  font-size: 12px;
  color: #fff;
  padding: 5px 8px;
  background-color: #000;
  margin-right: 10px;
}
.biztmp22 .issue-details .subject .box .ttl {
  flex-grow: 1;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}
.biztmp22 .issue-details .subject .box .text {
  font-size: 14px;
  text-align: left;
  line-height: 2;
  letter-spacing: 0.05rem;
}
.biztmp22 .issue-details .arrow, .biztmp22 .issue-details .arrow-right-green, .biztmp22 .issue-details .arrow-down-lg, .biztmp22 .issue-details .arrow-down-green, .biztmp22 .issue-details .arrow-down-blue {
  flex: 10%;
}
.biztmp22 .issue-details .arrow-img-pc {
  display: block;
  width: 70%;
  margin: 0 20px;
}
@media screen and (max-width: 768px) {
  .biztmp22 .issue-details .arrow-img-pc {
    display: none;
  }
}
.biztmp22 .issue-details .arrow-img-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .biztmp22 .issue-details .arrow-img-sp {
    display: block;
    width: 50%;
    margin: 20px auto;
  }
}
.biztmp22 .issue-details .result {
  flex: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.biztmp22 .issue-details .result .box {
  width: 90%;
  height: 150px;
  padding: 20px;
  background-color: #00c6ab;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .biztmp22 .issue-details .result .box {
    width: 100%;
  }
}
.biztmp22 .issue-details .result .box:not(:last-of-type) {
  margin-bottom: 20px;
}
.biztmp22 .issue-details .result .box img {
  width: 200px;
  margin-bottom: 20px;
}
.biztmp22 .issue-details .result .box .text {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 2;
  letter-spacing: 0.05rem;
  color: #fff;
}
.biztmp22 .features {
  position: relative;
  width: 100%;
  padding: 100px 0 100px 0;
}
@media screen and (max-width: 768px) {
  .biztmp22 .features {
    padding: 60px 0 40px 0;
  }
}
.biztmp22 .features .column22_text-ttlLarge {
  text-align: left;
}
.biztmp22 .features__bg {
  position: absolute;
  content: "";
  background: linear-gradient(rgb(0, 198, 171), rgba(255, 255, 255, 0));
  top: 0;
  left: 0;
  width: 100%;
  height: 250px;
  z-index: -1;
}
.biztmp22 .features .box3c {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .biztmp22 .features .box3c {
    flex-direction: column;
    gap: 20px;
  }
}
.biztmp22 .features .box3c .box {
  width: calc((1312px - 186px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  padding: 40px;
  height: 100%;
}
.biztmp22 .features .box3c .box img {
  height: 150px;
}
.biztmp22 .features .box3c .box .ttl {
  display: block;
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
  padding: 20px 0;
}
.biztmp22 .features .box3c .box .text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
}
.biztmp22 .configuration {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 40px 0;
}
.biztmp22 .configuration .imgArea {
  width: 100%;
  text-align: center;
  padding: 40px 0;
}
.biztmp22 .configuration .imgArea img {
  width: 90%;
}
@media screen and (max-width: 768px) {
  .biztmp22 .configuration .imgArea img {
    width: 100%;
  }
}
.biztmp22 .example {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 40px 0;
}
.biztmp22 .example .imgArea {
  width: 100%;
  text-align: center;
  padding: 40px 0;
}
.biztmp22 .example .imgArea img {
  width: 90%;
}
.biztmp22 .example .exBox {
  width: 100%;
  padding: 40px;
  margin-bottom: 60px;
  border-radius: 4px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.biztmp22 .example .exBox .ttlArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding-bottom: 30px;
}
.biztmp22 .example .exBox .ttlArea img {
  height: 40px;
}
.biztmp22 .example .exBox .ttlArea h3 {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
}
.biztmp22 .example .exBox .text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  padding-bottom: 30px;
}
.biztmp22 .example .exBox .thumbnailsArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .biztmp22 .example .exBox .thumbnailsArea {
    flex-direction: column;
  }
}
.biztmp22 .example .exBox .thumbnailsArea .box {
  width: 33.3333333333%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .biztmp22 .example .exBox .thumbnailsArea .box {
    width: 100%;
  }
}
.biztmp22 .example .exBox .thumbnailsArea .box img {
  width: 100%;
  border: 1px solid #cbcbcb;
}
.biztmp22 .example .exBox .thumbnailsArea .box .text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  padding-top: 10px;
}
.biztmp22 .example .exBox .devArea {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .biztmp22 .example .exBox .devArea {
    flex-direction: column;
    gap: 10px;
  }
}
.biztmp22 .example .exBox .devArea .comName {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
}
.biztmp22 .example .exBox .devArea .comLogo {
  height: 27px;
  padding-right: 20px;
}
.biztmp22 .partner {
  position: relative;
  width: 100%;
  text-align: left;
  background-color: #f7f7f7;
  padding: 100px 0;
}
.biztmp22 .partner .enTxt {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
}
.biztmp22 .partner .enTxt {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
}
.biztmp22 .merit {
  width: 100%;
  padding: 40px 0;
}
.biztmp22 .merit h3 {
  display: block;
  padding: 10px 0 40px 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
}
.biztmp22 .merit .box3c {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .biztmp22 .merit .box3c {
    flex-direction: column;
  }
}
.biztmp22 .merit .box3c .box {
  width: calc((1312px - 186px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  padding: 10px;
  background-color: #fff;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .biztmp22 .merit .box3c .box {
    width: 100%;
  }
}
.biztmp22 .merit .box3c .box .no {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
  padding: 10px 0 20px 0;
}
.biztmp22 .merit .box3c .box .ttl {
  display: block;
  flex-grow: 1;
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
  padding-bottom: 40px;
}
.biztmp22 .merit .box3c .box .textArea {
  position: relative;
  width: 100%;
}
.biztmp22 .merit .box3c .box .textArea .arrowUp {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 63px;
}
.biztmp22 .merit .box3c .box .textArea .text {
  width: 100%;
  height: 130px;
  align-self: stretch;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  background-color: #00c6ab;
  padding: 20px 20px;
}
.biztmp22 .partnerLinkArea {
  width: 100%;
  text-align: center;
}
.biztmp22 .partnerLinkArea .ttl {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .biztmp22 .partnerLinkArea .ttl {
    font-size: 1.4rem;
  }
}

/* 
 * mixin
 *
*/
.pap {
  position: relative;
  background-color: #f7f7f7;
}
.pap .objArea__main {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
}
.pap .objArea__main img {
  display: inline-block;
  width: 846px;
}
@media screen and (max-width: 768px) {
  .pap .objArea__main img {
    width: 250px;
  }
}
.pap .objArea__footer {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
}
.pap .objArea__footer img {
  display: inline-block;
  width: 281px;
}
@media screen and (max-width: 768px) {
  .pap .objArea__footer img {
    width: 150px;
  }
}
.pap .main {
  position: relative;
  width: 100%;
  padding: 100px 0 100px 0;
}
@media screen and (max-width: 768px) {
  .pap .main {
    padding: 40px 0 40px 0;
  }
}
.pap .main__2colum {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 80px;
  padding-top: 60px;
}
@media screen and (max-width: 1000px) {
  .pap .main__2colum {
    flex-direction: column;
    gap: 40px;
  }
}
.pap .main__2colum-main {
  flex: 1;
  padding-bottom: 60px;
}
@media screen and (max-width: 1000px) {
  .pap .main__2colum-main {
    padding-bottom: 20px;
  }
}
.pap .main__2colum-entry {
  align-self: stretch;
  padding-bottom: 60px;
}
@media screen and (max-width: 1000px) {
  .pap .main__2colum-entry {
    padding-bottom: 20px;
  }
}
.pap .main__2colum-entry .inner {
  width: 400px;
  background-color: #fff;
  padding: 40px;
}
@media screen and (max-width: 1000px) {
  .pap .main__2colum-entry .inner {
    width: 100%;
  }
}
.pap .main__2colum-entry .ttlArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}
.pap .main__2colum-entry .ttlArea img {
  width: 80px;
}
.pap .main__2colum-entry .ttlArea .ttl {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.4rem;
  color: #333333;
  text-align: left;
}
.pap .main__2colum-entry .btArea {
  width: 100%;
  padding: 40px 0 20px 0;
}
.pap .main__2colum-entry .btArea .bt22_standard {
  display: block;
}
.pap .main__2colum-entry .btArea .text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  padding-top: 20px;
}
.pap .main__2colum-entry .stepArea {
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px dotted #bbb;
}
.pap .main__2colum-entry .stepBox {
  padding: 20px 0;
  position: relative;
}
.pap .main__2colum-entry .stepBox__ttlArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.pap .main__2colum-entry .stepBox__ttlArea .no {
  width: 25px;
  height: 25px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 25px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background-color: #000;
  border-radius: 50%;
}
.pap .main__2colum-entry .stepBox__ttlArea .ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
  color: #000;
}
.pap .main__2colum-entry .stepBox .text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  padding-top: 10px;
}
.pap .main__2colum-entry .stepBox:not(:last-of-type) {
  margin-bottom: 40px;
}
.pap .main__2colum-entry .stepBox:not(:last-of-type)::after {
  position: absolute;
  content: "";
  background-image: url("/2022/10/biztmp-arrow-down.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 48px;
}
.pap .main__2colum .ttl_secTtl {
  text-align: left;
  letter-spacing: 0.05rem;
  margin-top: 60px;
}
.pap .main_text {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 0.05rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .pap .main_text {
    width: 100%;
  }
}
.pap .main .goodsArea {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
.pap .main .goodsArea .standard {
  width: calc(33.3333333333% - 14px);
}
.pap .main .goodsArea .wide {
  width: calc((33.3333333333% - 14px) * 2 + 20px);
}
.pap .main .annotation {
  width: 100%;
  background-color: #00c6ab;
  padding: 20px;
  margin-top: 40px;
}
.pap .main .annotation .text {
  position: relative;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  color: #fff;
}
.pap .main .annotation .text::after {
  position: absolute;
  content: "";
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: 30px solid #00c6ab;
  border-top: 0;
}
.pap__card {
  width: 100%;
  position: relative;
  background: linear-gradient(40deg, #e6e6e6, #f7f7f7);
}
.pap__card .objArea__main {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
}
.pap__card .objArea__main img {
  display: inline-block;
  width: 466px;
}
@media screen and (max-width: 768px) {
  .pap__card .objArea__main img {
    width: 250px;
  }
}
.pap__card .objArea__footer {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
}
.pap__card .objArea__footer img {
  display: inline-block;
  width: 281px;
}
@media screen and (max-width: 768px) {
  .pap__card .objArea__footer img {
    width: 150px;
  }
}
.pap__card .card {
  display: inline-block;
  position: relative;
  width: 80%;
  padding: 40px;
  margin-top: 100px;
  margin-bottom: 100px;
  border-radius: 10px;
  background-color: #fff;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .pap__card .card {
    width: 100%;
  }
}
.pap__card .card__imgArea img {
  width: 190px;
}
.pap__card .card__ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
  margin: 40px 0;
}
@media screen and (max-width: 768px) {
  .pap__card .card__ttl {
    font-size: 1.6rem;
  }
}
.pap__card .card__news {
  display: block;
  margin-bottom: 20px;
}
.pap__card .card__news .newsTxt {
  display: inline-block;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .pap__card .card__news .newsTxt {
    font-size: 1.2rem;
  }
}
.pap__card .card__news .newsTxt::before {
  position: absolute;
  content: "";
  top: 50%;
  left: -15px;
  width: 1px;
  height: 30px;
  transform: translateY(-50%) rotate(-45deg);
  background-color: #333333;
}
.pap__card .card__news .newsTxt::after {
  position: absolute;
  content: "";
  top: 50%;
  right: -15px;
  width: 1px;
  height: 30px;
  transform: translateY(-50%) rotate(45deg);
  background-color: #333333;
}
.pap__card .card .bt22_standard {
  width: 40%;
}
@media screen and (max-width: 768px) {
  .pap__card .card .bt22_standard {
    width: 100%;
  }
}

/* 
 * mixin
 *
*/
.wpir {
  position: relative;
  background-color: #f7f7f7;
}
.wpir .objArea__main {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  z-index: 1;
}
.wpir .objArea__main img {
  display: inline-block;
  width: 846px;
}
@media screen and (max-width: 768px) {
  .wpir .objArea__main img {
    width: 250px;
  }
}
.wpir .main {
  position: relative;
  width: 100%;
  padding: 100px 0 100px 0;
}
@media screen and (max-width: 768px) {
  .wpir .main {
    padding: 40px 0 40px 0;
  }
}
.wpir .main_keyVisual {
  width: 100%;
  background-image: url("/2023/01/wpir-keyvisual-bg.png");
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  padding-bottom: 130px;
}
@media screen and (max-width: 768px) {
  .wpir .main_keyVisual {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
  }
}
.wpir .main_keyVisual-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.wpir .main_keyVisual .subText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2rem;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .wpir .main_keyVisual .subText {
    font-size: 16px;
  }
}
.wpir .main_keyVisual .mainText {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.4rem;
  color: #fff;
  padding: 10px 30px;
  background-color: #00c6ab;
  border-radius: 50px;
}
@media screen and (max-width: 768px) {
  .wpir .main_keyVisual .mainText {
    font-size: 18px;
  }
}
.wpir .main_keyVisual .mainText::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 30px solid #00c6ab;
  border-bottom: 0;
}
.wpir .main_keyVisual h3 {
  padding-top: 30px;
}
.wpir .main_keyVisual h3 img {
  width: 797px;
}
.wpir .main__2colum {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 80px;
  padding-top: 20px;
}
@media screen and (max-width: 1000px) {
  .wpir .main__2colum {
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
  }
}
.wpir .main__2colum-main {
  flex: 1;
  padding-bottom: 60px;
}
@media screen and (max-width: 1000px) {
  .wpir .main__2colum-main {
    padding-bottom: 20px;
  }
}
.wpir .main__2colum-entry {
  align-self: stretch;
  padding-bottom: 60px;
}
@media screen and (max-width: 1000px) {
  .wpir .main__2colum-entry {
    padding-bottom: 20px;
  }
}
.wpir .main__2colum-entry .inner {
  width: 400px;
  background-color: #fff;
  padding: 40px;
}
@media screen and (max-width: 1000px) {
  .wpir .main__2colum-entry .inner {
    width: 100%;
  }
}
.wpir .main__2colum-entry .ttlArea .ttl {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.4rem;
  color: #333333;
  text-align: left;
}
.wpir .main__2colum-entry .btArea {
  width: 100%;
  padding: 40px 0 20px 0;
}
.wpir .main__2colum-entry .btArea .bt22_standard {
  position: relative;
  display: block;
  letter-spacing: 0.2rem;
}
.wpir .main__2colum-entry .btArea .bt22_standard::after {
  position: absolute;
  content: "";
  background-image: url("/2023/01/wpir-amazon-gift-card-small.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(20deg);
  top: -120px;
  right: -70px;
  width: 164px;
  height: 136px;
}
.wpir .main__2colum-entry .btArea .text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  padding-top: 20px;
}
.wpir .main__2colum .ttl_secTtl {
  text-align: left;
  letter-spacing: 0.05rem;
  margin-top: 60px;
}
.wpir .main_text {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .wpir .main_text {
    width: 100%;
  }
}
.wpir .main_details {
  padding: 20px 0;
  margin: 40px 0;
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  text-align: left;
}
.wpir .main_details dt {
  flex: 30%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #818181;
}
@media screen and (max-width: 768px) {
  .wpir .main_details dt {
    flex: 50%;
  }
}
.wpir .main_details dd {
  flex: 70%;
  flex-grow: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .wpir .main_details dd {
    flex: 50%;
  }
}
.wpir .main_annotations {
  text-align: left;
  list-style: none;
}
.wpir .main_annotations li {
  margin-left: 16px;
  text-indent: -16px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
}
.wpir .main_annotations li::before {
  content: "※";
}
.wpir .main_annotations li a {
  color: #00c6ab;
}
.wpir__card {
  width: 100%;
  position: relative;
  background: linear-gradient(40deg, #e6e6e6, #f7f7f7);
}
.wpir__card .objArea__main {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
}
.wpir__card .objArea__main img {
  display: inline-block;
  width: 466px;
}
@media screen and (max-width: 768px) {
  .wpir__card .objArea__main img {
    width: 250px;
  }
}
.wpir__card .objArea__footer {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
}
.wpir__card .objArea__footer img {
  display: inline-block;
  width: 281px;
}
@media screen and (max-width: 768px) {
  .wpir__card .objArea__footer img {
    width: 150px;
  }
}
.wpir__card .card {
  display: inline-block;
  position: relative;
  width: 80%;
  padding: 40px;
  margin-top: 100px;
  margin-bottom: 100px;
  border-radius: 10px;
  background-color: #fff;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .wpir__card .card {
    width: 100%;
  }
}
.wpir__card .card__imgArea img {
  width: 190px;
}
.wpir__card .card__ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
  margin: 40px 0;
}
@media screen and (max-width: 768px) {
  .wpir__card .card__ttl {
    font-size: 1.6rem;
  }
}
.wpir__card .card__news {
  display: block;
  margin-bottom: 20px;
}
.wpir__card .card__news .newsTxt {
  display: inline-block;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .wpir__card .card__news .newsTxt {
    font-size: 1.2rem;
  }
}
.wpir__card .card__news .newsTxt::before {
  position: absolute;
  content: "";
  top: 50%;
  left: -15px;
  width: 1px;
  height: 30px;
  transform: translateY(-50%) rotate(-45deg);
  background-color: #333333;
}
.wpir__card .card__news .newsTxt::after {
  position: absolute;
  content: "";
  top: 50%;
  right: -15px;
  width: 1px;
  height: 30px;
  transform: translateY(-50%) rotate(45deg);
  background-color: #333333;
}
.wpir__card .card .bt22_standard {
  width: 40%;
}
@media screen and (max-width: 768px) {
  .wpir__card .card .bt22_standard {
    width: 100%;
  }
}

/* 
 * mixin
 *
*/
.appsIndex_main {
  position: relative;
  height: 540px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .appsIndex_main {
    height: 100vh;
  }
}
.appsIndex_main .container22 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .appsIndex_main .container22 {
    justify-content: flex-start;
    padding-top: 120px;
  }
}
.appsIndex_main .ttlImg {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .appsIndex_main .ttlImg {
    width: 200px;
  }
}
.appsIndex_main .ttlImg.is_show {
  animation: insertFromTop 1s forwards;
}
.appsIndex_main h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 1rem;
  line-height: 1.5;
  text-align: left;
  padding: 30px 0;
  margin-top: 10px;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 999px) {
  .appsIndex_main h2 {
    background-color: #fff;
    padding: 30px 40px;
  }
}
@media screen and (max-width: 768px) {
  .appsIndex_main h2 {
    letter-spacing: 0.5rem;
    background-color: none;
    padding: 30px 0;
  }
}
.appsIndex_main h2.is_show {
  animation: insertFromTop 1s forwards;
}
.appsIndex_main h2 .font-en {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.1rem;
}
.appsIndex_main p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 999px) {
  .appsIndex_main p {
    background-color: #fff;
    padding: 30px 40px;
  }
}
@media screen and (max-width: 768px) {
  .appsIndex_main p {
    font-size: 1.6rem;
    background-color: inherit;
    padding: 0;
  }
}
.appsIndex_main p.is_show {
  animation: insertFromTop 1s forwards;
}
.appsIndex_main svg {
  z-index: -1;
}
.appsIndex_mainParts {
  position: absolute;
  width: 623px;
  height: 836px;
  right: -2%;
  top: 50%;
  transform: translateX(0) translateY(-50%);
  filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.1));
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 1311px) {
  .appsIndex_mainParts {
    right: -20%;
  }
}
@media screen and (max-width: 768px) {
  .appsIndex_mainParts {
    height: auto;
    top: 58%;
    right: 15%;
    transform: translateY(0) rotate(55deg) scale(80%);
  }
}
.appsIndex_mainParts.is_show {
  animation: insertVisible 1s ease forwards;
}
.appsIndex .shapeHexagon_1 {
  position: absolute;
  left: -10%;
  top: -10%;
  transform: scale(120%) rotate(-11deg);
  mix-blend-mode: multiply;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  animation: insertVisible 3s ease forwards, shapeAnimationScaleRotate 50s ease infinite;
}
@media screen and (max-width: 768px) {
  .appsIndex .shapeHexagon_1 {
    left: -35%;
    top: -20%;
  }
}
.appsIndex .shapeHexagon_2 {
  position: absolute;
  left: 5%;
  top: 80%;
  mix-blend-mode: multiply;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  animation: insertVisible 3s ease 1s forwards, shapeAnimationScaleRotate 30s ease infinite;
}
@media screen and (max-width: 768px) {
  .appsIndex .shapeHexagon_2 {
    left: 34%;
    top: 58%;
    width: 212px;
    height: 232px;
  }
}
.appsIndex .shapeHexagon_3 {
  position: absolute;
  left: 53%;
  top: 65%;
  width: 392px;
  height: 440px;
  mix-blend-mode: multiply;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  animation: insertVisible 3s ease 2s forwards, shapeAnimationScaleRotate 50s ease infinite;
}
@media screen and (max-width: 768px) {
  .appsIndex .shapeHexagon_3 {
    left: 60%;
    top: 70%;
  }
}
.appsIndex .shapeCircle_1 {
  position: absolute;
  left: -5%;
  top: 70%;
  width: 292px;
  height: 292px;
  mix-blend-mode: multiply;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  animation: insertVisible 3s ease forwards, shapeAnimationScale 20s ease infinite;
}
@media screen and (max-width: 768px) {
  .appsIndex .shapeCircle_1 {
    left: -30%;
    top: 60%;
    transform: scale(90%);
  }
}
.appsIndex .shapeCircle_2 {
  position: absolute;
  left: 55%;
  top: -20%;
  width: 278px;
  height: 278px;
  mix-blend-mode: multiply;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  animation: insertVisible 3s ease 1s forwards, shapeAnimationScale 20s ease infinite;
}
@media screen and (max-width: 768px) {
  .appsIndex .shapeCircle_2 {
    left: 28%;
    top: -12%;
    width: 160px;
    height: 160px;
  }
}
.appsIndex .shapeTriangle_1 {
  position: absolute;
  left: 47%;
  top: -15%;
  width: 224px;
  height: 202px;
  mix-blend-mode: multiply;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  animation: insertVisible 2s ease 1s forwards, shapeAnimationScaleRotate 50s linear infinite;
}
@media screen and (max-width: 768px) {
  .appsIndex .shapeTriangle_1 {
    left: 55%;
    top: -10%;
    width: 181px;
    height: 165px;
  }
}
.appsIndex .shapeTriangle_2 {
  position: absolute;
  left: 40%;
  top: 75%;
  width: 224px;
  height: 202px;
  mix-blend-mode: multiply;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  animation: insertVisible 3s ease 1s forwards, shapeAnimationScaleRotate 50s linear infinite;
}
@media screen and (max-width: 768px) {
  .appsIndex .shapeTriangle_2 {
    left: 80%;
    top: 55%;
    width: 97px;
    height: 92px;
  }
}
.appsIndex .hexabaseFeatures {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  background-color: #f7f7f7;
}
.appsIndex .hexabaseFeatures h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding-bottom: 30px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.appsIndex .hexabaseFeatures h2.is_show {
  animation: insertFromTop 1s ease forwards;
}
.appsIndex .hexabaseFeatures .meritArea {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  gap: 12px;
}
@media screen and (max-width: 768px) {
  .appsIndex .hexabaseFeatures .meritArea {
    gap: 8px;
  }
}
.appsIndex .hexabaseFeatures .meritArea li {
  position: relative;
  width: calc((1312px - 132px) / 4);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  align-self: stretch;
  text-align: left;
  border-radius: 10px;
  background-color: #fff;
  padding: 20px 15px 20px 50px;
  filter: drop-shadow(0px 20px 20px rgba(0, 0, 0, 0.1));
}
@media screen and (max-width: 1311px) {
  .appsIndex .hexabaseFeatures .meritArea li {
    width: calc(33.3333333333% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .appsIndex .hexabaseFeatures .meritArea li {
    width: calc(50% - 4px);
    font-size: 1.2rem;
    padding: 10px 10px 10px 40px;
  }
}
.appsIndex .hexabaseFeatures .meritArea li::before {
  position: absolute;
  font-family: "Material Icons";
  font-weight: 700;
  content: "\e5ca";
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #00c6ab;
}
@media screen and (max-width: 768px) {
  .appsIndex .hexabaseFeatures .meritArea li::before {
    font-size: 2.4rem;
  }
}
.appsIndex .hexabaseFeatures .meritArea .appsMerits {
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.appsIndex .hexabaseFeatures .meritArea .appsMerits.is_show {
  animation: insertFromTop 1s ease forwards;
}
.appsIndex .sampleApps {
  padding: 60px 0;
  background-color: #f7f7f7;
}
.appsIndex .sampleApps h2 {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps h2 {
    font-size: 2.4rem;
  }
}
.appsIndex .sampleApps_ttl {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding-bottom: 10px;
}
.appsIndex .sampleApps_text {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  color: #00c6ab;
  padding-bottom: 60px;
}
.appsIndex .sampleApps_list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 100px;
}
.appsIndex .sampleApps_list-item {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_list {
    gap: 60px;
  }
}
.appsIndex .sampleApps_card {
  display: flex;
  justify-content: start;
  align-items: start;
  border-radius: 10px;
  background-color: #fff;
  width: 100%;
  overflow: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_card {
    flex-direction: column;
  }
}
.appsIndex .sampleApps_card:hover {
  filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.1));
  transform: translateY(-5px);
}
.appsIndex .sampleApps_card:hover .imgArea img {
  transform: scale(102%) translateY(-5px);
}
.appsIndex .sampleApps_card:hover.InPreparation {
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
  transform: translateY(0);
}
.appsIndex .sampleApps_card:hover.InPreparation .imgArea img {
  transform: scale(100%) translateY(0);
}
.appsIndex .sampleApps_card .imgArea {
  flex: 50%;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_card .imgArea {
    order: 1;
  }
}
.appsIndex .sampleApps_card .imgArea img {
  width: 100%;
  transition: 0.3s;
}
.appsIndex .sampleApps_card .textArea {
  flex: 50%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  background-color: #fff;
  padding: 40px;
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_card .textArea {
    padding: 30px;
    order: 2;
  }
}
.appsIndex .sampleApps_card .textArea .usableDevice {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_card .textArea .usableDevice {
    gap: 5px;
  }
}
.appsIndex .sampleApps_card .textArea .usableDevice > li {
  padding: 5px 15px;
  background-color: #00c6ab;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_card .textArea .usableDevice > li {
    padding: 5px 10px;
  }
}
.appsIndex .sampleApps_card .textArea_catch {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3rem;
  letter-spacing: 0.5rem;
  line-height: 1.5;
  text-align: left;
  padding-top: 30px;
  padding-bottom: 20px;
}
@media screen and (max-width: 1200px) {
  .appsIndex .sampleApps_card .textArea_catch {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_card .textArea_catch {
    font-size: 1.8rem;
    letter-spacing: 0.2rem;
  }
}
.appsIndex .sampleApps_card .textArea_ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  flex-grow: 1;
  padding-bottom: 30px;
}
@media screen and (max-width: 1200px) {
  .appsIndex .sampleApps_card .textArea_ttl {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_card .textArea_ttl {
    font-size: 1.4rem;
  }
}
.appsIndex .sampleApps_card .textArea .technology {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_card .textArea .technology {
    gap: 5px;
  }
}
.appsIndex .sampleApps_card .textArea .technology > li {
  padding: 5px 15px;
  border-radius: 50px;
  background-color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .appsIndex .sampleApps_card .textArea .technology > li {
    padding: 5px 10px;
  }
}
.appsIndex .sampleApps_card .textArea_attention {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-top: 20px;
}
.appsIndex .ThemeColor {
  color: #00c6ab;
}
.appsIndex .fontLarge {
  font-size: 3rem;
}

@keyframes shapeAnimationScale {
  0% {
    transform: translateX(0) translateY(0);
  }
  50% {
    transform: translateX(-10px) translateY(20px);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes shapeAnimationScaleRotate {
  0% {
    transform: rotate(0) translateX(0) translateY(0);
  }
  50% {
    transform: rotate(-180deg) translateX(10px) translateY(-15px);
  }
  100% {
    transform: rotate(-360deg) translateX(0) translateY(0);
  }
}
@keyframes insertFromRight {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(10%) translateY(-50%);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(-50%);
  }
}
@keyframes insertFromTop {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
@keyframes insertVisible {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
/* 
 * mixin
 *
*/
.appsDetails {
  position: relative;
}
.appsDetails_main {
  position: relative;
  height: 678px;
  background: linear-gradient(90deg, #e9e9e9 0%, #f7f7f7 77.29%);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .appsDetails_main {
    height: 100vh;
  }
}
.appsDetails_main .container22 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .appsDetails_main .container22 {
    justify-content: flex-start;
    padding-top: 120px;
  }
}
.appsDetails_main-textArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}
.appsDetails_main-textArea .ttlImg {
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 768px) {
  .appsDetails_main-textArea .ttlImg {
    width: 180px;
  }
}
.appsDetails_main-textArea .ttlImg.is_show {
  animation: insertFromTop 0.3s ease forwards;
}
.appsDetails_main h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.5rem;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 768px) {
  .appsDetails_main h2 {
    font-size: 1.4rem;
    letter-spacing: 0.5rem;
  }
}
.appsDetails_main h2.is_show {
  animation: insertFromTop 0.3s ease forwards;
}
.appsDetails_main h2 .font-en {
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.05rem;
}
.appsDetails_main .text_catch {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 1rem;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
}
.appsDetails_main .text_catch.is_show {
  animation: insertFromTop 0.3s ease forwards;
}
.appsDetails_main .text_sampleApps {
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
}
.appsDetails_main .text_sampleApps.is_show {
  animation: insertFromTop 0.3s ease forwards;
}
.appsDetails_main .circleTextAnimation {
  position: absolute;
  content: "";
  background-image: url("/2023/02/cercle-font-parts.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 10%;
  right: 200px;
  width: 600px;
  height: 600px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.appsDetails_main .circleTextAnimation_lunchpal {
  right: 19% !important;
}
@media screen and (max-width: 768px) {
  .appsDetails_main .circleTextAnimation {
    top: 60%;
    right: 0;
    width: 400px;
    height: 400px;
  }
}
.appsDetails_main .circleTextAnimation.is_show {
  animation: insertVisible 1s forwards, rotateCircleText 100s linear infinite;
}
.appsDetails_mainPartsPc {
  position: absolute;
  width: 904px;
  height: 678px;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10%);
  filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.1));
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .appsDetails_mainPartsPc {
    height: auto;
    top: 80%;
    right: 50%;
    transform: translateX(50%) scale(1.1);
  }
}
.appsDetails_mainPartsPc.is_show {
  animation: insertFromRight 1s ease forwards;
}
@media screen and (max-width: 1000px) {
  .appsDetails_mainPartsPc.is_show {
    opacity: 0.2 !important;
  }
}
.appsDetails_mainPartsSp {
  position: absolute;
  top: 78%;
  left: 0;
  filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.1));
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.appsDetails_mainPartsSp.is_show {
  animation: insertFromTop 1s ease forwards;
}
.appsDetails_lunchpalPc {
  max-width: 528px;
  width: auto !important;
  height: auto !important;
  top: 3% !important;
  right: 14.5% !important;
}
@media screen and (max-width: 768px) {
  .appsDetails_lunchpalPc {
    right: 3%;
    width: 90%;
  }
}
.appsDetails_commonHeader {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  top: 0;
  left: 0;
  padding-top: 40px;
  padding-left: 48px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .appsDetails_commonHeader {
    width: 100%;
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    justify-content: space-between;
  }
}
.appsDetails_commonHeader.is_show {
  animation: insertFromRight 3s ease forwards;
}
.appsDetails_commonHeader > .headerImg {
  width: 180px;
  height: 41px;
}
@media screen and (max-width: 768px) {
  .appsDetails_commonHeader > .headerImg {
    width: 160px;
    height: 36px;
  }
}
.appsDetails_commonHeader > .backBt {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  padding: 10px 20px 10px 40px;
  border: 1px solid #000;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .appsDetails_commonHeader > .backBt {
    font-size: 1.2rem;
    padding: 8px 10px 8px 30px;
  }
}
.appsDetails_commonHeader > .backBt:hover {
  background-color: #00c6ab;
  color: #fff;
  border: 1px solid #00c6ab;
}
.appsDetails_commonHeader > .backBt:hover::before {
  color: #fff;
}
.appsDetails_commonHeader > .backBt::before {
  position: absolute;
  font-family: "Material icons";
  content: "\e0ee";
  font-size: 2rem;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  transition: 0.3s;
}
.appsDetails_cta {
  width: 100%;
  background-color: #fff;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.1));
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .appsDetails_cta {
    padding: 60px 20px;
  }
}
.appsDetails_cta.is_show {
  animation: insertVisible 0.1s ease forwards;
}
.appsDetails_cta > .subTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  color: #00c6ab;
  padding-bottom: 20px;
}
.appsDetails_cta > .ctaTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 30px;
}
.appsDetails_cta > .btArea {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .appsDetails_cta > .btArea {
    flex-direction: column;
  }
}
.appsDetails_cta > .btArea > .bt22_standard {
  width: 350px;
  letter-spacing: 0.05rem;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  .appsDetails_cta > .btArea > .bt22_standard {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
.appsDetails_cta > .btArea > .bt22_standard.blackBt {
  width: 200px;
  background-color: #000;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  margin-right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .appsDetails_cta > .btArea > .bt22_standard.blackBt {
    width: 250px;
  }
}
.appsDetails_cta > .btArea > .bt22_standard.blackBt:hover {
  background-color: #7d7d7d;
}
.appsDetails_cta > .btArea > .bt22_standard.blackBt p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  margin-left: 5px;
}
.appsDetails_functions {
  position: relative;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .appsDetails_functions {
    padding: 40px 0;
  }
}
.appsDetails_functions .scrollBgArea {
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  height: 253px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .appsDetails_functions .scrollBgArea {
    top: 5%;
  }
}
.appsDetails_functions .scrollFunctionsText {
  position: absolute;
  content: "";
  background-image: url("/2023/02/bg-functions2.svg");
  background-size: contain;
  background-repeat: repeat-x;
  background-position: 0 0;
  width: 4636px;
  height: 253px;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.appsDetails_functions .scrollFunctionsText.is_show {
  -webkit-animation: insertVisible 1s forwards, scrollBgText 50s -30s linear infinite both;
}
.appsDetails_functions .appImg {
  width: 567px;
}
.appsDetails_functions .functionsList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  padding: 40px 0;
}
@media screen and (max-width: 768px) {
  .appsDetails_functions .functionsList {
    flex-direction: column;
  }
}
.appsDetails_functions .functionsCard {
  width: calc((1312px - 152px) / 4);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 1311px) {
  .appsDetails_functions .functionsCard {
    width: calc(33.3333333333% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .appsDetails_functions .functionsCard {
    width: 100%;
    margin-bottom: 40px;
  }
}
.appsDetails_functions .functionsCard .useByJobSeeker {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  background-color: #ff6666;
  padding: 5px 10px;
  border-radius: 50px;
}
.appsDetails_functions .functionsCard .recruitingCom {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  background-color: #66ffcc;
  padding: 5px 10px;
  border-radius: 50px;
}
.appsDetails_functions .functionsCard .functionsName {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding-top: 20px;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .appsDetails_functions .functionsCard .functionsName {
    padding-bottom: 20px;
  }
}
.appsDetails_functions .functionsCard .functionsDescription {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
}
.appsDetails_images {
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .appsDetails_images {
    padding-bottom: 40px;
  }
}
.appsDetails_images .imageList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .appsDetails_images .imageList {
    flex-direction: column;
    align-items: center;
  }
}
.appsDetails_images .imageCard_pc {
  width: calc((1312px - 176px) / 3);
  border-radius: 20px;
  overflow: hidden;
  filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.2));
}
@media screen and (max-width: 1311px) {
  .appsDetails_images .imageCard_pc {
    width: calc(33.3333333333% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .appsDetails_images .imageCard_pc {
    width: 100%;
  }
}
.appsDetails_images .imageCard_pc img {
  width: 380px;
}
.appsDetails_images .imageCard_sp {
  width: calc((1312px - 132px) / 3);
}
@media screen and (max-width: 1311px) {
  .appsDetails_images .imageCard_sp {
    width: calc(33.3333333333% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .appsDetails_images .imageCard_sp {
    width: 70%;
  }
}
.appsDetails_images .imageCard_sp img {
  width: 200px;
  border-radius: 20px;
  filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.2));
}
.appsDetails_api {
  padding-top: 200px;
  padding-bottom: 100px;
  background-color: #f7f7f7;
}
.appsDetails_api .apiTtl {
  position: relative;
}
.appsDetails_api .apiTtl::after {
  position: absolute;
  content: "";
  background-image: url("/2023/02/api-bubble.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 294px;
  height: 87px;
}
@media screen and (max-width: 768px) {
  .appsDetails_api .apiTtl::after {
    top: -70px;
    width: 200px;
    height: 59px;
  }
}
.appsDetails_api .apiDiscription {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .appsDetails_api .apiDiscription {
    text-align: left;
  }
}
.appsDetails_api .apiList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
  padding-top: 60px;
}
.appsDetails_api .apiCard {
  width: calc((1312px - 156px) / 3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 10px;
  background-color: #fff;
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  .appsDetails_api .apiCard {
    width: 100%;
  }
}
.appsDetails_api .apiCard .imgArea {
  height: 240px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .appsDetails_api .apiCard .imgArea {
    height: auto;
  }
}
.appsDetails_api .apiCard .textArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  min-height: 240px;
}
.appsDetails_api .apiCard .textArea .apiCodeArea {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
.appsDetails_api .apiCard .textArea .apiMark {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  padding: 5px;
  background-color: #e6e6e6;
}
.appsDetails_api .apiCard .textArea .apiCode {
  font-family: font-en;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
}
.appsDetails_api .apiCard .textArea .apiName {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding-bottom: 10px;
}
.appsDetails_api .apiCard .textArea .apiText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  flex-grow: 1;
  padding-bottom: 10px;
}
.appsDetails_api .apiCard .textArea .forFunction {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  padding: 7px 12px;
  color: #fff;
  background-color: #000;
  border-radius: 50px;
}
.appsDetails_techStack {
  padding-bottom: 100px;
  background-color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .appsDetails_techStack {
    padding-bottom: 40px;
  }
}
.appsDetails_techStack .techStackArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 40px;
}
.appsDetails_techStack .techStackArea .techStackTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
}
.appsDetails_techStack .techStackArea .techStackList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid #c8c8c8;
  border-bottom: 1px solid #c8c8c8;
}
@media screen and (max-width: 768px) {
  .appsDetails_techStack .techStackArea .techStackList {
    flex-direction: column;
  }
}
.appsDetails_techStack .techStackArea .techStackList li {
  border-right: 1px solid #000;
  padding: 0 20px;
}
@media screen and (max-width: 768px) {
  .appsDetails_techStack .techStackArea .techStackList li {
    padding: 10px 10px;
    border-right: none;
  }
}
.appsDetails_techStack .techStackArea .techStack_cell {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}
.appsDetails_techStack .techStackArea .cellTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  color: #7d7d7d;
}
.appsDetails_techStack .techStackArea .cellTech {
  font-family: font-en;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding: 7px 12px;
  border-radius: 50px;
  color: #fff;
  background-color: #000;
}
.appsDetails_techStack .backEndArea {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  padding: 20px 0;
  border-top: 1px solid #c8c8c8;
}
@media screen and (max-width: 768px) {
  .appsDetails_techStack .backEndArea {
    flex-direction: column;
  }
}
.appsDetails_techStack .backEndListArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.appsDetails_techStack .mainFunctionTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding-bottom: 10px;
  padding-left: 10px;
}
.appsDetails_techStack .mainFunctionList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}
.appsDetails_techStack .mainFunctionList li {
  padding: 0 10px;
  border-right: 1px solid #000;
}
.appsDetails_techStack .cellFn {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
}
.appsDetails_techStack .attention {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-top: 20px;
  padding-left: 10px;
}
.appsDetails .sectionTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .appsDetails .sectionTtl {
    font-size: 2.4rem;
  }
}
.appsDetails .imageTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  padding-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .appsDetails .supportPlans {
    padding-top: 40px;
  }
}
.appsDetails .pain {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 60px;
}
.appsDetails .ThemeColor {
  color: #00c6ab;
}
.appsDetails .fontLarge {
  font-size: 3rem;
}
@media screen and (max-width: 768px) {
  .appsDetails .lunchpalDetails_main {
    height: 128vw;
    min-height: 500px;
    max-height: 700px;
  }
}
.appsDetails .lunchpalDetails_mainPartsSp {
  position: absolute;
  top: 15%;
  bottom: auto;
  left: auto;
  right: -20%;
  filter: drop-shadow(0px 20px 40px rgba(0, 0, 0, 0.1));
  width: 90%;
  max-width: 450px;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
}

@keyframes insertFromRight {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
@keyframes insertFromTop {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
@keyframes insertVisible {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes rotateCircleText {
  0% {
    transform: rotate(0) translateX(-5%);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scrollBgText {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -4636px 0;
  }
}
/* 
 * mixin
 *
*/
.masked-letter {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.masked-letter span {
  display: block;
  position: relative;
}
.masked-letter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.sectionBase {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.section2 {
  background-color: #00c2ff;
}

.section3 {
  background-color: #00c6ab;
}

.section4 {
  background-color: #8f00ff;
}

.section5 {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.section5__bg {
  z-index: 1;
  width: 0;
  height: 0;
  opacity: 0;
}

.section6 {
  background-color: #0029ff;
}

.section7 {
  background-color: #ff0000;
}

.separate {
  overflow: hidden;
  height: 30vw;
}

.separate img {
  width: 100%;
}

.item {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 10vw;
}

.item:nth-child(odd) {
  flex-direction: row-reverse;
}

.item .image {
  width: 35%;
  max-height: 300px;
  height: 15vw;
  overflow: visible;
}

.item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.item .text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 0 5%;
  background: #eee;
  border-radius: 8px;
}

.side-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-scroll-list-wrapper {
  position: relative;
  width: 100%;
  height: 700px;
}

.side-scroll-list {
  position: absolute;
  top: 60px;
  left: 0;
  display: flex;
  gap: 0 60px;
}

.side-scroll-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 420px;
  background-color: #eeebdd;
  color: #1b1717;
  font-size: 32px;
  font-weight: 700;
}

.side-scroll-item + .side-scroll-item {
  margin-left: 60px;
}

/* 
 * mixin
 *
*/
.topMv {
  position: relative;
  height: calc(100vh - 64px);
  background-color: #fff;
  color: #000;
  overflow: hidden;
}
.topMv .container22 {
  position: relative;
}
.topMv_scrollDowns {
  position: absolute;
  top: 85%;
  right: 0;
  left: 0;
  margin: auto;
  width: 34px;
  height: 55px;
}
.topMv_scrollDowns .mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #000;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.topMv_scrollDowns .scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #000;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
  animation-iteration-count: infinite;
}
@keyframes scroll {
  0% {
    opacity: 0;
  }
  10% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(15px);
    opacity: 0;
  }
}
.topMv_textArea {
  position: absolute;
  content: "";
  top: 50%;
  left: 48px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .topMv_textArea {
    position: inherit;
    left: 0;
  }
}
.topMv_ttlArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .topMv_ttlArea {
    margin-bottom: 40px;
  }
}
.topMv_ttlArea h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.4rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .topMv_ttlArea h2 {
    font-size: 4rem;
    letter-spacing: 0.4rem;
  }
}
.topMv_ttlArea-en {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .topMv_ttlArea-en {
    font-size: 1.2rem;
  }
}
.topMv_subTtlArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topMv_subTtlArea-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  margin-bottom: 30px;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  .topMv_subTtlArea-ttl {
    font-size: 1.6rem;
  }
}
.topMv_subTtlArea-discription {
  width: 40%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  .topMv_subTtlArea-discription {
    width: 100%;
  }
}
.topMv #atom1 {
  position: absolute;
  content: "";
  top: 36%;
  left: 65%;
  width: 60px;
  height: 60px;
  animation: yuru 2s ease-in-out infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atom1 {
    top: 18%;
    left: 95%;
    width: 50px;
    height: 50px;
  }
}
.topMv #atom2 {
  position: absolute;
  content: "";
  top: 91%;
  left: 6%;
  width: 30px;
  height: 30px;
  animation: yuru 2s ease 0.5s infinite normal;
}
.topMv #atom3 {
  position: absolute;
  content: "";
  top: 84%;
  left: 79%;
  width: 30px;
  height: 30px;
  animation: yuru 2s ease 1s infinite normal;
}
.topMv #atomPink1 {
  position: absolute;
  content: "";
  top: 18%;
  left: 75%;
  width: 40px;
  height: 40px;
  animation: yuru 2s ease infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomPink1 {
    top: 8%;
    left: 75%;
    width: 30px;
    height: 30px;
  }
}
.topMv #atomPink2 {
  position: absolute;
  content: "";
  top: 10%;
  left: 19%;
  width: 30px;
  height: 30px;
  animation: yuru 2s ease 0.5s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomPink2 {
    top: 5%;
    left: 9%;
    width: 20px;
    height: 20px;
  }
}
.topMv #atomPink3 {
  position: absolute;
  content: "";
  top: 67%;
  left: 90%;
  width: 25px;
  height: 25px;
  animation: yuru 2s ease 0.8s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomPink3 {
    top: 77%;
    left: 90%;
    width: 25px;
    height: 25px;
  }
}
.topMv #atomPink4 {
  position: absolute;
  content: "";
  top: 45%;
  left: 5%;
  width: 20px;
  height: 20px;
  animation: yuru 2s ease 1s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomPink4 {
    top: 47%;
    left: -2%;
    width: 20px;
    height: 20px;
  }
}
.topMv #atomPink5 {
  position: absolute;
  content: "";
  top: 59%;
  left: 51%;
  width: 15px;
  height: 15px;
  animation: yuru 2s ease 1.2s infinite normal;
}
.topMv #atomGreen1 {
  position: absolute;
  content: "";
  top: 29%;
  left: 89%;
  width: 10px;
  height: 10px;
  animation: yuru 2s ease infinite normal;
}
.topMv #atomGreen2 {
  position: absolute;
  content: "";
  top: 80%;
  left: 72%;
  width: 35px;
  height: 35px;
  animation: yuru 2s ease 0.3s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomGreen2 {
    top: 80%;
    left: 68%;
    width: 25px;
    height: 25px;
  }
}
.topMv #atomGreen3 {
  position: absolute;
  content: "";
  top: 15%;
  left: 63%;
  width: 15px;
  height: 15px;
  animation: yuru 2s ease 0.7s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomGreen3 {
    top: 10%;
    left: 43%;
    width: 15px;
    height: 15px;
  }
}
.topMv #atomGreen4 {
  position: absolute;
  content: "";
  top: 70%;
  left: 61%;
  width: 10px;
  height: 10px;
  animation: yuru 2s ease 1s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomGreen4 {
    top: 95%;
    left: 91%;
    width: 10px;
    height: 10px;
  }
}
.topMv #atomGreen5 {
  position: absolute;
  content: "";
  top: 77%;
  left: 47%;
  width: 20px;
  height: 20px;
  animation: yuru 2s ease 1.3s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomGreen5 {
    top: 80%;
    left: 17%;
    width: 10px;
    height: 10px;
  }
}
.topMv #atomGreen6 {
  position: absolute;
  content: "";
  top: 16%;
  left: 38%;
  width: 10px;
  height: 10px;
  animation: yuru 2s ease 1.7s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomGreen6 {
    top: 16%;
    left: 18%;
    width: 10px;
    height: 10px;
  }
}
.topMv #atomGreen7 {
  position: absolute;
  content: "";
  top: 83%;
  left: 30%;
  width: 10px;
  height: 10px;
  animation: yuru 2s ease 1s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomGreen7 {
    top: 90%;
    left: 58%;
    width: 10px;
    height: 10px;
  }
}
.topMv #atomGreen8 {
  position: absolute;
  content: "";
  top: 60%;
  left: 2%;
  width: 10px;
  height: 10px;
  animation: yuru 2s ease infinite normal;
}
.topMv #atomBlack1 {
  position: absolute;
  content: "";
  top: 44%;
  left: 97%;
  width: 20px;
  height: 20px;
  animation: yuru 2s ease infinite normal;
}
.topMv #atomBlack2 {
  position: absolute;
  content: "";
  top: 20%;
  left: 55%;
  width: 30px;
  height: 30px;
  animation: yuru 2s ease 0.3s infinite normal;
}
@media screen and (max-width: 768px) {
  .topMv #atomBlack2 {
    top: 17%;
    left: 55%;
    width: 20px;
    height: 20px;
  }
}
.topMv #atomBlack3 {
  position: absolute;
  content: "";
  top: 86%;
  left: 29%;
  width: 15px;
  height: 15px;
  animation: yuru 2s ease 1s infinite normal;
}

.side-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-scroll-list-wrapper {
  position: relative;
  width: 100%;
  height: 700px;
}

.side-scroll-list {
  position: absolute;
  top: 60px;
  left: 0;
  display: flex;
  gap: 0 60px;
}

.side-scroll-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 420px;
  background-color: #eeebdd;
  color: #1b1717;
  font-size: 32px;
  font-weight: 700;
}

.side-scroll-item + .side-scroll-item {
  margin-left: 60px;
}

.cls-1 {
  fill: #00c6ab;
}

.cls-2 {
  fill: #ff346b;
}

.cls-3 {
  fill: #000;
}

.cls-4 {
  fill: #00c6ab;
  stroke: #00c6ab;
  stroke-width: 1px;
}

.cls-5 {
  fill: #ff346b;
  stroke: #ff346b;
  stroke-width: 1px;
}

.cls-6 {
  fill: #000;
  stroke: #000;
  stroke-width: 1px;
}

@keyframes yuru {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 5px;
  }
  100% {
    margin-top: 0;
  }
}
/* 
 * mixin
 *
*/
.topNewsTopics {
  position: relative;
  width: 100%;
}
.topNewsTopics_inner {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #f7f7f7;
  border-radius: 50px;
}
@media screen and (max-width: 768px) {
  .topNewsTopics_inner {
    padding: 16px 0;
    border-radius: 10px;
  }
}
.topNewsTopics_inner-linkArea {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .topNewsTopics_inner-linkArea {
    flex-direction: column;
  }
}
.topNewsTopics_inner-linkArea:hover .topNewsTopics_inner-ttl {
  color: #00c6ab;
}
.topNewsTopics_inner-dateAndCatArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 24px;
  padding: 16px 0 16px 48px;
}
@media screen and (max-width: 768px) {
  .topNewsTopics_inner-dateAndCatArea {
    width: 100%;
    padding: 0 0 16px 20px;
    margin-right: 0;
  }
}
.topNewsTopics_inner-dateAndCatArea .date {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  color: #6c6c6c;
  margin-right: 16px;
  white-space: nowrap;
}
.topNewsTopics_inner-dateAndCatArea .newsListItem_cat {
  white-space: nowrap;
}
.topNewsTopics_inner-ttl {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  flex-grow: 1;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .topNewsTopics_inner-ttl {
    font-size: 1.2rem;
    padding: 0 16px;
    -webkit-line-clamp: 2;
  }
}
.topNewsTopics_inner-listBtArea {
  padding: 16px 24px 16px 16px;
}
.topNewsTopics_inner-listBtArea:hover span {
  color: #00c6ab;
}
.topNewsTopics_inner-listBtArea span {
  color: #000;
  transition: 0.3s;
}

/* 
 * mixin
 *
*/
.topOurMission {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .topOurMission {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.topOurMission_inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.topOurMission_slideText {
  position: absolute;
  content: "";
  top: 75.5%;
  left: 48px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20rem;
  font-weight: 900;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  color: transparent;
  -webkit-text-stroke: 0.5px #ccc;
  text-align: left;
  padding-bottom: 10px;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .topOurMission_slideText {
    top: 80%;
    font-size: 10rem;
  }
}
.topOurMission_ttlArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topOurMission_ttlArea-cat {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 10px;
}
.topOurMission_ttlArea-ttl {
  width: 100%;
  text-align: left;
  padding-bottom: 30px;
  font-feature-settings: "palt";
}
.topOurMission_ttlArea-ttl .ttlText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .topOurMission_ttlArea-ttl .ttlText {
    line-height: 1.2;
  }
}
.topOurMission_ttlArea-discription {
  width: 72%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .topOurMission_ttlArea-discription {
    width: 100%;
  }
}

/* 
 * mixin
 *
*/
.topService {
  width: 100%;
  height: auto;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .topService {
    padding-top: 100px;
    padding-bottom: 0;
  }
}
.topService_inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .topService_inner {
    grid-template-columns: 1fr;
  }
}
.topService_ttlArea {
  position: sticky;
  top: 162px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .topService_ttlArea {
    position: relative;
    top: 0;
  }
}
.topService_ttlArea-cat {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 10px;
}
.topService_ttlArea-ttl {
  text-align: left;
  padding-bottom: 30px;
}
.topService_ttlArea-ttl .ttlText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  font-feature-settings: "palt";
}
.topService_ttlArea-discription {
  width: 72%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 30px;
  font-feature-settings: "palt";
}
.topService_contactArea {
  width: 72%;
}
.topService_contactArea-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 30px;
}
.topService_contentsArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 600px;
}
@media screen and (max-width: 768px) {
  .topService_contentsArea {
    margin-top: 60px;
  }
}
.topService_contentsCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 200px;
}
@media screen and (max-width: 768px) {
  .topService_contentsCard {
    padding-bottom: 60px;
  }
}
.topService_contentsCard-discription {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
  font-feature-settings: "palt";
}
.topService_contentsTtlArea {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  align-self: flex-start;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
}
.topService_contentsTtlTextArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 20px;
}
.topService_contentsTtlTextArea-numArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 2px;
}
.topService_contentsTtlTextArea-numArea .num {
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
}
.topService_contentsTtlTextArea-numArea .category {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-left: 10px;
}
.topService_contentsTtlTextArea-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
}
.topService_contactArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topService_contactArea-ttl {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 30px;
}

/* 
 * mixin
 *
*/
.topProduct {
  width: 100%;
  height: auto;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .topProduct {
    padding-top: 100px;
    padding-bottom: 40px;
  }
}
.topProduct .container22 {
  width: 100%;
}
.topProduct_inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topProduct_ttlArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topProduct_ttlArea-cat {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 10px;
}
.topProduct_ttlArea-ttl {
  text-align: left;
  padding-bottom: 30px;
}
.topProduct_ttlArea-ttl .ttlText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05rem;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  .topProduct_ttlArea-ttl .ttlText {
    font-size: 3rem;
  }
}
.topProduct_contentsArea {
  width: 100%;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .topProduct_contentsArea {
    padding: 40px 0;
  }
}
.topProduct .productHexabase {
  position: relative;
  opacity: 0;
  overflow: hidden;
}
.topProduct .productHexabase_img {
  position: absolute;
  content: "";
  background-image: url("/2023/03/topProductImg-hexabase.png");
  background-size: 50%;
  background-repeat: no-repeat;
  top: 20%;
  left: 60%;
  width: 100%;
  height: 100%;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .topProduct .productHexabase_img {
    display: none;
  }
}
.topProduct .productHexabaseCms {
  position: relative;
  opacity: 0;
  overflow: hidden;
}
.topProduct .productHexabaseCms_img {
  position: absolute;
  content: "";
  background-image: url("/2023/04/topProductImg-hexabase-cms2.png");
  background-size: 50%;
  background-repeat: no-repeat;
  top: 20%;
  left: 60%;
  width: 100%;
  height: 100%;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  .topProduct .productHexabaseCms_img {
    display: none;
  }
}
.topProduct_card {
  position: relative;
  width: 100%;
  height: 400px;
  border-radius: 20px;
  padding: 60px;
  background-color: #000;
}
@media screen and (max-width: 768px) {
  .topProduct_card {
    padding: 60px 40px;
    height: auto;
  }
}
.topProduct_card:not(:last-of-type) {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .topProduct_card:not(:last-of-type) {
    margin-bottom: 30px;
  }
}
.topProduct_card-2colum {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .topProduct_card-2colum {
    flex-direction: column;
  }
}
.topProduct_card-textArea {
  flex: 60%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-right: 40px;
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  .topProduct_card-textArea {
    flex: 100%;
    padding-right: 0;
  }
}
.topProduct_card-imgArea {
  flex: 40%;
}
@media screen and (max-width: 768px) {
  .topProduct_card-imgArea {
    flex: 0%;
  }
}
.topProduct_card-img {
  height: 40px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .topProduct_card-img {
    height: 30px;
    margin-top: 10px;
    margin-bottom: 30px;
  }
}
.topProduct_card-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  color: #fff;
  flex-grow: 1;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  .topProduct_card-text {
    font-size: 1.4rem;
    padding-bottom: 40px;
  }
}
.topProduct_card-spImg {
  padding-bottom: 30px;
}
.topProduct_card .topLinkBt_arrow::before {
  background-color: #000;
}
.topProduct_card .topLinkBt_arrow span {
  color: #000;
}
.topProduct_card-notice {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .topProduct_card-notice {
    font-size: 1.4rem;
  }
}
.topProduct .no {
  position: absolute;
  top: 35px;
  left: 35px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  color: #fff;
}
.topProduct_contactArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topProduct_contactArea-ttl {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 30px;
}

/* 
 * mixin
 *
*/
.topApps {
  width: 100%;
  height: 100vh;
  padding: 100px 0;
  background-image: linear-gradient(to right, #e7e7e7, #f7f7f7);
}
@media screen and (max-width: 768px) {
  .topApps {
    padding-top: 100px;
    padding-bottom: 40px;
    height: auto;
  }
}
.topApps .container22 {
  width: 100%;
}
.topApps_inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .topApps_inner {
    flex-direction: column;
  }
}
.topApps_ttlArea {
  flex: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topApps_ttlArea-ttl {
  text-align: left;
  padding-bottom: 30px;
}
.topApps_ttlArea-ttl .ttlText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05rem;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  .topApps_ttlArea-ttl .ttlText {
    font-size: 2.4rem;
  }
}
.topApps_ttlImg {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .topApps_ttlImg {
    width: 200px;
  }
}
.topApps_contentsArea {
  flex: 50%;
  width: 100%;
  padding: 100px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .topApps_contentsArea {
    padding: 40px 0;
  }
}
.topApps_card {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  overflow: hidden;
}
.topApps_card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
}
.topApps_card:hover .topApps_card-imgArea img {
  animation: appCardImgHoverAnimation 8s ease-out forwards;
}
.topApps_card-imgArea {
  position: relative;
  flex: 60%;
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.topApps_card-imgArea img {
  position: absolute;
  top: -20px;
  left: 0;
}
.topApps_card-textArea {
  width: 100%;
  flex: 40%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 20px 20px 20px;
}
.topApps_card-tecList {
  width: 100%;
  padding: 10px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.topApps_card-tecList li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  color: #fff;
  padding: 5px 12px;
  background-color: #000;
  border-radius: 50px;
}
.topApps_card-tecList li:not(:last-of-type) {
  margin-right: 8px;
}
.topApps_card-discription {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.2;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 20px;
}
.topApps_card-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.2;
  text-align: left;
}
.topApps_contactArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topApps_contactArea .topLinkBt_arrow span {
  color: #000;
}

@keyframes appCardImgHoverAnimation {
  0% {
    transform: scale(1) rotate(0);
  }
  100% {
    transform: scale(1.2) rotate(6deg);
  }
}
/* 
 * mixin
 *
*/
.topComLogo {
  width: 100%;
  height: auto;
  padding: 100px 0;
  background-color: #fff;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .topComLogo {
    padding: 60px 0;
  }
}
.topComLogo .container22 {
  width: 100%;
}
.topComLogo_inner {
  width: 100%;
}
.topComLogo .logo-slider {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 40px;
}
.topComLogo .logo-slider img {
  width: 300px;
}
@media screen and (max-width: 768px) {
  .topComLogo .logo-slider img {
    width: 150px;
  }
}

/* 
 * mixin
 *
*/
.topCaseStudy {
  width: 100%;
  height: auto;
  padding: 100px 0;
  background-color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .topCaseStudy {
    padding-top: 100px;
    padding-bottom: 40px;
  }
}
.topCaseStudy .container22 {
  width: 100%;
}
.topCaseStudy_inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topCaseStudy_ttlBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.topCaseStudy_ttlArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topCaseStudy_ttlArea-cat {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 10px;
}
.topCaseStudy_ttlArea-ttl {
  text-align: left;
  padding-bottom: 30px;
}
.topCaseStudy_ttlArea-ttl .ttlText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.05rem;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  .topCaseStudy_ttlArea-ttl .ttlText {
    font-size: 3rem;
  }
}
.topCaseStudy_contactArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
.topCaseStudy_contactArea .topLinkBt_arrow span {
  color: #000;
}
.topCaseStudy_contentsArea {
  width: 100%;
  padding-top: 120px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .topCaseStudy_contentsArea {
    flex-direction: column;
    padding-top: 140px;
  }
}
.topCaseStudy_card {
  position: relative;
  width: calc((1312px - 36px) / 3);
  border-radius: 20px;
  padding: 160px 16px 48px 16px;
  background-color: #fff;
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  .topCaseStudy_card {
    width: 100%;
  }
}
.topCaseStudy_card:not(:last-of-type) {
  margin-right: 36px;
}
@media screen and (max-width: 768px) {
  .topCaseStudy_card:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 100px;
  }
}
.topCaseStudy_card-img {
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
}
.topCaseStudy_card .atom {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  font-feature-settings: "palt";
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #c6c6c6;
}
.topCaseStudy_card .atom:not(:last-of-type) {
  margin-bottom: 16px;
}
.topCaseStudy_card-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  font-feature-settings: "palt";
  padding-bottom: 24px;
}
.topCaseStudy_card .fontStrong {
  font-size: 3.4rem;
  color: #00c6ab;
  font-style: italic;
  margin-right: 5px;
}

/* 
 * mixin
 *
*/
.topNews {
  width: 100%;
  height: auto;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .topNews {
    padding-top: 100px;
    padding-bottom: 60px;
  }
}
.topNews .container22 {
  width: 100%;
}
.topNews_inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1rem;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .topNews_inner {
    grid-template-columns: 1fr;
  }
}
.topNews_ttlArea {
  position: sticky;
  top: 162px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .topNews_ttlArea {
    position: relative;
    top: 0;
  }
}
.topNews_ttlArea-cat {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 10px;
}
.topNews_ttlArea-ttl {
  text-align: left;
  padding-bottom: 30px;
}
.topNews_ttlArea-ttl .ttlText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  font-feature-settings: "palt";
}
.topNews_contentsArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .topNews_contentsArea {
    margin-top: 60px;
  }
}
.topNews_contentsCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 40px;
  margin-bottom: 32px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
.topNews_contentsCard:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.topNews_contentsCard:not(:last-of-type) {
  margin-bottom: 32px;
}
.topNews_contentsCard-headArea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 32px;
}
.topNews_contentsCard-headArea .date {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  color: #6c6c6c;
}
.topNews_contentsCard-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
@media screen and (max-width: 768px) {
  .topNews_contentsCard-ttl {
    -webkit-line-clamp: 3;
  }
}
.topNews_contactArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topNews_contactArea .topLinkBt_arrow {
  border: 1px solid #000;
}
.topNews_contactArea .topLinkBt_arrow span {
  color: #000;
}
.topNews_contactArea-ttl {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 30px;
}

/* 
 * mixin
 *
*/
.topColumn {
  width: 100%;
  height: auto;
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .topColumn {
    padding-top: 100px;
    padding-bottom: 60px;
  }
}
.topColumn .container22 {
  width: 100%;
}
.topColumn_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topColumn_ttlArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topColumn_ttlArea-cat {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 10px;
}
.topColumn_ttlArea-ttl {
  text-align: left;
  padding-bottom: 30px;
}
.topColumn_ttlArea-ttl .ttlText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  font-feature-settings: "palt";
}
.topColumn_contentsArea {
  position: relative;
  width: 100%;
  margin-top: 60px;
  padding: 40px 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .topColumn_contentsArea {
    margin-top: 20px;
    padding: 40px 0;
  }
}
.topColumn_contentsArea-inner {
  width: 100%;
  min-width: 1905px;
}
.topColumn_contentsArea-inner .slick-list {
  height: 450px !important;
}
.topColumn .my-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topColumn_card {
  padding-top: 20px;
}
.topColumn_card:hover .topColumn_card-inner {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-10px);
}
.topColumn_card:hover .topColumn_card-imgArea img {
  animation: appCardImgHoverAnimation 8s ease-out forwards;
}
.topColumn_card-inner {
  width: 300px;
  height: 400px !important;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}
.topColumn_card-imgArea {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  display: flex;
}
.topColumn_card-textArea {
  width: 100%;
  flex: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 20px 20px 20px;
}
.topColumn_card-date {
  width: 100%;
  padding: 10px 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.2;
  text-align: left;
  color: #6c6c6c;
}
.topColumn_card-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.2;
  text-align: left;
  margin-bottom: 24px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-feature-settings: "palt";
}
.topColumn_card-tagArea {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.topColumn_card-tag {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 3;
  text-align: left;
  padding: 5px 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 1.2rem;
  background-color: #e7e7e7;
  color: #777;
  border-radius: 2px;
}
.topColumn_contactArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.topColumn_contactArea .topLinkBt_arrow {
  border: 1px solid #000;
}
.topColumn_contactArea .topLinkBt_arrow span {
  color: #000;
}
.topColumn_contactArea-ttl {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 30px;
}
.topColumn_cover-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 500px;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .topColumn_cover-left {
    display: none;
  }
}
.topColumn_cover-right {
  position: absolute;
  content: "";
  top: 0;
  left: calc(100% - 300px);
  transform: rotate(-180deg);
  width: 300px;
  height: 500px;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .topColumn_cover-right {
    display: none;
  }
}
.topColumn .tns-inner {
  height: 500px;
}

/* 
 * mixin
 *
*/
.wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
.wrapper__contents {
  width: 100%;
  position: relative;
}
.wrapper__bg {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.wrapper__bg--inner {
  position: relative;
  width: 1312px;
  margin: 0 auto;
}
@media screen and (max-width: 1311px) {
  .wrapper__bg--inner {
    width: 100%;
  }
}
.wrapper__bg--line1 {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #e0e0e0;
  animation: StretchingLine 0.3s ease-out 0.3s backwards;
}
.wrapper__bg--line2 {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 437.3333333333px;
  background-color: #e0e0e0;
  animation: StretchingLine 0.3s ease-out 0.6s backwards;
}
@media screen and (max-width: 1311px) {
  .wrapper__bg--line2 {
    left: 33.3333333333%;
  }
}
.wrapper__bg--line3 {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 874.6666666667px;
  background-color: #e0e0e0;
  animation: StretchingLine 0.3s ease-out 1s backwards;
}
@media screen and (max-width: 1311px) {
  .wrapper__bg--line3 {
    left: 66.6666666667%;
  }
}
.wrapper__bg--line4 {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 100%;
  background-color: #e0e0e0;
  animation: StretchingLine 0.3s ease-out 1.3s backwards;
}
.wrapperMainBg {
  position: relative;
  overflow: hidden;
}
.wrapperMainBg__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.wrapperMainBg__bg--inner {
  position: relative;
  width: 1312px;
  height: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 1311px) {
  .wrapperMainBg__bg--inner {
    width: 100%;
  }
}
.wrapperMainBg__bg--line1 {
  position: absolute;
  width: 1px;
  height: 200%;
  bottom: 0;
  left: -437.3333333333px;
  transform: rotate(45deg);
  transform-origin: left bottom;
  background-color: #e0e0e0;
  animation: StretchingRotateLine 0.6s ease-out 4s backwards;
}
@media screen and (max-width: 1311px) {
  .wrapperMainBg__bg--line1 {
    left: -33.3333333333%;
  }
}
.wrapperMainBg__bg--line2 {
  position: absolute;
  width: 1px;
  height: 200%;
  bottom: 0;
  left: 437.3333333333px;
  background-color: #e0e0e0;
  transform: rotate(45deg);
  transform-origin: left bottom;
  animation: StretchingRotateLine 0.6s ease-out 4.3s backwards;
}
@media screen and (max-width: 1311px) {
  .wrapperMainBg__bg--line2 {
    left: 33.3333333333%;
  }
}
.wrapperMainBg__bg--line3 {
  position: absolute;
  width: 1px;
  height: 200%;
  bottom: 0;
  left: 100%;
  background-color: #e0e0e0;
  animation: StretchingRotateLine 0.6s ease-out 4.6s backwards;
  transform: rotate(45deg);
  transform-origin: left bottom;
}
.wrapper .biztmpMain {
  position: relative;
  width: 100%;
  height: 40vw;
}
@media screen and (max-width: 768px) {
  .wrapper .biztmpMain {
    height: 100vw;
  }
}
.wrapper .biztmpMain__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.wrapper .biztmpMain__bg--inner {
  position: relative;
  width: 1312px;
  height: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 1312px) {
  .wrapper .biztmpMain__bg--inner {
    width: 100%;
  }
}
.wrapper .biztmpMain__bg--line1 {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #e0e0e0;
}
.wrapper .biztmpMain__bg--line2 {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 437.3333333333px;
  background-color: #e0e0e0;
}
@media screen and (max-width: 1312px) {
  .wrapper .biztmpMain__bg--line2 {
    left: 33.3333333333%;
  }
}
.wrapper .biztmpMain__bg--line3 {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 874.6666666667px;
  background-color: #e0e0e0;
}
@media screen and (max-width: 1312px) {
  .wrapper .biztmpMain__bg--line3 {
    left: 66.6666666667%;
  }
}
.wrapper .biztmpMain__bg--line4 {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 100%;
  background-color: #e0e0e0;
}
.wrapper .biztmpMain-lead {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 16%;
}
@media screen and (max-width: 768px) {
  .wrapper .biztmpMain-lead {
    left: 10%;
  }
}
.wrapper .biztmpMain-h1 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.5vw !important;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .wrapper .biztmpMain-h1 {
    font-size: 8vw;
  }
}
.wrapper .biztmpMain-text {
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: 0.3s;
}
.wrapper .biztmpMain-text.scroll-in {
  animation: fadeSubText 0.6s ease-out 1s forwards;
}
@media screen and (max-width: 768px) {
  .wrapper .biztmpMain-text {
    width: 100%;
    font-size: 12px;
    padding-right: 20px;
  }
}
.wrapper .biztmpMain-subTtl {
  font-family: "Montserrat", sans-serif;
  font-size: 1.3vw;
  font-weight: 400;
  opacity: 0;
  text-align: left;
  padding-top: 20px;
  transition: 0.3s;
  animation: fadeSubText 0.6s ease-out 3s forwards;
}
@media screen and (max-width: 768px) {
  .wrapper .biztmpMain-subTtl {
    width: 100%;
    font-size: 12px;
    padding-right: 20px;
  }
}
.wrapper .topAbout {
  width: 100%;
  padding-bottom: 100px;
  position: relative;
}
.wrapper .topAbout__partition {
  position: absolute;
  top: 50px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #e0e0e0;
  transition: 0.3s;
}
.wrapper .topAbout__partition.scroll-in {
  animation: StretchingBesideLine 0.3s ease-out forwards;
}
.wrapper .topAbout__area {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .wrapper .topAbout__area {
    flex-direction: column;
  }
}
.wrapper .topAbout__about {
  flex: 874.6666666667px;
}
@media screen and (max-width: 768px) {
  .wrapper .topAbout__about {
    flex: 100%;
  }
}
.wrapper .topAbout__about--contents {
  padding: 40px 20px;
  opacity: 0;
  transition: 0.3s;
}
.wrapper .topAbout__about--contents.scroll-in {
  animation: fadeObj 0.3s ease-out forwards;
}
.wrapper .topAbout__about--contents p {
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}
.wrapper .topAbout__frameworks {
  flex: 437.3333333333px;
}
@media screen and (max-width: 768px) {
  .wrapper .topAbout__frameworks {
    flex: 100%;
  }
}
.wrapper .topAbout__frameworks--contents {
  padding: 40px 20px;
  opacity: 0;
  transition: 0.3s;
}
.wrapper .topAbout__frameworks--contents.scroll-in {
  animation: fadeObj 0.3s ease-out forwards;
}
.wrapper .topAbout__frameworks--contents p {
  font-size: 1.4rem;
  font-weight: 300;
}
.wrapper .topAbout__frameworks--contents--list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .topAbout__frameworks--contents--list li {
  flex: 20%;
  text-align: center;
}
.wrapper .topAbout__frameworks--contents--list li img {
  width: 50%;
}
.wrapper .topAbout__frameworks--list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .topAbout__frameworks--list li {
  flex: 20%;
  text-align: center;
}
.wrapper .topAbout__frameworks--list li img {
  width: 50%;
}
.wrapper .topBizTpl {
  width: 100%;
  margin-top: -50px;
  position: relative;
}
.wrapper .topBizTpl__partition {
  position: absolute;
  top: 50px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #e0e0e0;
}
.wrapper .topBizTpl__partition.scroll-in {
  animation: StretchingBesideLine 0.3s ease-out forwards;
}
.wrapper .topBizTpl__area {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.wrapper .bizContact {
  width: 100%;
  padding: 80px 0 0 0;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}
@media screen and (max-width: 768px) {
  .wrapper .bizContact {
    padding: 20px 0 0 0;
  }
}
.wrapper .bizContact-list {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 20px 0;
  z-index: 100;
}
@media screen and (max-width: 768px) {
  .wrapper .bizContact-list {
    justify-content: center;
  }
}
.wrapper .bizContact-list__squares {
  width: 437.3333333333px;
  padding: 20px;
}
@media screen and (max-width: 1312px) {
  .wrapper .bizContact-list__squares {
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 768px) {
  .wrapper .bizContact-list__squares {
    width: 100%;
  }
}
.wrapper .bizContact-list__box {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  color: #000;
  border-radius: 4px;
  margin-bottom: 40px;
}
.wrapper .bizContact-list__box--ttlArea {
  width: 100%;
  padding: 0 20px 20px 20px;
  text-align: left;
}
.wrapper .bizContact-list__box--ttl {
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  opacity: 0;
  transition: 0.3s;
}
.wrapper .bizContact-list__box--ttl.scroll-in {
  animation: fadeObj 0.3s ease-out forwards;
}
.wrapper .bizContact-list__box--textArea {
  width: 100%;
  padding: 0 20px 40px 20px;
  text-align: left;
}
.wrapper .bizContact-list__box--text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  opacity: 0;
  transition: 0.3s;
}
.wrapper .bizContact-list__box--text.scroll-in {
  animation: fadeObj 0.3s ease-out forwards;
}
.wrapper .bizContact .bt__area .bt__standard {
  padding: 20px 20px;
}
.wrapper .bizContact .bt__area .bt__standard:hover {
  color: #fff;
}
.wrapper .scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
.wrapper .contents.scroll-in {
  animation: fadeBg 0.3s ease-out forwards;
}
.wrapper .textAnimation {
  color: #000;
  font-size: 70px;
}
.wrapper .textAnimation:not(:first-of-type) {
  margin-top: 30px;
}
.wrapper .animation1 span {
  display: inline-block;
}
.wrapper .animation1 span:not(.is-active) {
  opacity: 0;
}
.wrapper .animation1 .is-active {
  animation: showText1 1s ease-out 1s backwards;
}
.wrapper .animation1 {
  opacity: 0;
}
.wrapper .animation1.is-active {
  opacity: 1;
}
.wrapper .inner {
  position: relative;
  max-width: 1312px;
  margin: 0 auto;
}
.wrapper .contents-app {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 20px 0;
  z-index: 100;
}
.wrapper .contents-app__squares {
  width: 437.3333333333px;
  padding: 20px;
}
@media screen and (max-width: 1312px) {
  .wrapper .contents-app__squares {
    width: 33.3333333333%;
  }
}
@media screen and (max-width: 768px) {
  .wrapper .contents-app__squares {
    width: 100%;
  }
}
.wrapper .contents-app__ttl {
  padding: 0 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: bold;
  color: #000;
}
.wrapper .contents-app__text {
  padding: 10px 20px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  color: #000;
}
.wrapper .contents-app__box {
  width: 100%;
  align-self: stretch;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  color: #000;
  border-radius: 4px;
  opacity: 0;
  transition: 0.3s;
}
.wrapper .contents-app__box.scroll-in {
  animation: fadeObj 0.3s ease-out forwards;
}
@media screen and (max-width: 768px) {
  .wrapper .contents-app__box {
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.1));
  }
}
.wrapper .contents-app__box:hover {
  transform: translate(-5px, -5px);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.1));
  transition: 0.3s;
}
.wrapper .contents-app__box-ttlimg {
  width: 100%;
}
.wrapper .contents-app__box-com {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.wrapper .contents-app__box-com--left {
  flex: 50%;
  width: 100%;
  text-align: left;
}
.wrapper .contents-app__box-com--no {
  font-size: 1.2rem;
  color: #000;
}
.wrapper .contents-app__box-com--iconArea {
  width: 66px;
  height: 66px;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}
.wrapper .contents-app__box-com--iconArea img {
  width: 100%;
}
.wrapper .contents-app__box-com--right {
  flex: 50%;
  width: 100%;
  text-align: right;
}
.wrapper .contents-app__box-com2 {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: auto;
}
.wrapper .contents-app__box-com2 span {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
}
.wrapper .contents-app__box-com2--nameArea {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .contents-app__box-com2--name {
  width: 100%;
  position: relative;
  font-size: 1.4rem;
  text-align: left;
  padding-left: 5px;
}
.wrapper .contents-app__box-com2--logo {
  height: 18px;
  margin-bottom: 5px;
}
.wrapper .contents-app__comlogo {
  height: 25px;
}
.wrapper .bt__area {
  width: 100%;
  padding: 20px;
  text-align: center;
}
.wrapper .bt__standard {
  display: block;
  margin: 0 auto;
  max-width: 300px;
  padding: 10px 20px;
  background-color: #000;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transition: 0.3s;
}
.wrapper .bt__standard:visited {
  color: #fff;
}
.wrapper .bt__standard.scroll-in {
  animation: fadeObjUp 0.3s ease-out forwards;
}
.wrapper .bt__standard:hover {
  background-color: #666;
}
.wrapper .sec__ttlArea {
  position: relative;
  width: 100%;
  height: 50px;
}
.wrapper .sec__ttlArea::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 3px;
  height: 50px;
  background-color: #000;
  opacity: 0;
  transition: 0.3s;
}
.wrapper .sec__ttlArea.scroll-in::after {
  animation: fadeTtlArea 0.3s ease-out forwards;
}
.wrapper .sec__ttl {
  font-size: 1.6rem;
  font-weight: 700;
  margin-left: 20px;
  line-height: 50px;
  text-align: left;
  opacity: 0;
  transition: 0.3s;
}
.wrapper .sec__ttl.scroll-in {
  animation: fadeTtl 0.3s ease-out 0.3s forwards;
}

@keyframes spMenusAnime {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes showHeaderBg {
  0% {
    background: rgba(255, 255, 255, 0.4);
  }
  100% {
    background: white;
  }
}
@keyframes fadeHeader {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeBg {
  0% {
    background: rgba(214, 214, 214, 0);
  }
  100% {
    background: rgba(214, 214, 214, 0.4);
  }
}
@keyframes StretchingLine {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes fadeSubText {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes StretchingBesideLine {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes StretchingLine {
  0% {
    height: 0;
  }
  100% {
    height: 100vh;
  }
}
@keyframes StretchingRotateLine {
  0% {
    height: 0;
  }
  100% {
    height: 200%;
  }
}
@keyframes fadeObj {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeTtlArea {
  0% {
    opacity: 0;
    height: 0;
  }
  100% {
    opacity: 1;
    height: 50px;
  }
}
@keyframes fadeTtl {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeObjUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeAppTtl {
  0% {
    opacity: 0;
    position: fixed;
    top: 80px;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 200;
  }
  100% {
    opacity: 1;
    position: fixed;
    top: 80px;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 200;
  }
}
.app {
  width: 100%;
  position: relative;
  margin: 0;
  text-align: left;
}
.app .has_active {
  animation: fadeAppTtl 0.3s ease-out forwards;
  border-bottom: none;
  filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.2));
  margin-top: -15px;
}
@media screen and (max-width: 768px) {
  .app .has_active {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.app .has_active .app__appName p {
  display: none;
}
.app .has_active .app__appName h2 {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .app .has_active .app__appName h2 {
    font-size: 1.2rem;
  }
}
.app .has_active .app__appNameArea {
  margin-bottom: 0;
}
.app .has_active .app__prev {
  height: 50px;
}
@media screen and (max-width: 768px) {
  .app .has_active .app__prev {
    height: 40px;
  }
}
.app .has_active .app__btArea {
  padding-bottom: 10px;
}
.app .has_active .app__btArea p {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .app .has_active .app__btArea p {
    display: none;
  }
}
.app .has_active .contents-app__box-com--iconArea {
  width: 50px;
  height: 50px;
}
@media screen and (max-width: 768px) {
  .app .has_active .contents-app__box-com--iconArea {
    width: 40px;
    height: 40px;
  }
}
.app .has_active .bt__static {
  margin-left: auto;
  margin-right: 0;
}
.app__header {
  position: relative;
  width: 100%;
  height: auto;
  padding: 20px;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  transition: 0.3s;
  z-index: 50;
}
@media screen and (max-width: 768px) {
  .app__header {
    display: block;
    padding-top: 100px;
  }
}
.app__header .bt__static {
  display: block;
  margin: 0 auto;
  padding: 14px 40px;
  background-color: #000;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 0.05rem;
  font-weight: 400;
  color: #fff;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .app__header .bt__static {
    padding: 5px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (max-width: 768px) {
  .app__header .app__grid {
    display: grid;
    grid-template-columns: 4fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .app__header .app__btArea-bt--standard {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .app__header .app__btArea-bt--scroll {
    display: flex !important;
    font-size: 1rem;
    color: #fff;
  }
}
.app__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media screen and (max-width: 768px) {
  .app__grid {
    display: block;
  }
}
.app__prev {
  position: relative;
  width: 30px;
  height: 66px;
  margin: 10px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  transition: 0.3s;
}
.app__prev::after {
  position: absolute;
  content: "";
  background-image: url("/2023/04/arrow-left.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 14px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  transform-origin: center;
  transition: 0.3s;
}
.app__prev:hover::after {
  left: 40%;
}
.app__prev:hover {
  background-color: #e0e0e0;
  transition: 0.3s;
}
.app__prev a {
  display: block;
  padding: 5px 20px 5px 40px;
  text-decoration: none;
  color: #000;
  font-size: 1.2rem;
}
.app__appNameArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .app__appNameArea {
    margin-bottom: 20px;
  }
}
.app__appName {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 20px;
}
.app__appName h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  margin-bottom: 10px;
}
.app__appName p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.4;
}
.app__btArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.app__btArea-bt--standard {
  display: block !important;
}
.app__btArea-bt--scroll {
  display: none !important;
}
.app__btArea p {
  width: 100%;
  padding: 5px 0;
  color: #000;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
}
.app__overview {
  padding: 20px 0 60px 0;
  background-color: #fff;
  text-align: left;
}
.app__overview .inner {
  padding: 0 20px;
}
.app__overview h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  padding-bottom: 20px;
}
.app__overview p {
  font-size: 1.4rem;
  line-height: 1.5;
}
.app-details {
  width: 100%;
  height: 100%;
}
.app-details__contents {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .app-details__contents {
    display: block;
  }
}
.app-details__contents-side {
  padding: 60px 0;
  position: sticky;
  top: 150px;
}
@media screen and (max-width: 768px) {
  .app-details__contents-side {
    background-color: #fff;
    padding: 20px 0;
  }
}
.app-details__contents-side--box {
  display: block;
  padding: 0 20px;
}
.app-details__contents-side--devttl {
  width: 100%;
  position: relative;
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
}
.app-details__contents-side--com {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px 0;
}
.app-details__contents-side--com-img {
  width: 30%;
}
.app-details__contents-side--com-name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  margin-top: 20px;
}
.app-details__contents-side--com-info {
  padding: 10px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.app-details__contents-side--com-info span {
  font-size: 1.4rem;
}
.app-details__contents-side--com-location {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  padding-left: 5px;
}
.app-details__contents-side--com-btarea {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.app-details__contents-side--com-btarea::after {
  position: absolute;
  content: "";
  background-image: url("/2023/04/arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: 14px;
  height: 24px;
}
.app-details__contents-side--com-btarea a {
  display: block;
  padding: 10px 20px;
  color: #000;
  font-size: 1.4rem;
  font-weight: 600;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  transition: 0.3s;
}
.app-details__contents-side--com-btarea a:hover {
  color: #00c6ab;
}
.app-details__contents-side--com-btarea-bt {
  display: block;
  padding: 5px;
  margin-top: 10px;
  background-color: #00c6ab;
  text-align: center;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  transition: 0.3s;
}
.app-details__contents-side--com-btarea-bt:hover {
  background-color: #129379;
}
.app-details__contents-side--app {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.app-details__contents-side--app-ttl {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
  background-color: #f4f4f4;
}
.app-details__contents-side--app-no {
  font-size: 1rem;
}
.app-details__contents-side--app-name {
  height: 100px;
  align-self: center;
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app-details__contents-side--appInfo {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #f4f4f4;
  padding: 20px 10px;
}
.app-details__contents-side--appInfo-iconArea {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}
.app-details__contents-side--appInfo-iconArea img {
  width: 100%;
}
.app-details__contents-side--appInfo-appName {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 10px;
}
.app-details__contents-side--appInfo-appName .app__ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  margin-bottom: 5px;
}
.app-details__contents-side--appInfo-appName .app__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.4;
}
.app-details__contents-side--appText {
  width: 100%;
  padding: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.05rem;
  line-height: 1.6;
}
.app-details__contents-side--appTag {
  width: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.app-details__contents-side--appTag li {
  list-style: none;
}
.app-details__contents-box {
  padding: 40px;
  background-color: #fff;
  border-radius: 4px;
}
.app-details__contents-box:not(:last-of-type) {
  margin-bottom: 20px;
}
.app-details__contents-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px 0;
}
.app-details__contents-main--ttl {
  width: 100%;
  position: relative;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.app-details__contents-main--text {
  margin-bottom: 30px;
  margin-top: 10px;
  font-size: 1.4rem;
  line-height: 1.5;
}
.app-details__contents-main img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #d6d6d6;
}
.app .inner {
  position: relative;
  max-width: 1312px;
  margin: 0 auto;
}
.app .contents-app__box-com--iconArea {
  width: 66px;
  height: 66px;
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 4px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2));
}
.app .drop-shadow__down {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

@keyframes fadeAppTtl {
  0% {
    opacity: 0;
    position: fixed;
    top: 80px;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 200;
  }
  100% {
    opacity: 1;
    position: fixed;
    top: 80px;
    padding-top: 5px;
    padding-bottom: 5px;
    z-index: 200;
  }
}
/* 
 * mixin
 *
*/
.caseStudyList {
  width: 100%;
  padding: 30px 0 50px 0;
}

.caseStudyList_ttlArea .ttlMain {
  font-size: 2.4rem;
  letter-spacing: 0.5rem;
  line-height: 1.5;
  text-align: left;
  margin-top: 32px;
  margin-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .caseStudyList_ttlArea .ttlMain {
    font-size: 1.8rem;
  }
}
.caseStudyList_contentsArea {
  width: 100%;
  padding: 0 48px 48px 48px;
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  .caseStudyList_contentsArea {
    padding: 0 16px 48px 16px;
  }
}
.caseStudyList_contentsArea .inner {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 64px 0;
}

.caseStudyList_contentsArea .inner .card {
  position: relative;
  width: 350px;
  border: 1px solid #000;
  padding: 32px 24px;
  margin-bottom: 32px;
  text-align: left;
  background-image: url("/2023/06/casestudy-card-bg.png");
  background-size: 22px 22px;
  background-repeat: repeat;
  transition: 0.3s;
}

.caseStudyList_contentsArea .inner .card:hover {
  border: 1px solid #00c6ab;
  transform: translate(-2%, -2%);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 1311px) {
  .caseStudyList_contentsArea .inner .card {
    width: calc((100% - 70px) / 3);
  }
}
@media screen and (max-width: 999px) {
  .caseStudyList_contentsArea .inner .card {
    width: calc((100% - 32px) / 2);
  }
}
@media screen and (max-width: 768px) {
  .caseStudyList_contentsArea .inner .card {
    width: 100%;
  }
}
.caseStudyList_contentsArea .inner .card:not(:nth-of-type(3n)) {
  margin-right: 32px;
}

@media screen and (max-width: 999px) {
  .caseStudyList_contentsArea .inner .card:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
}
@media screen and (max-width: 999px) {
  .caseStudyList_contentsArea .inner .card:not(:nth-of-type(2n)) {
    margin-right: 32px;
  }
}
@media screen and (max-width: 768px) {
  .caseStudyList_contentsArea .inner .card:not(:nth-of-type(2n)) {
    margin-right: 0;
  }
}
.caseStudyList_contentsArea .inner .card .ttlArea {
  margin-top: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.caseStudyList_contentsArea .inner .card .ttlMain {
  display: inline-block;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 4px 8px;
  background-color: #000;
  color: #fff;
}

.caseStudyList_contentsArea .inner .card .system {
  display: inline-block;
  position: relative;
  font-size: 1.2rem;
  padding: 8px 16px 8px 36px;
  background-color: #00c6ab;
  color: #fff;
}

.caseStudyList_contentsArea .inner .card .system::before {
  position: absolute;
  content: "";
  background-image: url("/2023/06/systemMark.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 14px;
  height: 13px;
}

.caseStudyList_contentsArea .inner .card .industry {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 8px 16px;
  background-color: #ebebeb;
}

.caseStudyList_contentsArea .inner .card .description {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  padding-top: 16px;
}

.caseStudyDetails {
  width: 100%;
  padding: 100px 0 50px 0;
  background-color: #f7f7f7;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails {
    padding: 0 0 40px 0;
  }
}
.caseStudyDetails_ttlArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.caseStudyDetails_ttlArea .backButton {
  position: relative;
  font-size: 1.6rem;
  padding: 8px 16px 8px 32px;
  background-color: #fff;
  border: 2px solid #00c6ab;
  border-radius: 2px;
  transition: 0.3s;
  overflow: hidden;
}

.caseStudyDetails_ttlArea .backButton:hover {
  background-color: #00c6ab;
  color: #fff;
}

.caseStudyDetails_ttlArea .backButton:hover::before {
  background-color: #fff;
}

.caseStudyDetails_ttlArea .backButton::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background-color: #00c6ab;
}

.caseStudyDetails_ttlArea .ttlMain {
  font-size: 4rem;
  letter-spacing: 0.5rem;
  line-height: 1.5;
  text-align: left;
  padding: 16px 24px;
  color: #fff;
  background-color: #000;
  margin-top: 32px;
  margin-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_ttlArea .ttlMain {
    font-size: 2.4rem;
  }
}
.caseStudyDetails_ttlArea .subTitle {
  width: 100%;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.5rem;
  margin-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_ttlArea .subTitle {
    font-size: 1.8rem;
  }
}
.caseStudyDetails_ttlArea .iconArea {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.caseStudyDetails_ttlArea .iconArea .system {
  position: relative;
  font-size: 1.6rem;
  padding: 8px 16px 8px 36px;
  background-color: #00c6ab;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_ttlArea .iconArea .system {
    font-size: 1.2rem;
  }
}
.caseStudyDetails_ttlArea .iconArea .system::before {
  position: absolute;
  content: "";
  background-image: url("/2023/06/systemMark.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  width: 14px;
  height: 13px;
}

.caseStudyDetails_ttlArea .iconArea .industry {
  font-size: 1.6rem;
  font-weight: 600;
  padding: 8px 16px;
  background-color: #ebebeb;
  margin-left: 16px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_ttlArea .iconArea .industry {
    font-size: 1.2rem;
  }
}
.caseStudyDetails_ttlArea .imgArea {
  width: 100%;
  height: auto;
  margin-top: 32px;
}

.caseStudyDetails_contentsArea {
  width: 100%;
  padding: 0 48px 48px 48px;
  background-color: #fff;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea {
    padding: 0 16px 48px 16px;
  }
}
.caseStudyDetails_contentsArea-2c {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea-2c {
    flex-direction: column;
  }
}
.caseStudyDetails_contentsArea-2c .textArea {
  flex: 50%;
}

.caseStudyDetails_contentsArea-2c .imgArea {
  flex: 50%;
}

.caseStudyDetails_contentsArea h4 {
  display: block;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: left;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6e6e6;
  padding-top: 64px;
  margin-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea h4 {
    font-size: 1.8rem;
  }
}
.caseStudyDetails_contentsArea h5 {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  text-align: left;
  padding: 16px 8px 16px 8px;
  border-left: 3px solid #000;
  background-color: #f7f7f7;
  margin-top: 32px;
  margin-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea h5 {
    font-size: 1.8rem;
  }
}
.caseStudyDetails_contentsArea h6 {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.5;
  margin-top: 32px;
  margin-bottom: 16px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea h6 {
    font-size: 1.6rem;
  }
}
.caseStudyDetails_contentsArea .description {
  flex: 50%;
  font-size: 1.6rem;
  text-align: left;
  line-height: 1.5;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-left: 24px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .description {
    font-size: 1.4rem;
    margin-left: 0;
  }
}
.caseStudyDetails_contentsArea .list {
  font-size: 1.6rem;
  list-style: disc;
  margin-left: 48px;
  margin-bottom: 8px;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .list {
    font-size: 1.4rem;
    margin-left: 24px;
  }
}
.caseStudyDetails_contentsArea .list li {
  line-height: 2;
}

.caseStudyDetails_contentsArea .attention {
  width: 100%;
  padding: 24px;
  background-color: rgba(0, 198, 171, 0.15);
  margin-top: 32px;
  margin-bottom: 32px;
}

.caseStudyDetails_contentsArea .textBold {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  padding-top: 8px;
  padding-bottom: 8px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .textBold {
    font-size: 1.4rem;
  }
}
.caseStudyDetails_contentsArea .textBoldStrong {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: #ff346b;
  padding-top: 8px;
  padding-bottom: 8px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .textBoldStrong {
    font-size: 1.4rem;
  }
}
.caseStudyDetails_contentsArea .comment {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  text-decoration: underline;
  margin-top: 8px;
  margin-bottom: 8px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .comment {
    font-size: 1.4rem;
  }
}
.caseStudyDetails_contentsArea .squareBox {
  position: relative;
  width: 100%;
  border: 2px solid #000;
  padding: 48px 16px 16px 16px;
  margin-bottom: 32px;
  background-color: #f7f7f7;
}

.caseStudyDetails_contentsArea .squareBox .ttlMain {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  font-size: 1.6rem;
  color: #fff;
  padding: 8px 16px;
  background-color: #000;
}

.caseStudyDetails_contentsArea .squareBox .sentence {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 8px;
}

.caseStudyDetails_contentsArea .squareBox .description li {
  text-align: left;
  list-style: disc;
  font-weight: 600;
  margin-left: 16px;
}

.caseStudyDetails_contentsArea .squareBox .description li:not(:last-of-type) {
  padding-bottom: 8px;
}

.caseStudyDetails_contentsArea .stepArea {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 32px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .stepArea {
    flex-wrap: wrap;
  }
}
.caseStudyDetails_contentsArea .stepArea .noWork {
  background-color: #d9d9d9 !important;
}

.caseStudyDetails_contentsArea .stepArea .step {
  width: 328px;
  height: 100px;
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
  background-color: #00c6ab;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .stepArea .step {
    width: 50%;
  }
}
.caseStudyDetails_contentsArea .stepArea .step:hover {
  background-color: rgba(0, 198, 171, 0.6);
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .stepArea .step:not(:last-of-type) {
    margin-bottom: 16px;
  }
}
.caseStudyDetails_contentsArea .stepArea .step .stepName {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  padding-bottom: 8px;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .stepArea .step .stepName {
    font-size: 1.4rem;
  }
}
.caseStudyDetails_contentsArea .stepArea .step .stepDescription {
  font-size: 1.8rem;
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .caseStudyDetails_contentsArea .stepArea .step .stepDescription {
    font-size: 1.4rem;
  }
}
.caseStudyDetails .jumpPoint {
  height: 1px;
  display: block;
  padding-top: 40px;
  margin-top: -40px;
}

.dev {
  width: 100%;
  line-height: 1.5;
  text-align: left;
}

.dev__backBtArea {
  padding: 20px 40px 40px 40px;
}

.dev__backBtArea a {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  padding-left: 20px;
  transition: 0.3s;
}

.dev__backBtArea a::after {
  position: absolute;
  content: "";
  background-image: url("/2023/04/arrow-left.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  transition: 0.3s;
}

.dev__backBtArea a:hover {
  color: #00c6ab;
}

.dev__backBtArea a:hover::after {
  left: -5px;
}

.dev__ttlArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-bottom: 1px solid #e0e0e0;
}

.dev__ttlArea-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px 40px 40px 40px;
}

@media screen and (max-width: 768px) {
  .dev__ttlArea-main {
    padding: 10px 20px 20px 20px;
  }
}
.dev__ttlArea-main--name {
  font-size: 2.4rem;
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .dev__ttlArea-main--name {
    font-size: 1.4rem;
  }
}
.dev__ttlArea-main--logo {
  height: 30px;
  margin-bottom: 10px;
}

.dev__details {
  display: grid;
  grid-template-columns: 1fr 350px;
}

@media screen and (max-width: 1000px) {
  .dev__details {
    grid-template-columns: 1fr;
  }
}
.dev__details-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px;
}

@media screen and (max-width: 768px) {
  .dev__details-main {
    padding: 10px 20px 20px 20px;
  }
}
.dev__details-main--ttl {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .dev__details-main--ttl {
    font-size: 1.4rem;
  }
}
.dev__details-main--text {
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.dev__details-inside {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 40px;
}

.dev__details-inside--h3 {
  font-size: 3rem;
  font-weight: 600;
}

@media screen and (max-width: 768px) {
  .dev__details-inside--h3 {
    font-size: 2rem;
  }
}
.dev__details-inside--1cbox {
  margin-top: 30px;
  margin-bottom: 60px;
}

.dev__details-inside--1cbox-text {
  font-size: 1.4rem;
}

.dev__details-inside--2ceqbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .dev__details-inside--2ceqbox {
    flex-direction: column;
    width: 100%;
  }
}
.dev__details-inside--2ceqbox-box {
  flex: 50%;
  width: calc(50% - 100px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
}

@media screen and (max-width: 768px) {
  .dev__details-inside--2ceqbox-box {
    width: 100%;
    padding: 10px 0;
  }
}
.dev__details-inside--2ceqbox-box-ttl {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .dev__details-inside--2ceqbox-box-ttl {
    font-size: 1.4rem;
  }
}
.dev__details-inside--2ceqbox-box-list {
  font-size: 1.2rem;
}

.dev__details-inside--3cbox {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 10px;
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .dev__details-inside--3cbox {
    flex-direction: column;
  }
}
.dev__details-inside--3cbox-box {
  width: calc(33.3333333333% - 10px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
}

@media screen and (max-width: 768px) {
  .dev__details-inside--3cbox-box {
    width: 100%;
    padding: 10px 0;
  }
}
.dev__details-inside--3cbox-box-ttl {
  display: block;
  width: 100%;
  height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #d6d6d6;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

@media screen and (max-width: 768px) {
  .dev__details-inside--3cbox-box-ttl {
    width: 100%;
  }
}
.dev__details-inside--3cbox-box-text {
  font-size: 1.4rem;
}

.dev-info {
  width: 100%;
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-left: 1px solid #e0e0e0;
}

@media screen and (max-width: 1000px) {
  .dev-info {
    margin-bottom: 40px;
    border-left: none;
  }
}
.dev-info__imgArea {
  width: 100%;
  overflow: hidden;
}

.dev-info__imgArea img {
  width: 100%;
}

.dev-info__logo {
  height: 30px;
  padding-left: 20px;
  margin: 20px 0;
  mix-blend-mode: multiply;
}

.dev-info__table {
  width: 100%;
  padding: 0 20px;
}

.dev-info__table--dt {
  width: 30%;
  font-size: 1.2rem;
  font-weight: 300;
  padding: 10px 0 10px 14px;
  border-bottom: 1px solid #e0e0e0;
}

.dev-info__table--dd {
  width: 70%;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid #d6d6d6;
}

.dev-info__table--bt {
  width: 100%;
  display: block;
  padding: 5px;
  margin-top: 10px;
  background-color: #00c6ab;
  text-align: center;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  transition: 0.3s;
}

.dev-info__table--bt:hover {
  background-color: #129379;
  transition: 0.3s;
}

.dev-info__btArea {
  width: 100%;
  padding: 20px;
  text-align: center;
}

/* 
 * mixin
 *
*/
.magazine22 .magazineCommon {
  background-image: url("/2023/09/magazine_bg.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
  overflow: hidden;
}
.magazine22 .magazineCommon_inner {
  margin: 48px;
  padding: 48px;
  border: 6px solid #000;
}
.magazine22 .magazineCommon_headerLogo {
  padding-bottom: 48px;
}
.magazine22 .magazineCommon .title {
  height: 38px;
  margin-bottom: 48px;
}
.magazine22 .magazineCommon_card {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #fff;
  padding: 24px;
  transition: 0.3s;
}
.magazine22 .magazineCommon_card .imgArea {
  flex: 50%;
  height: auto;
  overflow: hidden;
}
.magazine22 .magazineCommon_card .imgArea img {
  transition: 0.3s;
}
.magazine22 .magazineCommon_card .textArea {
  flex: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 0 24px;
  align-self: stretch;
}
.magazine22 .magazineCommon_card .textArea .ttlArea {
  flex-grow: 1;
}
.magazine22 .magazineCommon_card .textArea .ttlArea .pickupMessage {
  font-family: "Ledger", serif;
  font-size: 2.4rem;
  line-height: 1.2;
  color: #000;
  padding-bottom: 32px;
  font-feature-settings: "palt";
}
.magazine22 .magazineCommon_card .textArea .ttlArea .pickupName {
  font-size: 1.8rem;
  padding-bottom: 24px;
  font-feature-settings: "palt";
}
.magazine22 .magazineCommon_card .textArea .ttlArea .pickupTitle {
  font-size: 2.4rem;
  line-height: 1.5;
  padding-bottom: 16px;
  font-feature-settings: "palt";
}
.magazine22 .magazineCommon_card .textArea .infoArea {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.magazine22 .magazineCommon_card .textArea .infoArea .date {
  font-size: 1.6rem;
  font-weight: 600;
  color: #888;
  flex-grow: 1;
  margin-bottom: 8px;
}
.magazine22 .magazineCommon_card .textArea .infoArea .tagArea {
  margin-top: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.magazine22 .magazineCommon_card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-2%);
}
.magazine22 .magazineCommon_tag {
  font-size: 1rem;
  padding: 6px 12px;
  color: #717171;
  background-color: #fff;
  border: 1px solid #717171;
  border-radius: 100px;
  margin-bottom: 8px;
}
.magazine22 .magazineTop_pickup {
  width: 100%;
  padding: 48px;
  background-color: #8a959f;
}
.magazine22 .magazineTop_listArea {
  padding: 48px 0;
}
.magazine22 .magazineTop_list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.magazine22 .magazineTop_card {
  width: 384px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #fff;
  padding: 24px;
  margin-bottom: 32px;
  transition: 0.3s;
}
.magazine22 .magazineTop_card:not(:nth-of-type(3n)) {
  margin-right: 32px;
}
.magazine22 .magazineTop_card .imgArea {
  height: auto;
  margin-bottom: 24px;
  overflow: hidden;
}
.magazine22 .magazineTop_card .imgArea img {
  transition: 0.3s;
}
.magazine22 .magazineTop_card .textArea {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  align-self: stretch;
}
.magazine22 .magazineTop_card .textArea .ttlArea {
  flex-grow: 1;
}
.magazine22 .magazineTop_card .textArea .ttlArea .pickupMessage {
  font-family: "Ledger", serif;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #000;
  padding-bottom: 32px;
  font-feature-settings: "palt";
}
.magazine22 .magazineTop_card .textArea .ttlArea .pickupName {
  font-size: 1.4rem;
  padding-bottom: 24px;
  font-feature-settings: "palt";
}
.magazine22 .magazineTop_card .textArea .ttlArea .pickupTitle {
  font-size: 1.6rem;
  line-height: 1.5;
  padding-bottom: 16px;
  font-feature-settings: "palt";
}
.magazine22 .magazineTop_card .textArea .infoArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.magazine22 .magazineTop_card .textArea .infoArea .date {
  font-size: 1.2rem;
  font-weight: 600;
  color: #888;
  flex-grow: 1;
  margin-bottom: 8px;
  padding-left: 4px;
}
.magazine22 .magazineTop_card .tagArea {
  margin-top: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: 8px;
}
.magazine22 .magazineTop_card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-2%);
}

@media screen and (max-width: 1600px) {
  .magazineTop_card {
    width: calc((100% - 64px) / 3);
  }
}
@media screen and (max-width: 1450px) {
  .magazineCommon_card .textArea .infoArea .date {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 1312px) {
  .magazine22 .magazineCommon_card .textArea .ttlArea .pickupMessage {
    font-size: 1.2rem;
  }
  .magazine22 .magazineCommon_card .textArea .ttlArea .pickupName {
    font-size: 1rem;
  }
  .magazine22 .magazineCommon_card .textArea .ttlArea .pickupTitle {
    font-size: 1.2rem;
  }
  .magazine22 .magazineCommon_card .textArea .infoArea {
    flex-direction: column;
    align-items: flex-start;
  }
  .magazine22 .magazineCommon_card .textArea .infoArea .tagArea {
    padding-top: 16px;
  }
  .magazine22 .magazineTop_listArea .container22 {
    padding: 0;
  }
  .magazine22 .magazineTop_card .textArea .ttlArea .pickupMessage {
    font-size: 1.6rem;
  }
  .magazine22 .magazineTop_card .tagArea {
    padding-top: 16px;
  }
}
@media screen and (max-width: 1000px) {
  .magazine22 .magazineCommon_inner {
    margin: 8px;
    padding: 8px;
  }
  .magazine22 .magazineCommon_headerLogo {
    width: 200px;
    height: auto;
    margin: 0 auto;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .magazine22 .magazineCommon .title {
    width: 100px;
    height: auto;
    margin-bottom: 24px;
  }
  .magazine22 .magazineCommon_card {
    flex-direction: column;
  }
  .magazine22 .magazineCommon_card .imgArea {
    flex: 100%;
    padding-bottom: 32px;
  }
  .magazine22 .magazineCommon_card .textArea {
    flex: 100%;
    padding: 0;
  }
  .magazine22 .magazineTop_pickup {
    padding: 24px 0;
  }
  .magazine22 .magazineTop_list {
    justify-content: center;
  }
  .magazine22 .magazineTop_card {
    width: calc((100% - 32px) / 2);
  }
  .magazine22 .magazineTop_card:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
  .magazine22 .magazineTop_card:not(:nth-of-type(2n)) {
    margin-right: 32px;
  }
  .magazine22 .magazineTop_card .imgArea {
    padding-bottom: 32px;
  }
  .magazine22 .magazineTop_card .textArea {
    padding: 0;
  }
}
.magazineDetails_contentsArea {
  max-width: 787px;
  margin: 0 auto;
}
.magazineDetails_contentsArea .infoArea {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 32px 0;
}
.magazineDetails_contentsArea .infoArea .date {
  font-size: 1.4rem;
  font-weight: 600;
  color: #888;
  flex-grow: 1;
  text-align: left;
  margin-bottom: 8px;
  padding-left: 4px;
  padding-right: 32px;
}
.magazineDetails_contentsArea .infoArea .tagArea {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: 8px;
}
.magazineDetails_contentsArea .ttlArea {
  padding-bottom: 32px;
}
.magazineDetails_contentsArea .ttlArea .pickupTitle {
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 16px;
  font-feature-settings: "palt";
}
.magazineDetails_contentsArea .ttlArea .pickupName {
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
  padding-bottom: 16px;
  font-feature-settings: "palt";
}
.magazineDetails_contentsArea .snsArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.magazineDetails_contentsArea .snsArea .snsTtl {
  font-size: 1.4rem;
  font-weight: 600;
}
.magazineDetails_contentsArea .leadArea {
  margin-top: 64px;
  font-size: 1.6rem;
  text-align: left;
  line-height: 2;
}
.magazineDetails_contentsArea .profileArea {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 64px;
  background-color: #fff;
  padding: 24px;
}
.magazineDetails_contentsArea .profileArea .imgArea .imgBox {
  width: 120px;
  height: 120px;
  border-radius: 100px;
  overflow: hidden;
}
.magazineDetails_contentsArea .profileArea .textArea {
  flex-grow: 1;
  padding-left: 48px;
  text-align: left;
}
.magazineDetails_contentsArea .profileArea .textArea .nameArea {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 16px;
}
.magazineDetails_contentsArea .profileArea .textArea .nameArea .nameJp {
  font-size: 1.6rem;
  font-weight: 600;
  padding-right: 8px;
}
.magazineDetails_contentsArea .profileArea .textArea .nameArea .nameEn {
  font-size: 1.2rem;
}
.magazineDetails_contentsArea .profileArea .textArea .roleName {
  font-size: 1.2rem;
  padding-bottom: 24px;
}
.magazineDetails_contentsArea .profileArea .textArea .description {
  font-size: 1.4rem;
  line-height: 1.5;
  font-feature-settings: "palt";
}
.magazineDetails_contentsArea .tableOfContents {
  position: relative;
  padding: 0 16px;
  border: 1px solid #000;
  margin-top: 64px;
  z-index: 2;
}
.magazineDetails_contentsArea .tableOfContents_titleArea {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 24px;
  margin-bottom: 24px;
}
.magazineDetails_contentsArea .tableOfContents_titleArea-title {
  font-size: 2.4rem;
  font-weight: 600;
}
.magazineDetails_contentsArea .tableOfContents_titleArea .closeButton {
  width: 100px;
  height: 24px;
  position: relative;
  padding-left: 16px;
  z-index: 2;
  cursor: pointer;
}
.magazineDetails_contentsArea .tableOfContents_titleArea .closeButton::after {
  position: absolute;
  content: "[閉じる]";
  font-size: 1.2rem;
  bottom: 0;
  left: 8px;
  transition: 0.3s;
}
.magazineDetails_contentsArea .tableOfContents_contentsArea {
  text-align: left;
  padding: 24px;
  list-style: none;
}
.magazineDetails_contentsArea .tableOfContents_contentsArea li {
  display: block;
  position: relative;
  padding-left: 40px;
  transition: 0.3s;
}
.magazineDetails_contentsArea .tableOfContents_contentsArea li a {
  display: block;
  font-size: 1.6rem;
  font-weight: 300;
  padding: 16px 0;
}
.magazineDetails_contentsArea .tableOfContents_contentsArea li:hover {
  background-color: #f7f7f7;
}
.magazineDetails_contentsArea .tableOfContents_contentsArea li:hover a {
  text-decoration: underline;
}
.magazineDetails_contentsArea .tableOfContents_contentsArea [class^=no]::after {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 1rem;
  font-weight: 600;
  content: attr(altclass);
}
.magazineDetails_letterBody {
  width: 100%;
  padding: 32px 0;
}
.magazineDetails_letterBody-heading {
  display: block;
  position: relative;
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 600;
  text-align: left;
  padding: 48px 0 48px 0;
  padding-top: 133px;
  margin-top: -85px;
}
.magazineDetails_letterBody-heading::after {
  position: absolute;
  content: "";
  background-image: url();
  background-size: contain;
  background-color: #000;
  background-position: center;
  background-repeat: no-repeat;
  bottom: 24px;
  left: 0;
  width: 80px;
  height: 1px;
}
.magazineDetails_letterBody .standardSentence {
  font-size: 1.6rem;
  line-height: 2;
  text-align: left;
  padding: 16px 0;
}

.addtoany_content {
  clear: both;
  margin: 16px auto;
}

.addtoany_header {
  margin: 0 0 16px;
}

.addtoany_list {
  display: inline;
  line-height: 24px;
}

.a2a_kit, .a2a_menu, .a2a_modal, .a2a_overlay {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  outline: 0;
}

.a2a_kit a {
  cursor: pointer;
  transition: none;
}

.addtoany_list a, .widget .addtoany_list a {
  border: 0;
  box-shadow: none;
  display: inline-block;
  font-size: 16px;
  padding: 0 4px;
  vertical-align: middle;
}

.addtoany_list a:not(.addtoany_special_service) > span {
  border-radius: 4px;
  display: inline-block;
  opacity: 1;
}

.a2a_kit .a2a_svg {
  background-repeat: repeat;
}

.addtoany_list a span {
  display: inline-block;
  float: none;
}

.a2a_svg {
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
  height: 32px;
  line-height: 32px;
  padding: 0;
  pointer-events: none;
  width: 32px;
}

.a2a_svg svg {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border: none;
  display: block;
  left: 0;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  top: 0;
  width: auto;
  height: auto;
}

.a2a_s_facebook {
  background-color: rgb(8, 102, 255);
  width: 24px;
  line-height: 24px;
  height: 24px;
  background-size: 24px;
  border-radius: 3px;
}

.a2a_s_twitter {
  background-color: rgb(29, 155, 240);
  width: 24px;
  line-height: 24px;
  height: 24px;
  background-size: 24px;
  border-radius: 3px;
}

.a2a_s_line {
  background-color: rgb(0, 195, 0);
  width: 24px;
  line-height: 24px;
  height: 24px;
  background-size: 24px;
  border-radius: 3px;
}

.a2a_s_linkedin {
  background-color: rgb(0, 123, 181);
  width: 24px;
  line-height: 24px;
  height: 24px;
  background-size: 24px;
  border-radius: 3px;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

@media screen and (max-width: 1312px) {
  .magazineDetails_contentsArea .infoArea .tagArea {
    padding-top: 16px;
  }
}
@media screen and (max-width: 768px) {
  .magazineDetails_contentsArea .infoArea {
    flex-direction: column;
    align-items: flex-start;
  }
  .magazineDetails_contentsArea .infoArea .date {
    font-size: 1rem;
    padding-left: 0;
    padding-right: 0;
  }
  .magazineDetails_contentsArea .ttlArea {
    padding-bottom: 32px;
  }
  .magazineDetails_contentsArea .ttlArea .pickupTitle {
    font-size: 1.6rem;
    padding-left: 8px;
    padding-right: 8px;
  }
  .magazineDetails_contentsArea .ttlArea .pickupName {
    font-size: 1.4rem;
    padding-left: 8px;
    padding-right: 8px;
  }
  .magazineDetails_contentsArea .snsArea {
    padding-left: 8px;
    padding-right: 8px;
  }
  .magazineDetails_contentsArea .leadArea {
    font-size: 1.4rem;
    padding-left: 8px;
    padding-right: 8px;
  }
  .magazineDetails_contentsArea .profileArea {
    flex-direction: column;
    align-items: center;
    margin-left: 8px;
    margin-right: 8px;
  }
  .magazineDetails_contentsArea .profileArea .imgArea {
    margin-bottom: 32px;
  }
  .magazineDetails_contentsArea .profileArea .textArea {
    padding-left: 0;
  }
  .magazineDetails_contentsArea .tableOfContents {
    margin-left: 8px;
    margin-right: 8px;
  }
  .magazineDetails_contentsArea .tableOfContents_contentsArea li a {
    font-size: 1.4rem;
  }
  .magazineDetails_letterBody-heading {
    margin-left: 8px;
    margin-right: 8px;
  }
  .magazineDetails_letterBody .standardSentence {
    font-size: 1.4rem;
    margin-left: 8px;
    margin-right: 8px;
  }
}
/* 
 * mixin
 *
*/
.serviceBg {
  background-color: #f7f7f7;
}

.serviceTop {
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 80px 60px 0;
}
@media screen and (max-width: 1000px) {
  .serviceTop {
    padding: 40px 24px;
  }
}
.serviceTop__textArea {
  width: 100%;
  max-width: 1307px;
  display: flex;
}
@media screen and (max-width: 1000px) {
  .serviceTop__textArea {
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
}
.serviceTop__topColumn {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 64%;
  margin-left: 0px;
}
@media screen and (max-width: 1000px) {
  .serviceTop__topColumn {
    width: 100%;
  }
}
.serviceTop__topContainer {
  padding-bottom: 48px;
  justify-content: center;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
@media screen and (max-width: 1000px) {
  .serviceTop__topContainer {
    max-width: 100%;
    padding-bottom: 56px;
  }
}
.serviceTop__ttlContainer {
  text-align: left;
  padding-bottom: 60px;
}
.serviceTop__ttlEn {
  color: #444;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 3.6rem;
}
.serviceTop__ttlJp {
  color: #444;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
}
.serviceTop__subTtl {
  justify-content: center;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-width: 1px;
  align-self: start;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 8px 16px;
}
@media screen and (max-width: 1000px) {
  .serviceTop__subTtl {
    text-align: left;
  }
}
.serviceTop__ttl {
  width: auto;
  align-self: start;
  font-size: 3.2rem;
  line-height: 4.8rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  text-align: left;
  padding: 16px 0 40px 0;
}
@media screen and (max-width: 1000px) {
  .serviceTop__ttl {
    max-width: 100%;
    font-size: 2.6rem;
    padding: 16px 24px 56px;
  }
}
.serviceTop__ttl .color-main {
  color: #00c6ab;
}
.serviceTop__intro {
  text-align: left;
  font-size: 1.6rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 2.4rem;
}
@media screen and (max-width: 1000px) {
  .serviceTop__intro {
    font-size: 1.4rem;
    padding-bottom: 56px;
  }
}
.serviceTop__btArea {
  padding-top: 32px;
  display: flex;
  gap: 24px;
  width: auto;
  align-self: start;
}
@media screen and (max-width: 768px) {
  .serviceTop__btArea {
    padding-top: 0;
    align-self: center;
    flex-direction: column;
  }
}
.serviceTop__request {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 50%;
  margin-left: 0px;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .serviceTop__request {
    width: 100%;
  }
}
.serviceTop__requestTxt {
  place-content: center;
  border-radius: 4px;
  background-color: var(--Sub-Color, #ff346b);
  flex-grow: 1;
  color: #fff;
  text-align: center;
  width: 290px;
  align-self: center;
  height: 78px;
  padding: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-family: 700;
  font-size: 2.4rem;
}
.serviceTop__requestTxt:hover {
  background-color: #dd2d5d;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .serviceTop__requestTxt {
    white-space: initial;
    padding: 0 20px;
  }
}
.serviceTop__download {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .serviceTop__download {
    width: 100%;
  }
}
.serviceTop__downdloadTxt {
  place-content: center;
  border-radius: 4px;
  background-color: var(--Main-Color, #00c6ab);
  flex-grow: 1;
  color: #fff;
  text-align: center;
  width: 290px;
  align-self: center;
  height: 78px;
  padding: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-family: 700;
  font-size: 2.4rem;
  transition: 0.3s;
}
.serviceTop__downdloadTxt:hover {
  background-color: #01a58f;
}
@media screen and (max-width: 768px) {
  .serviceTop__downdloadTxt {
    white-space: initial;
    padding: 0 20px;
  }
}
.serviceTop__imgArea {
  display: flex;
  flex-direction: column;
  line-height: normal;
  margin-left: 20px;
}
@media screen and (max-width: 1000px) {
  .serviceTop__imgArea {
    width: 100%;
    margin-left: 0;
  }
}
.serviceTop__Img {
  aspect-ratio: 1.2;
  object-fit: auto;
  object-position: center;
  align-self: stretch;
  margin: auto 0;
}
@media screen and (max-width: 1000px) {
  .serviceTop__Img {
    margin: 40px 0;
  }
}

.serviceSection {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 396px;
  width: 100%;
  padding: 80px 60px;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  .serviceSection {
    padding: 80px 24px;
  }
}
.serviceSection__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-color: #00c6ab;
}
.serviceSection__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 1312px;
  gap: 20px;
}
@media screen and (max-width: 1000px) {
  .serviceSection__content {
    max-width: 100%;
  }
}
.serviceSection__columns {
  display: flex;
}
@media screen and (max-width: 1000px) {
  .serviceSection__columns {
    flex-direction: column;
  }
}
.serviceSection__column {
  display: flex;
  flex-direction: column;
  width: 50%;
  line-height: normal;
}
@media screen and (max-width: 1000px) {
  .serviceSection__column {
    width: 100%;
  }
}
.serviceSection__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto 0;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 150%;
}
@media screen and (max-width: 1000px) {
  .serviceSection__title {
    font-size: 2.6rem;
    margin-bottom: 20px;
  }
}
.serviceSection__heading {
  font-family: "Noto Sans JP", sans-serif;
  padding: 4px 16px;
  margin: 10px auto 0 0;
  background-color: #fff;
  justify-content: center;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .serviceSection__heading {
    font-size: 2.2rem;
  }
}
.serviceSection__benefits {
  display: flex;
  flex-direction: column;
  width: auto;
  padding: 24px;
  font-size: 24px;
  font-weight: 600;
  background-color: #fff;
}
@media screen and (max-width: 1000px) {
  .serviceSection__benefits {
    padding: 24px 16px;
  }
}
.serviceSection__benefit {
  display: flex;
  gap: 16px;
  padding: 8px;
  background-color: #fff;
}
.serviceSection__benefit:not(:first-child) {
  margin-top: 16px;
}
.serviceSection__benefit-icon {
  width: 28px;
  aspect-ratio: 1;
  margin: auto 0;
  object-fit: auto;
  object-position: center;
}
.serviceSection__benefit-text {
  text-align: left;
  font-family: "Hiragino Kaku Gothic Pro", -apple-system, Roboto, Helvetica, sans-serif;
}
@media screen and (max-width: 640px) {
  .serviceSection__benefit-text {
    font-size: 2rem;
  }
}

.serviceFeatures {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 396px;
  width: 100%;
  padding: 32px 80px;
  overflow: hidden;
  background-color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .serviceFeatures {
    padding: 56px 24px;
  }
}
.serviceFeatures__container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 1312px;
  gap: 20px;
  padding: 80px 24px;
  background-color: #ffffff;
}
@media screen and (max-width: 768px) {
  .serviceFeatures__container {
    padding: 40px 24px;
    border-radius: 20px;
  }
}
.serviceFeatures__titleArea {
  color: #000;
  text-align: center;
  align-self: start;
}
@media screen and (max-width: 768px) {
  .serviceFeatures__titleArea {
    max-width: 100%;
  }
}
.serviceFeatures__featureTitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
}

.card_area {
  width: 100%;
  gap: 32px;
  max-width: 1232px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(416px, 1fr));
}
@media screen and (max-width: 768px) {
  .card_area {
    max-width: 100%;
    margin: 0;
    grid-template-columns: none;
    align-items: stretch;
    gap: 40px;
  }
}

.card_column {
  justify-content: center;
  border-radius: 20px;
  flex-grow: 1;
  display: flex;
  padding: 24px;
}
@media screen and (max-width: 768px) {
  .card_column {
    max-width: 100%;
    flex-direction: column;
  }
}

.frame_136 {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 42%;
  margin-left: 0;
}
@media screen and (max-width: 768px) {
  .frame_136 {
    width: 100%;
    align-items: center;
  }
}

.card_image {
  aspect-ratio: 0.96;
  object-fit: contain;
  width: 201px;
  max-width: 100%;
}

.card_content_column {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 58%;
}
@media screen and (max-width: 768px) {
  .card_content_column {
    width: 100%;
  }
}

.card_content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  color: #000;
  font-weight: 400;
}

.serviceDocument {
  justify-content: center;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
.serviceDocument__section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 405px;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 80px 60px;
}
@media screen and (max-width: 1000px) {
  .serviceDocument__section {
    max-width: 100%;
    padding: 40px 24px;
  }
}
.serviceDocument__background {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.serviceDocument__content {
  position: relative;
  width: 100%;
  max-width: 1312px;
}
@media screen and (max-width: 1000px) {
  .serviceDocument__content {
    max-width: 100%;
  }
}
.serviceDocument__columns {
  gap: 20px;
  display: flex;
}
@media screen and (max-width: 768px) {
  .serviceDocument__columns {
    flex-direction: column;
    align-items: stretch;
  }
}
.serviceDocument__text_column {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 81%;
  margin-left: 0;
}
.serviceDocument__heading {
  padding-bottom: 24px;
  justify-content: center;
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: 32px;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  margin: auto 0;
}
@media screen and (max-width: 1000px) {
  .serviceDocument__heading {
    max-width: 100%;
    margin-top: 6px;
    white-space: initial;
    font-size: 2.6rem;
    padding-bottom: 0;
  }
}
.serviceDocument__subheading_1 {
  background-color: #fff;
  text-align: left;
  margin-right: auto;
  padding: 4px 16px;
}
@media screen and (max-width: 1000px) {
  .serviceDocument__subheading_1 {
    max-width: 100%;
    white-space: initial;
  }
}
.serviceDocument__subheading_2 {
  background-color: #fff;
  align-self: start;
  margin-top: 10px;
  text-align: left;
  padding: 4px 16px;
}
@media screen and (max-width: 1000px) {
  .serviceDocument__subheading_2 {
    max-width: 100%;
    white-space: initial;
    text-align: left;
  }
}
.serviceDocument__description {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2;
  text-align: left;
  align-self: start;
  margin: 34px -1px 10px 0;
}
@media screen and (max-width: 1000px) {
  .serviceDocument__description {
    max-width: 100%;
  }
}
.serviceDocument__cards_column {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 19%;
}
@media screen and (max-width: 1100px) {
  .serviceDocument__cards_column {
    width: 40%;
  }
}
@media screen and (max-width: 768px) {
  .serviceDocument__cards_column {
    width: 100%;
  }
}
.serviceDocument__cards {
  gap: 20px;
  display: flex;
}
@media screen and (max-width: 1000px) {
  .serviceDocument__cards {
    align-items: stretch;
  }
}
@media screen and (max-width: 768px) {
  .serviceDocument__cards {
    flex-direction: column;
  }
}
.serviceDocument__card {
  border-radius: 10px;
  box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1.5;
  padding: 24px;
  text-align: left;
}
.serviceDocument__card_title_en {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
}
.serviceDocument__card_title_jp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  margin-top: 8px;
}
.serviceDocument__card_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
  margin-top: 24px;
}
.serviceDocument__card_button {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: #000;
  text-align: center;
  margin: 24px auto 0 0;
  padding: 8px 16px;
  transition: 0.3s;
}
.serviceDocument__card_button:hover {
  background-color: var(--Sub-Color, #00c6ab);
  color: #fff;
}
@media screen and (max-width: 1000px) {
  .serviceDocument__card_button {
    white-space: initial;
  }
}
.serviceDocument__card_text {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
}

.serviceVoice {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-bottom: 32px;
  padding: 80px 80px 0;
}
@media screen and (max-width: 768px) {
  .serviceVoice {
    padding: 80px 24px;
  }
}
.serviceVoice__header {
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: center;
  text-align: left;
  max-width: 1312px;
  width: 100%;
}
.serviceVoice__title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: left;
  padding-bottom: 16px;
}
.serviceVoice__subtitle {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: left;
}
.serviceVoice__card {
  border-radius: 20px;
  box-shadow: 20px 20px 30px 0px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  align-self: center;
  margin-top: 24px;
  width: 848px;
  max-width: 100%;
  padding: 64px 32px;
  transition: 0.3s;
}
.serviceVoice__card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
  .serviceVoice__card {
    margin-top: 40px;
    padding: 24px 16px;
  }
}
.serviceVoice__card_content {
  gap: 20px;
  display: flex;
}
@media screen and (max-width: 768px) {
  .serviceVoice__card_content {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
}
.serviceVoice__card_image_column {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 50%;
  margin-left: 0px;
}
@media screen and (max-width: 768px) {
  .serviceVoice__card_image_column {
    width: 100%;
  }
}
.serviceVoice__card_image {
  aspect-ratio: 1.79;
  object-fit: auto;
  object-position: center;
  width: 100%;
  flex-grow: 1;
}
.serviceVoice__card_text_column {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 50%;
  margin-left: 20px;
}
@media screen and (max-width: 768px) {
  .serviceVoice__card_text_column {
    width: 100%;
    margin-left: 0;
  }
}
.serviceVoice__card_quote_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  width: 100%;
  text-align: left;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .serviceVoice__card_quote_text {
    font-size: 1.6rem;
  }
}
.serviceVoice__card_author {
  display: flex;
  margin-top: 24px;
  gap: 16px;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .serviceVoice__card_author {
    white-space: initial;
  }
}
@media screen and (max-width: 640px) {
  .serviceVoice__card_author {
    flex-direction: column;
    align-items: stretch;
  }
}
.serviceVoice__card_author_details {
  font-family: "Noto Sans JP", sans-serif;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .serviceVoice__card_author_details {
    white-space: initial;
  }
}
.serviceVoice__card_author_name, .serviceVoice__card_author_company {
  font-weight: 600;
}
.serviceVoice__card_author_title {
  font-weight: 400;
  margin-top: 8px;
}
.serviceVoice__card_author_image {
  aspect-ratio: 7.69;
  object-fit: auto;
  object-position: center;
  width: 115px;
  align-self: end;
  margin-top: 55px;
  max-width: 100%;
}
@media screen and (max-width: 768px) {
  .serviceVoice__card_author_image {
    margin-top: 0;
  }
}
@media screen and (max-width: 640px) {
  .serviceVoice__card_author_image {
    align-self: start;
  }
}
.serviceVoice__card_tags {
  border-radius: 2px;
  display: flex;
  margin-top: 24px;
  gap: 8px;
  font-size: 12px;
  color: #666;
  font-weight: 400;
  flex-wrap: wrap;
}
.serviceVoice__card_tag {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid rgb(102, 102, 102);
  padding: 4px 8px;
  white-space: nowrap;
}

.serviceContainer {
  width: min(100% - 48px, 1312px);
  margin-right: auto;
  margin-left: auto;
}

.card_title_container {
  position: relative;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  width: auto;
  align-self: stretch;
}

.card_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: left;
  letter-spacing: 1.1px;
}
@media screen and (max-width: 768px) {
  .card_title {
    font-size: 2rem;
  }
}

.card_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
  margin: 24px 0 0 1px;
}
@media screen and (max-width: 768px) {
  .card_description {
    font-size: 1.4rem;
  }
}

.card_btnWrap {
  display: flex;
  padding-right: 52px;
  gap: 18px;
  font-size: 14px;
  white-space: nowrap;
  letter-spacing: 0.7px;
}
@media screen and (max-width: 768px) {
  .card_btnWrap {
    padding-right: 20px;
    white-space: initial;
  }
}

.card_btnText {
  font-family: "Noto Sans JP", sans-serif;
  margin: auto 0;
}

.card_btnArrow {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #00c6ab;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}

.card_btnArrow::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.5s;
}

.card_btnArrow span {
  font-size: 20px;
  color: #fff;
  z-index: 1;
  transition: 0.3s;
}

a.card_column {
  transition: 0.3s;
}
@media screen and (min-width: 768px) {
  a.card_column:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
  a.card_column:hover .card_btnText {
    opacity: 0.6;
  }
  a.card_column:hover .card_btnArrow {
    transform: scale(1.1);
    border: 1px solid #fff;
  }
  a.card_column:hover .card_btnArrow::before {
    width: 94%;
    height: 94%;
  }
  a.card_column:hover .card_btnArrow span {
    color: #000;
  }
}

.serviceSect__inner {
  padding-top: 54px;
  text-align: left;
}
.serviceSect__ttl {
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 32px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.45;
}
@media screen and (max-width: 768px) {
  .serviceSect__ttl {
    font-size: 1.8rem;
  }
}
.serviceSect__ttlBorder {
  font-family: "Noto Sans JP", sans-serif;
  margin: 32px 0 80px 0;
  padding-bottom: 16px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  border-bottom: 6px solid #00c6ab;
}
@media screen and (max-width: 768px) {
  .serviceSect__ttlBorder {
    font-size: 1.8rem;
  }
}
.serviceSect__contents {
  padding-bottom: 48px;
}
.serviceSect__container {
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
}
.serviceSect__container_inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(624px, 1fr));
  width: 100%;
  grid-gap: 32px;
  gap: 32px;
  max-width: 1312px;
  height: auto;
  align-items: start;
}
@media screen and (max-width: 768px) {
  .serviceSect__container_inner {
    grid-template-columns: 1fr;
  }
}
.serviceSect__cardItem {
  border-radius: 8px;
  background-color: #fff;
  padding: 24px 16px;
  box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.16);
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .serviceSect__cardItem {
    position: relative;
  }
}
.serviceSect__cardItem_main {
  display: flex;
  flex-direction: column;
}
.serviceSect__cardItem_inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 8px 24px;
  background-color: #f2f2f2;
}
@media screen and (max-width: 768px) {
  .serviceSect__cardItem_inner {
    padding: 24px 8px 24px 60px;
  }
}
@media screen and (max-width: 768px) {
  .serviceSect__cardItem_imgArea {
    position: absolute;
    content: "";
    top: 3%;
    left: 1%;
  }
}
.serviceSect__cardItem_mainTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.serviceSect__cardItem_contents {
  padding: 16px;
  flex-grow: 1;
}
.serviceSect__cardItem_container {
  display: flex;
  flex-direction: column;
}
.serviceSect__cardItem_listItemBtn {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 8px 8px 0;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .serviceSect__cardItem_listItemBtn {
    flex-direction: column;
    padding: 8px 0 16px 0;
  }
}
.serviceSect__cardItem_listItemBtn.borderLine {
  border-bottom: 2px solid #e1e1e1;
}
.serviceSect__cardItem_listItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.serviceSect__cardItem_ttlArea {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 77%;
}
@media screen and (max-width: 768px) {
  .serviceSect__cardItem_ttlArea {
    width: 87%;
  }
}
.serviceSect__cardItem_ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.serviceSect__cardItem_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding: 8px 0 16px 16px;
}
@media screen and (max-width: 768px) {
  .serviceSect__cardItem_description {
    padding: 8px 0 16px 0;
  }
}
.serviceSect__cardItem_description.no-padding {
  padding: 0;
}
.serviceSect__cardItem_txt {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .serviceSect__cardItem_txt {
    padding-top: 16px;
    align-self: flex-end;
  }
}
.serviceSect__cardItem_btn {
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  background-color: #00c6ab;
  text-align: center;
  padding: 0 8px 0 16px;
  transition: 0.3s;
  height: 44px;
}
@media screen and (max-width: 768px) {
  .serviceSect__cardItem_btn {
    align-self: flex-end;
  }
}
.serviceSect__cardItem_btn p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #fff;
}
.serviceSect__cardItem_btn::after {
  position: absolute;
  content: "";
  background-image: url("/2022/03/arrow-right.svg");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  transition: width 0.5s, height 0.5s;
}
.serviceSect__cardItem_btn span {
  font-size: 16px;
  color: #fff;
  z-index: 1;
  transition: 0.3s;
}
.serviceSect__caseStudyListWrap {
  padding: 0 30px;
}
@media screen and (max-width: 768px) {
  .serviceSect__caseStudyListWrap {
    padding: 0 16px;
  }
}
.serviceSect__caseStudyListWrap .caseStudyList_contentsArea {
  background-color: transparent;
  padding: 0;
}
.serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner {
  padding: 0;
}
@media screen and (min-width: 769px) {
  .serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner .card {
    margin-bottom: 32px;
    padding: 50px 30px 35px;
  }
}
@media (min-width: 1312px) {
  .serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner .card {
    width: calc((100% - 140px) / 3);
  }
}
@media (min-width: 1312px) {
  .serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner .card:not(:nth-of-type(3n)) {
    margin-right: 70px;
  }
}
@media screen and (min-width: 769px) {
  .serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner .card .system {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 769px) {
  .serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner .card .system::before {
    left: 6px;
    width: 21px;
    height: 20px;
  }
}
@media screen and (min-width: 769px) {
  .serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner .card .ttlArea {
    margin-top: 12px;
  }
}
@media screen and (min-width: 769px) {
  .serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner .card .ttlMain {
    padding: 2px 10px;
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 769px) {
  .serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner .card .industry {
    padding: 7px 9px;
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 769px) {
  .serviceSect__caseStudyListWrap .caseStudyList_contentsArea .inner .card .description {
    padding-top: 8px;
    font-size: 1.4rem;
  }
}
.serviceSect__btnWrap {
  margin-top: 103px;
  text-align: center;
}
.serviceSect__btn {
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  background-color: #00c6ab;
  width: 298px;
  height: 78px;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  transition: 0.3s;
}
.serviceSect__btn:visited {
  color: #fff;
}
@media screen and (min-width: 769px) {
  .serviceSect__btn:hover {
    background-color: #222;
  }
}

.servicePanel {
  display: grid;
  grid-template-rows: max-content 1fr max-content;
  border-radius: 20px;
  background-color: #fff;
  padding: 32px 16px;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .servicePanel {
    padding: 20px 10px;
  }
}
.servicePanel_inner {
  display: grid;
  grid-gap: 24px;
  gap: 24px;
}
.servicePanel__img {
  height: 220px;
  text-align: center;
}
.servicePanel__img img {
  width: auto;
  height: 100%;
}
.servicePanel__body {
  display: grid;
  grid-template-rows: max-content 1fr;
  gap: 32px;
  padding: 0 30px;
}
@media screen and (max-width: 768px) {
  .servicePanel__body {
    padding: 0;
  }
}
.servicePanel__ttl {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.servicePanel__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  line-height: 2;
  padding: 0 10px;
}
.servicePanel__btnWrap {
  display: flex;
  width: fit-content;
  height: fit-content;
  gap: 18px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.7px;
  justify-content: flex-end;
  align-self: end;
  margin-left: auto;
}
.servicePanel__btn {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.servicePanel__btnText {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-right: 20px;
  transition: 0.3s;
}
.servicePanel__btnArrow {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #00c6ab;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.servicePanel__btnArrow::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.5s;
}
.servicePanel__btnArrow span {
  font-size: 20px;
  color: #fff;
  z-index: 1;
  transition: 0.3s;
}

a.servicePanel {
  transition: 0.3s;
}
@media screen and (min-width: 769px) {
  a.servicePanel:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
  a.servicePanel:hover .servicePanel__btnText {
    opacity: 0.6;
  }
  a.servicePanel:hover .servicePanel__btnArrow {
    transform: scale(1.1);
    border: 1px solid #fff;
  }
  a.servicePanel:hover .servicePanel__btnArrow:before {
    width: 94%;
    height: 94%;
  }
  a.servicePanel:hover .servicePanel__btnArrow span {
    color: #000;
  }
}

.serviceIntro {
  background-color: #fff;
}
.serviceIntro__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 130px 48px;
  text-align: left;
}
@media (max-width: 1000px) {
  .serviceIntro__inner {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) {
  .serviceIntro__inner {
    padding: 40px 0;
  }
}
@media (max-width: 1000px) {
  .serviceIntro__text-area {
    padding: 40px;
  }
}
@media screen and (max-width: 768px) {
  .serviceIntro__text-area {
    padding: 20px;
  }
}
.serviceIntro__img {
  align-self: center;
  padding: 0 30px 0 100px;
}
@media (max-width: 1000px) {
  .serviceIntro__img {
    text-align: center;
    padding: 50px 0 0;
  }
}
@media screen and (max-width: 768px) {
  .serviceIntro__img {
    padding: 50px 20px 0;
  }
}
.serviceIntro__ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.45;
}
@media screen and (max-width: 768px) {
  .serviceIntro__ttl {
    font-size: 2.6rem;
  }
}
.serviceIntro__catch {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  padding: 4px 16px;
  background-color: #000;
  margin-top: 8px;
}
.serviceIntro__lead {
  font-family: "Noto Sans JP", sans-serif;
  margin-top: 53px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.45;
}
@media screen and (max-width: 768px) {
  .serviceIntro__lead {
    font-size: 2.2rem;
  }
}
.serviceIntro__lead .color-main {
  color: #00c6ab;
}
.serviceIntro__text {
  font-family: "Noto Sans JP", sans-serif;
  margin-top: 64px;
  max-width: 575px;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 2;
}

.serviceFaq {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-bottom: 32px;
  padding: 80px 80px 0;
}
@media screen and (max-width: 768px) {
  .serviceFaq {
    padding: 0 24px;
  }
}
.serviceFaq__titleContainer {
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: center;
  max-width: 1312px;
  height: 85px;
  text-align: left;
  width: 100%;
}
.serviceFaq__title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: left;
  padding-bottom: 16px;
}
.serviceFaq__subtitle {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: left;
}
.serviceFaq__subtitle {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.5;
  text-align: left;
}
.serviceFaq__qa {
  display: flex;
  flex-direction: column;
  align-self: center;
  text-align: left;
  max-width: 1312px;
  width: 100%;
}
.serviceFaq__qaContainer {
  justify-content: space-between;
  align-self: stretch;
  width: auto;
}
.serviceFaq__item {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(0, 0, 0);
  background-color: #fff;
  padding: 16px;
  margin: 24px 0;
  justify-content: center;
  cursor: pointer;
}
.serviceFaq__question {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.serviceFaq__question_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
}
.serviceFaq__icon {
  width: 20px;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  margin: auto 0;
}
.serviceFaq__answer {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  text-align: left;
  margin: 24px 32px 0;
  opacity: 1;
  visibility: visible;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .serviceFaq__answer {
    max-width: 100%;
    margin-right: 10px;
  }
}

.serviceCtaWrap {
  margin-top: 54px;
}

.serviceSect__cardItem_listContents {
  padding: 16px;
  list-style: disc;
  text-align: left;
}
.serviceSect__cardItem_listContents li::marker {
  color: #00c6ab;
  font-size: 25px;
  padding-right: 8px;
}
.serviceSect__cardItem_listContents .serviceSect__cardItem_listContainer {
  list-style: none;
  position: relative;
  padding-left: 20px;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .serviceSect__cardItem_listContents .serviceSect__cardItem_listContainer {
    padding-left: 0;
  }
}
.serviceSect__cardItem_listContents .serviceSect__cardItem_listContainer::before {
  content: "•";
  position: absolute;
  left: 0;
  top: -2%;
  color: #00c6ab;
  font-size: 40px;
  line-height: 1;
  transition: color 0.3s, background-color 0.3s;
}
.serviceSect__cardItem_listContents .serviceSect__cardItem_listContainer:hover {
  background-color: #00c6ab;
  border-radius: 8px;
}
.serviceSect__cardItem_listContents .serviceSect__cardItem_listContainer:hover::before {
  color: #fff;
}
.serviceSect__cardItem_listContents .serviceSect__cardItem_listContainer a.serviceSect__cardItem_listItemBtn {
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s, color 0.3s;
}
.serviceSect__cardItem_listContents .serviceSect__cardItem_listContainer a.serviceSect__cardItem_listItemBtn:hover {
  background-color: transparent;
  color: #fff;
}
.serviceSect__cardItem_listContents .serviceSect__cardItem_listContainer a.serviceSect__cardItem_listItemBtn:hover.borderLine {
  border-bottom: none;
}

a.card__btnContainer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 18px;
  transition: 0.3s;
}
a.card__btnContainer.btnContact {
  flex-direction: column;
  justify-content: flex-end;
}
a.card__btnContainer:hover .card_btnText,
a.card__btnContainer:hover .card__btnContact {
  opacity: 0.6;
}
a.card__btnContainer:hover .card_btnArrow {
  transform: scale(1.1);
  border: 1px solid #fff;
}
a.card__btnContainer:hover .card_btnArrow:before {
  width: 94%;
  height: 94%;
}
a.card__btnContainer:hover .card_btnArrow span {
  color: #000;
}

.card__btnContact {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}

/* 
 * mixin
 *
*/
.templates {
  position: relative;
  overflow-x: hidden;
}
.templates .objArea {
  top: 40px;
}

.templates-container {
  width: min(100% - 80px, 1310px);
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .templates-container {
    width: 100%;
    padding: 0 24px;
  }
}

.templates-ttlArea .container22 {
  width: min(100% - 80px, 1310px);
  padding: 0;
}

.templatesMain {
  position: relative;
  width: 100%;
  padding: 70px 0;
}
@media screen and (min-width: 769px) {
  .templatesMain .column22_text-ttlLarge {
    padding-bottom: 30px;
    font-size: 3.6rem;
    line-height: 1.5;
  }
}
@media screen and (min-width: 769px) {
  .templatesMain .main_text {
    width: 44%;
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

.templatesIntro {
  padding: 80px 0 65px;
}
.templatesIntro__content + .templatesIntro__content {
  margin-top: 135px;
}
.templatesIntro__ttl {
  margin-bottom: 40px;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.templatesIntro__panels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(414px, 1fr));
  gap: 34px;
}
@media screen and (max-width: 956px) {
  .templatesIntro__panels {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .templatesIntro__panels {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
}
.templatesIntro__panels > li {
  height: 100%;
}

.templatesPanel {
  display: grid;
  grid-template-rows: max-content 1fr;
  background-color: #f7f7f7;
  border-radius: 20px;
  height: 100%;
  font-family: "Noto Sans JP", sans-serif;
  overflow: hidden;
  transition: 0.3s;
}
.templatesPanel__img {
  overflow: hidden;
}
.templatesPanel__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.templatesPanel__body {
  display: grid;
  grid-template-rows: max-content 1fr auto;
  padding: 35px 26px;
}
.templatesPanel__ttl {
  text-align: left;
  margin-bottom: 27px;
  font-size: 2.2rem;
  font-weight: 700;
  color: #000;
}
.templatesPanel__text {
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.4;
}
.templatesPanel__btnWrap {
  margin-top: 25px;
  margin-right: -10px;
  text-align: right;
}
.templatesPanel__btn {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.templatesPanel__btnText {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-right: 20px;
  transition: 0.3s;
}
.templatesPanel__btnArrow {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #fff;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.templatesPanel__btnArrow::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #00c6ab;
  border-radius: 50%;
  transition: 0.5s;
}
.templatesPanel__btnArrow span {
  font-size: 20px;
  color: #000;
  z-index: 1;
  transition: 0.3s;
}
@media screen and (min-width: 769px) {
  .templatesPanel:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
  .templatesPanel:hover .templatesPanel__img img {
    animation: appCardImgHoverAnimation 8s ease-out forwards;
  }
  .templatesPanel:hover .templatesPanel__btnText {
    opacity: 0.6;
  }
  .templatesPanel:hover .templatesPanel__btnArrow {
    transform: scale(1.1);
    border: 1px solid #fff;
  }
  .templatesPanel:hover .templatesPanel__btnArrow:before {
    width: 100%;
    height: 100%;
  }
  .templatesPanel:hover .templatesPanel__btnArrow span {
    color: #fff;
  }
}

.templatesConsid {
  background-image: linear-gradient(#00c6ab 0, #00c6ab calc(100% - 285px), #f7f7f7 calc(100% - 285px), #f7f7f7 100%);
  padding-bottom: 135px;
}
@media screen and (max-width: 768px) {
  .templatesConsid {
    padding-bottom: 80px;
  }
}
.templatesConsid__inner {
  padding: 85px 0 0;
}
@media screen and (max-width: 768px) {
  .templatesConsid__inner {
    padding: 40px 24px 0;
  }
}
.templatesConsid__ttl {
  margin-bottom: 50px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4.5rem;
  font-weight: 700;
  text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
  line-height: 1.45;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .templatesConsid__ttl {
    font-size: 3.2rem;
  }
}
.templatesConsid__lead {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .templatesConsid__lead {
    font-size: 1.8rem;
  }
}
.templatesConsid__lead .bg-white {
  background-color: #fff;
  padding: 10px;
  color: #00c6ab;
  box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.25);
}
.templatesConsid__lead .plus-text {
  padding: 0 15px;
  font-size: 1.5em;
}
.templatesConsid__lead .text {
  margin-left: 0.5em;
  text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 768px) {
  .templatesConsid__lead .text {
    display: block;
    margin-top: 1.5em;
    margin-left: 0;
  }
}
.templatesConsid__contents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: #fff;
  box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.1);
  width: min(100% - 80px, 992px);
  margin: 65px auto 0;
  padding: 48px 32px;
}
@media screen and (max-width: 900px) {
  .templatesConsid__contents {
    grid-template-columns: 1fr;
    padding: 30px 20px;
  }
}
@media screen and (max-width: 768px) {
  .templatesConsid__contents {
    width: 100%;
  }
}
@media screen and (max-width: 900px) {
  .templatesConsid__contents .templatesConsidContent + .templatesConsidContent {
    margin-top: 50px;
    padding-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  .templatesConsid__contents .templatesConsidContent + .templatesConsidContent {
    margin-top: 25px;
    padding-top: 25px;
  }
}
.templatesConsid__contents .templatesConsidContent + .templatesConsidContent:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #cfcfcf;
  width: 1px;
  height: 100%;
}
@media screen and (max-width: 900px) {
  .templatesConsid__contents .templatesConsidContent + .templatesConsidContent:before {
    width: 100%;
    height: 1px;
  }
}

.templatesConsidContent {
  position: relative;
}
.templatesConsidContent__ttlWrap {
  text-align: center;
}
.templatesConsidContent__ttl {
  display: inline-grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 15px;
  min-height: 56px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .templatesConsidContent__ttl {
    gap: 10px;
  }
}
.templatesConsidContent__ttl .text {
  display: grid;
  gap: 10px;
}
.templatesConsidContent__ttl .text .sub-text {
  font-size: 1.4rem;
  color: #979797;
}
@media screen and (max-width: 768px) {
  .templatesConsidContent__ttl .text .sub-text {
    font-size: 1.2rem;
  }
}
.templatesConsidContent__ttl .text .main-text {
  padding: 0;
  font-size: 2.2rem;
  color: #000;
}
@media screen and (max-width: 768px) {
  .templatesConsidContent__ttl .text .main-text {
    font-size: 1.8rem;
  }
}
.templatesConsidContent__text {
  margin-top: 33px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  line-height: 1.45;
}
.templatesConsidContent__btnWrap {
  margin-top: 32px;
}
.templatesConsidContent__btn1, .templatesConsidContent__btn2 {
  display: grid;
  place-content: center;
  border-radius: 10px;
  border: 3px solid #00c6ab;
  width: 300px;
  height: 100px;
  margin-inline: auto;
  padding: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  transition: 0.3s;
  transition-property: background, color;
}
@media screen and (max-width: 768px) {
  .templatesConsidContent__btn1, .templatesConsidContent__btn2 {
    width: min(100%, 400px);
    height: 75px;
  }
}
.templatesConsidContent__btn1 {
  background-color: #00c6ab;
  font-weight: 700;
  color: #fff;
}
.templatesConsidContent__btn1:visited {
  color: #fff;
}
@media screen and (min-width: 769px) {
  .templatesConsidContent__btn1:hover {
    background-color: #fff;
    color: #00c6ab;
  }
}
.templatesConsidContent__btn2 {
  text-align: center;
  font-weight: 700;
  color: #00c6ab;
}
.templatesConsidContent__btn2 .sub-text {
  margin-bottom: 0.5em;
  font-size: 1.2rem;
}
.templatesConsidContent__btn2 .main-text {
  padding: 0;
  font-size: 2.4rem;
}
.templatesConsidContent__btn2:visited {
  color: #00c6ab;
}
@media screen and (min-width: 769px) {
  .templatesConsidContent__btn2:hover {
    background-color: #00c6ab;
    color: #fff;
  }
}

/* 
 * mixin
 *
*/
.templatesDetail {
  position: relative;
  padding-bottom: 50px;
}
.templatesDetail__infoBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .templatesDetail__infoBar {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 16px 0;
  }
}
.templatesDetail__sourceArea {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .templatesDetail__sourceArea {
    padding-top: 32px;
    width: 100%;
  }
}
.templatesDetail__infoArea {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: 20px;
  align-items: center;
}
.templatesDetail-btArea {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px;
  align-items: center;
  padding: 15px 0;
}
.templatesDetail-btArea__text {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-size: 1.4rem;
}
.templatesDetail-content {
  width: 100%;
  max-width: 787px;
  margin-inline: auto;
  padding: 16px 24px;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
}
@media screen and (max-width: 768px) {
  .templatesDetail-content {
    padding: 0;
  }
}
.templatesDetail-category {
  display: inline-grid;
  place-items: center;
  border-radius: 2px;
  background-color: #ff346b;
  padding: 6px 18px;
  font-size: 1.4rem;
  color: #fff;
}
.templatesDetail-ttlWrap {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .templatesDetail-ttlWrap {
    grid-template-columns: 60px 1fr;
  }
}
.templatesDetail-ttlImage {
  width: 90px;
  height: 90px;
}
@media screen and (max-width: 768px) {
  .templatesDetail-ttlImage {
    width: 60px;
    height: 60px;
  }
}
.templatesDetail-ttlImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.templatesDetail-ttl {
  font-size: 3.2rem;
  font-weight: 700;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .templatesDetail-ttl {
    font-size: 1.8rem;
  }
}
.templatesDetail-tagArea {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.templatesDetail-tagArea .device {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px;
  align-items: center;
}
.templatesDetail-tagArea .device__text {
  font-size: 1.2rem;
}
.templatesDetail-headBtn {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  border-radius: 4px;
  background-color: #000;
  padding: 10px 20px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .templatesDetail-headBtn {
    padding: 10px 10px;
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .templatesDetail-headBtn:hover {
    transform: translateY(-10px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
}
.templatesDetail-headBtn__text {
  font-size: 1.2rem;
  color: #fff;
}
.templatesDetail-playBtn {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  border-radius: 4px;
  background-color: #00c6ab;
  padding: 10px 20px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-right: 16px;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .templatesDetail-playBtn {
    padding: 10px 10px;
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .templatesDetail-playBtn:hover {
    transform: translateY(-10px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
}
.templatesDetail-playBtn__text {
  font-size: 1.2rem;
  color: #fff;
}
.templatesDetail-body {
  margin-top: 64px;
}
.templatesDetail .leadArea {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.templatesDetail .heading-a {
  position: relative;
  margin-top: 96px;
  padding-bottom: 15px;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.templatesDetail .heading-a::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #000;
  width: 80px;
  height: 1px;
}
.templatesDetail .heading-b {
  border-radius: 4px 4px 0px 0px;
  background: #f0f0f0;
  margin-top: 50px;
  padding: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.templatesDetail .postText-a {
  margin-top: 48px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.templatesDetail .postText-b {
  margin-top: 32px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.templatesDetail .insertImage {
  width: 100%;
  margin-top: 56px;
  text-align: center;
  aspect-ratio: 16/9;
}
.templatesDetail .insertImage iframe {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .templatesDetail .insertImage iframe {
    width: 100%;
    height: 315px;
  }
}
.templatesDetail .apiArea {
  background: #f7f7f7;
  margin-top: 110px;
  padding: 24px;
}
.templatesDetail .apiArea__ttl {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.templatesDetail .apiArea__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.templatesDetail .apiArea__list > li {
  height: 100%;
}
.templatesDetail .panel {
  display: grid;
  grid-template-rows: 1fr 2fr 33px;
  border-radius: 4px;
  background-color: #fff;
  height: 100%;
  min-height: 159px;
  transition: 0.3s;
}
.templatesDetail .panel__ttl, .templatesDetail .panel__text {
  padding: 8px 16px;
  line-height: 1.4;
}
.templatesDetail .panel__ttl {
  font-size: 1.4rem;
  font-weight: 700;
}
.templatesDetail .panel__text {
  align-self: center;
  font-size: 1.2rem;
}
.templatesDetail .panel__btnWrap {
  gap: 4px;
  border-top: 1px solid #ccc;
  width: 100%;
  padding: 8px;
}
.templatesDetail .panel__btn {
  display: flex;
  align-items: center;
  justify-content: end;
  font-size: 1.2rem;
}
.templatesDetail .panel__btnIcon {
  width: 1.5em;
  height: 1.5em;
}
.templatesDetail .panel__btnIcon img {
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .templatesDetail .panel:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
}
.templatesDetail .dl-a {
  margin-top: 50px;
}
.templatesDetail .dl-a > div + div {
  margin-top: 50px;
}
.templatesDetail .dl-a > div > dt,
.templatesDetail .dl-a > div > dd {
  letter-spacing: 0.1em;
}
.templatesDetail .dl-a > div > dt {
  border-radius: 4px 4px 0px 0px;
  background: #f0f0f0;
  margin-bottom: 32px;
  padding: 16px;
  font-size: 1.6rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .templatesDetail .dl-a > div > dt {
    font-size: 1.4rem;
  }
}
.templatesDetail .dl-a > div > dd {
  padding: 0 16px;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  .templatesDetail .dl-a > div > dd {
    font-size: 1.4rem;
    padding: 0 8px;
  }
}
.templatesDetail .dl-a > div > dd .inner {
  margin-top: 32px;
  padding: 0 16px;
}
@media screen and (min-width: 769px) {
  .templatesDetail .dl-a > div > dd .inner {
    padding: 0 8px;
  }
}
.templatesDetail .dl-a > div > dd .inner p {
  font-weight: 400;
}
.templatesDetail .dl-b {
  margin-top: 48px;
}
.templatesDetail .dl-b > div + div {
  margin-top: 32px;
}
.templatesDetail .dl-b > div > dt,
.templatesDetail .dl-b > div > dd {
  letter-spacing: 0.1em;
}
.templatesDetail .dl-b > div > dt {
  border-bottom: 1px solid #c8c8c8;
  margin-bottom: 8px;
  padding-bottom: 14px;
  font-size: 1.4rem;
  font-weight: 700;
}
.templatesDetail .dl-b > div > dd {
  font-size: 1.4rem;
  font-weight: 400;
}
.templatesDetail .backBtnArea {
  margin-top: 96px;
  text-align: center;
}
.templatesDetail .backBtn {
  display: inline-grid;
  grid-template-columns: 24px auto;
  align-items: center;
  gap: 5px;
  place-content: center;
  border-radius: 4px;
  border: 1px solid #000;
  width: min(100%, 218px);
  min-height: 56px;
  padding: 10px;
  font-size: 1.4rem;
  font-weight: 400;
  transition: 0.3s;
}
@media screen and (min-width: 769px) {
  .templatesDetail .backBtn:hover {
    transform: translateY(-10px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }
}

/* 
 * mixin
 *
*/
.serviceRelated .container {
  max-width: 1312px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 56px 24px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .container {
    padding: 56px 24px;
  }
}
.serviceRelated .btArea {
  max-width: 1312px;
  margin: auto;
  display: flex;
  gap: 8px;
  font-size: 1.4rem;
  font-weight: 400;
  padding: 16px 24px;
}
.serviceRelated .backButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 208px;
  font-family: "Noto Sans JP", sans-serif;
  margin: auto 0;
}
.serviceRelated .list_alt_icon {
  object-fit: auto;
  object-position: center;
  width: 24px;
}
.serviceRelated .serviceRelatedTop {
  justify-content: space-between;
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 20px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .serviceRelated .serviceRelatedTop {
    padding: 0;
  }
}
.serviceRelated .serviceRelatedTop_column {
  display: flex;
  justify-content: space-between;
  line-height: normal;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .serviceRelatedTop_column {
    flex-direction: column;
    padding: 30px 24px;
  }
}
@media screen and (max-width: 768px) {
  .serviceRelated .serviceRelatedTop_column {
    padding: 64px 24px;
  }
}
.serviceRelated .serviceRelatedTop_textArea {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .serviceRelated .serviceRelatedTop_textArea {
    margin-bottom: 56px;
  }
}
.serviceRelated .serviceRelatedTop_title {
  text-align: left;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .serviceRelatedTop_title {
    font-size: 2.5rem;
    padding-bottom: 56px;
  }
}
.serviceRelated .serviceRelatedTop_title_subttl {
  text-align: left;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
}
.serviceRelated .serviceRelatedTop_title_btArea {
  padding-top: 48px;
  gap: 24px;
  display: flex;
}
@media screen and (max-width: 768px) {
  .serviceRelated .serviceRelatedTop_title_btArea {
    flex-direction: column;
    align-items: center;
    padding-top: 56px;
  }
}
.serviceRelated .serviceRelatedTop_title_btArea_frame {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 40%;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .serviceRelatedTop_title_btArea_frame {
    margin-left: 0;
    padding-top: 50px;
    width: 70%;
    align-self: center;
  }
}
@media screen and (max-width: 768px) {
  .serviceRelated .serviceRelatedTop_title_btArea_frame {
    width: 100%;
  }
}
.serviceRelated .section_pain {
  align-items: center;
  display: flex;
  color: #000;
  justify-content: center;
  padding: 80px 20px 120px;
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  gap: 80px;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_pain {
    align-items: start;
    justify-content: start;
    white-space: initial;
    padding: 56px 24px;
    gap: 56px;
  }
}
.serviceRelated .section_pain_listContainer {
  display: flex;
  flex-direction: column;
  max-width: 1088px;
  width: 100%;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_pain_listContainer {
    min-width: 0;
  }
}
.serviceRelated .section_pain_listInner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
  width: auto;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_pain_listInner {
    gap: 40px;
  }
}
.serviceRelated .section_pain_listItem {
  align-items: start;
  box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.16);
  background-color: #fff;
  display: flex;
  gap: 0px;
  padding: 24px 26px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_pain_listItem {
    padding: 24px 16px;
    white-space: initial;
  }
}
.serviceRelated .section_pain_checkIcon {
  width: 30px;
  height: 28px;
  margin-top: 6px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_pain_checkIcon {
    position: relative;
    width: 20px;
    height: 18px;
  }
}
.serviceRelated .section_pain_txtArea {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-self: stretch;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .section_pain_txtArea {
    padding-left: 8px;
    max-width: 100%;
    white-space: initial;
  }
}
.serviceRelated .section_pain_ttl {
  font-size: 2.4rem;
  font-weight: 500;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .section_pain_ttl {
    font-size: 2rem;
  }
}
.serviceRelated .section_pain_description {
  font-size: 1.8rem;
  font-weight: 400;
  margin-top: 16px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .section_pain_description {
    font-size: 1.4rem;
    max-width: 100%;
  }
}
.serviceRelated .section_point {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 396px;
  width: 100%;
  padding: 120px 0;
  overflow: hidden;
  gap: 80px;
  background-color: #f7f7f7;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point {
    align-items: start;
    justify-content: start;
    white-space: initial;
    padding: 56px 0;
  }
}
.serviceRelated .section_point_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 1312px;
  gap: 20px;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_card {
    padding: 32px 0;
    gap: 40px;
  }
}
.serviceRelated .section_point_container {
  position: relative;
  display: grid;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 1312px;
  gap: 32px;
  background-color: #fff;
  text-align: center;
  margin: 40px 0;
  grid-template-columns: repeat(auto-fit, minmax(416px, 1fr));
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container {
    padding: 32px 0;
    gap: 40px;
    max-width: 100%;
    grid-template-columns: none;
    align-items: stretch;
    padding: 0;
  }
}
.serviceRelated .section_point_container_about {
  font-size: 3.2rem;
  line-height: 80px;
  margin-top: 60px;
  margin-bottom: 160px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_about {
    margin-bottom: 80px;
    font-size: 2.6rem;
    line-height: 40px;
  }
}
.serviceRelated .section_point_container_about_number {
  font-size: 4.9rem;
  color: #00c6ab;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_about_number {
    font-size: 3.7rem;
  }
}
.serviceRelated .section_point_container_point_image {
  max-width: 95px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_point_image {
    max-width: 86px;
  }
}
.serviceRelated .section_point_container_item_about {
  font-size: 2.4rem;
  display: flex;
  justify-content: center;
}
.serviceRelated .section_point_container_item_about_text_pc {
  border: 2px solid #000;
  padding: 20px;
  width: fit-content;
}
.serviceRelated .section_point_container_item_about_text_sp {
  border: 2px solid #000;
  padding: 8px;
  width: 100%;
  font-size: 2rem;
  line-height: 1.5;
}
.serviceRelated .section_point_container_item_about .br-sp {
  font-size: 2rem;
  line-height: 1.5;
}
.serviceRelated .section_point_container_item_description {
  margin-top: 35px;
  margin-bottom: 40px;
  font-size: 1.6rem;
  line-height: 30px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_item_description {
    text-align: left;
  }
}
.serviceRelated .section_point_container_item_description_colorChange {
  color: #00c6ab;
}
.serviceRelated .section_point_container_item_image_1_1 {
  width: 85%;
  margin-bottom: 150px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_item_image_1_1 {
    width: 90%;
  }
}
.serviceRelated .section_point_container_item_image_1_2 {
  width: 60%;
  margin-top: 20px;
  margin-bottom: 240px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_item_image_1_2 {
    width: 85%;
    margin-bottom: 120px;
  }
}
.serviceRelated .section_point_container_item_image_2 {
  width: 90%;
  margin-bottom: 240px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_item_image_2 {
    width: 87%;
    margin-bottom: 120px;
  }
}
.serviceRelated .section_point_container_item_image_3 {
  width: 90%;
  margin-top: 20px;
  margin-bottom: 240px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_item_image_3 {
    width: 100%;
    margin-bottom: 120px;
  }
}
.serviceRelated .section_point_container_item_image_4 {
  width: 80%;
  margin-top: 20px;
  margin-bottom: 240px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_item_image_4 {
    width: 95%;
    margin-bottom: 120px;
  }
}
.serviceRelated .section_point_container_item_image_5 {
  width: 55%;
  margin-top: 20px;
  margin-bottom: 136px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_point_container_item_image_5 {
    width: 85%;
    margin-bottom: 32px;
  }
}
.serviceRelated .section_fee {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
}
.serviceRelated .section_fee_title {
  font-size: 3.2rem;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_fee_title {
    font-size: 2.4rem;
  }
}
.serviceRelated .section_fee_container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  flex-direction: column;
}
.serviceRelated .section_fee_container_description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.serviceRelated .section_fee_container_description_text {
  font-size: 1.6rem;
  padding-inline: 24px;
  text-align: left;
  max-width: 95%;
  line-height: 24px;
}
.serviceRelated .section_fee_container_description_text_after {
  font-size: 1.6rem;
  padding-inline: 24px;
  line-height: 24px;
}
.serviceRelated .section_fee_container_image {
  max-width: 293px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_fee_container_image {
    width: 238px;
  }
}
.serviceRelated .section_fee_container_image_table {
  width: 85%;
  margin-top: 60px;
  margin-bottom: 60px;
  max-width: 1152px;
}
.serviceRelated .section_fee_container_box {
  font-size: 2.4rem;
  align-items: center;
  background-color: #00c6ab;
  color: #fff;
  padding: 24px;
  margin-top: 70px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 90%;
  line-height: normal;
}
.serviceRelated .section_fee_container_image_comparison {
  width: 90%;
  margin-bottom: 60px;
  max-width: 1152px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_fee_container_image_comparison {
    max-width: 480px;
  }
}
.serviceRelated .contents_tab .tab-container {
  width: calc(100% - 80px);
  margin: 60px 40px;
  margin-bottom: 80px;
  box-sizing: border-box;
}
.serviceRelated .contents_tab .tabs {
  display: flex;
  font-size: 1.4rem;
}
.serviceRelated .contents_tab .tab {
  padding: 16px;
  cursor: pointer;
  text-align: left;
  flex: 1;
  white-space: pre-wrap;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 21px;
}
.serviceRelated .contents_tab .tab.active {
  border: 3px solid #00c6ab;
  border-bottom: none;
  background-color: white;
}
.serviceRelated .contents_tab .tab.active.first {
  border-left: 3px solid #00c6ab;
}
.serviceRelated .contents_tab .tab.active.last {
  border-right: 3px solid #00c6ab;
}
.serviceRelated .contents_tab .tab.inactive {
  border: none;
  border-bottom: 3px solid #00c6ab;
  background-color: #eaeaea;
}
.serviceRelated .contents_tab .tab.inactive.first {
  background-color: #ddf1ee;
}
.serviceRelated .contents_tab .content {
  padding: 20px;
  text-align: center;
  height: calc(100% - 40px);
  box-sizing: border-box;
  border-bottom: 3px solid #00c6ab;
  border-left: 3px solid #00c6ab;
  border-right: 3px solid #00c6ab;
  background-color: white;
}
.serviceRelated .contents_tab .content_image {
  width: 100%;
  max-width: 480px;
}
.serviceRelated .section_kickoff {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
}
.serviceRelated .section_kickoff_title {
  font-size: 3.2rem;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_kickoff_title {
    font-size: 2.6rem;
  }
}
.serviceRelated .section_kickoff_description {
  max-width: 1152px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}
.serviceRelated .section_kickoff_description_text {
  font-size: 1.6rem;
  padding-inline: 80px;
  text-align: left;
  line-height: 24px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_kickoff_description_text {
    padding-inline: 40px;
  }
}
.serviceRelated .section_kickoff_step {
  max-width: 1152px;
  margin: 0 auto;
  padding-inline: 40px;
  box-sizing: border-box;
}
.serviceRelated .section_kickoff_step .step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
}
.serviceRelated .section_kickoff_step .step-item .step-number {
  min-width: 60px;
  min-height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  margin-right: 25px;
  margin-bottom: 36px;
  position: relative;
  line-height: 60px;
}
.serviceRelated .section_kickoff_step .step-item .step-number h4 {
  margin: 0;
}
.serviceRelated .section_kickoff_step .step-item .step-number .arrow, .serviceRelated .section_kickoff_step .step-item .step-number .arrow-right-green, .serviceRelated .section_kickoff_step .step-item .step-number .arrow-down-lg, .serviceRelated .section_kickoff_step .step-item .step-number .arrow-down-green, .serviceRelated .section_kickoff_step .step-item .step-number .arrow-down-blue {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  height: 76px;
}
.serviceRelated .section_kickoff_step .step-item .step-content .step-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #000;
  text-align: left;
  padding-top: 10px;
  text-decoration: none;
  text-underline-offset: 8px;
}
.serviceRelated .section_kickoff_step .step-item .step-content .step-description {
  font-size: 1.4rem;
  color: #000;
  text-align: left;
  margin-top: 20px;
  line-height: 21px;
}
.serviceRelated .section_kickoff_step .step-item .step-content.underline .step-title {
  text-decoration: underline;
}
.serviceRelated .section_kickoff_step .step-item .step-content.underline .step-description {
  margin-top: 30px;
}
.serviceRelated .section_content_wrapper {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}
.serviceRelated .contentsTtl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  justify-content: center;
  border-color: rgb(0, 0, 0);
  border-style: solid;
  border-width: 1px;
  background-color: #181818;
  color: #fff;
  padding: 16px 40px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .serviceRelated .contentsTtl {
    font-size: 2.3rem;
    padding: 8px 16px;
  }
}
.serviceRelated .section_card_area {
  width: 100%;
  gap: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(416px, 1fr));
  padding: 32px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_card_area {
    max-width: 100%;
    margin: 0;
    grid-template-columns: none;
    align-items: stretch;
    gap: 40px;
    padding: 0;
  }
}
.serviceRelated .section_highlights {
  position: relative;
  background-color: #525252;
  display: flex;
  width: 100%;
}
.serviceRelated .section_highlights_contents {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 80px 20px;
  max-width: 1312px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_highlights_contents {
    padding: 56px 24px;
    gap: 32px;
  }
}
.serviceRelated .section_highlights_ttlArea {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #ffffff;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_highlights_ttlArea {
    text-align: left;
  }
}
.serviceRelated .section_highlights_contentsArea {
  display: flex;
  justify-content: center;
  gap: 56px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .section_highlights_contentsArea {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
}
.serviceRelated .section_highlights_imgArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 25%;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .section_highlights_imgArea {
    flex-direction: row;
    width: 100%;
  }
}
@media screen and (max-width: 1000px) {
  .serviceRelated .section_highlights_imgArea img {
    height: 253px;
    width: 205px;
  }
}
.serviceRelated .section_highlights_txtArea {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 62%;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .section_highlights_txtArea {
    width: 100%;
  }
}
.serviceRelated .section_highlights_txt {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 26.06px;
  letter-spacing: 0.05rem;
  color: #ffffff;
  text-align: left;
}
.serviceRelated .boxArea {
  padding: 0 20px;
  justify-content: space-between;
  max-width: 1312px;
  margin: 0 auto;
  height: 100%;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .boxArea {
    display: flex;
    flex-direction: column;
    padding: 0 24px 0;
    gap: 56px;
  }
}
.serviceRelated .box_01 {
  display: flex;
  justify-content: space-between;
  padding-bottom: 120px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .box_01 {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding-bottom: 56px;
  }
}
.serviceRelated .box_02 {
  display: flex;
  justify-content: space-between;
  padding-bottom: 120px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .box_02 {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding-bottom: 56px;
  }
}
.serviceRelated .box_03 {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .box_03 {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
}
.serviceRelated .box_txtArea {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 34%;
  margin-left: 0px;
  text-align: left;
  gap: 20px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .box_txtArea {
    width: 100%;
  }
}
@media screen and (max-width: 1000px) {
  .serviceRelated .box_02 .box_txtArea,
  .serviceRelated .box_03 .box_txtArea {
    order: 1;
  }
}
@media screen and (max-width: 1000px) {
  .serviceRelated .box_02 .box_imgArea,
  .serviceRelated .box_03 .box_imgArea {
    order: 2;
  }
}
.serviceRelated .box_ttl {
  display: flex;
  flex-direction: column;
  font-size: 2.4rem;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  white-space: nowrap;
}
@media screen and (max-width: 1100px) {
  .serviceRelated .box_ttl {
    white-space: wrap;
    font-size: 1.8rem;
  }
}
.serviceRelated .box_no {
  font-size: 1.6rem;
}
.serviceRelated .box_txt {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  font-size: 1.6rem;
  font-weight: 400;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .box_txt {
    font-size: 1.4rem;
  }
}
.serviceRelated .box_imgArea {
  display: flex;
  flex-direction: column;
  line-height: normal;
  align-items: center;
  background-color: #ffffff;
  padding: 64px 56px;
  gap: 10px;
  border-radius: 20px;
  width: 60%;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .box_imgArea {
    width: 100%;
    padding: 32px 16px;
  }
}
.serviceRelated .section_security {
  max-width: 1312px;
  display: inline-block;
  position: relative;
  padding: 80px 20px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_security {
    padding: 56px 24px;
  }
}
.serviceRelated .contents_ttlArea {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: start;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .contents_ttlArea {
    gap: 8px;
  }
}
.serviceRelated .contents_ttlArea_center {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .contents_ttlArea_center {
    gap: 8px;
    align-items: start;
  }
}
.serviceRelated .contents_txt {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
  font-size: 1.8rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .serviceRelated .contents_txt {
    font-size: 1.6rem;
  }
}
.serviceRelated .contents_ttl {
  justify-content: center;
  background-color: #181818;
  color: #fff;
  white-space: nowrap;
  padding: 16px 40px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .serviceRelated .contents_ttl {
    font-size: 2.3rem;
    padding: 8px 16px;
  }
}
.serviceRelated .contentsCardArea {
  padding: 80px 0 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .contentsCardArea {
    grid-template-columns: 1fr;
    padding: 56px 0 16px;
    gap: 37px;
  }
}
.serviceRelated .contentsCard {
  display: grid;
  grid-template-rows: 120px 1fr;
  gap: 48px;
  padding: 40px;
  border-radius: 4px;
  transition: 0.3s;
  /* add no-hover class for shizugin-lp */
}
@media screen and (max-width: 768px) {
  .serviceRelated .contentsCard {
    flex-direction: column;
  }
}
.serviceRelated .contentsCard:not(.no-hover):hover {
  transform: scale(1.05);
  background-color: #f7f7f7;
}
@media screen and (min-width: 768px) {
  .serviceRelated a.contentsCard:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
  .serviceRelated a.contentsCard:hover .card_btnText {
    opacity: 0.6;
  }
  .serviceRelated a.contentsCard:hover .card_btnArrow {
    transform: scale(1.1);
    border: 1px solid #fff;
  }
  .serviceRelated a.contentsCard:hover .card_btnArrow:before {
    width: 94%;
    height: 94%;
  }
  .serviceRelated a.contentsCard:hover .card_btnArrow span {
    color: #000;
  }
}
.serviceRelated .contents_text {
  flex-grow: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.05rem;
  text-align: left;
  color: #000;
  padding-bottom: 10px;
}
.serviceRelated .card_btn {
  display: flex;
  width: fit-content;
  height: fit-content;
  gap: 18px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.7px;
  justify-content: flex-end;
  align-self: end;
  margin-left: auto;
}
.serviceRelated .logoArea {
  display: flex;
  justify-content: center;
}
.serviceRelated .section_document {
  justify-content: center;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
.serviceRelated .document_inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 405px;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 80px 60px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .document_inner {
    max-width: 100%;
    padding: 56px 20px;
  }
}
.serviceRelated .document_bg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.serviceRelated .titleArea {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 81%;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .titleArea {
    width: 100%;
    padding-bottom: 24px;
  }
}
.serviceRelated .document_title {
  justify-content: center;
  align-self: stretch;
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  gap: 10px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .document_title {
    max-width: 100%;
    white-space: initial;
    font-size: 2.6rem;
    padding-bottom: 0;
  }
}
.serviceRelated .document_heading {
  background-color: #fff;
  text-align: left;
  margin-right: auto;
  padding: 4px 16px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .document_heading {
    max-width: 100%;
    white-space: initial;
  }
}
.serviceRelated .document_container {
  position: relative;
  width: 100%;
  max-width: 1312px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .document_container {
    max-width: 100%;
  }
}
.serviceRelated .document_contents {
  display: flex;
}
@media screen and (max-width: 768px) {
  .serviceRelated .document_contents {
    gap: 56px;
    flex-direction: column;
    align-items: stretch;
  }
}
.serviceRelated .cardArea {
  line-height: normal;
  width: 19%;
}
@media screen and (max-width: 1100px) {
  .serviceRelated .cardArea {
    width: 40%;
  }
}
@media screen and (max-width: 768px) {
  .serviceRelated .cardArea {
    width: 100%;
  }
}
.serviceRelated .document_card {
  border-radius: 10px;
  box-shadow: 0 16px 16px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1.5;
  padding: 24px;
  text-align: left;
  gap: 24px;
}
.serviceRelated .card_title_en {
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
}
.serviceRelated .card_title_jp {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2rem;
  font-weight: 500;
  margin-top: 8px;
}
.serviceRelated .card_btnArea {
  display: flex;
  justify-content: flex-start;
}
.serviceRelated .card_button {
  align-items: center;
  border-radius: 4px;
  background-color: #000;
  text-align: center;
  padding: 8px 16px;
  transition: 0.3s;
}
.serviceRelated .card_button:hover {
  background-color: var(--Sub-Color, #00c6ab);
  color: #fff;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .card_button {
    white-space: initial;
  }
}
.serviceRelated .card_text {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
}
.serviceRelated .card_desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 400;
}
.serviceRelated .section_voice {
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 80px;
}
@media screen and (max-width: 768px) {
  .serviceRelated .section_voice {
    padding: 56px 24px;
  }
}
.serviceRelated .section_service {
  background-color: #ffffff;
  max-width: 1312px;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 80px 20px 120px;
  gap: 40px;
  margin: 0 auto;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .section_service {
    padding: 56px 24px;
    gap: 56px;
  }
}
.serviceRelated .contents_container {
  display: flex;
  position: relative;
  align-items: start;
  justify-content: space-between;
  padding-bottom: 120px;
}
@media screen and (max-width: 1200px) {
  .serviceRelated .contents_container {
    display: block;
    padding-bottom: 56px;
  }
}
.serviceRelated .contents_txtArea {
  display: flex;
  text-align: left;
  flex-direction: column;
  line-height: normal;
  font-family: "Notosans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  width: 48%;
  margin-left: 0;
  gap: 24px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .contents_txtArea {
    width: 70%;
  }
}
@media screen and (max-width: 768px) {
  .serviceRelated .contents_txtArea {
    width: 100%;
  }
}
.serviceRelated .contents_btArea {
  margin-left: 0;
  padding-top: 48px;
  gap: 20px;
  display: flex;
  justify-content: flex-end;
  width: 47%;
}
@media screen and (max-width: 1200px) {
  .serviceRelated .contents_btArea {
    width: 100%;
    padding-top: 74px;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .serviceRelated .contents_btArea {
    gap: 24px;
    flex-direction: column;
    align-items: center;
  }
}
.serviceRelated .service_contents {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .service_contents {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .serviceRelated .service_contents {
    grid-template-columns: 1fr;
  }
}
.serviceRelated .serviceCard_ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
  padding-bottom: 40px;
}
.serviceRelated .card_item {
  display: grid;
  border-radius: 20px;
  background-color: #fff;
  padding: 38px 40px;
  border-radius: 20px;
  box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.16);
  transition: 0.3s;
}
@media screen and (max-width: 1000px) {
  .serviceRelated .card_item {
    min-width: 0;
    padding: 32px 16px;
  }
}
.serviceRelated .card_item--link:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.serviceRelated .card_item--link:hover .card_btnText {
  opacity: 0.6;
}
.serviceRelated .card_item--link:hover .card_btnArrow {
  transform: scale(1.1);
  border: 1px solid #fff;
}
.serviceRelated .card_item--link:hover .card_btnArrow:before {
  width: 94%;
  height: 94%;
}
.serviceRelated .card_item--link:hover .card_btnArrow span {
  color: #000;
}
.serviceRelated .card_img {
  height: 220px;
  text-align: center;
}
.serviceRelated .card_img img {
  width: auto;
  height: 100%;
}
.serviceRelated .card_txtArea {
  display: grid;
  grid-template-rows: max-content 1fr;
  gap: 24px;
  text-align: left;
  padding-top: 24px;
}
.serviceRelated .card_ttl {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.serviceRelated .card_txt {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.serviceRelated .line_border {
  border: 1px solid #eaeaea;
}

.section_btArea {
  padding-top: 48px;
  gap: 24px;
  display: flex;
}

@media (max-width: 768px) {
  .section_btArea {
    flex-direction: column;
    align-items: center;
    padding-top: 56px;
  }
}
.btn_standard {
  display: inline-block;
  padding: 20px 25px;
  background-color: #00c6ab;
  color: #fff !important;
  text-shadow: 0 0 4px rgba(1, 165, 143, 0.5);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  transition: 0.2s;
}

.btn_standard:hover {
  background-color: #01a58f;
}

.btn_strong {
  display: block;
  width: 100%;
  padding: 20px 25px;
  background-color: #ff346b;
  color: #fff !important;
  text-shadow: 0 0 4px rgba(221, 45, 93, 0.5);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-size: 1.6rem;
  letter-spacing: 0.4rem;
  transition: 0.2s;
}

.btn_strong:hover {
  background-color: #dd2d5d;
}

.btn_standard,
.btn_strong {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 290px;
  height: 78px;
  font-size: 2.3rem;
  font-weight: 500;
  padding: 10px 10px;
}

/* 
 * mixin
 *
*/
.recruitRelated_sectionTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px 48px;
}
.recruitRelated_sectionTitle_inner {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  max-width: 1312px;
  gap: 40px;
}
.recruitRelated_sectionTitle_catchJP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .recruitRelated_sectionTitle_catchJP {
    font-size: 3.2rem;
  }
}
.recruitRelated_sectionTitle_subtitleJP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .recruitRelated_sectionTitle_subtitleJP {
    font-size: 4.8rem;
  }
}
.recruitRelated_sectionTitle_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.recruitRelated_sectionTitle_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 0 80px 0;
}
@media screen and (max-width: 1000px) {
  .recruitRelated_sectionTitle_center {
    padding: 32px 0 80px;
  }
}
.recruitRelated_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 32px 0 50px;
}
@media screen and (max-width: 768px) {
  .recruitRelated_contents {
    padding: 32px 0 0;
  }
}
.recruitRelated_topSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1312px;
  margin: 0 auto;
}
.recruitRelated_topSectionWrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 0 80px 0;
}
@media screen and (max-width: 1000px) {
  .recruitRelated_topSectionWrapper {
    padding: 32px 0;
  }
}
.recruitRelated_titleArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
}
.recruitRelated_titleArea h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #00c6ab;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .recruitRelated_titleArea h2 {
    font-size: 4rem;
    padding: 0 24px;
  }
}
.recruitRelated_titleEN {
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  color: #00c6ab;
}
@media screen and (max-width: 768px) {
  .recruitRelated_titleEN {
    font-size: 1.8rem;
  }
}
.recruitRelated_titleJP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .recruitRelated_titleJP {
    font-size: 2.4rem;
  }
}
.recruitRelated_titleBox {
  border: 1px solid #000;
  padding: 8px 24px;
}
.recruitRelated_message {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 9.6rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 96px 0;
}
@media screen and (max-width: 768px) {
  .recruitRelated_message {
    text-align: left;
    font-size: 4.8rem;
    padding: 24px;
  }
}
.recruitRelated_description {
  align-self: center;
  text-align: left;
  width: 900px;
  padding-top: 24px;
}
@media screen and (max-width: 1000px) {
  .recruitRelated_description {
    width: auto;
    padding: 24px 24px 0 24px;
  }
}
.recruitRelated_description p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .recruitRelated_description p {
    font-size: 1.6rem;
  }
}
.recruitRelated_description .regular {
  font-weight: 400;
}
.recruitRelated_valuesSection {
  padding-top: 60px;
}
.recruitRelated_valuesInner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
@media screen and (max-width: 768px) {
  .recruitRelated_valuesInner {
    gap: 24px;
  }
}
.recruitRelated_valuesTitleArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.recruitRelated_valuesTitleArea img {
  width: 344px;
  height: 72px;
}
@media screen and (max-width: 768px) {
  .recruitRelated_valuesTitleArea img {
    width: 172px;
    height: 36px;
  }
}
.recruitRelated_valuesTitleArea h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.recruitRelated_cardContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 80px;
  gap: 60px;
}
@media screen and (max-width: 1000px) {
  .recruitRelated_cardContainer {
    align-items: center;
    flex-direction: column;
    padding-top: 24px;
  }
}
.recruitRelated_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  width: 300px;
}
@media screen and (max-width: 768px) {
  .recruitRelated_card {
    width: 100%;
    align-items: flex-start;
  }
}
.recruitRelated_no {
  align-self: center;
}
.recruitRelated_cardTitle {
  padding: 24px;
}
.recruitRelated_cardTitle p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.recruitRelated_cardTitle::after {
  position: absolute;
  content: "";
  background-image: url("/2024/05/vector-204-PC.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 235px;
  height: 19px;
  padding-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .recruitRelated_cardTitle::after {
    background-image: url("/2024/05/vector-204-SP.svg");
    width: 320px;
  }
}
.recruitRelated_cardDescription {
  padding: 16px 24px;
}
.recruitRelated_cardDescription p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.recruitRelated_work {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 64px;
}
@media screen and (max-width: 768px) {
  .recruitRelated_work {
    padding-top: 0;
  }
}
.recruitRelated_workImage {
  max-width: 80%;
}
@media screen and (max-width: 768px) {
  .recruitRelated_workImage {
    max-width: 100%;
  }
}
.recruitRelated_set {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1312px;
  padding: 56px 0;
}
@media screen and (max-width: 768px) {
  .recruitRelated_set {
    padding: 56px 0 0;
  }
}
.recruitRelated_sectionTitleLeft {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  width: 100%;
}
.recruitRelated_sectionTitleLeft p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .recruitRelated_sectionTitleLeft p {
    font-size: 1.8rem;
  }
}
.recruitRelated_values {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 60px;
  gap: 60px;
}
@media screen and (max-width: 768px) {
  .recruitRelated_values {
    padding: 16px 0 0;
  }
}
.recruitRelated_valuesCardContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 48px;
}
@media screen and (max-width: 1300px) {
  .recruitRelated_valuesCardContainer {
    flex-direction: column;
  }
}
.recruitRelated_valuesCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 405px;
}
@media screen and (max-width: 1300px) {
  .recruitRelated_valuesCard {
    width: auto;
  }
}
.recruitRelated_valuesCard_image {
  padding: 24px;
}
@media screen and (max-width: 1300px) {
  .recruitRelated_valuesCard_image {
    align-self: center;
  }
}
.recruitRelated_valuesCard_title {
  padding: 0 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.recruitRelated_valuesCard_description {
  padding: 16px 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.recruitRelated_valuesCardRow {
  padding: 16px 0;
}
@media screen and (max-width: 768px) {
  .recruitRelated_valuesCardRow {
    padding: 0;
  }
}
.recruitRelated_valuesCard22 {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .recruitRelated_valuesCard22 {
    flex-direction: column;
  }
}
.recruitRelated_valuesCard22_description {
  text-align: left;
  padding: 16px 24px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.recruitRelated_valuesCard22_description ul {
  font-weight: 700;
  list-style: disc;
  padding: 24px 0 0 20px;
}
.recruitRelated_valuesCard22_description li {
  margin-bottom: 8px;
}
.recruitRelated_aboutImage {
  padding-top: 80px;
}
.recruitRelated_tableContents {
  display: flex;
  flex-direction: column;
  padding-top: 80px;
  gap: 60px;
}
.recruitRelated_table {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
}
@media screen and (max-width: 768px) {
  .recruitRelated_table {
    flex-direction: column;
    gap: 32px;
  }
}
.recruitRelated_table .height-150 {
  font-family: "Noto Sans JP", sans-serif;
  height: 150px;
  text-align: left;
  justify-content: flex-start;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .recruitRelated_table .height-150 {
    height: auto;
    padding: 45px 0 24px;
  }
}
.recruitRelated_table .height-300 {
  font-family: "Noto Sans JP", sans-serif;
  height: 300px;
  text-align: left;
  justify-content: flex-start;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .recruitRelated_table .height-300 {
    height: auto;
    padding: 45px 0 24px;
  }
}
.recruitRelated_table_titleArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  position: relative;
  width: 150px;
}
@media screen and (max-width: 768px) {
  .recruitRelated_table_titleArea {
    display: none;
  }
}
.recruitRelated_table_titleArea::after {
  content: "";
  border-left: #00c6ab solid 2px;
  position: absolute;
  right: -10px;
  height: 800px;
  top: 0;
}
@media screen and (max-width: 768px) {
  .recruitRelated_table_titleArea::after {
    display: none;
  }
}
.recruitRelated_table_titleArea td {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  border-bottom: #00c6ab solid 2px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .recruitRelated_table_titleArea td {
    border-bottom: none;
  }
}
.recruitRelated_table_contentsArea {
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .recruitRelated_table_contentsArea {
    width: 100%;
    border: #c8c8c8 solid 1px;
    border-radius: 8px;
    padding: 32px 24px;
  }
}
.recruitRelated_table_contentsArea::after {
  content: "";
  border-left: #c8c8c8 solid 2px;
  position: absolute;
  right: -10px;
  height: 800px;
  top: 0;
}
@media screen and (max-width: 768px) {
  .recruitRelated_table_contentsArea::after {
    border: none;
  }
}
.recruitRelated_table_contentsArea td {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  border-bottom: #00c6ab solid 2px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media screen and (max-width: 768px) {
  .recruitRelated_table_contentsArea td {
    justify-content: flex-start;
    height: auto;
    padding: 40px 0 24px;
  }
  .recruitRelated_table_contentsArea td::before {
    display: block;
    position: absolute;
    content: attr(data-title);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    top: 5%;
    left: 0;
    white-space: nowrap;
  }
}
.recruitRelated_table .centered-content {
  justify-content: center !important;
}
.recruitRelated_table .centered-highlighted-content {
  justify-content: center !important;
  font-size: 2.4rem;
  color: #00c6ab;
}

.line11 {
  border: 1px solid #000;
  width: 48px;
  height: 1px;
  margin: auto 0;
}
@media screen and (max-width: 768px) {
  .line11 {
    width: 24px;
  }
}

.recruitFooter {
  width: 100%;
}
.recruitFooter_inner {
  border: #b7b7b7 solid 1px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  padding: 80px 0;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .recruitFooter_inner {
    border: none;
    flex-direction: column;
    padding: 32px 0;
    background-color: #F8F8F8;
  }
}

.workSection_contents {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 160px;
}
@media screen and (max-width: 1000px) {
  .workSection_contents {
    gap: 80px;
  }
}
@media screen and (max-width: 768px) {
  .workSection_contents {
    gap: 32px;
  }
}
.workSection_contentsCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.workSection_titleArea {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  padding-bottom: 24px;
}
.workSection_title {
  text-align: left;
}
.workSection_title p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 8px;
}
.workSection_title h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
}
.workSection_description {
  text-align: left;
  padding: 16px 24px 16px 72px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .workSection_description {
    padding: 16px 24px;
  }
}
.workSection_descriptionBorder {
  border: 1px solid #000;
  padding: 16px;
}
.workSection_innerCards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 48px;
  padding-left: 56px;
}
@media screen and (max-width: 1000px) {
  .workSection_innerCards {
    flex-direction: column;
    gap: 24px;
    padding: 0 24px;
  }
}
.workSection_innerCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 381px;
}
@media screen and (max-width: 1300px) {
  .workSection_innerCard {
    width: auto;
  }
}
.workSection_innerCard_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: #00c6ab;
  padding: 16px;
}
.workSection_innerCard_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding: 16px;
}
.workSection_innerNarrowCards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 32px;
  padding-left: 56px;
}
@media screen and (max-width: 1000px) {
  .workSection_innerNarrowCards {
    flex-direction: column;
    gap: 24px;
    padding: 0 24px;
  }
}
.workSection_innerNarrowCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 286px;
}
@media screen and (max-width: 1300px) {
  .workSection_innerNarrowCard {
    width: auto;
  }
}

.work_inner {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 24px;
  justify-items: center;
}
.work_columnCard {
  display: flex;
  border-radius: 8px;
  border-color: #d3d3d3;
  border-style: solid;
  border-width: 1px;
  flex-grow: 1;
  gap: 16px;
  padding: 32px 24px;
  transition: 0.3s;
}
.work_columnCard:hover {
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.16);
}
@media screen and (max-width: 768px) {
  .work_columnCard {
    background-color: #fff;
  }
}
.work_columnContent {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 458px;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .work_columnContent {
    width: 100%;
  }
}
.work_nameArea {
  display: flex;
  gap: 4px;
}
.work_nameJP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #000;
}
.work_nameEN, .work_position {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  color: #828282;
}
.work_columnTitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .work_columnTitle {
    font-size: 1.6rem;
  }
}

.engineerLife_cards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 60px;
  padding-top: 80px;
}
.engineerLife_card {
  display: flex;
  flex-direction: row;
  text-align: left;
  gap: 32px;
  padding: 0 24px;
}
@media screen and (max-width: 768px) {
  .engineerLife_card {
    flex-direction: column;
    width: 100%;
  }
}
.engineerLife_card_img {
  width: 350px;
  height: 250px;
}
@media screen and (max-width: 768px) {
  .engineerLife_card_img {
    align-self: center;
  }
}
.engineerLife_card_textArea {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}
@media screen and (max-width: 768px) {
  .engineerLife_card_textArea {
    padding: 0;
  }
}
.engineerLife_card_title {
  display: flex;
  flex-direction: row;
  gap: 24px;
  padding: 0 24px;
}
.engineerLife_card_title p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #00c6ab;
}
.engineerLife_card_title h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03rem;
}
.engineerLife_card_description {
  padding: 16px 24px;
}
.engineerLife_card_description p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.engineerLife_img {
  width: auto;
}

.devDivision {
  display: flex;
  flex-direction: row;
  padding-top: 80px;
  gap: 60px;
}
.devDivision_values {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 60px;
  gap: 60px;
}
@media screen and (max-width: 768px) {
  .devDivision_values {
    padding: 16px 0 0;
  }
}
.devDivision_cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(405px, 1fr));
  gap: 48px;
}
@media screen and (max-width: 768px) {
  .devDivision_cards {
    grid-template-columns: 1fr;
  }
}
.devDivision_card {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .devDivision_card {
    padding: 0 24px;
  }
}
.devDivision_imgArea {
  padding: 24px;
  height: 300px;
  align-self: center;
}
.devDivision_imgArea img {
  width: 250px;
  height: 250px;
}
.devDivision_title {
  flex-direction: column;
  align-items: flex-start;
  padding: 0 24px;
}
.devDivision_title h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03rem;
}
.devDivision_title p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
.devDivision_description {
  padding: 16px 24px;
}
.devDivision_description p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

.devEnvironment {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .devEnvironment {
    padding: 0 24px;
  }
}
.devEnvironment_borderCenter {
  border: #00c6ab solid 2px;
  height: 60px;
}
@media screen and (max-width: 768px) {
  .devEnvironment_borderCenter {
    display: none;
  }
}
.devEnvironment_table {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .devEnvironment_table {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    padding-top: 8px;
    font-size: 1.2rem;
  }
}
.devEnvironment_table:first-child .devEnvironment_borderCenter,
.devEnvironment_table:first-child .devEnvironment_table_title,
.devEnvironment_table:first-child .devEnvironment_table_content {
  border-bottom: #00c6ab solid 2px;
  height: 70px;
}
@media screen and (max-width: 768px) {
  .devEnvironment_table:first-child .devEnvironment_borderCenter,
  .devEnvironment_table:first-child .devEnvironment_table_title,
  .devEnvironment_table:first-child .devEnvironment_table_content {
    border-bottom: none !important;
    display: none;
  }
}
.devEnvironment_table_title {
  width: 250px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: #c8c8c8 solid 1px;
}
@media screen and (max-width: 768px) {
  .devEnvironment_table_title {
    font-weight: 400;
    width: auto;
    height: auto;
    border-bottom: none !important;
  }
}
.devEnvironment_table_content {
  width: 500px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: left;
  border-bottom: #c8c8c8 solid 1px;
}
@media screen and (max-width: 768px) {
  .devEnvironment_table_content {
    width: auto;
    height: auto;
    padding: 8px 0;
    width: 325px;
    justify-content: left;
    text-align: left;
  }
}

.welfare_wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.welfare_cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(381px, 1fr));
  gap: 48px;
}
@media screen and (max-width: 768px) {
  .welfare_cards {
    grid-template-columns: 1fr;
  }
}
.welfare_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .welfare_card {
    width: 100%;
    align-items: flex-start;
  }
}
.welfare_titleJP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding: 16px;
}
.welfare_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding: 16px;
}

/* 
 * mixin
 *
*/
/* br */
.aiFeatureDotsBg {
  background-color: #000;
  background-image: url("/2024/07/ai-bg-dot.png");
  background-attachment: fixed;
  background-position: 100%;
  background-repeat: repeat;
  overflow: hidden;
}

.aiFeatureMV {
  justify-content: space-between;
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 20px;
  color: #fff;
}
.aiFeatureMV_column {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: normal;
}
@media screen and (max-width: 768px) {
  .aiFeatureMV_column {
    flex-direction: column;
    position: relative;
  }
}
.aiFeatureMV_textArea {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .aiFeatureMV_textArea {
    z-index: 1;
  }
}
.aiFeatureMV_title {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 10px;
  padding-bottom: 60px;
}
.aiFeatureMV_title-en {
  font-family: "Montserrat", sans-serif;
  text-align: left;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: normal;
}
.aiFeatureMV_catch-main {
  text-align: left;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .aiFeatureMV_catch-main {
    font-size: 2.4rem;
  }
}
.aiFeatureMV_title-sub, .aiFeatureMV_catch-sub {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: normal;
}
.aiFeatureMV_btnArea {
  padding-top: 48px;
  gap: 24px;
  display: flex;
}
@media screen and (max-width: 768px) {
  .aiFeatureMV_btnArea {
    flex-direction: column;
  }
}
.aiFeatureMV_btnArea a {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  width: 290px;
  height: 78px;
  padding: 10px;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .aiFeatureMV_btnArea a {
    width: 100%;
  }
}
.aiFeatureMV_btnArea-primaryBtn {
  background-color: #00c6ab;
}
.aiFeatureMV_btnArea-primaryBtn:hover {
  background-color: #00af97;
}
.aiFeatureMV_btnArea-secondaryBtn {
  background-color: #ff346b;
}
.aiFeatureMV_btnArea-secondaryBtn:hover {
  background-color: #dd2d5d;
}
.aiFeatureMV_imageArea {
  width: 45%;
  position: relative;
}
@media screen and (max-width: 768px) {
  .aiFeatureMV_imageArea {
    position: absolute;
    width: 100%;
    left: -75px;
    bottom: -100px;
  }
}
.aiFeatureMV_imageArea-subImage {
  position: absolute;
  width: 50%;
  bottom: -50px;
  left: -50px;
}

.aiFeatureComparison {
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 20px;
  color: #fff;
}
.aiFeatureComparison_catch-main {
  text-align: left;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .aiFeatureComparison_catch-main {
    font-size: 2.2rem;
  }
}
.aiFeatureComparison .br-sp {
  margin: 0 auto;
}

.aiFeatureFeatures,
.aiFeatureBenefit {
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 20px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: normal;
  gap: 48px;
}
@media screen and (max-width: 768px) {
  .aiFeatureFeatures,
  .aiFeatureBenefit {
    flex-direction: column;
    padding-bottom: 0;
  }
}
.aiFeatureFeatures_textArea,
.aiFeatureBenefit_textArea {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-self: start;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
}
.aiFeatureFeatures_title,
.aiFeatureBenefit_title {
  color: #00c6ab;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 150%; /* 36px */
  letter-spacing: 1.2px;
  padding-bottom: 24px;
  font-family: "Montserrat", sans-serif;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .aiFeatureFeatures_title,
  .aiFeatureBenefit_title {
    font-size: 1.8rem;
  }
}
.aiFeatureFeatures_catch-main,
.aiFeatureBenefit_catch-main {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 150%; /* 48px */
  letter-spacing: 1.6px;
  padding-bottom: 48px;
}
@media screen and (max-width: 768px) {
  .aiFeatureFeatures_catch-main,
  .aiFeatureBenefit_catch-main {
    font-size: 2.2rem;
    padding-bottom: 24px;
  }
}
.aiFeatureFeatures_catch-sub,
.aiFeatureBenefit_catch-sub {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 0.8px;
  padding-left: 32px;
}
@media screen and (max-width: 768px) {
  .aiFeatureFeatures_catch-sub,
  .aiFeatureBenefit_catch-sub {
    font-size: 1.6rem;
    padding-left: 0;
  }
}
.aiFeatureFeatures_imageArea-subImage.br-pc,
.aiFeatureBenefit_imageArea-subImage.br-pc {
  max-width: 60%;
}

@media screen and (max-width: 768px) {
  .aiFeatureBenefit {
    padding-bottom: 80px;
  }
}

.aiFeatureFloatingBannerContainer {
  position: absolute;
  width: 371px;
  height: 1800px;
  top: 20px;
  right: 20px;
}
@media screen and (max-width: 768px) {
  .aiFeatureFloatingBannerContainer {
    height: auto;
    position: relative;
    top: 0;
    right: 0;
    padding: 0 20px;
    width: 100%;
    height: auto;
  }
}

.aiFeatureFloatingBanner {
  position: sticky;
  top: calc(100% - 213px);
  right: 20px;
  width: 371px;
  height: 193px; /* 16:9 aspect ratio */
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.16);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .aiFeatureFloatingBanner {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
  }
}
.aiFeatureFloatingBanner:hover .aiFeatureFloatingBanner_image {
  transform: scale(1.1);
  opacity: 0.7;
}
.aiFeatureFloatingBanner:hover .aiFeatureFloatingBanner_play-button {
  transform: translate(-50%, -50%) scale(1.1);
}
.aiFeatureFloatingBanner_thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
}
.aiFeatureFloatingBanner_title, .aiFeatureFloatingBanner_subtitle {
  text-shadow: 5px 5px 5px rgba(255, 255, 255, 0.8), -5px 5px 5px rgba(255, 255, 255, 0.8), 5px -5px 5px rgba(255, 255, 255, 0.8), -5px -5px 5px rgba(255, 255, 255, 0.8);
}
.aiFeatureFloatingBanner_title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: normal;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
}
.aiFeatureFloatingBanner_subtitle {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1;
}
.aiFeatureFloatingBanner_image {
  object-fit: cover;
  opacity: 0.8;
  transition: 0.3s;
  z-index: 1;
  position: relative;
}
.aiFeatureFloatingBanner_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  pointer-events: none;
}
.aiFeatureFloatingBanner_play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  transition: 0.3s;
  z-index: 1;
}
.aiFeatureFloatingBanner_video {
  width: 1000px;
  height: 562px;
}
@media screen and (max-width: 1000px) {
  .aiFeatureFloatingBanner_video {
    width: 800px;
    height: 300px;
  }
}
@media screen and (max-width: 640px) {
  .aiFeatureFloatingBanner_video {
    width: 100%;
    height: auto;
  }
}

.modal__wrapper {
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}

.modal__wrapper:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.modal__wrapper:target {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s, visibility 0.4s;
}

.modal__wrapper::after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  vertical-align: middle;
  content: "";
}

.modal__overlay {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.modal__AIClose {
  z-index: 1000;
  position: absolute;
  top: 32px;
  right: 32px;
  width: 32px;
  height: 32px;
}
@media screen and (max-width: 640px) {
  .modal__AIClose {
    top: 12px;
    right: 12px;
    height: 20px;
  }
}

.modal__AIClose::before,
.modal__AIClose::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 30px;
  background: #fff !important;
}
@media screen and (max-width: 640px) {
  .modal__AIClose::before,
  .modal__AIClose::after {
    height: 20px;
  }
}

.modal__AIClose::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__AIClose::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__bg {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.2;
}

.modal__AIVideo {
  position: relative;
  width: 80vw;
  height: 80vh;
  background-color: #000 !important;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
@media screen and (max-width: 640px) {
  .modal__AIVideo {
    width: 90vw;
    height: 40vh;
    padding: 32px 16px 10px;
  }
}

.aiFeatureFreeTrial {
  border-radius: 20px 20px 0px 0px;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
.aiFeatureFreeTrial_container {
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 20px;
  color: #fff;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  line-height: normal;
}
.aiFeatureFreeTrial_freeTrialText {
  color: #00c6ab;
  font-family: "Montserrat", sans-serif;
  width: auto;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 150%; /* 36px */
  letter-spacing: 1.2px;
  margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_freeTrialText {
    font-size: 1.8rem;
  }
}
.aiFeatureFreeTrial_platformTitle {
  color: #000;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 150%; /* 48px */
  letter-spacing: 1.6px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_platformTitle {
    font-size: 2rem;
  }
}
.aiFeatureFreeTrial_contentWrapper {
  justify-content: center;
  background-color: #fff;
  display: flex;
  margin-top: 80px;
  width: 100%;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_contentWrapper {
    margin-top: 0;
  }
}
.aiFeatureFreeTrial_trialInfo {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  width: 100%;
  padding: 80px 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_trialInfo {
    padding: 48px 0 73px 0;
    flex-direction: column;
  }
}
.aiFeatureFreeTrial_trialInfoInner {
  justify-content: center;
  align-items: start;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_trialInfoInner {
    width: 100%;
  }
}
.aiFeatureFreeTrial_trialMessage {
  color: #20b09d;
  font-size: 2rem;
  font-weight: 400;
  line-height: 150%; /* 30px */
  letter-spacing: 1px;
  border-color: #00c6ab;
  border-style: solid;
  border-top-width: 1px;
  border-bottom-width: 1px;
  letter-spacing: 1px;
  justify-content: center;
  padding: 8px 0;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_trialMessage {
    width: 100%;
    font-size: 1.6rem;
    text-align: left;
  }
}
.aiFeatureFreeTrial_trialPricing {
  color: #000;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 150%; /* 72px */
  letter-spacing: 2.4px;
  margin-top: 6px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_trialPricing {
    margin-top: 20px;
    font-size: 3.2rem;
  }
}
.aiFeatureFreeTrial_trialImageArea {
  position: relative;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_trialImageArea {
    bottom: -100px;
  }
}
.aiFeatureFreeTrial_trialImage {
  position: absolute;
  max-width: 525px;
  max-height: 260.521px;
  top: 60px;
  right: 53px;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_trialImage {
    position: relative;
    width: 80%;
    top: 0;
    left: 0;
  }
}
.aiFeatureFreeTrial_trialImage-sub {
  position: absolute;
  max-width: 150px;
  max-height: 150px;
  right: 0;
  top: 0;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_trialImage-sub {
    top: -70px;
  }
}
.aiFeatureFreeTrial_featuresWrapper {
  background-color: #20b09d;
  width: 100%;
  padding: 24px 0px;
  border-radius: 10px;
  box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.16);
  z-index: 1;
}
.aiFeatureFreeTrial_featuresContainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_featuresContainer {
    flex-direction: column;
  }
}
.aiFeatureFreeTrial_feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  flex-grow: 1;
  width: 33%;
  max-width: 400px;
  gap: 22px;
  padding: 24px 32px;
  margin-left: 0px;
  line-height: normal;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_feature {
    width: 100%;
    margin-top: 24px;
    white-space: initial;
    padding: 0 20px;
  }
}
.aiFeatureFreeTrial_featureBorder {
  border-color: #fff;
  border-style: solid;
  border-right-width: 1px;
  border-left-width: 1px;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_featureBorder {
    border-right-width: 0;
    border-left-width: 0;
    border-top-width: 1px;
    border-bottom-width: 1px;
    padding: 20px;
  }
}
.aiFeatureFreeTrial_featureIcon {
  aspect-ratio: 1;
  width: 34px;
}
.aiFeatureFreeTrial_featureTitle {
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 150%; /* 36px */
  letter-spacing: 1.2px;
  text-align: left;
  height: 72px;
}
@media screen and (max-width: 768px) {
  .aiFeatureFreeTrial_featureTitle {
    font-size: 1.8rem;
    height: auto;
  }
}
.aiFeatureFreeTrial_featureDescription {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 0.8px;
  text-align: left;
}

.aiFeatureAccompaniment {
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
.aiFeatureAccompaniment_container {
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 20px;
  color: #fff;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  line-height: normal;
}
@media screen and (max-width: 768px) {
  .aiFeatureAccompaniment_container {
    padding-top: 0;
  }
}
.aiFeatureAccompaniment_text {
  color: #00c6ab;
  font-family: "Montserrat", sans-serif;
  width: auto;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 150%; /* 36px */
  letter-spacing: 1.2px;
  margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
  .aiFeatureAccompaniment_text {
    font-size: 1.8rem;
  }
}
.aiFeatureAccompaniment_title {
  color: #000;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 150%; /* 48px */
  letter-spacing: 1.6px;
  text-align: left;
  margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
  .aiFeatureAccompaniment_title {
    font-size: 2.2rem;
  }
}
.aiFeatureAccompaniment_title-cross {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin: 0 12px 6px 12px;
}
@media screen and (max-width: 768px) {
  .aiFeatureAccompaniment_title-cross {
    width: 16px;
    height: 16px;
    margin: 0 6px;
  }
}
.aiFeatureAccompaniment .br-pc {
  width: 100%;
}
.aiFeatureAccompaniment_contentWrapper {
  display: flex;
  justify-content: center;
  background-color: #fff;
  margin-top: 80px;
  width: 100%;
  flex-direction: column;
  gap: 16px;
}
.aiFeatureAccompaniment_stepContainer {
  border-radius: 10px;
  background-color: #dfdfdf;
  width: 100%;
  padding: 24px;
}
.aiFeatureAccompaniment_stepContainer-lg {
  border-radius: 10px;
  background-color: #dfdfdf;
  width: 100%;
  padding: 48px 24px;
}
.aiFeatureAccompaniment_content {
  gap: 20px;
  display: flex;
}
.aiFeatureAccompaniment_column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: normal;
  width: 32%;
  max-width: 400px;
  margin-left: 0px;
  position: relative;
}
.aiFeatureAccompaniment_details {
  padding: 24px 32px;
}
.aiFeatureAccompaniment_number-wrapper {
  gap: 20px;
  display: flex;
}
.aiFeatureAccompaniment_number-column {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 18%;
}
.aiFeatureAccompaniment_number {
  color: #00c6ab;
  font-family: "Montserrat", sans-serif;
  font-size: 4.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 72px */
  letter-spacing: 2.4px;
}
.aiFeatureAccompaniment_description-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: normal;
  width: 82%;
  margin-left: 20px;
}
.aiFeatureAccompaniment_description {
  color: #000;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 36px */
  letter-spacing: 1.2px;
  text-align: left;
}
.aiFeatureAccompaniment_content-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: normal;
  width: 68%;
  border-color: #00c6ab;
  border-style: solid;
  border-left-width: 1px;
  padding-left: 20px;
}
.aiFeatureAccompaniment_content-text {
  color: #000;
  letter-spacing: 0.9px;
  text-align: left;
}
.aiFeatureAccompaniment_chartImageArea {
  position: relative;
  width: 100%;
}
.aiFeatureAccompaniment_speechBubble-1 {
  position: absolute;
  width: 206px;
  top: -60px;
  left: 15px;
}
.aiFeatureAccompaniment_speechBubble-1.br-sp {
  position: absolute;
  top: 0;
  left: 35%;
  transform: translate(-50%, -50%);
}
.aiFeatureAccompaniment_speechBubble-2 {
  position: absolute;
  width: 339.5px;
  inset: 0;
  top: -40px;
  left: 15px;
}
.aiFeatureAccompaniment_speechBubble-2.br-sp {
  position: absolute;
  top: 575px;
  left: 50%;
  transform: translateX(-50%);
}

.serviceHighlight {
  background-image: linear-gradient(90deg, #00d5b9 0%, #007b6b 100%);
  width: 100%;
  padding: 80px 20px;
  position: relative;
}
.serviceHighlight_container::after {
  content: "";
  position: absolute;
  background-image: url("/2024/07/digital-image-highlight-pc.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  right: -40px;
  z-index: 0;
  width: 400px;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .serviceHighlight_container::after {
    background-image: url("/2024/07/digital-image-highlight-sp.svg");
    width: 300px;
    height: 300px;
    right: 0;
  }
}
.serviceHighlight_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #fff;
  z-index: 1;
  position: relative;
}
@media screen and (max-width: 768px) {
  .serviceHighlight_text {
    text-align: left;
    font-size: 2.4rem;
  }
}

.pressRelease {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 80px 20px;
  background-image: url("/2024/07/ai-bg-dot.png"), linear-gradient(130.28deg, #000000 0.37%, #006053 100.18%);
  background-attachment: fixed;
  background-position: 100%;
  background-repeat: repeat;
  overflow: hidden;
}
.pressRelease::before {
  content: "";
  position: absolute;
  background-image: url("/2024/07/mv-object.svg");
  background-size: contain;
  background-repeat: no-repeat;
  left: 0;
  width: 876px;
  height: 849px;
  z-index: 0;
}
@media screen and (max-width: 1000px) {
  .pressRelease::before {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .pressRelease {
    padding: 80px 20px 0;
  }
}
.pressRelease_ttlContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1312px;
  gap: 80px;
  position: relative;
  z-index: 1;
}
.pressRelease_ttlArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: left;
}
.pressRelease_ttlArea-ttlEN {
  padding-bottom: 24px;
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #00c6ab;
}
.pressRelease_ttlArea-news {
  display: flex;
  flex-direction: row;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 24px;
  gap: 16px;
  transition: 0.3s;
  position: relative;
}
.pressRelease_ttlArea-news::after {
  position: absolute;
  content: "";
  background-image: url("/2024/07/white-arrow-right.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  right: -20px;
  width: 100px;
  height: 100px;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .pressRelease_ttlArea-news::after {
    transform: translateY(30%);
  }
}
.pressRelease_ttlArea-news:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.pressRelease_ttlArea-news:hover::after {
  transform: translateX(5px);
  animation-timing-function: ease-out;
  animation-duration: 300ms;
}
@media screen and (max-width: 768px) {
  .pressRelease_ttlArea-news {
    padding: 24px 16px;
  }
}
.pressRelease_ttlArea-txtArea {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pressRelease_ttlArea-newsTitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #fff;
  width: 90%;
}
@media screen and (max-width: 768px) {
  .pressRelease_ttlArea-newsTitle {
    font-size: 1.6rem;
    width: 85%;
  }
}
.pressRelease_ttlArea-infoArea {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.pressRelease_ttlArea-newsTag {
  background-color: #dfdfdf;
  width: 149px;
  border-radius: 100px;
  border: 1px solid #000;
  padding: 8px 16px;
}
.pressRelease_ttlArea-newsDate {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
.pressRelease_container {
  display: flex;
  flex-direction: row;
  gap: 48px;
  z-index: 1;
}
@media screen and (max-width: 1000px) {
  .pressRelease_container {
    flex-direction: column;
  }
}
.pressRelease_container-imgArea {
  width: 40%;
  padding-top: 80px;
}
@media screen and (max-width: 1000px) {
  .pressRelease_container-imgArea {
    width: 100%;
    padding: 0;
  }
}
@media screen and (max-width: 768px) {
  .pressRelease_container-imgArea {
    padding: 0 0 32px 0;
  }
}
.pressRelease_container-imgArea.no-padding {
  padding: 0;
}
.pressRelease_container-txtArea {
  width: 60%;
  color: #fff;
  text-align: left;
}
@media screen and (max-width: 1000px) {
  .pressRelease_container-txtArea {
    width: 100%;
  }
}
.pressRelease_container-titleJP {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding-bottom: 48px;
}
@media screen and (max-width: 768px) {
  .pressRelease_container-titleJP {
    font-size: 2.2rem;
  }
}
.pressRelease_container-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0 0 48px 23px;
}
@media screen and (max-width: 768px) {
  .pressRelease_container-description {
    padding: 0 0 32px 0;
  }
}

.line-5 {
  position: absolute;
  border: 1px solid #000000;
  width: 100%;
}

.aiFeatureNewBiz {
  background-color: #dfdfdf;
  width: 100%;
}
.aiFeatureNewBiz_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 1312px;
  width: 100%;
  padding: 80px 20px;
}
@media screen and (max-width: 768px) {
  .aiFeatureNewBiz_wrapper {
    padding: 80px 0;
  }
}
.aiFeatureNewBiz_titleWrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.aiFeatureNewBiz_title {
  position: relative;
  z-index: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  padding: 16px 24px;
  border-radius: 100px;
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .aiFeatureNewBiz_title {
    font-size: 1.6rem;
  }
}
.aiFeatureNewBiz_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 48px 24px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .aiFeatureNewBiz_description {
    font-size: 1.6rem;
  }
}
.aiFeatureNewBiz_serviceList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
}
@media screen and (max-width: 768px) {
  .aiFeatureNewBiz_serviceList {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
}
.aiFeatureNewBiz_service {
  display: grid;
  border-radius: 20px;
  background-color: #fff;
  padding: 32px 16px;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .aiFeatureNewBiz_service {
    padding: 48px 16px;
  }
}
.aiFeatureNewBiz_service-img {
  height: 220px;
  text-align: center;
}
.aiFeatureNewBiz_service-img img {
  width: auto;
  height: 100%;
}
.aiFeatureNewBiz_service-body {
  display: grid;
  grid-template-rows: max-content 1fr;
  gap: 32px;
  padding: 16px 30px 0;
}
@media screen and (max-width: 768px) {
  .aiFeatureNewBiz_service-body {
    padding: 0;
  }
}
.aiFeatureNewBiz_service-ttl {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .aiFeatureNewBiz_service-ttl {
    text-align: left;
  }
}
.aiFeatureNewBiz_service-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.5;
  padding: 0 10px;
  text-align: left;
}
.aiFeatureNewBiz_service-btnWrap {
  display: flex;
  width: fit-content;
  height: fit-content;
  gap: 18px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.7px;
  justify-content: flex-end;
  align-self: end;
  margin-left: auto;
}
.aiFeatureNewBiz_service-btn {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}
.aiFeatureNewBiz_service-btnText {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: left;
  padding-right: 20px;
  transition: 0.3s;
}
.aiFeatureNewBiz_service-btnArrow {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #00c6ab;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.3s;
}
.aiFeatureNewBiz_service-btnArrow::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.5s;
}
.aiFeatureNewBiz_service-btnArrow span {
  font-size: 20px;
  color: #fff;
  z-index: 1;
  transition: 0.3s;
}
.aiFeatureNewBiz_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
  justify-content: center;
  padding: 16px 0px;
}
@media screen and (max-width: 1312px) {
  .aiFeatureNewBiz_list {
    grid-template-columns: repeat(2, 1fr);
    align-self: center;
    gap: 16px;
    padding: 16px 20px;
  }
}
.aiFeatureNewBiz_item {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px solid #d3d3d3;
  background-color: #fff;
  width: 400px;
  height: 129px;
  padding: 32px 24px;
  transition: 0.3s;
  box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.1607843137);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 1000px) {
  .aiFeatureNewBiz_item {
    width: 345px;
  }
}
@media screen and (max-width: 768px) {
  .aiFeatureNewBiz_item {
    width: 100%;
    height: 80px;
    font-size: 1.4rem;
    text-align: left;
    justify-content: flex-start;
    padding: 16px;
  }
}
.aiFeatureNewBiz_contactArea {
  padding: 48px 32px;
}
.aiFeatureNewBiz_mailFormArea {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  gap: 32px;
}
@media screen and (max-width: 768px) {
  .aiFeatureNewBiz_mailFormArea {
    padding: 0;
  }
}
.aiFeatureNewBiz_mailFormArea-txt {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
}

.contactArea {
  background: linear-gradient(#1e8678, #00c6ab);
  padding: 80px 24px;
  position: relative;
}
.contactArea::before {
  content: "";
  position: absolute;
  background-image: url("/2024/07/digital-image-pc.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  z-index: 0;
  width: 876px;
  height: 876px;
}
@media screen and (max-width: 768px) {
  .contactArea::before {
    background-image: url("/2024/07/digital-image-sp.svg");
  }
}
.contactArea_container {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1312px;
  border-radius: 4px;
  padding: 48px 32px 48px 32px;
  background-color: #fff;
  z-index: 1;
}
@media screen and (max-width: 1000px) {
  .contactArea_container {
    width: 100%;
  }
}
.contactArea_inner {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 768px) {
  .contactArea_inner {
    flex-direction: column;
  }
}
.contactArea_mailFormArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 65%;
  padding: 0 24px;
  gap: 32px;
  border-right: 1px solid #cfcfcf;
}
@media screen and (max-width: 768px) {
  .contactArea_mailFormArea {
    border-right: none;
    border-bottom: 1px solid #00c6ab;
    padding: 0 0 32px;
    width: 100%;
  }
}
.contactArea_mailFormArea-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
}
.contactArea_mailFormArea-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00c6ab;
  padding: 16px 32px;
  width: 424px;
  height: 100px;
  border-radius: 4px;
  transition: 0.3s;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff !important;
}
.contactArea_mailFormArea-btn:hover {
  background-color: #00af97;
}
@media screen and (max-width: 1000px) {
  .contactArea_mailFormArea-btn {
    width: 100%;
  }
}
.contactArea_downloadFormArea {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 0 24px;
}
@media screen and (max-width: 1000px) {
  .contactArea_downloadFormArea {
    padding: 32px 0;
    width: 100%;
  }
}
.contactArea_dlForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px;
}
@media screen and (max-width: 768px) {
  .contactArea_dlForm {
    padding: 0;
  }
}
.contactArea_dlForm-textArea {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contactArea_dlForm-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}
.contactArea_dlForm-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.contactArea_dlForm-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00c6ab;
  padding: 16px 32px;
  width: 424px;
  height: 78px;
  border-radius: 4px;
  transition: 0.3s;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff !important;
}
@media screen and (max-width: 1000px) {
  .contactArea_dlForm-btn {
    width: 100%;
  }
}
.contactArea_dlForm-btn:hover {
  background-color: #00af97;
}
.contactArea_dlForm-btn.sub-color {
  background-color: #ff346b;
}
.contactArea_dlForm-btn.sub-color:hover {
  background-color: #dd2d5d;
}

a.aiFeatureNewBiz_service {
  transition: 0.3s;
}
a.aiFeatureNewBiz_service:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
a.aiFeatureNewBiz_service:hover .aiFeatureNewBiz_service-btnText {
  opacity: 0.6;
}
a.aiFeatureNewBiz_service:hover .aiFeatureNewBiz_service-btnArrow {
  transform: scale(1.1);
  border: 1px solid #fff;
}
a.aiFeatureNewBiz_service:hover .aiFeatureNewBiz_service-btnArrow::before {
  width: 94%;
  height: 94%;
}
a.aiFeatureNewBiz_service:hover .aiFeatureNewBiz_service-btnArrow span {
  color: #000;
}

/* 
 * mixin
 *
*/
.affPrivacy {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  line-height: 1.75;
  letter-spacing: 0.05px;
}
.affPrivacy__header--logo, .affPrivacy__header--contact-wrap {
  position: fixed;
  top: 3.2rem;
  z-index: 99;
}
.affPrivacy__header--logo {
  left: 3.2rem;
  width: 15rem;
  height: 4.5rem;
}
.affPrivacy__header--contact-wrap {
  right: 3.2rem;
}
@media screen and (max-width: 768px) {
  .affPrivacy__header--contact-wrap {
    display: none;
  }
}
.affPrivacy__header--contact {
  display: inline-grid;
  place-items: center;
  border-radius: 100vmax;
  border: 2px solid #474747;
  background-color: #474747;
  width: 16rem;
  height: 4rem;
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  font-weight: 700;
  color: #fff !important;
  transition: 0.3s;
}
.affPrivacy__header--contact:hover {
  background-color: #fff;
  color: #474747 !important;
}
.affPrivacy__footer {
  width: 100%;
  height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.affPrivacy__footer--inner {
  display: flex;
  width: 1000px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  padding: 24px;
}
.affPrivacy__footer--list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.6rem;
}
.affPrivacy__footer--list li a {
  display: inline-block;
  position: relative;
  background: linear-gradient(var(--main), var(--main)) 0 100%/0 1px no-repeat;
  font-size: 1.4rem;
  font-weight: 700;
}
.affPrivacy__footer--copyright {
  display: flex;
  justify-content: center;
  align-items: center;
}
.affPrivacy__footer--copyright .copyMark {
  font-size: 2.4rem;
}
.affPrivacy__footer--copyright .copyText {
  font-size: 1.4rem;
  font-weight: 700;
}
.affPrivacy__inner {
  display: inline-block;
  text-align: left;
  max-width: 1000px;
  padding: 80px 0 32px 0;
}
@media screen and (max-width: 768px) {
  .affPrivacy__inner {
    max-width: 100%;
    padding: 80px 24px 32px;
  }
}
.affPrivacy__inner h2 {
  font-size: 3.2rem;
  font-weight: 700;
  padding-bottom: 4.8rem;
}
.affPrivacy section {
  padding-bottom: 3.2rem;
}
.affPrivacy__lead {
  font-size: 1.4rem;
  font-weight: 300;
  padding-bottom: 2.4rem;
}
.affPrivacy__sectionTtl {
  font-size: 1.6rem;
  font-weight: 700;
  padding-bottom: 0.8rem;
}
.affPrivacy__description {
  font-size: 1.4rem;
  font-weight: 300;
  padding-bottom: 0.8rem;
}
.affPrivacy__descriptionInList {
  font-size: 1.4rem;
  font-weight: 300;
  text-indent: initial;
  padding-bottom: 1.6rem;
}
.affPrivacy__listNormal li {
  list-style-type: none !important;
  font-size: 14px;
  font-weight: 300;
}
.affPrivacy__listNormal li .affPrivacy__descriptionInList {
  margin-left: 1.4rem;
}
.affPrivacy__listNormalInList li {
  list-style-type: none !important;
  font-size: 14px;
  font-weight: 300;
}
.affPrivacy__listDecimal li {
  list-style-type: decimal;
  list-style-position: inside;
  padding: 4px 8px 4px 0;
  font-size: 1.4rem;
  font-weight: 300;
  margin-left: 1.4rem;
  text-indent: -1rem;
}
.affPrivacy__table {
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.affPrivacy__table dt {
  width: 30%;
  font-size: 1.4rem;
  font-weight: 300;
  padding: 8px 4px;
  box-sizing: border-box;
  border-bottom: 1px solid #dddddd;
}
@media screen and (max-width: 768px) {
  .affPrivacy__table dt {
    width: 35%;
    font-size: 1.2rem;
    height: 80px;
  }
}
.affPrivacy__table dd {
  width: 70%;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 8px 4px;
  box-sizing: border-box;
  border-bottom: 1px solid #dddddd;
}
@media screen and (max-width: 768px) {
  .affPrivacy__table dd {
    width: 65%;
    font-size: 1.2rem;
    height: 80px;
  }
}
.affPrivacy__signature {
  padding: 24px 0;
  text-align: right;
}
.affPrivacy__download {
  color: #000;
  text-decoration: underline;
}

/* 
 * mixin
 *
*/
.aiAppModeler_titleArea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .aiAppModeler_titleArea {
    padding: 24px;
  }
}
.aiAppModeler_titleArea .sectionTitle_En {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0.05rem;
  padding-bottom: 8px;
}
.aiAppModeler_titleArea .sectionTitle_Ja {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  letter-spacing: 0.05rem;
  padding-bottom: 48px;
}
@media screen and (max-width: 768px) {
  .aiAppModeler_titleArea .sectionTitle_Ja {
    font-size: 2.4rem;
    padding-bottom: 24px;
    line-height: 3.6rem;
  }
}

.padding-0 {
  padding-bottom: 0 !important;
}

.description {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0.05rem;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .description {
    padding: 0 24px;
  }
}

.border-right {
  border-right: 1px solid #b5b5b5;
}
@media screen and (max-width: 768px) {
  .border-right {
    border-right: none;
    border-bottom: 1px solid #b5b5b5;
  }
}

.center {
  justify-content: center;
  align-items: center;
}
.center :after {
  right: 35px;
}

.modal-overlay {
  z-index: 10;
}

.aiTop {
  background-color: #f4f4f4;
  background-image: url("/2024/07/ai-bg-dot.png");
  background-attachment: fixed;
  background-position: 100%;
  background-repeat: repeat;
}
.aiTop_container {
  display: flex;
  flex-direction: column;
  max-width: 1132px;
  width: 100%;
  margin: 0 auto;
  padding: 84px 20px;
  gap: 48px;
}
@media screen and (max-width: 768px) {
  .aiTop_container {
    padding: 32px 24px 24px;
    gap: 24px;
  }
}
.aiTop_titleArea {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 32px;
}
.aiTop_titleArea .subTitle {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 7.2rem;
  letter-spacing: 0.05rem;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .aiTop_titleArea .subTitle {
    font-size: 2.2rem;
    line-height: 3.3rem;
  }
}
.aiTop_topTitle {
  font-family: "Roboto", sans-serif;
  font-size: 12rem;
  font-weight: 600;
  line-height: normal;
  background: linear-gradient(90deg, #00c6ab, #00c6ab 33%, #8c00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 768px) {
  .aiTop_topTitle {
    font-size: 4rem;
  }
}
.aiTop_startTrialBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #7b00ff;
  padding: 24px 48px;
  width: 312px;
  height: 83px;
  border-radius: 100px;
  transition: 0.3s;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  color: #fff !important;
}
@media screen and (max-width: 768px) {
  .aiTop_startTrialBtn {
    width: 180px;
    height: 41px;
    font-size: 1.4rem;
    font-weight: 400;
    padding: 12px 16px;
  }
}
.aiTop_startTrialBtn:hover {
  background-color: #a856ff;
}

.navModelerWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.navModeler {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 8px 16px 8px 32px;
  background: #fff;
  border-radius: 100px;
  position: sticky;
  top: 130px;
  overflow: hidden;
  z-index: 299;
}
@media screen and (max-width: 768px) {
  .navModeler {
    display: none;
  }
}
.navModeler_inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.navModeler_ttl {
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.navModeler_btnWrapper {
  display: flex;
  flex-direction: row;
}
.navModeler_button {
  display: flex;
  min-width: 120px;
  padding: 4px 16px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  transition: 0.3s;
}
.navModeler_button:hover {
  background-color: #f8f8f8;
  border-radius: 100px;
  color: #00c6ab !important;
  font-weight: 500;
}
.navModeler_trialBtn {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: var(--Main-Color, #00c6ab);
  color: #fff !important;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  transition: 0.3s;
}
.navModeler_trialBtn:hover {
  background: #24d7bf;
}

.aiFunction {
  background-color: #f4f4f4;
  background-image: url("/2024/07/ai-bg-dot.png");
  background-attachment: fixed;
  background-position: 100%;
  background-repeat: repeat;
  overflow: hidden;
}
.aiFunction_container {
  display: flex;
  flex-direction: column;
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 20px;
}
@media screen and (max-width: 768px) {
  .aiFunction_container {
    padding: 0;
  }
}
.aiFunction_inner {
  display: flex;
  flex-direction: column;
  padding: 32px;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .aiFunction_inner {
    padding: 24px;
  }
}
.aiFunction_innerCard {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-radius: 16px;
  background-color: #fff;
  padding: 32px;
  gap: 24px;
}
@media screen and (max-width: 768px) {
  .aiFunction_innerCard {
    flex-direction: column;
  }
}
.aiFunction_innerCard .number {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #009f8a;
  width: 56px;
  height: 56px;
  border-radius: 4px;
}
.aiFunction_innerCard .number p {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  letter-spacing: 0.05rem;
  color: #fff !important;
}
.aiFunction_innerCard-titleArea {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 45%;
  border-radius: 20px;
  gap: 24px;
}
@media screen and (max-width: 768px) {
  .aiFunction_innerCard-titleArea {
    width: 100%;
  }
}
.aiFunction_innerCard-titleArea h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  letter-spacing: 0.05rem;
}
.aiFunction_innerCard-titleArea p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 2.7rem;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .aiFunction_innerCard-titleArea p {
    font-size: 1.6rem;
  }
}

.modelCase {
  padding: 80px 0;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .modelCase {
    padding: 24px 0 0;
  }
}
.modelCase_container {
  display: flex;
  flex-direction: column;
  max-width: 1056px;
  width: 100%;
  margin: 0 auto;
}
.modelCase .gray {
  background-color: #f3f3f3;
  padding: 32px;
}
.modelCase_titleArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding-bottom: 32px;
}
.modelCase_titleArea h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4.8rem;
  letter-spacing: 0.05rem;
  background: linear-gradient(90deg, #00c6ab, #00c6ab 33%, #8c00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 768px) {
  .modelCase_titleArea h3 {
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
}
.modelCase_titleArea h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.7rem;
  letter-spacing: 0.05rem;
}
.modelCase_titleArea p {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0.05rem;
  color: #009f8a;
}
.modelCase_inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .modelCase_inner {
    grid-template-columns: 1fr;
    padding-bottom: 24px;
  }
}
.modelCase_inner-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 16px 32px;
  gap: 22px;
}
.modelCase_inner-card h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 3.1rem;
  letter-spacing: 0.05rem;
}
.modelCase_inner-card p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0.05rem;
}
.modelCase_step-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 32px;
  border-radius: 16px 16px 0px 0px;
  background: #009f8a;
  position: relative;
}
@media screen and (max-width: 768px) {
  .modelCase_step-wrapper {
    gap: 16px;
  }
}
.modelCase_step-appModelerTtl {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  padding: 10px;
  border-radius: 4px;
  background: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04rem;
}
@media screen and (max-width: 768px) {
  .modelCase_step-appModelerTtl {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -120%);
  }
}
.modelCase_step-titleArea {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  justify-content: center;
  position: relative;
  width: auto;
}
@media screen and (max-width: 768px) {
  .modelCase_step-titleArea {
    margin-top: 56px;
  }
}
.modelCase_step-no {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 32px;
  height: 32px;
  padding: 16px;
  border-radius: 100px;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #009f8a !important;
}
.modelCase_step-ttl {
  color: #fff;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 3.6rem;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .modelCase_step-ttl {
    font-size: 1.8rem;
    line-height: 2.7rem;
    text-align: left;
  }
}
.modelCase_step-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 992px;
  padding: 32px;
  background-color: #f0f9f9;
  border: 3px solid #009f8a;
  border-radius: 0 0 16px 16px;
}
@media screen and (max-width: 768px) {
  .modelCase_step-row {
    flex-direction: column;
    width: 100%;
  }
}
.modelCase_step-rowCard {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 280px;
  height: 362px;
  padding: 24px 0px;
  background-color: #fff;
  border: 1px solid #009f8a;
  border-radius: 16px;
  overflow: visible;
  transition: 0.3s;
}
.modelCase_step-rowCard:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1607843137);
  outline: 6px solid #009f8a;
}
.modelCase_step-ttlArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  cursor: pointer;
  color: #000;
}
.modelCase_step-ttlArea h3 {
  padding: 16px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.7rem;
  letter-spacing: 0.09rem;
}
.modelCase_step-ttlArea p {
  padding: 16px;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.1rem;
  letter-spacing: 0.07rem;
}
.modelCase_step-document {
  display: flex;
  position: relative;
  padding: 8px 16px;
  gap: 8px;
  align-self: stretch;
}
.modelCase_step-document p {
  color: var(--Primary-Dark, #009f8a);
  font-family: "Noto Sans JP";
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.07rem;
}
@media screen and (max-width: 768px) {
  .modelCase_step-document p {
    font-size: 1.2rem;
  }
}
.modelCase_step-document :after {
  position: absolute;
  font-family: Material Symbols Outlined;
  content: "\e89e";
  font-size: 1.8rem;
  top: 50%;
  transform: translateY(-50%);
}
.modelCase_step-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 992px;
  padding: 24px;
  background-color: #f0f9f9;
  border: 3px solid #009f8a;
  border-radius: 0 0 16px 16px;
}
@media screen and (max-width: 768px) {
  .modelCase_step-column {
    width: 100%;
  }
}
.modelCase_step-columnCard {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  width: 928px;
  padding: 24px;
  background-color: #fff;
  border: 1px solid #009f8a;
  border-radius: 16px;
  transition: 0.3s;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .modelCase_step-columnCard {
    flex-direction: column;
    width: 100%;
    padding: 24px 16px;
  }
}
.modelCase_step-columnCard:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1607843137);
  outline: 6px solid #009f8a;
}
.modelCase_step-columnCard.no-hover:hover {
  box-shadow: none;
  outline: none;
  padding: 24px;
}
.modelCase_step-cardWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  flex: 1 0 0;
  align-self: stretch;
}
.modelCase_step-ttlArea2 {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  color: #000;
}
.modelCase_step-ttlArea2 h3 {
  padding: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.6rem;
  letter-spacing: 0.08rem;
}
@media screen and (max-width: 768px) {
  .modelCase_step-ttlArea2 h3 {
    font-size: 2rem;
    line-height: 3rem;
    letter-spacing: 0.05rem;
    padding: 16px 0;
  }
}
.modelCase_step-ttlArea2 p {
  padding: 16px;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.1rem;
  letter-spacing: 0.07rem;
}
@media screen and (max-width: 768px) {
  .modelCase_step-ttlArea2 p {
    padding: 16px 0;
  }
}
.modelCase_step-main {
  display: flex;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  .modelCase_step-main {
    padding: 0;
  }
}
.modelCase_step-mainContents {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 8px;
  border-radius: 8px;
  border: 8px solid #fafafa;
}
@media screen and (max-width: 768px) {
  .modelCase_step-mainContents {
    padding: 16px 8px;
  }
}
.modelCase_step-point {
  display: flex;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--Primary-Dark, #009f8a);
}
.modelCase_step-point p {
  color: #fff;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  letter-spacing: 0.7px;
}
.modelCase_step-contents {
  display: flex;
  padding: 8px 0px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  color: #000;
}
.modelCase_step-contents p {
  font-family: "Noto Sans JP";
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.1rem;
  letter-spacing: 0.07rem;
}
.modelCase_step-contents span {
  font-weight: 700;
}
.modelCase_step-WFCardList {
  display: grid;
  grid-template-columns: repeat(4, 208px);
  align-items: flex-start;
  align-content: flex-start;
  gap: 16px;
  align-self: stretch;
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  .modelCase_step-WFCardList {
    grid-template-columns: 1fr;
    align-content: center;
    justify-content: center;
    place-items: center;
  }
}
.modelCase_step-cardWF {
  display: flex;
  width: 208px;
  height: 230px;
  padding: 32px 24px;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .modelCase_step-cardWF {
    width: 100%;
  }
}
.modelCase_step-cardWF:hover {
  border-radius: 16px;
  outline: 2px solid var(--Primary-Dark, #009f8a);
  background: #fff;
}
.modelCase_step-cardWF p {
  color: var(--Primary-Dark, #009f8a);
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 21px */
  letter-spacing: 0.7px;
  text-decoration: underline;
}
.modelCase_step-cardWF img {
  width: auto;
}

.arrow, .arrow-right-green, .arrow-down-lg, .arrow-down-green, .arrow-down-blue {
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  align-self: center;
}

.arrow-down, .arrow-down-lg, .arrow-down-green, .arrow-down-blue {
  width: 164px;
  height: 61px;
}

.arrow-right, .arrow-right-green {
  width: 34px;
  height: 79px;
  margin: 0 8px;
}

.arrow-down-blue {
  background-image: url("/2025/02/app-modeler/arrow-down-blue.svg");
}

.arrow-down-green {
  background-image: url("/2025/02/app-modeler/arrow-down-green.svg");
}

.arrow-down-lg {
  background-image: url("/2025/02/app-modeler/arrow-down-lg.svg");
  margin: 10px 0;
}
@media screen and (max-width: 768px) {
  .arrow-down-lg {
    width: 100px;
    height: 37px;
  }
}

.arrow-right-green {
  background-image: url("/2025/02/app-modeler/arrow-right-lg.svg");
}

.timeAndCost {
  background-color: #f4f4f4;
  padding: 80px 0;
}
@media screen and (max-width: 768px) {
  .timeAndCost {
    padding: 24px 16px;
  }
}
.timeAndCost_container {
  display: flex;
  flex-direction: column;
  max-width: 1056px;
  width: 100%;
  margin: 0 auto;
  gap: 32px;
}
@media screen and (max-width: 768px) {
  .timeAndCost_container {
    gap: 0px;
  }
}
.timeAndCost_imageArea {
  display: flex;
  width: 1056px;
  height: 1236px;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
  background-color: #fff;
  border-radius: 16px;
}
@media screen and (max-width: 768px) {
  .timeAndCost_imageArea {
    width: 100%;
    height: 100%;
    padding: 24px;
    margin-top: 32px;
    gap: 32px;
  }
}
.timeAndCost_image {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 24px;
}
.timeAndCost .title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 776px;
  padding: 10px;
  gap: 10px;
  background-color: #009f8a;
}
@media screen and (max-width: 768px) {
  .timeAndCost .title {
    width: 100%;
  }
}
.timeAndCost .title h3 {
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4.8rem;
  letter-spacing: 0.05rem;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .timeAndCost .title h3 {
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
}
.timeAndCost_txtArea {
  display: flex;
  padding: 0px 32px;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
.timeAndCost_txtArea p {
  color: #000;
  text-align: right;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .timeAndCost_txtArea p {
    font-size: 1.2rem;
  }
}

.howItWorks {
  background-color: #fff;
  padding: 80px 0;
}
@media screen and (max-width: 768px) {
  .howItWorks {
    padding: 24px 0;
  }
}
.howItWorks_container {
  display: flex;
  flex-direction: column;
  max-width: 1056px;
  width: 100%;
  margin: 0 auto;
  gap: 32px;
}

.baas {
  background-color: #e5f5f1;
  padding: 80px 0;
}
@media screen and (max-width: 768px) {
  .baas {
    padding: 24px;
  }
}
.baas_container {
  display: flex;
  flex-direction: column;
  max-width: 1056px;
  width: 100%;
  margin: 0 auto;
  gap: 32px;
}
.baas_ttlArea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  color: var(--Primary-Foreground-Dark, #006e5f);
}
.baas_ttlArea p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.08rem;
}
.baas_ttlArea h2 {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 4.8rem;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 768px) {
  .baas_ttlArea h2 {
    font-size: 1.8rem;
    line-height: 2.7rem;
  }
}
.baas_description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  padding-bottom: 8px;
  align-self: stretch;
  text-align: left;
}
.baas_description p {
  color: var(--Primary-Foreground-Dark, #006e5f);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.08rem;
}
.baas_inner {
  display: flex;
  flex-direction: row;
  width: 1056px;
  align-items: center;
  gap: 16px;
}
@media screen and (max-width: 768px) {
  .baas_inner {
    flex-direction: column;
    width: 100%;
  }
}
.baas_inner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 16px;
  background: #009f8a;
  text-align: left;
}
.baas_inner-card h3 {
  color: #fff;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.7rem;
  letter-spacing: 0.09rem;
}
.baas_inner-card p {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.1rem;
  letter-spacing: 0.07rem;
}

.aiContactArea {
  background: linear-gradient(90deg, #00c6ab, #00c6ab 33%, #8c00ff);
  padding: 80px 0;
}
@media screen and (max-width: 768px) {
  .aiContactArea {
    padding: 24px;
    flex-direction: row;
  }
}
.aiContactArea_container {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border-radius: 4px;
  max-width: 1312px;
  width: 100%;
  margin: 0 auto;
  padding: 48px 32px;
  gap: 48px;
}
@media screen and (max-width: 768px) {
  .aiContactArea_container {
    padding: 0px;
  }
}
.aiContactArea_inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  align-items: center;
  align-self: stretch;
}
@media screen and (max-width: 900px) {
  .aiContactArea_inner {
    grid-template-columns: 1fr;
    padding: 30px 20px;
  }
}
@media screen and (max-width: 768px) {
  .aiContactArea_inner {
    gap: 24px;
    width: 100%;
  }
}
.aiContactArea_mailFormArea {
  display: flex;
  padding: 0px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  .aiContactArea_mailFormArea {
    padding: 0 24px 24px;
    gap: 24px;
    text-align: left;
    align-items: flex-start;
  }
}
.aiContactArea_mailFormArea-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 2.5rem;
  letter-spacing: 0.05rem;
}
.aiContactArea_mailFormArea-subTitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: 0.05rem;
  text-align: left;
}
.aiContactArea_mailFormArea-contactUsBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 424px;
  height: 100px;
  padding: 16px 32px;
  border-radius: 4px;
  background-color: #00c6ab;
  color: #fff !important;
  font-family: "Noto Sans JP";
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 0.05rem;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .aiContactArea_mailFormArea-contactUsBtn {
    width: 100%;
    height: 62px;
    align-self: stretch;
    font-size: 1.6rem;
    font-weight: 400;
  }
}
.aiContactArea_mailFormArea-contactUsBtn:hover {
  background-color: #01a58f;
}
.aiContactArea_mailFormArea-startTrialBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 48px;
  width: 312px;
  height: 83px;
  border-radius: 100px;
  background-color: #7b00ff;
  color: #fff !important;
  font-family: "Noto Sans JP";
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 0.05rem;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .aiContactArea_mailFormArea-startTrialBtn {
    width: 100%;
    height: 62px;
    align-self: stretch;
    font-size: 1.6rem;
    font-weight: 400;
  }
}
.aiContactArea_mailFormArea-startTrialBtn:hover {
  background-color: #a856ff;
}

.solveIssues {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 0px;
  gap: 32px;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .solveIssues {
    padding: 24px;
  }
}
.solveIssues_container {
  display: flex;
  flex-direction: column;
  max-width: 1056px;
  width: 100%;
  margin: 0 auto;
  gap: 32px;
}
@media screen and (max-width: 768px) {
  .solveIssues_container {
    gap: 0;
  }
}

.tabSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
@media screen and (max-width: 768px) {
  .tabSection {
    padding-top: 32px;
  }
}

.tabs {
  display: flex;
  width: 1056px;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .tabs {
    width: 100%;
    display: flex;
    align-items: center;
    align-self: stretch;
    overflow-x: scroll;
  }
}

.tab {
  display: flex;
  min-width: 140px;
  padding: 10px;
  justify-content: center;
  gap: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.7rem;
  letter-spacing: 0.9px;
  transition: 0.3s;
  cursor: pointer;
  color: #727272;
}
@media screen and (max-width: 768px) {
  .tab {
    flex: 1;
    font-size: 1.2rem;
    margin-bottom: 5px;
    min-width: 100px;
  }
}
.tab.active {
  border-bottom: 2px solid #009f8a;
  color: #009f8a !important;
}

.tabContents_container {
  display: flex;
  flex-direction: row;
  width: 1056px;
  border-width: 1px;
  padding: 24px;
  border: 1px solid #dbdbdb;
}
@media screen and (max-width: 768px) {
  .tabContents_container {
    width: 100%;
    flex-direction: column;
    padding: 0;
  }
}
.tabContents_containerTab2 {
  display: flex;
  flex-direction: row;
  width: 1056px;
  border-width: 1px;
  padding: 24px;
  border: 1px solid #dbdbdb;
  gap: 32px;
}
@media screen and (max-width: 768px) {
  .tabContents_containerTab2 {
    width: 100%;
    flex-direction: column;
    padding: 0;
    gap: 0;
  }
}
.tabContents_mainArea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
}
.tabContents_subTitle {
  display: flex;
  padding: 0px 24px;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.4rem;
  letter-spacing: 0.08rem;
  color: #009f8a;
}
@media screen and (max-width: 768px) {
  .tabContents_subTitle {
    padding: 24px 24px 0;
  }
}
.tabContents_title {
  padding: 16px 24px;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 3.6rem;
  letter-spacing: 0.08rem;
}
@media screen and (max-width: 768px) {
  .tabContents_title {
    font-size: 1.8rem;
  }
}
.tabContents_description {
  padding: 16px 24px;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.08rem;
}
.tabContents_list {
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0.08rem;
  font-weight: 700;
}
.tabContents_list-txt {
  display: flex;
  padding: 8px 16px;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  border-radius: 2px;
  background-color: #009f8a;
  color: #fff !important;
}
.tabContents_listBox {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 8px;
  background-color: #e5f5f1;
}
.tabContents_listBox-txt {
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.4rem;
  letter-spacing: 0.08rem;
}
.tabContents_listBox-txt span {
  font-weight: 700;
}
.tabContents_listBox-txt.bold {
  font-weight: 700;
}
.tabContents_imgArea {
  display: flex;
  width: 400px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
}
@media screen and (max-width: 768px) {
  .tabContents_imgArea {
    width: 100%;
    padding: 24px;
  }
}

.sidebar {
  background-color: #2c3e50;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.sidebar-logo {
  font-size: 1.2rem;
  color: #ecf0f1;
  font-weight: bold;
  margin-bottom: 2rem;
  text-align: center;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav-list li a {
  text-decoration: none;
  padding: 0.75rem 1rem;
  display: block;
  color: #ecf0f1;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav-list li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 
 * mixin HEADER
 *
*/
.header {
  grid-area: header;
  background-color: var(--card-bg-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.header .user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header .user-info img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.header .user-info .username {
  font-weight: 500;
  color: var(--text-color);
}

/* 
 * mixin
 *
*/
.modelerModal {
  display: flex;
  flex-direction: row;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1180px;
  border-radius: 8px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 299;
  height: 50vh;
  max-height: none;
  overflow-y: auto;
  background: #fff;
}
.modelerModal_main {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 2.4rem;
  letter-spacing: 0.05rem;
  background-color: white;
  padding: 32px;
  width: 100%;
  max-width: 980px;
  height: 100%;
}

/* 
 * mixin
 *
*/
.loginModal_main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #f4f6f8;
}

.loginModal_container {
  background-color: var(--card-bg-color);
  width: 100%;
  max-width: 360px;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: fadeIn 0.4s ease-in-out;
}

.login-title {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.input-group {
  display: flex;
  flex-direction: column;
}

.input-group label {
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: #333333;
}

.input-group input {
  padding: 0.75rem;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s ease-in-out;
}

.input-group input:focus {
  outline: none;
  border-color: var(--input-focus-border-color);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.action-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-login {
  background-color: var(--btn-bg-color);
  color: var(--btn-text-color);
  border: none;
  font-size: 1rem;
  border-radius: 4px;
  padding: 0.75rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.btn-login:hover {
  background-color: #357ab8;
}

.link-area {
  text-align: center;
}

.link-area a {
  font-size: 0.9rem;
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.link-area a:hover {
  color: #357ab8;
  text-decoration: underline;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (max-width: 480px) {
  .login-container {
    width: 90%;
    padding: 1.5rem;
  }
}
/* 
 * mixin
 *
*/
:root {
  --main-bg-color: #f4f6f8;
  --card-bg-color: #ffffff;
  --accent-color: #4a90e2;
  --highlight-color: #fcaf45;
  --text-color: #333333;
  --text-light: #777777;
  --border-color: #dfe3e8;
  --btn-bg-color: #4a90e2;
  --btn-text-color: #ffffff;
  --input-border-color: #dce0e7;
  --input-focus-border-color: #4a90e2;
  --primary-color: #4a90e2;
  --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  background-color: var(--main-bg-color);
  color: var(--text-color);
  height: 100%;
}

.page-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.card-header {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-subtitle {
  font-size: 0.85rem;
  color: var(--text-light);
}

.card-content {
  font-size: 1rem;
  color: var(--text-color);
}

.highlight {
  color: var(--accent-color);
  font-weight: 600;
}

/* カンバン風タスクリストや進捗ウィジェットの例 */
.kanban {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kanban-item {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.75rem;
  background-color: #f8fafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s;
}

.kanban-item:hover {
  background-color: #f0f4f8;
}

.status-tag {
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-size: 0.75rem;
  color: #fff;
}

.status-tag.in-progress {
  background-color: var(--accent-color);
}

.status-tag.pending {
  background-color: var(--highlight-color);
}

.status-tag.done {
  background-color: #5cb85c;
}

/* テーブル例（リアルタイム作業状況など） */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  font-size: 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem;
}

.data-table th {
  background-color: #f2f4f7;
}

.data-table tr:hover td {
  background-color: #fafbfc;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .sidebar-logo {
    display: none;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
}
/* 
 * mixin
 *
*/
.project-list-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

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

.project-list-header .actions {
  display: flex;
  gap: 1rem;
}

.project-list-header button {
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.project-list-header button:hover {
  background-color: #357ab8;
}

.filter-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.filter-group label {
  font-size: 0.9rem;
}

.filter-group select {
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
}

/* テーブル */
.project-table {
  width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
}

.project-table th,
.project-table td {
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem;
  font-size: 0.9rem;
  vertical-align: middle;
}

.project-table th {
  background-color: #f2f4f7;
}

.project-table tr:hover td {
  background-color: #fafbfc;
  cursor: default;
}

.status-tag {
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  color: #ffffff;
}

.status-tag.in-progress {
  background-color: var(--accent-color);
}

.status-tag.pending {
  background-color: var(--highlight-color);
}

.status-tag.closed {
  background-color: #999999;
}

.project-actions {
  display: flex;
  gap: 0.5rem;
}

.project-actions a {
  color: var(--accent-color);
  text-decoration: none;
  font-size: 0.8rem;
  border: 1px solid var(--accent-color);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  transition: background-color 0.2s ease;
}

.project-actions a:hover {
  background-color: var(--accent-color);
  color: #ffffff;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .sidebar-logo {
    display: none;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .page-title {
    font-size: 1.1rem;
  }
  .project-table th,
  .project-table td {
    font-size: 0.85rem;
  }
  .filter-group label {
    font-size: 0.8rem;
  }
}
/* 
 * mixin
 *
*/
.project-detail-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 上段: プロジェクトの概要 */
.project-overview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.project-name {
  font-size: 1.1rem;
  font-weight: 600;
}

.status-tag {
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  color: #fff;
}

.status-tag.in-progress {
  background-color: var(--accent-color);
}

.status-tag.pending {
  background-color: var(--highlight-color);
}

.status-tag.done {
  background-color: #999999;
}

.overview-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  font-size: 0.9rem;
}

.overview-details span {
  display: inline-block;
  margin-right: 0.25rem;
  color: var(--text-light);
}

/* 中段: エンジニアアサイン一覧 */
.assign-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.assign-section h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.assign-table {
  width: 100%;
  border-collapse: collapse;
}

.assign-table th,
.assign-table td {
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem;
  font-size: 0.9rem;
  vertical-align: middle;
}

.assign-table th {
  background-color: #f2f4f7;
}

.assign-table tr:hover td {
  background-color: #fafbfc;
}

/* 下段: タスクや進捗情報 */
.task-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-section h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.task-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.task-card {
  background-color: #f9fafc;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.75rem;
  transition: background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.task-card:hover {
  background-color: #f0f4f8;
}

.task-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.task-meta {
  font-size: 0.8rem;
  color: var(--text-light);
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .sidebar-logo {
    display: none;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .page-title {
    font-size: 1.1rem;
  }
  .overview-details {
    grid-template-columns: 1fr 1fr;
  }
  .assign-table th,
  .assign-table td {
    font-size: 0.85rem;
  }
}
/* 
 * mixin
 *
*/
.form-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
}

.form-group input[type=text],
.form-group input[type=date],
.form-group input[type=number],
.form-group select,
.form-group textarea {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.action-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.action-buttons button {
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.action-buttons button:hover {
  background-color: #357ab8;
}

.action-buttons .btn-cancel {
  background-color: #999999;
}

.action-buttons .btn-cancel:hover {
  background-color: #777777;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .form-container {
    max-width: 100%;
  }
}
/* 
 * mixin
 *
*/
.assign-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 700px;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
}

.form-group select,
.form-group input[type=number] {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}

.form-group select:focus,
.form-group input[type=number]:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.member-list-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.member-search {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.member-search input[type=text] {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  width: 200px;
}

.member-list {
  background-color: #f9fafc;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.member-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.member-item:hover {
  background-color: #f0f4f8;
}

.role-select {
  margin-left: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.actions button {
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.actions button:hover {
  background-color: #357ab8;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .assign-container {
    max-width: 100%;
  }
}
/* 
 * mixin
 *
*/
.overview-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.summary-card {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.summary-card .title {
  font-weight: 600;
  font-size: 0.9rem;
}

.summary-card .value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent-color);
}

.task-board {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.task-board-header .filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.task-board-header select {
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.task-board-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

.task-item {
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.75rem;
  background-color: #f9fafc;
  transition: background-color 0.2s;
}

.task-item:hover {
  background-color: #f0f4f8;
}

.task-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.task-info .engineer-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
}

.task-info .project-name {
  font-size: 0.8rem;
  color: var(--text-light);
}

.task-status {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.task-time {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-color);
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .task-board-list {
    grid-template-columns: 1fr;
  }
}
/* 
 * mixin
 *
*/
.timecard-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
}

.status-display {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.btn-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-group button {
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.btn-group button:hover {
  background-color: #357ab8;
}

.history-list {
  background-color: #f9fafc;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.history-item:hover {
  background-color: #f0f4f8;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .timecard-container {
    max-width: 100%;
  }
}
/* 
 * mixin
 *
*/
.approval-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 800px;
}

.request-list {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: #f9fafc;
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.request-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.75rem;
  background-color: #ffffff;
  transition: background-color 0.2s;
}

.request-item:hover {
  background-color: #f0f4f8;
}

.request-item .info {
  font-size: 0.9rem;
  color: var(--text-color);
}

.req-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.req-actions button {
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 0.8rem;
}

.req-actions .approve-btn {
  background-color: var(--accent-color);
  color: #ffffff;
}

.req-actions .approve-btn:hover {
  background-color: #357ab8;
}

.req-actions .reject-btn {
  background-color: #999999;
  color: #ffffff;
}

.req-actions .reject-btn:hover {
  background-color: #777777;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .approval-container {
    max-width: 100%;
  }
}
/* 
 * mixin
 *
*/
.report-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.filter-section {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-section label {
  font-size: 0.9rem;
  margin-right: 0.3rem;
}

.filter-section select,
.filter-section input[type=month] {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem;
  font-size: 0.9rem;
  vertical-align: middle;
  text-align: left;
}

.report-table th {
  background-color: #f2f4f7;
}

.report-table tr:hover td {
  background-color: #fafbfc;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: flex-end;
}

.action-buttons button {
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.action-buttons button:hover {
  background-color: #357ab8;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .report-container {
    padding: 1rem;
  }
  .report-table th,
  .report-table td {
    font-size: 0.8rem;
  }
}
/* 
 * mixin
 *
*/
.role-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.role-list {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: #f9fafc;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}

.role-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  transition: background-color 0.2s;
}

.role-item:hover {
  background-color: #f0f4f8;
}

.role-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.role-actions {
  display: flex;
  gap: 0.5rem;
}

.role-actions button {
  border: none;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  cursor: pointer;
  color: #ffffff;
}

.edit-btn {
  background-color: var(--accent-color);
}

.edit-btn:hover {
  background-color: #357ab8;
}

.delete-btn {
  background-color: #999999;
}

.delete-btn:hover {
  background-color: #777777;
}

.permissions-table {
  width: 100%;
  border-collapse: collapse;
}

.permissions-table th,
.permissions-table td {
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem;
  font-size: 0.9rem;
  vertical-align: middle;
  text-align: left;
}

.permissions-table th {
  background-color: #f2f4f7;
}

.permissions-table tr:hover td {
  background-color: #fafbfc;
}

.new-role {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.new-role input[type=text] {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.9rem;
}

.new-role button {
  background-color: var(--accent-color);
  border: none;
  color: #ffffff;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.new-role button:hover {
  background-color: #357ab8;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
}
/* 
 * mixin
 *
*/
.charts-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.chart-box {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  flex: 1 1 300px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chart-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ------------ 1) バーチャートの疑似表現 ------------ */
.bar-chart {
  background-color: #f9fafc;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bar-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bar-label {
  width: 60px;
  font-size: 0.8rem;
  color: var(--text-light);
  text-align: right;
}

.bar-track {
  flex: 1;
  background-color: #eaecef;
  border-radius: 4px;
  height: 8px;
  position: relative;
}

.bar-fill {
  background-color: var(--accent-color);
  border-radius: 4px;
  height: 100%;
  width: 0%; /* JavaScriptなどで動的に変更想定 */
}

/* ------------ 2) 円グラフの疑似表現 ------------ */
.pie-chart {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--accent-color) 0deg 234deg, var(--highlight-color) 234deg 324deg, #999999 324deg 360deg);
  /* 65%, 25%, 10% => 合計100% */
}

.pie-info {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-light);
  text-align: center;
}

/* ------------ 3) ガントチャートの疑似表現 ------------ */
.gantt-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: #f9fafc;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1rem;
}

.gantt-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  position: relative;
}

.task-label {
  width: 80px;
  font-size: 0.8rem;
  color: var(--text-light);
  text-align: right;
  margin-right: 0.5rem;
}

.gantt-track {
  flex: 1;
  background-color: #eaecef;
  border-radius: 4px;
  height: 12px;
  position: relative;
}

.gantt-bar {
  background-color: var(--accent-color);
  border-radius: 4px;
  height: 100%;
  width: 0%; /* JavaScriptなどで動的に調整 */
  position: absolute;
  left: 0;
  top: 0;
}

/* 整体レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .charts-container {
    flex-direction: column;
  }
}
/* 
 * mixin
 *
*/
.poc-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.poc-card {
  background-color: #f9fafc;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background-color 0.2s;
}

.poc-card:hover {
  background-color: #f0f4f8;
}

.poc-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.3rem;
}

.poc-info {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.4;
}

.poc-badge {
  display: inline-block;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #fff;
  padding: 0.25rem 0.5rem;
  margin-top: 0.3rem;
  width: fit-content;
}

/* 状態別 */
.poc-badge.done {
  background-color: #999999;
}

.poc-badge.in-progress {
  background-color: var(--accent-color);
}

.poc-badge.hold {
  background-color: var(--highlight-color);
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .poc-grid {
    grid-template-columns: 1fr;
  }
}
/* 
 * mixin
 *
*/
.settings-container {
  background-color: var(--card-bg-color);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.section-content label {
  font-size: 0.9rem;
  color: var(--text-color);
}

.section-content input[type=text],
.section-content input[type=number] {
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
}

.section-content input[type=text]:focus,
.section-content input[type=number]:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.section-content select {
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1rem;
}

.action-buttons button {
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.action-buttons button:hover {
  background-color: #357ab8;
}

.action-buttons .btn-cancel {
  background-color: #999999;
}

.action-buttons .btn-cancel:hover {
  background-color: #777777;
}

/* レスポンシブ */
@media screen and (max-width: 768px) {
  .layout {
    grid-template-columns: 60px 1fr;
  }
  .sidebar {
    width: 60px;
    padding: 1rem 0.5rem;
  }
  .nav-list li a {
    font-size: 0.8rem;
  }
  .settings-container {
    padding: 1rem;
  }
}
.basicPlan {
  background: #f8f9fa;
  padding: 80px 0;
}
.basicPlan_container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.basicPlan_header {
  text-align: center;
  margin-bottom: 32px;
}
.basicPlan_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.6px;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.basicPlan_subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #666;
}
.basicPlan_courses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1200px;
}
@media (max-width: 1280px) {
  .basicPlan_courses {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .basicPlan_courses {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.basicPlan_card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.basicPlan_card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
}
.basicPlan_card--featured {
  border: 2px solid #00c6ab;
  box-shadow: 0px 8px 24px rgba(0, 198, 171, 0.15);
}
.basicPlan_card--featured::before {
  content: "おすすめ";
  position: absolute;
  top: 12px;
  right: -28px;
  background: #00c6ab;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 32px;
  transform: rotate(45deg);
  z-index: 1;
  overflow: hidden;
}
.basicPlan_card_header {
  background: #f8f9fa;
  padding: 20px 24px;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.basicPlan_card_planName {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #1a1a1a;
  margin-bottom: 8px;
  white-space: pre-line;
  text-align: center;
}
.basicPlan_card_price {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #00c6ab;
  line-height: 1.2;
  margin-bottom: 4px;
}
.basicPlan_card_discount {
  background: #fff3cd;
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
  margin-top: 4px;
}
.basicPlan_card_discount p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #856404;
  margin: 0;
  line-height: 1.4;
}
.basicPlan_card_deliverable {
  background: #e3f2fd;
  border-radius: 4px;
  padding: 4px 8px;
  display: inline-block;
  margin-top: 4px;
  margin-left: 8px;
}
.basicPlan_card_deliverable p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #1565c0;
  margin: 0;
  line-height: 1.4;
}
.basicPlan_card_body {
  padding: 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.basicPlan_card_item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}
.basicPlan_card_item:last-of-type {
  padding-bottom: 0;
}
.basicPlan_card_label {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  letter-spacing: 0.5px;
  margin: 0;
  text-align: left;
}
.basicPlan_card_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
  margin: 0;
  text-align: left;
}
.basicPlan_card_text--bold {
  font-weight: 700;
}
.basicPlan_card_duration {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0;
  text-align: left;
}
.basicPlan_card_content {
  background: #f8f9fa;
  padding: 20px;
  border-top: 1px solid #e5e5e5;
  margin: 0 -1px -1px -1px;
  border-radius: 0 0 12px 12px;
  min-height: 240px;
  display: flex;
  align-items: flex-start;
  margin-top: auto;
}
.basicPlan_card_contentText {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #666;
  margin: 0;
  text-align: left;
}
.basicPlan_card_subtitle {
  font-size: 14px;
  font-weight: 400;
}
.basicPlan_card_text--description {
  margin-bottom: 16px;
}
.basicPlan_card_featureList {
  list-style: none;
  padding: 0;
  margin: 0;
}
.basicPlan_card_featureItem {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
}
.basicPlan_card_featureIcon {
  color: #00c6ab;
  margin-right: 8px;
  flex-shrink: 0;
}
.basicPlan_card_footer {
  padding: 20px;
  text-align: center;
  margin-top: auto;
}
.basicPlan_card_cta {
  display: inline-block;
  padding: 12px 30px;
  background-color: #f8f8f8;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
.basicPlan_card_cta:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}
.basicPlan_card_cta--primary {
  background-color: #00c6ab;
  color: white;
  border: none;
}
.basicPlan_card_cta--primary:hover {
  background-color: #00a892;
}
.basicPlan_card_cta--disabled {
  background-color: #f0f0f0;
  color: #999;
  cursor: not-allowed;
}
.basicPlan_card_cta--disabled:hover {
  transform: none;
  background-color: #f0f0f0;
}
.basicPlan_courses--single {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.basicPlan_courses--spaced {
  margin-top: 48px;
}

@media (max-width: 768px) {
  .basicPlan {
    padding: 48px 0;
  }
  .basicPlan_container {
    padding: 0 16px;
  }
  .basicPlan_header {
    margin-bottom: 24px;
  }
  .basicPlan_title {
    font-size: 24px;
  }
}
.topSection {
  position: relative;
  padding: 160px 0 240px;
  background: linear-gradient(106deg, #007f6a 0%, #00cfab 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  overflow: hidden;
}
.topSection__nav {
  display: flex;
  padding: 8px 16px 8px 32px;
  align-items: center;
  gap: var(--Spacing-md, 8px);
  border-radius: 100px;
  background: #fff;
  top: 130px;
  position: fixed;
  overflow: hidden;
  z-index: 299;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.16);
}
.topSection__nav-main {
  display: flex;
  height: 41px;
  align-items: center;
}
.topSection__nav-separator {
  width: 1px;
  height: 34px;
  background-color: #999999;
}
.topSection__nav-cta {
  display: flex;
  height: 41px;
  align-items: center;
}
.topSection__nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border-radius: 2px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.6px;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s;
}
.topSection__nav-item:hover {
  color: #00c6ab;
}
.topSection__nav-item--active {
  color: #00c6ab !important;
}
.topSection__content {
  max-width: 1134px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 68px;
  padding-top: 28px;
}
.topSection__text-area {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.topSection__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}
.topSection__subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: bold;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}
.topSection__description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}
.topSection__laptop-image {
  position: absolute;
  top: 539px;
  width: 672.794px;
  height: 375px;
  background-image: url("/2025/07/laptop-code-img.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.topSection__deco-block-1 {
  position: absolute;
  right: -190px;
  top: 492px;
  width: 379.535px;
  height: 319.531px;
  background-image: url("/2025/07/ai-deco-block-a.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(381.073deg);
  opacity: 0.4;
  z-index: 0;
}
.topSection__deco-block-2 {
  position: absolute;
  left: -190px;
  top: -126px;
  width: 379.535px;
  height: 319.531px;
  background-image: url("/2025/07/ai-deco-block-a.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(200.846deg);
  opacity: 0.4;
  z-index: 0;
}
@media (max-width: 1200px) {
  .topSection {
    padding: 160px 0 180px;
  }
  .topSection__laptop-image {
    width: 500px;
    height: 280px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
}
@media (max-width: 768px) {
  .topSection {
    padding: 60px 0 140px;
  }
  .topSection__nav {
    flex-direction: column;
    border-radius: 16px;
    padding: 16px;
    width: calc(100% - 32px);
    margin: 0 16px;
  }
  .topSection__nav-main, .topSection__nav-cta {
    flex-wrap: wrap;
    height: auto;
    justify-content: center;
  }
  .topSection__nav-separator {
    display: none;
  }
  .topSection__content {
    padding: 0 16px;
    z-index: 1;
  }
  .topSection__title {
    font-size: 16px;
  }
  .topSection__subtitle {
    font-size: 30px;
  }
  .topSection__description {
    font-size: 14px;
  }
  .topSection__buttons {
    flex-direction: column;
  }
  .topSection__laptop-image {
    width: 342px;
    background-image: url("/2025/07/laptop-code-sp.png");
    height: 200px;
    left: 50%;
    top: 459px;
  }
  .topSection__deco-block-1 {
    right: -230px;
    top: 316px;
    width: 315px;
    height: 265px;
    transform: rotate(381.073deg);
    background-image: url("/2025/07/ai-deco-block-1-sp.svg");
  }
  .topSection__deco-block-2 {
    left: -220px;
    top: -96px;
    width: 379.535px;
    height: 319.531px;
    transform: rotate(200.846deg);
    opacity: 0.4;
  }
}

.targetSection {
  padding: 64px 0;
  background-color: #ffffff;
}
.targetSection__container {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
}
.targetSection__intro {
  display: flex;
  gap: 48px;
  padding: 48px 0 80px;
}
.targetSection__heading {
  width: 508px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.targetSection__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
  color: #121212;
  margin: 0;
}
.targetSection__description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #666666;
  margin: 0;
  font-feature-settings: "palt";
}
.targetSection__highlight {
  color: #00c6ab;
}
.targetSection__targets {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 896px;
  text-align: left;
}
.targetSection__target-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.targetSection__target-header img {
  width: 32px;
  height: 32px;
  padding: 4px;
}
.targetSection__target-header-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #1a1a1a;
  margin: 0;
}
.targetSection__target-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.targetSection__target-card {
  padding: 8px 24px;
}
.targetSection__target-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.targetSection__target-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.9px;
  color: #1a1a1a;
  margin: 0;
}
.targetSection__target-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.7px;
  color: #1a1a1a;
  margin: 0;
  z-index: 1;
}
.targetSection__skills {
  padding: 80px 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  gap: 64px;
}
.targetSection__skills-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 1.2px;
  color: #1a1a1a;
  text-align: center;
  margin: 0;
  z-index: 1;
}
.targetSection__skills-grid {
  display: flex;
  gap: 24px;
  width: 100%;
}
.targetSection__skill-card {
  flex: 1;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 1;
}
.targetSection__skill-icon {
  width: 40px;
  height: 40px;
  background-color: #e6f7f5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.targetSection__skill-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #1a1a1a;
  margin: 0;
  height: 24px;
}
.targetSection__skill-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.7px;
  color: #1a1a1a;
  margin: 0;
  height: 60px;
}
.targetSection__skills-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.9px;
  color: #1a1a1a;
  text-align: center;
  margin: 0;
}
.targetSection__deco-line2 {
  position: absolute;
  left: 0;
  top: 19%;
  width: 320px;
  height: 423px;
  background-image: url("/2025/07/ai-deco-line-round.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(0.321deg);
  z-index: 0;
}
@media screen and (max-width: 768px) {
  .targetSection__deco-line2 {
    top: 14%;
    left: -100px;
  }
}
.targetSection__deco-line {
  position: absolute;
  width: 662px;
  height: 130px;
  background-image: url("/2025/07/ai-deco-line-single.svg");
  background-size: contain;
  background-repeat: no-repeat;
  left: 70%;
  top: 55%;
  transform: translate(-50%, -50%) rotate(0.321deg);
  pointer-events: none;
  z-index: 0;
}
@media screen and (max-width: 1200px) {
  .targetSection__deco-line {
    width: 500px;
    height: 100px;
    left: 70%;
    top: 40%;
  }
}
@media screen and (max-width: 768px) {
  .targetSection__deco-line {
    top: 45%;
  }
}
@media (max-width: 480px) {
  .targetSection__deco-line {
    position: relative;
    width: 100%;
    max-width: 345px;
    height: 87px;
    left: 180px;
    top: -1280px;
  }
}
@media (max-width: 1200px) {
  .targetSection__container {
    padding: 0 16px;
  }
  .targetSection__intro {
    flex-direction: column;
    gap: 32px;
  }
  .targetSection__heading {
    width: 100%;
  }
  .targetSection__skills-grid {
    flex-direction: column;
  }
  .targetSection__skill-card {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .targetSection {
    padding: 0;
  }
  .targetSection__heading {
    padding: 0 16px;
  }
  .targetSection__title {
    font-size: 32px;
  }
  .targetSection__target-header {
    padding: 8px 24px;
  }
  .targetSection__skills {
    padding: 48px 0 0;
  }
  .targetSection__skills-description br {
    display: none;
  }
  .targetSection__skill-icon img {
    width: 40px;
    height: 40px;
  }
  .targetSection__skills-description, .targetSection__skills-title {
    text-align: left;
  }
  .targetSection__target-header-text {
    font-size: 14px;
  }
}

.ai-dev-case-study {
  width: 100%;
  background-color: #ffffff;
  padding: 48px 0 120px;
}
.ai-dev-case-study__container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.ai-dev-case-study__heading {
  text-align: center;
  font-feature-settings: "palt";
}
.ai-dev-case-study__heading h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 1.2px;
  color: #121212;
  margin-bottom: 12px;
}
.ai-dev-case-study__heading p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.9px;
  color: #666;
}
.ai-dev-case-study__cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
}
@media (max-width: 768px) {
  .ai-dev-case-study {
    padding: 0 16px 48px;
  }
  .ai-dev-case-study__heading h2 {
    text-align: left;
    font-size: 21px;
  }
}

.case-study-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
  padding: 24px;
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 1;
}
.case-study-card__category span {
  display: inline-block;
  padding: 4px 16px;
  background-color: #e6f7f5;
  border-radius: 9999px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  color: #00c6ab;
}
.case-study-card__title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #121212;
}
.case-study-card__description {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.7px;
  color: #121212;
}

.AiServiceFeatures {
  padding: 80px 0;
  background-color: #f9fafb;
}
.AiServiceFeatures_heading {
  text-align: center;
  margin-bottom: 64px;
}
.AiServiceFeatures_heading_title {
  font-size: 40px;
  font-weight: bold;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.AiServiceFeatures_heading_subtitle {
  font-size: 18px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  letter-spacing: 0.9px;
}
.AiServiceFeatures_container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
}
.AiServiceFeatures_mainCard {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  width: 80%;
  border: 1px solid #f3f4f6;
  margin: 0 auto 48px;
}
.AiServiceFeatures_mainCard_header {
  background: #00af91;
  padding: 32px 140px;
  text-align: center;
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.AiServiceFeatures_mainCard_header_title {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 1.2px;
  line-height: 1.5;
}
.AiServiceFeatures_mainCard_header_price {
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 2.4px;
}
.AiServiceFeatures_mainCard_header_price span {
  font-size: 18px;
  letter-spacing: 0.9px;
  margin-left: 4px;
}
.AiServiceFeatures_mainCard_list {
  padding: 24px;
  width: 530px;
  margin: 0 auto;
}
.AiServiceFeatures_mainCard_list_item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.AiServiceFeatures_mainCard_list_item:last-child {
  margin-bottom: 0;
}
.AiServiceFeatures_mainCard_list_item_icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.AiServiceFeatures_mainCard_list_item_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.7px;
}
.AiServiceFeatures_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.AiServiceFeatures_grid_card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.AiServiceFeatures_grid_card_image {
  aspect-ratio: 350.66/103;
  position: relative;
  background: #fff;
}
.AiServiceFeatures_grid_card_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.AiServiceFeatures_grid_card_content {
  padding: 8px 24px 24px;
  text-align: left;
}
.AiServiceFeatures_grid_card_content_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.9px;
  color: #111827;
  margin-bottom: 12px;
}
.AiServiceFeatures_grid_card_content_text {
  font-size: 12px;
  line-height: 16px;
  color: #374151;
}
@media (max-width: 768px) {
  .AiServiceFeatures {
    padding: 40px 16px;
  }
  .AiServiceFeatures_container {
    padding: 0;
  }
  .AiServiceFeatures_heading {
    margin-bottom: 32px;
  }
  .AiServiceFeatures_heading_title {
    font-size: 20px;
  }
  .AiServiceFeatures_heading_subtitle {
    font-size: 16px;
  }
  .AiServiceFeatures_mainCard {
    margin-bottom: 48px;
    width: 100%;
  }
  .AiServiceFeatures_mainCard_header {
    padding: 32px 16px;
  }
  .AiServiceFeatures_mainCard_list {
    width: 100%;
    padding: 16px;
    text-align: left;
  }
  .AiServiceFeatures_grid {
    grid-template-columns: 1fr;
  }
}

.messageSection {
  padding: 80px 0;
  background-color: #ebebeb;
  position: relative;
  overflow: hidden;
}
.messageSection__container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: left;
}
.messageSection__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}
.messageSection__heading-title {
  font-family: "Montserrat", sans-serif;
  font-size: 48px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 1.44px;
  color: #1a1a1a;
}
.messageSection__heading-subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #1a1a1a;
}
.messageSection__content {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.messageSection__text {
  flex: 1;
  max-width: 896px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.messageSection__text-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 1.4px;
  color: #1a1a1a;
  font-feature-settings: "palt";
}
.messageSection__text-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.6;
  letter-spacing: 0.8px;
  color: #1a1a1a;
}
.messageSection__text-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.messageSection__text-list_item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.messageSection__text-list_item_bullet {
  color: #00af91;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}
.messageSection__text-list_item_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #1a1a1a;
}
.messageSection__profile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  z-index: 1;
}
.messageSection__profile-image {
  width: 340px;
  height: 316px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.messageSection__profile-info {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.messageSection__profile-info-logo {
  width: 57px;
  height: 41px;
}
.messageSection__profile-info-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.messageSection__profile-info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.messageSection__profile-info-text-position {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.6px;
  color: #1a1a1a;
}
.messageSection__profile-info-text-name {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #121212;
}
.messageSection__deco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.messageSection__deco_line-wavy {
  position: absolute;
  width: 503px;
  height: 319px;
  right: -186px;
  top: -116px;
  transform-origin: center;
}
@media screen and (max-width: 1200px) {
  .messageSection__deco_line-wavy {
    width: 400px;
    height: auto;
    right: -100px;
    top: -80px;
  }
}
@media screen and (max-width: 768px) {
  .messageSection__deco_line-wavy {
    width: 300px;
    right: -50px;
    top: -50px;
  }
}
.messageSection__deco_line-single-1 {
  position: absolute;
  width: 779px;
  height: 353px;
  right: -451px;
  top: -5px;
  transform: rotate(-45deg);
  transform-origin: center;
}
@media screen and (max-width: 1200px) {
  .messageSection__deco_line-single-1 {
    width: 600px;
    height: auto;
    right: -350px;
  }
}
@media screen and (max-width: 768px) {
  .messageSection__deco_line-single-1 {
    width: 400px;
    right: -250px;
    top: 50px;
  }
}
.messageSection__deco_line-single-2 {
  position: absolute;
  width: 779px;
  height: 353px;
  right: -482px;
  top: 562px;
  transform-origin: center;
}
@media screen and (max-width: 1200px) {
  .messageSection__deco_line-single-2 {
    width: 600px;
    height: auto;
    right: -350px;
    top: 400px;
  }
}
@media screen and (max-width: 768px) {
  .messageSection__deco_line-single-2 {
    width: 400px;
    right: -250px;
    top: 300px;
  }
}
.messageSection__deco_block-1 {
  position: absolute;
  width: 375px;
  height: 425px;
  right: -430px;
  top: 282px;
  transform: rotate(310.073deg);
  opacity: 0.3;
}
@media screen and (max-width: 768px) {
  .messageSection__deco_block-1.hide-in-sp {
    display: none;
  }
}
.messageSection__deco_block-1.hide-in-pc {
  display: none;
}
@media screen and (max-width: 768px) {
  .messageSection__deco_block-1.hide-in-pc {
    display: block;
    width: 200px;
    height: auto;
    right: -100px;
    top: 150px;
    transform: rotate(0deg);
  }
}
.messageSection__deco_block-2 {
  position: absolute;
  width: 388px;
  height: 368px;
  right: -230px;
  top: -126px;
  transform: rotate(200.846deg);
  opacity: 0.3;
}
@media screen and (max-width: 768px) {
  .messageSection__deco_block-2.hide-in-sp {
    display: none;
  }
}
.messageSection__deco_block-2.hide-in-pc {
  display: none;
}
@media screen and (max-width: 768px) {
  .messageSection__deco_block-2.hide-in-pc {
    display: block;
    width: 200px;
    height: auto;
    right: -50px;
    top: -50px;
    transform: rotate(0deg);
    opacity: 1;
  }
}
.messageSection__container {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .messageSection-content {
    flex-direction: column;
    align-items: center;
  }
  .messageSection-text {
    max-width: 100%;
  }
  .messageSection-deco {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .messageSection {
    padding: 48px 0;
  }
  .messageSection_heading-title {
    font-size: 36px;
  }
  .messageSection_text-title {
    font-size: 24px;
  }
  .messageSection_profile-image {
    width: 239px;
    height: 222px;
  }
  .messageSection__content {
    flex-direction: column;
    align-items: center;
  }
  .messageSection__text-title {
    font-size: 26px;
  }
  .messageSection__deco_line-wavy {
    display: none !important;
  }
  .messageSection__deco_line-single-1 {
    width: 389px;
    height: 279px;
    right: -148px;
    top: 42px;
    opacity: 0.3;
  }
  .messageSection__deco_line-single-2 {
    width: 509px;
    height: 306px;
    right: -168px;
    top: 800px;
    opacity: 0.3;
  }
  .messageSection__deco_block-1 {
    width: 187px;
    height: 390px;
    right: -60px;
    top: 600px;
    transform: rotate(0deg);
  }
  .messageSection__deco_block-2 {
    width: 194px;
    height: 184px;
    right: -13px;
    top: -49px;
    opacity: 1;
    transform: rotate(0.73deg);
  }
}

/* Old basicPlan styles - replaced by _aiDev-pricing.scss
.basicPlan {
  background: #ffffff;
  padding: 80px 0;

  &_container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  &_header {
    text-align: center;
  }

  &_title {
    font-family: $font-jp;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.2px;
    color: #1a1a1a;
  }

  &_table {
    width: 100%;
    max-width: 896px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 1px 16px rgba(0, 0, 0, 0.08);
    padding: 25px;
    font-feature-settings: "palt";

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 8px 16px;
      text-align: left;
      border-bottom: 1px solid #cccccc;
      font-size: 14px;
      line-height: 1.5;
    }

    th {
      font-weight: 700;
      color: #1a1a1a;
      letter-spacing: 0.7px;
    }

    td {
      color: #666666;
      font-size: 12px;
      letter-spacing: 0.6px;
      vertical-align: middle;

      p {
        margin: 0;
        line-height: 1.5;
      }
    }

    td:nth-child(2) {
      max-width: 280px;
    }

    td:last-child {
      max-width: 234px;
    }

    tr:last-child td {
      border-bottom: none;
    }

    &_item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-weight: 700;
      color: #1a1a1a;
    }

    &_price {
      color: #00c6ab !important;
      font-weight: 700 !important;
      font-size: 14px !important;
    }

    &_note {
      font-weight: 700 !important;
      color: #121212 !important;
    }
  }

  &_cards {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1300px;
    padding: 24px 0;
  }

  &_infoCard {
    flex: 1;
    background: #ffffff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;

    &_icon {
      width: 64px;
      height: 64px;
      background: #ffebf1;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    &_title {
      font-family: $font-jp;
      font-size: 21px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 1.05px;
      color: #ff346b;
      margin: 0;
    }

    &_subtitle {
      font-family: $font-jp;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.7px;
      color: #1a1a1a;
      margin: 0;
    }

    &_description {
      font-family: $font-jp;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.6px;
      color: #1a1a1a;
      margin: 0;
    }
  }

  &_summary {
    max-width: 672px;
    background: #f3fbf7;
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);

    &_title {
      font-family: $font-jp;
      font-size: 21px;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 1.05px;
      color: #1a1a1a;
      margin: 0 0 12px;
    }

    &_text {
      font-family: $font-jp;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.7px;
      color: #1a1a1a;
      margin: 0;
    }
  }
}

@media (max-width: 768px) {
  .basicPlan {
    padding: 48px 0 0;
  }

  .basicPlan_container {
    padding: 0;
  }

  .basicPlan_table {
    padding: 16px;

    table {
      display: block;
      width: 100%;
    }

    thead {
      display: none;
    }

    tbody {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    tr {
      display: flex;
      flex-direction: column;
      padding: 16px 16px 0;
      border-radius: 8px;
    }

    td {
      display: flex;
      flex-direction: column;
      padding: 4px 0;
      border-bottom: none;

      &:last-child {
        border-bottom: 1px solid #ccc;
        padding-bottom: 16px;
      }

      div {
        font-size: 16px;
      }
    }

    td::before {
      content: attr(data-label);
      font-weight: 700;
      color: #333;
      margin-bottom: 2px;
    }

    td:nth-child(2),
    td:last-child {
      max-width: none;
    }
  }

  .basicPlan_cards {
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
  }

  .basicPlan_summary_text {
    text-align: left;
  }
}
*/
.engineer-voices {
  padding: 64px 0;
  background-color: #f9fafb;
}
.engineer-voices__container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
}
.engineer-voices__header {
  text-align: center;
  margin-bottom: 48px;
}
.engineer-voices__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 1.2px;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.engineer-voices__subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #00c6ab;
}
.engineer-voices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .engineer-voices__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .engineer-voices__grid {
    grid-template-columns: 1fr;
  }
}
.engineer-voices__card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  text-align: left;
}
.engineer-voices__card-icon {
  width: 32px;
  height: 32px;
  background-color: #e6f7f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.engineer-voices__card-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #111827;
  margin-bottom: 24px;
  font-feature-settings: "palt";
}
.engineer-voices__card-description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: 0.7px;
  color: #374151;
}

.cta {
  background: linear-gradient(90deg, #006f60 0%, #004a40 50.962%, #00c2a0 100%);
  padding: 80px 0;
}
.cta_container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
}
.cta_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.cta_logo {
  width: 197px;
  height: 36px;
}
.cta_logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cta_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.cta_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.2px;
  color: #ffffff;
  text-align: center;
}
.cta_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #ffffff;
  text-align: center;
}
.cta_article {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 568px;
}
.cta_article_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 16px;
}
.cta_article_list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cta_article_item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cta_article_dot {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
}
.cta_article_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.7px;
  color: #ffffff;
}
.cta_note {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #ffffff;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .cta {
    padding: 48px 0;
  }
  .cta_container {
    padding: 0 24px;
  }
  .cta_buttons {
    flex-direction: column;
  }
  .cta_button {
    width: 100%;
    max-width: 300px;
  }
  .cta_title {
    font-size: 22px;
    text-align: left;
  }
  .cta_description, .cta_note {
    text-align: left;
  }
}
.ai-dev-main {
  background: linear-gradient(90deg, #006f60 0%, #004a40 50.962%, #00c2a0 100%);
  width: 100%;
  position: relative;
}
.ai-dev-main_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 80px 48px;
}
.ai-dev-main_content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 80px;
  max-width: 1300px;
  width: 100%;
}
.ai-dev-main_logo {
  flex-shrink: 0;
  width: 197px;
  height: 36px;
}
.ai-dev-main_logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ai-dev-main_text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.ai-dev-main_text_subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: normal;
  color: #ffffff;
  width: 100%;
}
.ai-dev-main_text_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: normal;
  color: #ffffff;
  width: 100%;
  font-feature-settings: "palt";
}
.ai-dev-main_buttons {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
}
.ai-dev-main_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 40px;
  padding: 8px 24px;
  border: 1px solid #ffffff;
  border-radius: 9999px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s;
}
.ai-dev-main_button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
@media screen and (max-width: 1024px) {
  .ai-dev-main_container {
    padding: 60px 24px;
  }
  .ai-dev-main_content {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }
  .ai-dev-main_text {
    align-items: center;
  }
  .ai-dev-main_buttons {
    flex-direction: column;
    width: 100%;
  }
  .ai-dev-main_button {
    width: 100%;
    max-width: 300px;
  }
}
@media screen and (max-width: 768px) {
  .ai-dev-main_container {
    padding: 40px 24px;
  }
  .ai-dev-main_logo {
    width: 160px;
    height: 30px;
  }
  .ai-dev-main_text_subtitle {
    font-size: 14px;
  }
  .ai-dev-main_text_title {
    font-size: 20px;
  }
}

.curriculumSection {
  padding: 64px 16px;
  background-color: #fff;
}
.curriculumSection_container {
  max-width: 1300px;
  margin: 0 auto;
}
.curriculumSection_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
}
.curriculumSection_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
  text-align: center;
}
.curriculumSection_subtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #00c6ab;
  text-align: center;
}
.curriculumSection_steps {
  margin-bottom: 48px;
}
.curriculumSection_steps_text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 32px;
}
.curriculumSection_steps_container {
  display: flex;
  gap: 24px;
  justify-content: center;
}
.curriculumSection_step {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 24px;
  position: relative;
  width: calc(33.33% - 92px);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  text-align: left;
}
.curriculumSection_step_number {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  background: #00af91;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.curriculumSection_step_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
  margin-bottom: 12px;
}
.curriculumSection_step_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #1a1a1a;
}
.curriculumSection_lists {
  display: flex;
  gap: 24px;
  justify-content: center;
}
.curriculumSection_list {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  overflow: hidden;
  width: calc(33.33% - 16px);
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  text-align: left;
}
.curriculumSection_list_header {
  background: #00c6ab;
  padding: 16px 24px;
  text-align: center;
}
.curriculumSection_list_month {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
.curriculumSection_list_content {
  padding: 16px;
}
.curriculumSection_list_group {
  margin-bottom: 16px;
}
.curriculumSection_list_group:last-child {
  margin-bottom: 0;
}
.curriculumSection_list_week {
  display: inline-block;
  background: #00c6ab;
  padding: 4px 16px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.curriculumSection_list_week span {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
.curriculumSection_list_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1a1a;
  margin-bottom: 8px;
}
.curriculumSection_list_points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.curriculumSection_list_point {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #1a1a1a;
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
}
.curriculumSection_list_point:before {
  content: "•";
  color: #00c6ab;
  font-size: 12px;
  margin-right: 8px;
  line-height: 1.5;
}
.curriculumSection_list_point:last-child {
  margin-bottom: 0;
}
.curriculumSection_note {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 48px;
}
@media screen and (max-width: 1024px) {
  .curriculumSection_steps_container {
    flex-direction: column;
    gap: 32px;
  }
  .curriculumSection_step {
    width: 100%;
  }
  .curriculumSection_lists {
    flex-direction: column;
    gap: 32px;
  }
  .curriculumSection_list {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .curriculumSection {
    padding: 32px 16px;
  }
  .curriculumSection_title {
    font-size: 20px;
  }
  .curriculumSection_subtitle {
    font-size: 14px;
  }
  .curriculumSection_steps {
    padding: 0 16px;
  }
  .curriculumSection_steps_text {
    font-size: 16px;
    text-align: left;
  }
  .curriculumSection_note {
    font-size: 14px;
    text-align: left;
    margin-top: 32px;
  }
}

.curriculumSection_list.gray-bg {
  background-color: #f5f5f5;
}

.devMethodShift {
  margin: 128px 0 0;
  position: relative;
  overflow: hidden;
}
.devMethodShift_container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 2;
  text-align: left;
}
.devMethodShift_container_title {
  text-align: left;
  font-family: "Noto Sans JP", sans-serif;
}
.devMethodShift_container_title h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.2px;
  margin-bottom: 16px;
}
.devMethodShift_container_title p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #666;
}
.devMethodShift_image {
  position: relative;
  width: 100%;
}
.devMethodShift_image img {
  position: relative;
  top: -140px;
  right: 0;
}
@media screen and (max-width: 1000px) {
  .devMethodShift_image img {
    top: -20px;
  }
}
@media screen and (max-width: 768px) {
  .devMethodShift_image img {
    padding: 48px 16px 0;
  }
}
@media screen and (max-width: 768px) {
  .devMethodShift {
    margin: 0;
  }
  .devMethodShift .hide-in-sp {
    display: none;
  }
  .devMethodShift_container {
    margin-top: 32px;
  }
  .devMethodShift_container_title h2 {
    font-size: 20px;
    margin-bottom: 8px;
  }
  .devMethodShift_requirements_container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
    padding: 0 16px;
  }
  .devMethodShift_requirements {
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Spacing-sm, 4px);
    align-self: stretch;
    border-bottom: 1px solid #e5e7eb;
  }
  .devMethodShift_requirements:last-child {
    border-bottom: none;
  }
  .devMethodShift_requirements_title {
    color: #00c6ab;
    text-align: center;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.36px;
  }
  .devMethodShift_requirements_subtitle {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 16px;
  }
  .devMethodShift_requirements_content {
    width: 100%;
  }
  .devMethodShift_requirements_item {
    width: 100%;
  }
  .devMethodShift_requirements_item h4 {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: var(--Spacing-xs, 2px) var(--Spacing-md, 8px);
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: var(--Spacing-sm, 4px) var(--Spacing-sm, 4px) 0 0;
    border: 1px solid #000;
    background: #000;
    color: var(--Text-White, #fff);
    font-feature-settings: "palt" on;
    font-family: var(--Typography-FontFamily-JP, "Noto Sans JP");
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.6px;
    margin-bottom: 0;
  }
  .devMethodShift_requirements_item ul {
    list-style: none;
    padding-top: 16px;
    margin: 0;
  }
  .devMethodShift_requirements_item ul li {
    font-feature-settings: "palt" on;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 0.7px;
    text-align: left;
    margin-bottom: 8px;
    position: relative;
    padding-left: 12px;
  }
  .devMethodShift_requirements_item ul li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--Sub-Color, #ff346b);
  }
  .devMethodShift_requirements_item ul li:last-child {
    margin-bottom: 0;
  }
}

.aiDev__buttons {
  display: flex;
  gap: 16px;
}
.aiDev__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 40px;
  border: 1px solid #ffffff;
  border-radius: 9999px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #ffffff !important;
  text-decoration: none;
  transition: 0.3s;
  z-index: 1;
}
.aiDev__button:hover {
  background-color: #00c6ab;
  border: 1px solid #00c6ab;
}
@media screen and (max-width: 768px) {
  .aiDev__buttons {
    flex-direction: column;
  }
  .aiDev__button.wide {
    width: 323px;
  }
}

.topSection--pricing {
  background: linear-gradient(106deg, #1b1b1b 0%, #333333 100%);
}
.topSection__title--pricing {
  font-size: 48px;
}
@media (max-width: 768px) {
  .topSection__title--pricing {
    font-size: 32px;
  }
}
.topSection__subtitle--pricing {
  font-size: 32px;
  color: #00c6ab;
}
@media (max-width: 768px) {
  .topSection__subtitle--pricing {
    font-size: 24px;
  }
}
.topSection__description--pricing {
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .topSection__description--pricing {
    font-size: 16px;
  }
}

.container22--pricing {
  padding-top: 80px;
  padding-bottom: 100px;
}
@media (max-width: 768px) {
  .container22--pricing {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

.pricingSection {
  margin-bottom: 80px;
}
@media (max-width: 768px) {
  .pricingSection {
    margin-bottom: 48px;
  }
}
.pricingTitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 20px;
  color: #1a1a1a;
}
@media (max-width: 768px) {
  .pricingTitle {
    font-size: 24px;
  }
}
.pricingSubtitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}
@media (max-width: 768px) {
  .pricingSubtitle {
    font-size: 20px;
  }
}
.pricingDescription {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #666;
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .pricingDescription {
    font-size: 14px;
    margin-bottom: 32px;
  }
}
.pricingGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 1280px) {
  .pricingGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .pricingGrid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.pricingGrid--flexible {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pricingCard {
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pricingCard:hover {
  transform: translateY(-4px);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
}
.pricingCard--featured {
  border: 2px solid #00c6ab;
  box-shadow: 0px 8px 24px rgba(0, 198, 171, 0.15);
}
.pricingCard_badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #00c6ab;
  color: white;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}
.pricingCard_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1a1a1a;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .pricingCard_title {
    font-size: 20px;
  }
}
.pricingCard_subtitle {
  font-size: 16px;
  color: #666;
  font-weight: 400;
}
.pricingCard_price {
  margin-bottom: 20px;
}
.pricingCard_price_amount {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: bold;
  color: #333;
}
@media (max-width: 768px) {
  .pricingCard_price_amount {
    font-size: 28px;
  }
}
.pricingCard_price_note {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}
.pricingCard_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}
.pricingCard_features {
  list-style: none;
  padding: 0;
  text-align: left;
  margin-bottom: 30px;
  flex-grow: 1;
}
.pricingCard_features li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}
.pricingCard_features li::before {
  content: "✓";
  color: #00c6ab;
  margin-right: 8px;
  flex-shrink: 0;
}
.pricingCard_cta {
  display: inline-block;
  padding: 12px 30px;
  background-color: #f8f8f8;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-top: auto;
}
.pricingCard_cta:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}
.pricingCard_cta--primary {
  background-color: #00c6ab;
  color: white;
  border: none;
}
.pricingCard_cta--primary:hover {
  background-color: #00a892;
}
.pricingCard_cta--disabled {
  background-color: #f0f0f0;
  color: #999;
  border: 1px solid #ddd;
  cursor: not-allowed;
}
.pricingCard_cta--disabled:hover {
  transform: none;
  background-color: #f0f0f0;
}
.pricingFullWidth {
  margin-top: 50px;
  padding: 40px;
  background-color: #f8f9fa;
  border-radius: 12px;
  text-align: center;
}
.pricingFullWidth_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #1a1a1a;
}
.pricingFullWidth_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  margin-bottom: 20px;
  color: #666;
  line-height: 1.6;
}
.pricingFullWidth_features {
  list-style: none;
  padding: 0;
  text-align: left;
  margin: 0 auto 30px;
  max-width: 400px;
}
.pricingFullWidth_features li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
}
.pricingFullWidth_features li::before {
  content: "✓";
  color: #00c6ab;
  margin-right: 8px;
  flex-shrink: 0;
}
.pricingFullWidth_cta {
  display: inline-block;
  padding: 15px 40px;
  background-color: #333;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
.pricingFullWidth_cta:hover {
  background-color: #000;
  transform: translateY(-2px);
}
.pricingBaasSection {
  text-align: center;
  padding: 60px 30px;
  background-color: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 80px;
}
.pricingBaasSection_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1a1a1a;
}
.pricingBaasSection_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}
.pricingBaasSection_cta {
  display: inline-block;
  padding: 15px 40px;
  background-color: #00c6ab;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}
.pricingBaasSection_cta:hover {
  background-color: #00a892;
  transform: translateY(-2px);
}
.pricingCtaSection {
  text-align: center;
  padding: 60px 30px;
  background-color: #1b1b1b;
  border-radius: 12px;
  color: white;
}
.pricingCtaSection_title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: white;
}
.pricingCtaSection_description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: #ccc;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.pricingCtaSection_buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.pricingCtaSection_cta {
  display: inline-block;
  padding: 15px 40px;
  text-decoration: none;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: white;
}
.pricingCtaSection_cta--primary {
  background-color: #00c6ab;
  color: white;
}
.pricingCtaSection_cta--primary:hover {
  background-color: #00a892;
  transform: translateY(-2px);
}
.pricingCtaSection_cta--secondary {
  border: 1px solid #00c6ab;
  color: #00c6ab;
  background-color: transparent;
}
.pricingCtaSection_cta--secondary:hover {
  background-color: rgba(0, 198, 171, 0.1);
  transform: translateY(-2px);
}

@media screen and (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  * {
    max-width: 100vw;
  }
  .container,
  .container22,
  main,
  section {
    overflow-x: hidden;
    width: 100%;
  }
  [style*="position: absolute"],
  [style*="position: fixed"] {
    max-width: 100vw;
  }
}
/* -------------------
CSS記述方法
BEMベース
BlockName_element-modifier
block,elementが2単語の場合はキャメルケース
------------------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*# sourceMappingURL=styles.css.map */