:root {
  --sp-width: 400px;
}

#sp-disp {
  display: none;
}

body {
  max-width: 1440px;
  margin: 0 auto;
}

.ul_none {
  text-transform: none;
  text-decoration: none;
  font-size: 14px;
}

.top-btn {
  border: none;
  background-color: #fff;
}

.nav__btn {
  cursor: pointer;
  width: 108.2px;
  height: 40px;
  background-color: #F4B91C;
  border-radius: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  line-height: 40px;
  color: #fff;
}

.nav__btn:hover {
  background-color: var(--color-darkslategray-200);
  background-image: linear-gradient(90deg, #000, #000);
  border: 4px solid var(--color-darkslategray-100);
  box-sizing: border-box;
  line-height: 32px;
}

/* .vector-group:hover {
  background-color: var(--color-darkslategray-200);
  background-image: linear-gradient(90deg, #000, #000);
  border: 4px solid var(--color-darkslategray-100);
  box-sizing: border-box;
} */

.frame-b-text-child,
.frame-c-group-child {
  position: relative;
  display: none;
  max-width: 100%;
}
.frame-b-text-child {
  align-self: stretch;
  width: 1776px;
  background-color: var(--color-white);
}
.frame-c-group-child {
  height: 286px;
  width: 1447px;
  background-color: var(--color-black);
}
.frame-g-description {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  z-index: 2;
}
.frame-f-rectangle {
  height: 52px;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-4xs) 0 0;
  box-sizing: border-box;
}
.div {
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: capitalize;
  z-index: 2;
}
.div::after {
  position: absolute;
  content: "";
  display: inline-block;
  background: #FEBE2E;
  width: 1px;
  height: 16px;
  top: 1px;
}
.div1::after {
  position: absolute;
  content: "";
  display: inline-block;
  background: #FEBE2E;
  width: 1px;
  height: 16px;
  top: 1px;
  left: 130%;
}
.group-l-group {
  height: 51px;
  width: 1px;
  position: relative;
  background-color: var(--brand-yellow);
  transform: rotate(90deg);
  z-index: 3;
}
.frame-i-frame,
.group-k-frame,
.parent-frame-h {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.group-k-frame {
  align-self: stretch;
  height: 1px;
  flex-direction: row;
  padding: 0;
  box-sizing: border-box;
  margin-top: -1px;
}
.frame-i-frame,
.parent-frame-h {
  flex-direction: column;
}
.frame-i-frame {
  align-self: stretch;
}
.parent-frame-h {
  width: 108px;
  padding: var(--padding-xs) 0 0;
  box-sizing: border-box;
}
.div1 {
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: capitalize;
  z-index: 2;
}
.frame-p-frame {
  height: 103px;
  width: 1px;
  position: relative;
  background-color: var(--brand-yellow);
  transform: rotate(90deg);
  z-index: 3;
  margin-left: -102px;
}
.clip-path-n-group {
  align-self: stretch;
  height: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-m-mask,
.frame-e-polygon {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.clip-path-m-mask {
  width: 126px;
  flex-direction: column;
  padding: var(--padding-xs) 0 0;
  box-sizing: border-box;
  margin-left: 20px;
}
.frame-e-polygon {
  flex-direction: row;
  gap: var(--gap-21xl);
}
.group-s-group,
.iconinstagram {
  height: 23px;
  width: 22px;
  position: relative;
  z-index: 2;
}
.iconinstagram {
  height: 30px;
  width: 30px;
  overflow: hidden;
  flex-shrink: 0;
}
.frame-r-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-4xs);
}
.frame-d-frames,
.group-q-group {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.group-q-group {
  flex-direction: row;
  padding: 0 var(--padding-19xl);
}
.frame-d-frames {
  flex-direction: column;
  gap: var(--gap-xl);
  max-width: 100%;
}
.div2 {
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: capitalize;
  z-index: 3;
}
.shape-container-child {
  width: 1px;
  height: 51px;
  position: relative;
  background-color: var(--brand-yellow);
  transform: rotate(90deg);
  z-index: 2;
  margin-top: -1px;
}
.shape-container {
  height: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.garoon-logo-1 {
  align-self: stretch;
  height: 16px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  z-index: 2;
}
.frame-group {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xs);
  padding: var(--padding-xs) 0 0;
}
.div3,
.polygon {
  position: relative;
}
.div3 {
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: capitalize;
  z-index: 3;
}
.polygon {
  height: 51px;
  width: 1px;
  background-color: var(--brand-yellow);
  transform: rotate(90deg);
  z-index: 2;
  margin-left: -51px;
}
.group {
  height: 20px;
  width: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: var(--padding-xs) 0 0;
}
.frame-u-group,
.text-container {
  display: flex;
  align-items: flex-start;
}
.text-container {
  width: 142px;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.frame-u-group {
  width: 186px;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-2xs) 0 0;
  box-sizing: border-box;
}
.googleplay-icon {
  width: 162.9px;
  height: 47.1px;
  position: relative;
  z-index: 2;
}
.appstore-icon {
  align-self: stretch;
  height: 58.9px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
}
.ellipse,
.line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.ellipse {
  align-self: stretch;
  flex: 1;
  padding: 0 var(--padding-12xs) 0 0;
  gap: var(--gap-mini);
}
.line {
  height: 149px;
  width: 205px;
  padding: var(--padding-base) 0 0;
  box-sizing: border-box;
}
.frame-b-text,
.frame-c-group {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
.frame-c-group {
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 40px;
  padding-bottom: 30px;
  gap: var(--gap-31xl);
  max-width: 100%;
  z-index: 1;
}
.frame-b-text {
  position: absolute;
  top: 7550px;
  background-color: var(--color-black);
  width: 100%;
  max-width: 1440px;
  align-items: center;
  justify-content: center;
  text-align: left;
  font-size: var(--font-size-xs);
  color: var(--brand-yellow);
  font-family: var(--font-roboto);
}
.frame-b-text a {
  color: #F4B91C;
}
.frame-set-child {
  position: absolute;
  top: 0;
  left: 333px;
  width: 656.1px;
  height: 572.5px;
  object-fit: contain;
  z-index: 1;
}
.hand-with-smartphone-1-icon {
  position: absolute;
  top: 128px;
  left: 0;
  width: 690px;
  height: 925px;
  object-fit: cover;
  z-index: 2;
}
.frame-set {
  position: absolute;
  top: 919px;
  left: 711px;
  width: 989px;
  height: 1053px;
}
.kintone-2,
.tab {
  position: relative;
}
.kintone-2-sp {
  display: none;
}
.top-logo {
  width: 50px;
}
.kintone-2 {
  height: 34px;
  width: 168px;
  object-fit: cover;
  cursor: pointer;
}
.tab {
  line-height: 24px;
}
.tab1 {
  white-space: nowrap;
}
.tab1,
.tab2,
.tab3,
.tab4 {
  position: relative;
  line-height: 24px;
}
.tab3,
.tab4 {
  font-size: var(--font-size-base);
  white-space: nowrap;
}
.tab4 {
  align-self: stretch;
  width: 0;
  display: inline-block;
}
.navigation {
  height: 24px;
  flex: 1;
  background-color: var(--color-white);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 var(--padding-9xs) 0 600px;
  box-sizing: border-box;
  gap: var(--gap-xl);
  max-width: 100%;
}
/* headerメディアクエリ */
@media (max-width: var(--sp-width)) {
  .navigation,
  .kintone-2 {
    display: none;
  }
  .top-bar {
    width: 100% !important;
    justify-content: center !important;
    height: 40px;
  }
  .top-logo {
    position: relative;
    width: 171px;
  }
  .kintone-2-sp {
    display: block;
    width: 100px;
    height: 20px;
  }
  .top-btn {
    width: 47px;
    height: 16.3px;
  }
  .nav__btn {
    background-color: #000;
    height: 20px !important;
  }
  .shape-with-children {
    justify-content: right !important;
    position: absolute !important;
    width: 100%;
  }
}


.navigation a {
  color: #000;
  font-size: 14px;
}
.shape-with-children-child {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 1px;
  bottom: 0;
  left: -0.2px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.tab5 {
  position: relative;
  letter-spacing: 0.05em;
  line-height: 24px;
  white-space: nowrap;
  z-index: 2;
}
.shape-with-children,
.top-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.shape-with-children {
  justify-content: center;
  padding: 20px 0;
  position: relative;
  font-size: var(--font-size-sm);
  color: var(--color-white);
}
.top-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  background-color: var(--color-white);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  width: 1440px;
  justify-content: flex-start;
  padding: 0 20px;
  box-sizing: border-box;
  gap: var(--gap-2xs);
  z-index: 99;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-xs);
  color: var(--color-black);
  font-family: var(--font-roboto);
}
.desktop-1440-child {
  position: absolute;
  top: -150px;
  left: 572px;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.1);
  width: 40px;
  height: 40px;
}
.title {
  position: absolute;
  top: 3913px;
  left: 249px;
  line-height: 50px;
  text-transform: capitalize;
  display: none;
  align-items: flex-end;
  justify-content: center;
  width: 917px;
  height: 115px;
  z-index: 6;
}
.section-child,
.shape-node-icon {
  width: 100%;
  height: 1px;
  position: absolute;
  margin: 0 !important;
  right: 0;
  bottom: -1px;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.blank-line,
.blank-line1,
.blank-line2,
.kintone {
  margin: 0;
}
.kintone-container {
  margin: 0;
  align-self: stretch;
  height: 71px;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.1em;
  line-height: 60px;
  text-transform: lowercase;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 6;
}
.frame-child,
.frame-item {
  height: 149.4px;
  width: 6px;
  position: relative;
  background-color: var(--color-white);
  transform: rotate(90deg);
  z-index: 7;
}
.frame-item {
  height: 154px;
  background-color: var(--brand-yellow);
  z-index: 8;
}
.kintone-parent,
.rectangle-parent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.rectangle-parent {
  width: 303px;
  height: 6px;
  flex-direction: row;
  margin-top: -3px;
}
.kintone-parent {
  flex: 1;
  flex-direction: column;
}
.section,
.section-inner,
.section1 {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
}
.section-inner {
  width: 386px;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 var(--padding-30xl) 0 var(--padding-xl);
  max-width: 100%;
}
.section,
.section1 {
  flex-direction: column;
}
.section1 {
  align-self: stretch;
  flex: 1;
  align-items: center;
  padding: 181px 0 0;
  position: relative;
  gap: 313px;
  background-image: url(../public/section@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  mix-blend-mode: soft-light;
  max-width: 100%;
  z-index: 5;
}
.section {
  position: absolute;
  bottom: 6593px;
  left: -1px;
  background-color: var(--brand-dark-gray);
  width: 1463px;
  height: 568px;
  align-items: flex-end;
  padding: 0 0 0 var(--padding-10xs);
  z-index: 4;
  text-align: left;
  font-size: var(--font-size-21xl);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.frame-inner {
  height: 45px;
  width: 441px;
  position: relative;
  background-color: var(--color-black);
  display: none;
  max-width: 100%;
}
.description {
  position: relative;
  font-size: var(--font-size-5xl);
  letter-spacing: 0.05em;
  line-height: 24px;
  font-weight: 600;
  font-family: var(--font-roboto);
  color: var(--color-white);
  text-align: left;
  z-index: 5;
}
.rectangle-group {
  cursor: pointer;
  border: 0;
  padding: var(--padding-2xs) 24px var(--padding-3xs) var(--padding-base);
  background-color: var(--color-black);
  position: absolute;
  top: 1479px;
  left: 323px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  z-index: 3;
}
.rectangle-group:hover {
  background-color: var(--color-darkslategray-100);
}
.business-concept-with-wooden-b {
  position: absolute;
  top: 3578px;
  left: 0;
  width: 1445px;
  height: 570px;
  display: none;
  mix-blend-mode: multiply;
}
.frame-child1,
.rectangle-div {
  position: absolute;
  top: 0;
  left: 144.4px;
  background-color: var(--brand-yellow);
  width: 9.7px;
  height: 144.4px;
  transform: rotate(90deg);
  transform-origin: 0 0;
}
.frame-child1 {
  left: 288px;
  background-color: var(--color-black);
  z-index: 1;
}
.rectangle-container {
  height: 10px;
  flex: 1;
  position: relative;
}
.desktop-1440-inner {
  position: absolute;
  top: 5073px;
  left: 577px;
  width: 288px;
  height: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.kintone1,
.p,
.title1 {
  margin: 0;
}
.title1 {
  align-self: stretch;
  flex: 1;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.05em;
  line-height: 50px;
  text-transform: lowercase;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  z-index: 2;
}
.title-wrapper {
  height: 147px;
  width: 378px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 59px 0 0;
  box-sizing: border-box;
  min-width: 258px;
}
.youtube {
  padding-top: 80px;
  height: 395px;
  flex: 1;
  position: relative;
  min-width: 322px;
  max-width: 100%;
  z-index: 2;
}
.rectangle-icon {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 1;
}
.frame-child2,
.frame-child3 {
  position: absolute;
  top: 0;
  left: 189px;
  background-color: var(--brand-yellow);
  width: 6px;
  height: 189px;
  transform: rotate(90deg);
  transform-origin: 0 0;
}
.frame-child2 {
  display: none;
}
.frame-child3 {
  z-index: 1;
}
.frame-child4,
.group-div {
  position: absolute;
  z-index: 2;
}
.frame-child4 {
  top: 0;
  left: 378px;
  background-color: var(--color-black);
  width: 6px;
  height: 189px;
  transform: rotate(90deg);
  transform-origin: 0 0;
}
.group-div {
  top: 344px;
  left: 261px;
  width: 242px;
  height: 6px;
}
.vector-parent {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.frame-container {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-36xl) 268px 114px 261px;
  box-sizing: border-box;
  position: relative;
  gap: 60px;
  max-width: 100%;
}
.frame-child5,
.frame-child6 {
  position: relative;
  display: none;
  max-width: 100%;
}
.frame-child5 {
  height: 162px;
  width: 1447px;
  background-color: var(--brand-yellow);
}
.frame-child6 {
  height: 74px;
  width: 718px;
  border-radius: var(--br-71xl);
}
.b {
  position: relative;
  font-size: var(--font-size-21xl);
  letter-spacing: 0.05em;
  line-height: 60px;
  text-transform: capitalize;
  font-family: var(--font-roboto);
  color: var(--color-black);
  text-align: left;
  z-index: 1;
}
.bottom-btn,
.vector-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
}
.vector-group {
  cursor: pointer;
  border: 4px solid var(--color-black);
  padding: var(--padding-6xs) var(--padding-6xs) var(--padding-5xs);
  background-color: transparent;
  width: 726px;
  border-radius: var(--br-71xl);
  background: linear-gradient(
    90deg,
    rgba(87, 87, 87, 0) 23%,
    rgba(54, 54, 54, 0)
  );
  z-index: 3;
}
.vector-group p {
  font-weight: 600;
}
.group-button:hover,
.vector-group:hover {
  background-color: var(--color-darkslategray-200);
  background-image: linear-gradient(90deg, #000, #000);
  border: 4px solid var(--color-darkslategray-100);
  box-sizing: border-box;
}
.vector-group:hover p,
.vector-parent5:hover b {
  color: #fff;
}

.bottom-btn {
  align-self: stretch;
  background-color: var(--brand-yellow);
  padding: var(--padding-24xl) var(--padding-8xl) var(--padding-26xl)
    var(--padding-xl);
  z-index: 2;
  margin-top: -34px;
}
.frame-parent {
  position: absolute;
  top: 6850px;
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  font-size: var(--font-size-21xl);
  color: var(--color-black);
  font-family: var(--font-roboto);
}
.div4 {
  height: 45px;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 30px;
  font-size: 20px;
  font-weight: 600;
  display: inline-block;
  flex-shrink: 0;
  z-index: 3;
  color: #000;
}
.frame-child7 {
  align-self: stretch;
  height: 3px;
  position: relative;
  background-color: var(--color-black);
  z-index: 2;
  margin-top: -13px;
}
.parent {
  width: 235px;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.description1 {
  width: 237px;
  height: 103px;
  position: relative;
  font-size: 14px;
  letter-spacing: 1.4px;
  line-height: 20px;
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
  z-index: 2;
  color: #000;
  font-family: Roboto;
}
.frame-parent3 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-child8 {
  height: 23px;
  width: 100px;
  position: relative;
  border-radius: var(--br-71xl);
  display: none;
}
.div5 {
  position: relative;
  letter-spacing: 0.05em;
  line-height: 18px;
  text-transform: capitalize;
  z-index: 1;
}
.vector-container {
  border-radius: var(--br-71xl);
  background: linear-gradient(
    90deg,
    rgba(87, 87, 87, 0) 23%,
    rgba(54, 54, 54, 0)
  );
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.08);
  border: 1.5px solid var(--color-black);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10xs) var(--padding-xs) var(--padding-11xs)
    var(--padding-mini);
  white-space: nowrap;
  z-index: 3;
  font-size: var(--font-size-sm);
}
.frame-parent2 {
  flex: 0.9114;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xl) 0 0;
  box-sizing: border-box;
  min-width: 154px;
}
.div6 {
  height: 45px;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 30px;
  font-weight: 600;
  display: inline-block;
  flex-shrink: 0;
  z-index: 4;
}
.frame-child9 {
  align-self: stretch;
  height: 3px;
  position: relative;
  background-color: var(--color-black);
  z-index: 2;
  margin-top: -13px;
}
.container {
  width: 235px;
  height: 45px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.description2 {
  width: 237px;
  height: 188px;
  position: relative;
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  display: inline-block;
  flex-shrink: 0;
  z-index: 3;
}
.frame-parent5 {
  width: 131px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-child10 {
  height: 23px;
  width: 100px;
  position: relative;
  border-radius: var(--br-71xl);
  display: none;
}
.div7 {
  position: relative;
  letter-spacing: 0.05em;
  line-height: 18px;
  text-transform: capitalize;
  z-index: 1;
}
.vector-parent1 {
  border-radius: var(--br-71xl);
  background: linear-gradient(
    90deg,
    rgba(87, 87, 87, 0) 23%,
    rgba(54, 54, 54, 0)
  );
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.08);
  border: 1.5px solid var(--color-black);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10xs) var(--padding-xs) var(--padding-11xs)
    var(--padding-mini);
  white-space: nowrap;
  z-index: 4;
  font-size: var(--font-size-sm);
}
.frame-parent4 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 154px;
}
.frame-child11 {
  height: 3px;
  width: 235px;
  position: absolute;
  margin: 0 !important;
  right: -24px;
  bottom: 10px;
  background-color: var(--color-black);
  z-index: 2;
}
.div8 {
  height: 45px;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 30px;
  font-weight: 600;
  display: inline-block;
  z-index: 4;
}
.rectangle-parent1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
}
.text-frame {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--brand-yellow);
  width: 100%;
  height: 100%;
  z-index: 1;
}
.image-1-icon,
.image-2-icon,
.image-3-icon {
  position: absolute;
  top: 46px;
  left: 302px;
  width: 190px;
  height: 132px;
  object-fit: cover;
  z-index: 2;
}
.image-2-icon,
.image-3-icon {
  left: 606px;
  width: 191px;
}
.image-3-icon {
  left: 911px;
  width: 190px;
}
.rectangle-group1 {
  height: 406px;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  left: 0;
}
.frame-parent1 {
  width: 1440px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 196px 323px 0 302px;
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-48xl);
  max-width: 100%;
  margin: 0 auto;
}
.description3 {
  align-self: stretch;
  height: 188px;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  display: inline-block;
  flex-shrink: 0;
  z-index: 3;
}
.frame-child12 {
  height: 23px;
  width: 100px;
  position: relative;
  border-radius: var(--br-71xl);
  display: none;
}
.div9 {
  position: relative;
  letter-spacing: 0.05em;
  line-height: 18px;
  text-transform: capitalize;
  z-index: 1;
}
.vector-parent2 {
  border-radius: var(--br-71xl);
  background: linear-gradient(
    90deg,
    rgba(87, 87, 87, 0) 23%,
    rgba(54, 54, 54, 0)
  );
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.08);
  border: 1.5px solid var(--color-black);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-10xs) var(--padding-xs) var(--padding-11xs)
    var(--padding-mini);
  white-space: nowrap;
  z-index: 4;
  margin-top: -106px;
}
.frame-section,
.group1 {
  display: flex;
  justify-content: flex-start;
}
.group1 {
  height: 188px;
  width: 240px;
  flex-direction: column;
  align-items: flex-start;
  margin-left: -534px;
  font-size: var(--font-size-sm);
}
.frame-section {
  position: absolute;
  top: 5122px;
  left: -2px;
  width: 100%;
  flex-direction: row;
  align-items: flex-end;
  max-width: 100%;
  text-align: left;
  font-size: var(--font-size-xl);
  color: var(--color-black);
  font-family: var(--font-roboto);
}
.frame-child13 {
  width: 1445px;
  height: 825px;
  position: relative;
  object-fit: cover;
  display: none;
  max-width: 100%;
  z-index: 0;
}
.p1,
.p2 {
  margin: 0;
}
.txt {
  line-break: anywhere;
}
.h1 {
  margin: 0;
  align-self: stretch;
  height: 120px;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.05em;
  line-height: 60px;
  text-transform: capitalize;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  z-index: 3;
}
.group-child,
.group-item {
  position: absolute;
  top: 0;
  left: 199.5px;
  background-color: var(--brand-yellow);
  width: 6px;
  height: 199.5px;
  transform: rotate(90deg);
  transform-origin: 0 0;
}
.group-item {
  left: 398px;
  background-color: var(--color-white);
  z-index: 1;
}
.group2 {
  height: 6px;
  flex: 1;
  position: relative;
  max-width: 100%;
}
.group-wrapper,
.text {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.group-wrapper {
  width: 398px;
  flex-direction: row;
  padding: 0;
  box-sizing: border-box;
  z-index: 3;
}
.text {
  width: 416px;
  flex-direction: column;
  gap: var(--gap-lgi);
}
.text-icon {
  width: 87px;
  position: absolute;
  margin: 0 !important;
  top: 0;
  left: 427px;
  height: 80px;
  object-fit: contain;
  z-index: 3;
}
.frame,
.rectangle-parent2 {
  position: absolute;
  box-sizing: border-box;
}
.rectangle-parent2 {
  left: 0px;
  width: 100%;
  height: 825px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 192px 704px 488px 324px;
  background-image: url(../public/rectangle-4194@2x.png);
  background-size: 120% 115%;
  background-repeat: no-repeat;
  background-position: top -100px left 0;
  max-width: 100%;
  z-index: 2;
  text-align: left;
  font-size: 48px;
  color: var(--color-white);
  font-family: var(--font-roboto);
}
.rectangle-parent2::after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .8);
  position: absolute;
  top: 0;
  left: 0;
}
.frame {
  top: 732px;
  left: 720px;
  border-right: 1px solid var(--brand-yellow);
  width: 1px;
  height: 321px;
  z-index: 1;
}
.line-child {
  width: 1445px;
  height: 570px;
  position: relative;
  background-color: var(--color-dimgray-100);
  display: none;
  max-width: 100%;
}
.description4 {
  margin: 0;
  align-self: stretch;
  height: 82px;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.05em;
  line-height: 60px;
  text-transform: lowercase;
  font-weight: 600;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
  z-index: 3;
}
.frame-a,
.frame-a1 {
  position: absolute;
  top: 0;
  left: 207.1px;
  background-color: var(--color-white);
  width: 6px;
  height: 207.6px;
  transform: rotate(90deg);
  transform-origin: 0 0;
  z-index: 4;
}
.frame-a1 {
  left: 314.5px;
  background-color: var(--brand-yellow);
  height: 108px;
  z-index: 5;
}
.group4 {
  width: 315px;
  height: 6px;
  position: relative;
  margin-top: -12px;
}
.description-parent {
  width: 329px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 82px;
  max-width: 100%;
}
.div10 {
  width: 721px;
  position: relative;
  font-size: var(--font-size-xl);
  letter-spacing: 0.1em;
  line-height: 50px;
  font-weight: 600;
  display: inline-block;
  max-width: 100%;
  z-index: 3;
}
.line1,
.shape-frame-child {
  align-self: stretch;
  box-sizing: border-box;
}
.line1 {
  background-color: var(--color-dimgray-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 291px var(--padding-xl) 133px;
  gap: var(--gap-sm);
  max-width: 100%;
  z-index: 1;
}
.shape-frame-child {
  height: 400px;
  position: relative;
  background: linear-gradient(180deg, #fff 93.5%, #fffcf5);
  border: 1px solid var(--brand-yellow);
  display: none;
  mix-blend-mode: normal;
  z-index: 0;
}
.rounded-rectangle-shape-child {
  height: 187.2px;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  z-index: 4;
}
.rounded-rectangle-shape {
  width: 271px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 17px;
  box-sizing: border-box;
}
.ellipse-shape-child {
  width: 347px;
  position: relative;
  max-height: 100%;
  max-width: 100%;
  z-index: 5;
}
.div11 {
  position: relative;
  font-size: var(--font-size-5xl);
  letter-spacing: 0.05em;
  line-height: 60px;
  font-weight: 600;
  font-family: var(--font-roboto);
  color: var(--color-white);
  text-align: left;
  z-index: 6;
  margin-left: -225px;
}
.ellipse-shape,
.rectangle-shape {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.ellipse-shape {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  align-self: stretch;
  height: 62px;
  flex-direction: row;
  align-items: flex-end;
}
.rectangle-shape {
  width: 347px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-5xs);
}
.group-frames-icon {
  width: 65.5px;
  height: 35px;
  position: absolute;
  margin: 0 !important;
  bottom: 113px;
  left: 0.5px;
  z-index: 4;
}
.description5 {
  height: 74px;
  flex: 1;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  display: inline-block;
  z-index: 4;
}
.path-shape {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-31xl);
}
.shape-frame,
.shape-frame-item {
  position: relative;
  border: 1px solid var(--brand-yellow);
  box-sizing: border-box;
}

.shape-frame {
  background-image: url(../public/box_left_top_base.png);
}
.shape-frame,
.shape-frame-item1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 48px 0 var(--padding-8xs);
  gap: 16px;
  min-width: 260px;
  max-width: 100%;
  height: 402px;
  z-index: 3;
}

.shape-container-img,
.shape-frame-item-img {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 2;
}
.shape-container-title,
.shape-frame-item-title {
  position: absolute;
  letter-spacing: 0.05em;
  line-height: 60px;
  font-weight: 600;
  font-size: 24px;
  color: #FFF;
  z-index: 4;
  top: 243px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.shape-frame-item-title {
  width: 227px;
  text-align: center;
}
.shape-container-desc,
.shape-frame-item-desc {
  position: absolute;
  width: 310px;
  height: 74px;
  flex: 1;
  letter-spacing: 0.1em;
  line-height: 20px;
  display: inline-block;
  font-size: 14px;
  color: #000;
  z-index: 4;
  top: 320px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.div12 {
  position: relative;
  font-size: var(--font-size-5xl);
  letter-spacing: 0.05em;
  line-height: 60px;
  font-weight: 600;
  font-family: var(--font-roboto);
  color: var(--color-white);
  text-align: left;
  z-index: 6;
}
.text-group-child,
.vector-frame-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 65.5px;
  height: 35px;
  z-index: 4;
}
.text-group-child {
  height: 100%;
  bottom: 0;
  left: 53px;
  max-height: 100%;
  width: 347px;
  z-index: 5;
}
.text-group {
  align-self: stretch;
  height: 53px;
  position: relative;
  margin-top: -51px;
}
.frame-button {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.description6 {
  width: 319px;
  height: 74px;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  display: inline-block;
  flex-shrink: 0;
  z-index: 4;
}
.shape-frame1 {
  flex: 1;
  background-image: url(../public/box_right_top_base.png);
  border: 1px solid var(--brand-yellow);
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-mini);
  min-width: 260px;
  height: 402px;
  z-index: 3;
}
.group3,
.shape-frame1,
.text-frame1 {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.text-frame1 {
  width: 865px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  gap: var(--gap-6xl);
  margin-top: -98px;
  font-size: var(--font-size-sm);
  color: var(--content);
}
.group3 {
  align-self: stretch;
  flex-direction: column;
  align-items: center;
}
.content-container-child,
.shape-and-text-group {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
}
.shape-and-text-group {
  width: 321px;
  height: 1px;
  border-top: 1px solid var(--brand-yellow);
  z-index: 2;
}
.shape-and-text-group2 {
  position: absolute;
  width: 1px;
  height: 321px;
  border-top: 1px solid var(--brand-yellow);
  top: 750px;
  z-index: 2;
}
.content-container-child {
  width: 400px;
  height: 400px;
  background: linear-gradient(180deg, #fff 93.5%, #fffcf5);
  border: 1px solid var(--brand-yellow);
  display: none;
  mix-blend-mode: normal;
  z-index: 0;
}
.content-container-item {
  width: 65.5px;
  height: 35px;
  position: absolute;
  margin: 0 !important;
  bottom: 117px;
  left: 0.5px;
  z-index: 2;
}
.group-icon {
  height: 186.7px;
  width: 220.8px;
  position: relative;
  z-index: 2;
}
.content-container-inner {
  width: 269px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.rectangle-shape-child {
  width: calc(100% - 2px);
  position: absolute;
  margin: 0 !important;
  right: 1px;
  bottom: 0;
  left: 1px;
  max-width: 100%;
  overflow: hidden;
  height: 53px;
  z-index: 3;
}
.div13 {
  position: relative;
  font-size: var(--font-size-5xl);
  letter-spacing: 0.05em;
  line-height: 60px;
  font-weight: 600;
  font-family: var(--font-roboto);
  color: var(--color-white);
  text-align: left;
  z-index: 4;
}
.rectangle-shape1 {
  cursor: pointer;
  border: 0;
  padding: 0 var(--padding-42xl) var(--padding-10xs);
  background-color: transparent;
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.description7 {
  height: 74px;
  width: 300px;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  display: inline-block;
  flex-shrink: 0;
  z-index: 2;
}
.description-wrapper {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.content-container,
.text-description {
  position: relative;
  border: 1px solid var(--brand-yellow);
  box-sizing: border-box;
  max-width: 100%;
}
.content-container {
  background-image: url(../public/box_left_down_base2.png);
  flex: 0.8995;
  /* background: linear-gradient(180deg, #fff 93.5%, #fffcf5); */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-24xl) 0 var(--padding-xs) var(--padding-30xl);
  gap: var(--gap-2xs);
  min-width: 260px;
  height: 402px;
  z-index: 1;
}
.content-container-img {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 2;
}
.content-container-title {
  position: absolute;
  letter-spacing: 0.05em;
  line-height: 60px;
  font-weight: 600;
  font-size: 24px;
  color: #FFF;
  z-index: 4;
  top: 240px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.content-container-desc {
  position: absolute;
  width: 300px;
  height: 74px;
  flex: 1;
  letter-spacing: 0.1em;
  line-height: 20px;
  display: inline-block;
  font-size: 14px;
  color: #000;
  z-index: 4;
  top: 315px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.frame-child14 {
  height: 178.5px;
  width: 224px;
  position: relative;
  z-index: 2;
}
.rectangle-button-child {
  align-self: stretch;
  height: 35px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
}
.rectangle-button {
  width: 66px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-8xs);
  box-sizing: border-box;
}
.frame-child15 {
  width: 347px;
  position: absolute;
  margin: 0 !important;
  right: -150px;
  bottom: -2px;
  height: 53px;
  z-index: 3;
}
.div14 {
  position: relative;
  letter-spacing: 0.05em;
  line-height: 60px;
  font-weight: 600;
  z-index: 4;
}
.vector-parent3 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
}
.rectangle-button-parent {
  width: 250px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.description8 {
  height: 74px;
  flex: 1;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  display: inline-block;
  z-index: 2;
}
.description-container {
  width: 382px;
  flex-direction: row;
  padding: 0 41px;
  box-sizing: border-box;
  font-size: var(--font-size-sm);
  color: var(--content);
}
.description-container,
.frame-with-group-children,
.text-description {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.text-description {
  background-image: url(../public/box_right_down_base.png);
  flex: 1;
  border: 1px solid var(--brand-yellow);
  box-sizing: border-box;
  flex-direction: column;
  padding: 47px var(--padding-3xs) var(--padding-xs) 0;
  gap: var(--gap-sm);
  min-width: 260px;
  height: 402px;
  z-index: 3;
  font-size: var(--font-size-5xl);
  color: var(--color-white);
}
.text-description-img,
.shape-frame-item-img {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 2;
}
.text-description-title {
  position: absolute;
  letter-spacing: 0.05em;
  line-height: 60px;
  font-weight: 600;
  font-size: 24px;
  color: #FFF;
  z-index: 4;
  top: 240px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.text-description-desc {
  position: absolute;
  width: 300px;
  height: 74px;
  flex: 1;
  letter-spacing: 0.1em;
  line-height: 20px;
  display: inline-block;
  font-size: 14px;
  color: #000;
  z-index: 4;
  top: 315px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.frame-with-group-children {
  align-self: stretch;
  flex-direction: row;
  gap: var(--gap-6xl);
}
.text-and-image-group {
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: 13px;
}
.image-clip-path,
.rectangle,
.text-and-image-group,
.title2 {
  display: flex;
  align-items: center;
  max-width: 100%;
}
.title2 {
  margin: 0;
  width: 641px;
  height: 115px;
  position: relative;
  font-size: var(--font-size-29xl);
  line-height: 50px;
  text-transform: capitalize;
  font-weight: 700;
  font-family: inherit;
  color: var(--brand-yellow);
  text-align: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 2;
}
.image-clip-path,
.rectangle {
  flex-direction: column;
  justify-content: flex-start;
}
.image-clip-path {
  width: 865px;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  gap: 99px;
  font-size: var(--font-size-sm);
  color: var(--content);
}
.rectangle {
  position: absolute;
  top: 3200px;
  width: 100%;
  max-width: 1440px;
  height: 1200px;
  gap: var(--gap-xs);
  text-align: left;
  font-size: var(--font-size-29xl);
  color: var(--color-white);
  font-family: var(--font-roboto);
}
.sub-header-group-child {
  align-self: stretch;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 1;
}
.sub-header-group {
  height: 413px;
  width: 573px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-4xl) 0 0;
  box-sizing: border-box;
  max-width: 100%;
}
.line2 {
  width: 6px;
  flex: 1;
  position: relative;
  background-color: var(--brand-yellow);
  z-index: 1;
}
.rectangle1 {
  height: 382px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 238px 0 0;
  box-sizing: border-box;
}
.frame-child16 {
  height: 74px;
  width: 443px;
  position: relative;
  border-radius: var(--br-71xl);
  display: none;
  max-width: 100%;
}
.b1,
.group-button,
.group7 {
  display: flex;
  max-width: 100%;
}
.b1 {
  height: 59.5px;
  flex: 1;
  position: relative;
  font-size: var(--font-size-21xl);
  letter-spacing: 0.1em;
  line-height: 50px;
  text-transform: capitalize;
  font-family: var(--font-inter);
  color: var(--color-white);
  text-align: left;
  align-items: center;
  z-index: 1;
}
.group-button,
.group7 {
  flex-direction: row;
  box-sizing: border-box;
}
.group-button {
  cursor: pointer;
  border: 4px solid var(--color-white);
  padding: var(--padding-6xs) var(--padding-7xs) var(--padding-5xs) 36px;
  background-color: transparent;
  flex: 1;
  border-radius: var(--br-71xl);
  background: linear-gradient(90deg, #febe2e, #ffcd3f);
  box-shadow: 8px 8px 8px rgba(254, 190, 46, 0.33);
  align-items: center;
  justify-content: flex-end;
  z-index: 3;
}
.group-button:hover {
  background-color: var(--color-gainsboro-200);
  border: 4px solid var(--color-gainsboro-100);
}
.group7 {
  width: 509px;
  margin: 0 auto;
  padding: 0 33px;
}
.blank-line3,
.blank-line4,
.blank-line5,
.kintone2,
.p3,
.p4 {
  margin: 0;
  font-weight: 700;
}
section.about {
  position:relative;
}
.kintone-container1 {
  position:relative;
  margin-top: 141px;
  margin-left: auto;
  margin-right: auto;
  align-self: stretch;
  width: 655px;
  height: 157px;
  font-size: inherit;
  letter-spacing: 0.05em;
  line-height: 50px;
  text-transform: lowercase;
  font-weight: 700;
  font-family: inherit;
  flex-shrink: 0;
  z-index: 3;
}
.kintone-container1::before{
  content:"";
  display:inline-block;
  width:6px;
  height:141px;
  background-color:#FEBE2E;
  position:absolute;
  top: 4px;
  left:-25px;
}
.kintone-container1 > p {
  color: var(--brand-yellow, #FEBE2E);
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 2px;
  text-transform: lowercase;
}
.kintone-container2 {
  position:relative;
  margin-top: 14px;
  margin-left: auto;
  margin-right: auto;
  align-self: stretch;
  width: 655px;
  height: 157px;
  font-size: inherit;
  letter-spacing: 0.05em;
  line-height: 50px;
  text-transform: lowercase;
  font-weight: 700;
  font-family: inherit;
  flex-shrink: 0;
  z-index: 3;
}
.kintone-container2-title p {
  width: 441px;
  color: #fff;
  text-align: center;
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 100% */
  letter-spacing: 1.2px;
  background-color: black;
  padding: 10px;
}
.kintone-container2-desc {
  position:absolute;
  width: 470px;
  color: #000;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 1.4px;
  background-color: #FEBE2E1A;
  padding: 10px 10px 30px;
  border-radius: 22px;
  top: 20px;
  left: 11px;
  z-index: -1;
}
.kintone-container2-desc p {
  padding: 30px 20px 0;
}
.kintone-container2-desc span {
  color: var(--brand-yellow, #FEBE2E);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 1.6px;
}
.kintone-container2-img-hand {
  position:absolute;
  top: -250px;
  left: 55%;
  overflow: hidden;
  z-index: 1;
}
.kintone-container2-img-hand img {
  min-width: 600px;
  width: 105%;
}
.kintone-container2-img-left {
  position:absolute;
  top: -240px;
}
.kintone-container2-img-left svg {
  width: 145%;
}
.kintone-container2-img-right {
  position:absolute;
  top: -390px;
  right: 0%;
  overflow: hidden;
}
.kintone-container2-img-right svg {
  width: 145%;
}
.notePc {
  margin-top: 70px;
  position: relative;
  height: 1100px;
}
.notePc-img-yellow {
  position:absolute;
  overflow: hidden;
  z-index: 1;
}
.notePc-img-pc {
  position:absolute;
  top: 0px;
  left: 282px;
  z-index: 6;
}
.notePc-img-pc img {
  width: 626.5px;
}
.notePc-gif {
  position:absolute;
  width: 441px !important;
  height: 280px;
  top: 35px;
  left: 97px;
}
.notePc-txt {
  position:absolute;
  top: 160px;
  left: 900px;
  z-index: 4;
}
.notePc-txt p {
  color: #FFF;
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  letter-spacing: 2px;
  text-transform: lowercase;
}
.notePc-txt::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 90px;
  background-color: #fff;
  position: absolute;
  top: 4px;
  left: -25px;
}
.notePc-title {
  position:absolute;
  top: 270px;
  left: 900px;
  z-index: 4;
}
.notePc-title p {
  width: 507px;
  color: #fff;
  text-align: center;
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 100% */
  letter-spacing: 1.2px;
  background-color: black;
  padding: 10px;
}
.notePc-section {
  width: 100%;
  height: 568px;
  position:absolute;
  background-image: url(../public/section@1x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  /* mix-blend-mode: soft-light; */
  top: 346px;
  z-index: 5;
}
.notePc-section::before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(102, 102, 102, 0.4);
}
.notePc-txt2 {
  position: absolute;
  top: 530px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 6;
}
.notePc-txt2 p {
  color: #FFF;
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 60px; /* 150% */
  letter-spacing: 4px;
  text-transform: lowercase;
}
.notePc-txt2::before {
  content: "";
  display: inline-block;
  width: 302px;
  height: 6px;
  background: linear-gradient(90deg, #fff 0%, #fff 50%, #FEBE2E 50%, #FEBE2E 100%);
  position: absolute;
  top: 70px;
  left: 0px;
}
.notePc-slide {
  position: absolute;
  top: 650px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 7;
  border-radius: 30px;
}
.notePc-slide img {
  width: 919px;
  height: 382px;
}
.slider {
}
.slider img {
  max-width: 919px;
  width: 919px;
  height: 382px;
}
.slider-item {
  width: 919px !important;
}

.kitone-work-txt {
  font-family: Roboto;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  position: absolute;
  top: 280px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 6;
}

.kitone-work-txt::before {
  content: "";
  display: inline-block;
  width: 302px;
  height: 6px;
  background: linear-gradient(90deg, #fff 0%, #fff 65%, #FEBE2E 65%, #FEBE2E 100%);
  position: absolute;
  top: 70px;
  left: 0px;
}

.kitone-work-desc {
  width: 730px;
  font-family: Roboto;
  font-size: 20px;
  position: absolute;
  letter-spacing: 2px;
  font-weight: 600;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  z-index: 6;
}


.bx-wrapper {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}
.guide-intro {
  position: absolute;
  top: 4650px;
  width: 100%;
  height: 1200px;
  max-width: 1440px;
  gap: var(--gap-xs);
  text-align: left;
  font-size: var(--font-size-29xl);
  color: var(--color-white);
  font-family: var(--font-roboto);
}
.guide-intro-title {
  color: var(--brand-yellow, #FEBE2E);
  text-align: center;
  font-family: Roboto;
  font-size: 48px;
  font-style: normal;
  font-weight: 719;
  line-height: 50px; /* 104.167% */
  text-transform: capitalize;
  margin-bottom: 80px;
}
.guide-intro-title::before {
  content: "";
  display: inline-block;
  width: 302px;
  height: 10px;
  background: linear-gradient(90deg, #FEBE2E 0%, #FEBE2E 50%, #000 50%, #000 100%);
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
.guide-intro-img-area {
  position: relative;
  width: 100%;
  height: 406px;
  background-color: #FEBE2E;
  display: flex;
  justify-content: space-around;
  padding-left: 300px;
  padding-right: 300px;
}
.guide-intro-img-area::before{
  content: '';
  position: absolute;
  top: 100%;
  left: 35%;
  transform: translateX(-50%);
  border-top: 80px solid #FEBE2E;  /* 好みで色を変えてください */ 
  border-right: 55px solid transparent;
  border-left: 55px solid transparent;
}
.img-box {
  width: 240px;
  margin-top: 46px;
}
.img-box img {
  width: 190px;
  height: 132px;
}
.img-box-title {
  height: 45px;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 30px;
  font-size: 20px;
  font-weight: 600;
  display: inline-block;
  flex-shrink: 0;
  color: #000;
}
.img-box-title::after {
  content: "";
  display: inline-block;
  width: 235px;
  height: 3px;
  background-color: #000;
  position: absolute;
  top: 33px;
  left: 0;
}
.img-box-desc {
  width: 237px;
  height: 103px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.4px;
  line-height: 20px;
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
  color: #000;
  font-family: Roboto;
  text-transform: none;
}
.img-box-btn {
  width: 100px;
  height: 23px;
  border: #000 2px solid;
  border-radius: 15px;
}
.img-box-btn p {
  color: #000;
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: capitalize;
  text-align: center;
}
.text-icon {
  width: 87px;
  position: absolute;
  margin: 0 !important;
  top: -10px;
  left: 427px;
  height: 80px;
  object-fit: contain;
  z-index: 3;
}

.group-inner {
  border: 0;
  background-color: rgba(254, 190, 46, 0.1);
  height: 161px;
  width: auto;
  outline: 0;
  flex: 1;
  border-radius: 22px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--padding-8xl) var(--padding-8xs);
  box-sizing: border-box;
  max-width: 100%;
  z-index: 4;
}
.group8,
.text1 {
  align-items: flex-start;
}
.group8 {
  width: 479px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 var(--padding-2xs);
  box-sizing: border-box;
  max-width: 100%;
}
.text1 {
  align-self: stretch;
  flex-direction: column;
  gap: var(--gap-21xl);
  margin-top: -8px;
}
.group5,
.group6,
.header-frame,
.text1 {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.group6 {
  align-self: stretch;
  flex-direction: column;
  align-items: flex-end;
  gap: 141px;
}
.group5,
.header-frame {
  align-items: flex-start;
}
.group5 {
  flex: 1;
  flex-direction: column;
  padding: var(--padding-xl) 0 0;
  box-sizing: border-box;
  min-width: 426px;
}
.header-frame {
  position: absolute;
  top: 1073px;
  left: 294px;
  width: 1272px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-lgi);
  text-align: left;
  font-size: var(--font-size-21xl);
  color: var(--brand-yellow);
  font-family: var(--font-inter);
}
.polygon-child {
  top: 0;
  right: 0;
  bottom: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: contain;
  z-index: 3;
}
.polygon-child,
.wrapper-group-2147,
.wrapper-group-2147-child {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.wrapper-group-2147-child {
  object-fit: contain;
  top: 12px;
  transform: scale(1.064);
}
.wrapper-group-2147 {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group9 {
  position: absolute;
  top: 140px;
  left: 610px;
  background-color: var(--color-white);
  width: 6px;
  height: 93px;
  z-index: 7;
}
.polygon1,
.rectangle2 {
  position: absolute;
  top: 35px;
  left: 319px;
  width: 627px;
  height: 357px;
}
.polygon1 {
  height: 100%;
  width: 100%;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.blank-line6,
.blank-line7,
.blank-line8,
.p5,
.p6 {
  margin: 0;
}
.h11 {
  margin: 0 !important;
  height: 127px;
  width: 485px;
  position: absolute;
  top: -117px;
  left: 2px;
  font-size: inherit;
  letter-spacing: 0.05em;
  line-height: 50px;
  text-transform: lowercase;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  z-index: 4;
}
.frame-child17 {
  height: 45px;
  width: 507.9px;
  position: relative;
  background-color: var(--color-black);
  display: none;
  max-width: 100%;
}
.description9 {
  position: relative;
  font-size: var(--font-size-5xl);
  letter-spacing: 0.1em;
  line-height: 25px;
  font-family: var(--font-roboto);
  color: var(--color-white);
  text-align: left;
  z-index: 1;
}
.rectangle-parent3 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-3xs) var(--padding-3xl) var(--padding-3xs)
    var(--padding-sm);
  background-color: var(--color-black);
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  z-index: 5;
}
.rectangle-parent3:hover {
  background-color: var(--color-darkslategray-100);
}
.line3,
.parent1,
.rectangle-parent3 {
  display: flex;
  flex-direction: row;
}
.parent1 {
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  max-width: 100%;
}
.line3 {
  position: absolute;
  top: 1702px;
  left: -119px;
  width: 1603px;
  height: 504px;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 172px 145px;
  box-sizing: border-box;
  text-align: left;
  font-size: var(--font-size-21xl);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.frame-child18 {
  width: 791px;
  height: 568px;
  position: relative;
  border-radius: var(--br-11xl);
  background-color: var(--brand-yellow);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.13);
  display: none;
  max-width: 100%;
}
.h12 {
  position: relative;
  font-size: inherit;
  letter-spacing: 0.05em;
  line-height: 60px;
  text-transform: capitalize;
  font-weight: 700;
  font-family: inherit;
  z-index: 4;
}
.h12,
.kintone4,
.p7 {
  margin: 0;
}
.kintone3 {
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  z-index: 4;
}
.frame-wrapper,
.kintone-wrapper,
.parent2 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.kintone-wrapper {
  flex-direction: row;
  padding: 0 0 0 var(--padding-10xs);
  font-size: var(--font-size-sm);
}
.frame-wrapper,
.parent2 {
  max-width: 100%;
}
.parent2 {
  flex-direction: column;
  gap: var(--gap-12xs);
}
.frame-wrapper {
  flex-direction: row;
  padding: 0 42px;
  box-sizing: border-box;
}
.frame-child19 {
  position: absolute;
  top: 5px;
  left: 43px;
  background-color: var(--color-black);
  width: 632px;
  height: 3px;
  z-index: 6;
}
.i,
.text-link-child {
  position: absolute;
  top: 45px;
  left: 40px;
  width: 88px;
  height: 88px;
  z-index: 4;
}
.i {
  height: 100%;
  top: 0;
  left: 0;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  display: flex;
  font-weight: 200;
  align-items: center;
  width: 93px;
  z-index: 5;
}
.text-link {
  height: 146px;
  width: 128px;
  position: relative;
}
.b2 {
  letter-spacing: 0.05em;
  line-height: 25px;
}
.p8,
.p9 {
  margin: 0;
}
.p9 {
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  line-height: 20px;
}
.description10 {
  height: 68px;
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
  z-index: 4;
}
.text-link1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-2xl);
  box-sizing: border-box;
  min-width: 125px;
  font-size: var(--font-size-xl);
  color: var(--color-black);
}
.i1,
.text-link-item {
  position: absolute;
  top: 45px;
  left: 42px;
  width: 88px;
  height: 88px;
  z-index: 4;
}
.i1 {
  height: 100%;
  top: 0;
  left: 0;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  display: flex;
  font-weight: 200;
  align-items: center;
  width: 93px;
  z-index: 5;
}
.text-link2 {
  height: 146px;
  width: 130px;
  position: relative;
}
.b3 {
  letter-spacing: 0.05em;
  line-height: 25px;
}
.p10,
.p11 {
  margin: 0;
}
.p11 {
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  line-height: 20px;
}
.description11 {
  height: 66px;
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
  z-index: 4;
}
.text-link-parent,
.text-link3 {
  display: flex;
  justify-content: flex-start;
}
.text-link3 {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 0 var(--padding-4xl);
  box-sizing: border-box;
  min-width: 125px;
  font-size: var(--font-size-xl);
  color: var(--color-black);
}
.text-link-parent {
  align-self: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0 var(--padding-12xs) 0 0;
  gap: var(--gap-mini);
}
.frame-icon {
  height: 88px;
  width: 88px;
  position: absolute;
  margin: 0 !important;
  right: -32px;
  bottom: 9px;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 4;
}
.frame-parent8,
.i2 {
  display: flex;
  position: relative;
}
.i2 {
  height: 146px;
  flex: 1;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  font-weight: 200;
  align-items: center;
  z-index: 6;
}
.frame-parent8 {
  width: 93px;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.b4 {
  letter-spacing: 0.05em;
  line-height: 25px;
}
.p12,
.p13 {
  margin: 0;
}
.p13 {
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  line-height: 20px;
}
.description12 {
  height: 107px;
  flex: 1;
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  z-index: 4;
}
.i3,
.line4 {
  display: flex;
}
.i3 {
  align-self: stretch;
  height: 146px;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  font-weight: 200;
  align-items: center;
  flex-shrink: 0;
  z-index: 6;
}
.line4 {
  width: 93px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 13px;
  box-sizing: border-box;
  font-size: var(--font-size-71xl);
  color: var(--color-goldenrod-100);
}
.description-group,
.frame-parent7 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.description-group {
  flex: 1;
  align-items: flex-end;
  gap: var(--gap-sm);
  min-width: 194px;
  font-size: var(--font-size-xl);
  color: var(--color-black);
}
.frame-parent7 {
  align-self: stretch;
  align-items: flex-start;
  gap: var(--gap-30xl);
}
.frame-child20,
.i4 {
  position: absolute;
  top: 46px;
  left: 44.3px;
  width: 88px;
  height: 88px;
  z-index: 4;
}
.i4 {
  height: 100%;
  top: 0;
  left: 0;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  display: flex;
  font-weight: 200;
  align-items: center;
  width: 93px;
  z-index: 7;
}
.frame-parent10 {
  height: 146px;
  width: 132px;
  position: relative;
}
.b5 {
  letter-spacing: 0.05em;
  line-height: 25px;
}
.os,
.p14 {
  margin: 0;
}
.os {
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  line-height: 20px;
}
.description13 {
  align-self: stretch;
  height: 106.8px;
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
  z-index: 4;
}
.description-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-30xl) 0 0;
  box-sizing: border-box;
  min-width: 125px;
  font-size: var(--font-size-xl);
  color: var(--color-black);
}
.i5 {
  height: 146px;
  width: 93px;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  display: flex;
  font-weight: 200;
  align-items: center;
  flex-shrink: 0;
  z-index: 7;
}
.frame-parent6,
.frame-parent9 {
  display: flex;
  justify-content: flex-start;
}
.frame-parent9 {
  align-self: stretch;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 var(--padding-12xs) 0 0;
  gap: var(--gap-mini);
  margin-top: -46px;
}
.frame-parent6 {
  flex: 1;
  flex-direction: column;
  align-items: flex-end;
  max-width: 100%;
}
.frame-child21 {
  height: 88px;
  width: 88px;
  position: relative;
  z-index: 4;
}
.b6 {
  letter-spacing: 0.05em;
  line-height: 25px;
}
.p15,
.p16 {
  margin: 0;
}
.p16 {
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  line-height: 20px;
}
.description14 {
  align-self: stretch;
  height: 106.8px;
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
  z-index: 4;
}
.description-wrapper1,
.frame-parent12 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.description-wrapper1 {
  flex: 1;
  flex-direction: column;
  padding: var(--padding-10xs) 0 0;
}
.frame-parent12 {
  align-self: stretch;
  flex-direction: row;
  gap: var(--gap-mini);
}
.frame-icon1 {
  height: 88px;
  width: 88px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 4;
}
.b7 {
  letter-spacing: 0.05em;
  line-height: 25px;
}
.p17,
.p18 {
  margin: 0;
}
.p18 {
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  line-height: 20px;
}
.description15 {
  align-self: stretch;
  height: 106.8px;
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
  z-index: 4;
}
.description-wrapper2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) 0 0;
}
.frame-parent13 {
  align-self: stretch;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--gap-mini);
}
.ellipse1,
.frame-parent11,
.frame-parent13,
.path-arrow {
  display: flex;
  justify-content: flex-start;
}
.frame-parent11 {
  width: 295px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-12xs);
  min-width: 295px;
  margin-left: -51px;
  font-size: var(--font-size-xl);
  color: var(--color-black);
}
.ellipse1,
.path-arrow {
  align-items: flex-end;
  max-width: 100%;
}
.ellipse1 {
  align-self: stretch;
  flex-direction: row;
  row-gap: 20px;
  margin-top: -40px;
}
.path-arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  flex-direction: column;
  height: 100%;
}
.rectangle-parent5 {
  align-self: stretch;
  height: 375px;
  position: relative;
  max-width: 100%;
  font-size: var(--font-size-71xl);
  color: var(--color-goldenrod-100);
}
.rectangle-parent4 {
  width: 791px;
  border-radius: var(--br-11xl);
  background-color: var(--brand-yellow);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.13);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-25xl) 62px var(--padding-21xl) var(--padding-18xl);
  box-sizing: border-box;
  gap: var(--gap-4xs);
  max-width: 100%;
  z-index: 3;
}
.frame-child22 {
  align-self: stretch;
  overflow: hidden;
  max-height: 100%;
  z-index: 1;
}
.b8,
.frame-child22,
.frame-child23 {
  position: relative;
  max-width: 100%;
}
.frame-child23 {
  height: 74px;
  width: 718px;
  border-radius: var(--br-71xl);
  display: none;
}
.b8 {
  flex: 1;
  font-size: var(--font-size-21xl);
  letter-spacing: 0.05em;
  line-height: 60px;
  text-transform: capitalize;
  display: inline-block;
  font-family: var(--font-roboto);
  color: var(--color-black);
  text-align: left;
  padding-left: var(--padding-xl);
  padding-right: var(--padding-xl);
  z-index: 1;
}
.vector-parent5 {
  cursor: pointer;
  border: 4px solid var(--color-black);
  padding: var(--padding-6xs) var(--padding-6xs) var(--padding-5xs);
  background-color: transparent;
  width: 726px;
  border-radius: var(--br-71xl);
  background: linear-gradient(
    90deg,
    rgba(87, 87, 87, 0) 23%,
    rgba(54, 54, 54, 0)
  );
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  z-index: 2;
  margin-top: -204px;
}
.vector-parent5:hover {
  background-color: var(--color-darkslategray-200);
  background-image: linear-gradient(90deg, #000, #000);
  border: 4px solid var(--color-darkslategray-100);
  box-sizing: border-box;
}
.vector-parent4 {
  min-height: 380px;
  margin-top: -126px;
}
.path-line,
.vector-parent4 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}
.group-icon1,
.kintone-21 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.kintone-21 {
  top: 256px;
  left: 132px;
  width: 247px;
  height: 49px;
  object-fit: cover;
  z-index: 2;
}
.line-g {
  align-self: stretch;
  height: 344px;
  position: relative;
}
.polygon-f {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 0 var(--padding-4xs);
  box-sizing: border-box;
  min-width: 349px;
  max-width: 100%;
}
.h13 {
  margin: 0;
  position: relative;
  font-size: inherit;
  letter-spacing: 0.05em;
  line-height: 60px;
  text-transform: capitalize;
  font-weight: 700;
  font-family: inherit;
  z-index: 1;
}
.group-k,
.h13,
.h14 {
  align-self: stretch;
}
.h14 {
  position: relative;
  font-size: inherit;
  letter-spacing: 0.05em;
  line-height: 60px;
  text-transform: capitalize;
  font-weight: 700;
  font-family: inherit;
  color: var(--brand-yellow);
  z-index: 2;
  margin: -3px 0 0;
}
.group-k {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: var(--font-size-21xl);
}
.frame-child24,
.frame-child25 {
  position: absolute;
  top: 0;
  left: 165.2px;
  background-color: var(--brand-yellow);
  width: 6px;
  height: 164.9px;
  transform: rotate(90deg);
  transform-origin: 0 0;
  z-index: 1;
}
.frame-child25 {
  left: 329.2px;
  background-color: var(--color-black);
  z-index: 2;
}
.rectangle-parent6 {
  height: 6px;
  flex: 1;
  position: relative;
  max-width: 100%;
}
.clip-path-n {
  width: 339px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-8xs);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-icon2 {
  height: 27px;
  width: 30px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}
.description16 {
  flex: 1;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 19px;
  z-index: 1;
}
.frame-parent15 {
  width: 303px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
.frame-icon3 {
  height: 27px;
  width: 30px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}
.description17 {
  flex: 1;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 18px;
  z-index: 2;
}
.frame-parent16 {
  width: 303px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
.info-frame-icon {
  height: 27px;
  width: 30px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}
.twd-1 {
  font-size: var(--font-size-xl);
}
.span {
  font-size: var(--font-size-sm);
}
.span1 {
  font-size: var(--font-size-xl);
}
.p19,
.twd-1-5 {
  margin: 0;
}
.description18 {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 20px;
  z-index: 1;
}
.button-group {
  flex: 1;
  flex-direction: column;
  padding: var(--padding-9xs) 0 0;
  box-sizing: border-box;
  min-width: 211px;
}
.button-group,
.frame-parent14,
.group-m,
.info-frame-parent {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.info-frame-parent {
  align-self: stretch;
  flex-direction: row;
  gap: var(--gap-3xs);
  font-size: var(--font-size-xs);
}
.frame-parent14,
.group-m {
  flex-direction: column;
}
.frame-parent14 {
  align-self: stretch;
  gap: 18px;
}
.group-m {
  width: 364px;
  gap: var(--gap-11xl);
  min-height: 209px;
}
.description19,
.line-icon {
  position: relative;
  z-index: 1;
}
.line-icon {
  height: 27px;
  width: 30px;
  overflow: hidden;
  flex-shrink: 0;
}
.description19 {
  align-self: stretch;
  letter-spacing: 0.05em;
  line-height: 25px;
}
.rectangle3 {
  flex: 1;
  flex-direction: column;
  padding: var(--padding-10xs) 0 0;
}
.frame-j,
.rectangle3,
.text-frame2 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.text-frame2 {
  width: 303px;
  flex-direction: row;
  gap: var(--gap-3xs);
}
.frame-j {
  width: 468px;
  flex-direction: column;
  gap: 5px;
  min-width: 468px;
  max-width: 100%;
}
.clip-path-d,
.rectangle-e {
  display: flex;
  flex-direction: row;
  max-width: 100%;
}
.rectangle-e {
  width: 1046px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-22xl);
}
.clip-path-d {
  width: 1207px;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  font-size: var(--font-size-xl);
}
.path-line-parent {
  position: absolute;
  top: 920px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-31xl);
  text-align: left;
  font-size: var(--font-size-21xl);
  color: var(--color-black);
  font-family: var(--font-roboto);
}
.desktop-1440-item {
  position: absolute;
  top: 80px;
  left: 0;
  width: 1445px;
  height: 54px;
  mix-blend-mode: normal;
  z-index: 2;
}
.business-concept-with-wooden-b-icon {
  width: 1445px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
  display: none;
  mix-blend-mode: normal;
  max-width: 100%;
}
.no-code1 {
  letter-spacing: 0.1em;
}
.span2 {
  letter-spacing: 0.05em;
}
.no-code-txt-container {
  width: 100%;
}
.no-code-txt-container span {
  font-weight: 600;
}
.no-code {
  margin: 0;
  width: 427px;
  height: 38px;
  position: relative;
  font-size: inherit;
  line-height: 50px;
  font-weight: 700;
  font-family: inherit;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 100%;
  z-index: 4;
}
.no-code,
.span3,
.span4 {
  text-transform: capitalize;
  font-weight: 600;
}
.kintone6 {
  text-transform: lowercase;
  font-size: 78px;
}
.kintone5 {
  align-self: stretch;
  height: 38px;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 50px;
  display: inline-block;
  flex-shrink: 0;
  z-index: 4;
  font-size: var(--font-size-21xl);
}
.group10,
.s-v-g-i-d-frame {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
}
.group10 {
  flex: 1;
  flex-direction: column;
  gap: 22px;
}
.s-v-g-i-d-frame {
  width: 763px;
  flex-direction: row;
  padding: 0 var(--padding-57xl);
  box-sizing: border-box;
}
.line-with-arrowhead-child {
  height: 45px;
  width: 264px;
  position: relative;
  border-radius: var(--br-31xl);
  border: 1.5px solid var(--color-white);
  box-sizing: border-box;
  display: none;
}
.b9 {
  height: 36px;
  width: 264px;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 30px;
  text-transform: capitalize;
  display: inline-block;
  flex-shrink: 0;
  z-index: 5;
}
.line-with-arrowhead,
.rectangle-with-rounded-corners {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.rectangle-with-rounded-corners {
  width: 100%;
  border: 0;
  outline: 0;
  background-color: transparent;
  height: 30px;
  flex: 1;
  flex-direction: column;
  font-family: var(--font-inter);
  font-size: var(--font-size-5xl);
  color: var(--color-white);
  min-width: 85px;
}
.line-with-arrowhead {
  width: 264px;
  border-radius: var(--br-31xl);
  border: 1.5px solid var(--color-white);
  box-sizing: border-box;
  flex-direction: row;
  padding: var(--padding-5xs) var(--padding-7xl) var(--padding-12xs)
    var(--padding-3xl);
  z-index: 4;
}
.kintone7 {
  flex: 1;
  position: relative;
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  line-height: 20px;
  text-transform: lowercase;
  /* white-space: pre-wrap; */
  display: inline-block;
  min-width: 266px;
  max-width: 100%;
  z-index: 4;
}
.frame-with-clip-path,
.group-without-children {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.group-without-children {
  width: 694px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-xl);
  font-size: var(--font-size-5xl);
}
.group-without-children-box {

}
.frame-with-clip-path {
  align-self: stretch;
  flex-direction: column;
  align-items: flex-end;
  padding: 117px 50px 280px;
  box-sizing: border-box;
  gap: var(--gap-21xl);
  background-image: url(../public/business-eyecatch.png);
  background-size: 1440px;
  background-repeat: no-repeat;
  background-position: top;
  z-index: 3;
}
.description20 {
  width: 396px;
  margin-bottom: 60px;
  position: relative;
  font-size: var(--font-size-5xl);
  letter-spacing: 0.05em;
  line-height: 24px;
  font-weight: 600;
  font-family: var(--font-roboto);
  color: var(--brand-yellow);
  display: inline-block;
  max-width: 100%;
  padding-left: var(--padding-xl);
  padding-right: var(--padding-xl);
  z-index: 1;
  text-align: center;
}
.wrapper-group-2198-child {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: contain;
  position: absolute;
  left: 4px;
  top: 4px;
  transform: scale(1.355);
}
.wrapper-group-2198 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}
.clip-path-group1,
.div15 {
  position: relative;
  z-index: 1;
}
.clip-path-group1 {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  border-radius: var(--br-8xs);
}
.div15 {
  letter-spacing: 0.1em;
  line-height: 35px;
  text-transform: capitalize;
}
.wrapper-group-2198-parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-2xs) var(--padding-lgi) var(--padding-3xs)
    var(--padding-2xl);
  position: relative;
  gap: var(--gap-4xs);
  z-index: 1;
}
.frame-child26 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0.2px;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.child-box-input {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  border-radius: 5px;
}
.rectangle-input {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  border-radius: var(--br-8xs);
}
.frame-parent17,
.it,
.rectangle-input {
  position: relative;
  z-index: 1;
}
.it {
  letter-spacing: 0.1em;
  line-height: 35px;
  text-transform: capitalize;
}
.frame-parent17 {
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.08));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-2xs) var(--padding-13xl) var(--padding-3xs);
  gap: var(--gap-4xs);
}
.frame-child27 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: -0.1px;
  bottom: 0;
  left: 0.1px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.rectangle-input1 {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  border-radius: var(--br-8xs);
}
.div16,
.frame-parent18,
.rectangle-input1 {
  position: relative;
  z-index: 1;
}
.div16 {
  letter-spacing: 0.1em;
  line-height: 35px;
  text-transform: capitalize;
}
.frame-parent18 {
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.08));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-2xs) var(--padding-lgi) var(--padding-3xs)
    var(--padding-2xl);
  gap: var(--gap-4xs);
}
.frame-child28 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: -0.1px;
  bottom: 0;
  left: 0.1px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.div17,
.rectangle-input2 {
  position: relative;
  z-index: 1;
}
.rectangle-input2 {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  border-radius: var(--br-8xs);
}
.div17 {
  letter-spacing: 0.1em;
  line-height: 35px;
  text-transform: capitalize;
}
.frame-group1,
.frame-parent19,
.rectangle-frame {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.gyomu-group1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.frame-parent19 {
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.08));
  align-items: center;
  padding: var(--padding-2xs) var(--padding-lgi) var(--padding-3xs)
    var(--padding-2xl);
  position: relative;
  gap: var(--gap-4xs);
  z-index: 1;
}
.frame-group1,
.rectangle-frame {
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.rectangle-frame {
  flex: 1;
  overflow-x: auto;
  padding: 0 var(--padding-9xs) 0 0;
  gap: 31px;
}
.frame-group1 {
  align-self: stretch;
  padding: 0 var(--padding-12xl) 0 var(--padding-3xl);
}
.frame-child29 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0.4px;
  right: 0;
  bottom: -0.4px;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.clip-path-clip-path {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  border-radius: var(--br-8xs);
}
.clip-path-clip-path,
.div18,
.frame-parent20 {
  position: relative;
  z-index: 1;
}
.div18 {
  letter-spacing: 0.1em;
  line-height: 35px;
  text-transform: capitalize;
}
.frame-parent20 {
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.08));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-2xs) var(--padding-mini) var(--padding-3xs) 18px;
  gap: var(--gap-5xs);
}
.frame-child30 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0.4px;
  right: 0;
  bottom: -0.4px;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.rectangle-input3 {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  border-radius: var(--br-8xs);
}
.div19,
.frame-parent21,
.rectangle-input3 {
  position: relative;
  z-index: 1;
}
.div19 {
  letter-spacing: 0.1em;
  line-height: 35px;
  text-transform: capitalize;
}
.frame-parent21 {
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.08));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-2xs) var(--padding-2xl) var(--padding-3xs);
  gap: var(--gap-4xs);
}
.frame-child31 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0.4px;
  right: 0.3px;
  bottom: -0.4px;
  left: -0.3px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.rectangle-input4 {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  border-radius: var(--br-8xs);
}
.div20,
.frame-parent22,
.rectangle-input4 {
  position: relative;
  z-index: 1;
}
.div20 {
  letter-spacing: 0.1em;
  line-height: 35px;
  text-transform: capitalize;
}
.frame-parent22 {
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.08));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-2xs) var(--padding-lgi) var(--padding-3xs)
    var(--padding-3xl);
  gap: var(--gap-4xs);
}
.frame-child32 {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0.4px;
  right: -0.4px;
  bottom: -0.4px;
  left: 0.4px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.div21,
.rectangle-input5 {
  position: relative;
  z-index: 1;
}
.rectangle-input5 {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  border-radius: var(--br-8xs);
}
.div21 {
  letter-spacing: 0.1em;
  line-height: 35px;
  text-transform: capitalize;
}
.frame-parent23,
.vector-frame {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.frame-parent23 {
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.08));
  align-items: center;
  padding: var(--padding-2xs) var(--padding-xl) var(--padding-3xs)
    var(--padding-2xl);
  position: relative;
  gap: var(--gap-4xs);
  z-index: 2;
}
.vector-frame {
  align-items: flex-start;
  padding: 0 var(--padding-10xs) 0 0;
  gap: 34px;
}
.polygon-with-children-child {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: -0.4px;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 1;
}
.frame-with-two-groups {
  margin: 0;
  height: 18.5px;
  width: 18.5px;
  position: relative;
  border-radius: var(--br-8xs);
  z-index: 2;
}
.div22 {
  position: relative;
  letter-spacing: 0.1em;
  line-height: 35px;
  text-transform: capitalize;
  z-index: 2;
}
.polygon-with-children,
.rectangle-and-group {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.polygon-with-children {
  align-items: center;
  padding: var(--padding-2xs) var(--padding-8xl) var(--padding-3xs)
    var(--padding-2xl);
  position: relative;
  gap: var(--gap-4xs);
}
.rectangle-and-group {
  align-items: flex-start;
  padding: 0 var(--padding-3xl) 0 0;
}
.eyecatch {
  color:#fff;
  font-size: var(--font-size-13xl);
  font-family: var(--font-inter);
}
.checkArea {
  margin-top: 61px;
  text-align: center;
}
.clip-path-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}
.clip-path-group {
  gap: var(--gap-11xl);
}
.clip-path-group {
  position: absolute;
  top: 81px;
  left: 0;
  width: 100%;
  gap: 60px;
  text-align: left;
  font-size: var(--font-size-13xl);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.parent-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 800px;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  gap: var(--gap-5xl);
  font-size: var(--font-size-xl);
  color: var(--brand-dark-gray);
}
.parentBox1 {
  width: 702.5px;
  margin: 0 auto;
}
.parentBox2 {
  width: 759px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 24.04px;
}
.parentBox3 {
  width: 152px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 24.04px;
  margin-bottom: 71.6px;
}
.parentBox1,
.parentBox2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.parentBox__part {
  width: 152px;
  height: 56px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  border-radius: 25px;
  text-align: center;
}
.w-198 {
  width: 198px; !important
}

.parentBox__part label {
  cursor: pointer;
  display: inline-block;
}
.parentBox__part > div {
  margin: 4px;
  text-align: center;
}
.parentBox__part input {
  display: none;
}
.parentBox__part__text {
  color: var(--brand-dark-gray, #666);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 50px;
  letter-spacing: 2px;
  text-transform: capitalize;
  vertical-align:middle;
  margin-left: 8px;
}

.check-box {
  cursor: pointer;
}
.check-text {
  /* チェックボックスとテキストの上下を中央に */
  align-items: center;
  line-height: 56px;
  display: flex;
  color: #666;
  font-size: 20px;
}
.check-box input {
  display: none; /* デフォルトのチェックボックスを非表示 */
}
.check-box input + .check-text::before {
  background-image: url("../public/Rectangle-4191.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 18.5px;
  position: relative;
  width: 18.5px;
  margin-right: 8.8px;
  margin-bottom: 3px;
}
.check-box input:checked + .check-text::before {
  background-image: url("../public/clickMarker_yellow.png");
}
.check-box input:checked + .check-text::after {
  background-image: url("../public/clickCheck@x2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 27.5px;
  position: absolute;
  width: 27.5px;
  margin-right: 8.8px;
  margin-bottom: 5px;
}



.frame-child33 {
  height: 382px;
  width: 919px;
  position: relative;
  border-radius: var(--br-11xl);
  background-color: var(--color-white);
  box-shadow: 3px 5px 8px 2px rgba(0, 0, 0, 0.25);
  display: none;
  mix-blend-mode: normal;
  max-width: 100%;
}
.frame-with-multiple-groups {
  width: 26px;
  flex: 1;
  position: relative;
  background-color: var(--brand-yellow);
  z-index: 7;
}
.vector-frames-and-more {
  height: 222px;
  width: 58px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.frame-child34 {
  height: 242.7px;
  width: 270px;
  position: relative;
  z-index: 7;
}
.blank-line10,
.blank-line11,
.blank-line12,
.blank-line13,
.blank-line9,
.p20,
.p21 {
  margin: 0;
}
.description21 {
  height: 155px;
  position: absolute;
  margin: 0 !important;
  bottom: -123px;
  left: 2px;
  letter-spacing: 0.1em;
  line-height: 20px;
  display: inline-block;
  z-index: 7;
}
.blank-line14,
.blank-line15,
.blank-line16,
.p22 {
  margin: 0;
}
.description22 {
  margin: 0;
  height: 100.6px;
  flex: 1;
  position: relative;
  font-size: var(--font-size-16xl);
  letter-spacing: 0.05em;
  line-height: 60px;
  font-weight: 600;
  font-family: inherit;
  color: var(--brand-yellow);
  display: inline-block;
  max-width: 100%;
  z-index: 8;
}
.description-parent1 {
  align-self: stretch;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
}
.description-parent1,
.frame-wrapper1,
.rectangle-parent7 {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.frame-wrapper1 {
  width: 455px;
  flex-direction: column;
  align-items: flex-start;
  min-height: 180px;
  flex-shrink: 0;
}
.rectangle-parent7 {
  border-radius: var(--br-11xl);
  background-color: var(--color-white);
  box-shadow: 3px 5px 8px 2px rgba(0, 0, 0, 0.25);
  flex-direction: row;
  align-items: center;
  padding: var(--padding-51xl) var(--padding-11xs) var(--padding-51xl) 0;
  box-sizing: border-box;
  gap: var(--gap-48xl);
  z-index: 6;
}
.frame-child35 {
  width: 119px;
  height: 19.2px;
  position: relative;
  z-index: 1;
}
.polygon-icon {
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 240.5px;
  max-height: 100%;
  width: 282px;
  object-fit: contain;
  z-index: 1;
}
.frame-child36 {
  position: absolute;
  top: 40px;
  left: 0.5px;
  background-color: var(--color-white);
  border: 1px solid var(--brand-yellow);
  box-sizing: border-box;
  width: 764px;
  height: 134px;
  z-index: 2;
}
.polygon-parent {
  width: 764px;
  height: 234px;
  position: relative;
  max-width: 100%;
}
.p23,
.p24 {
  color: var(--brand-yellow, #FEBE2E);
  text-align: center;
  font-family: Roboto;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: 50px; /* 142.857% */
  letter-spacing: 1.75px;
}
.p23 span {
  font-weight: 600;
}
.description23 {
  margin-top: 15px;
}
.frame-parent27 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}
.group-icon2,
.group-icon3 {
  position: relative;
  object-fit: cover;
  z-index: 1;
}
.group-icon2 {
  height: 63.8px;
  width: 83.5px;
}
.group-icon3 {
  align-self: stretch;
  height: 29px;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.group-of-rectangles {
  width: 136px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-12xs) var(--padding-5xs) 0;
  box-sizing: border-box;
}
.frame-wrapper3,
.group-parent {
  display: flex;
  flex-direction: row;
}
.group-parent {
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-xl);
}
.frame-wrapper3 {
  align-self: stretch;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-6xs) 0 0;
}
.group-icon4,
.group-icon5 {
  height: 20.9px;
  width: 69.5px;
  position: relative;
  object-fit: cover;
  z-index: 1;
}
.group-icon5 {
  height: 25.3px;
  width: 144.6px;
}
.main-frame {
  width: 265px;
  height: 26px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--padding-12xs) 0 0;
  box-sizing: border-box;
  gap: var(--gap-xl);
}
.frame-parent30,
.frame-wrapper2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.frame-parent30 {
  align-self: stretch;
  align-items: flex-end;
  gap: var(--gap-31xl);
}
.frame-wrapper2 {
  width: 273px;
  align-items: flex-start;
  padding: 0 0 var(--padding-7xs);
  box-sizing: border-box;
}
.group-icon6,
.group-icon7 {
  position: relative;
  object-fit: cover;
  z-index: 1;
}
.group-icon6 {
  align-self: stretch;
  height: 41.9px;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.group-icon7 {
  width: 76.5px;
  flex: 1;
  max-height: 100%;
}
.quadruple-frames,
.triple-frame-structure {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.quadruple-frames {
  align-self: stretch;
  flex: 1;
  align-items: center;
  gap: 46px;
}
.triple-frame-structure {
  height: 160px;
  width: 116px;
  align-items: flex-start;
  padding: var(--padding-lgi) var(--padding-5xs) 0 0;
  box-sizing: border-box;
}
.group-icon8,
.group-icon9 {
  position: relative;
  object-fit: cover;
  z-index: 1;
}
.group-icon8 {
  align-self: stretch;
  height: 36.2px;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.group-icon9 {
  width: 69.8px;
  height: 68.2px;
}
.stacked-frames {
  width: 97px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-20xl);
}
.group-icon10,
.group-icon11 {
  position: relative;
  object-fit: cover;
  z-index: 1;
}
.group-icon10 {
  align-self: stretch;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.group-icon11 {
  height: 33.6px;
  width: 122.5px;
}
.fourth-level-frame {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-4xl) 0 var(--padding-18xl);
}
.double-frames {
  align-self: stretch;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.double-frames,
.outer-frames,
.septuple-frame-setup {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.outer-frames {
  height: 182px;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 var(--padding-12xs) var(--padding-xl) 0;
  box-sizing: border-box;
}
.septuple-frame-setup {
  flex-direction: row;
  align-items: flex-end;
  gap: var(--gap-sm);
  min-width: 192px;
}
.frame-parent29 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-14xl);
}
.group-icon12,
.group-icon13 {
  position: relative;
  object-fit: cover;
  z-index: 1;
}
.group-icon12 {
  height: 15.3px;
  width: 218.7px;
}
.group-icon13 {
  align-self: stretch;
  height: 38.7px;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.inner-frame {
  width: 67px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-10xs) var(--padding-lgi) 0 0;
  box-sizing: border-box;
}
.text-frames-icon {
  width: 1.9px;
  height: 2.5px;
  position: relative;
}
.clip-path-frames {
  height: 3px;
  width: -13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group2 {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-9xs) 0 var(--padding-26xl);
}
.vector-icon {
  width: 1.8px;
  height: 2.4px;
  position: relative;
}
.clip-path-group3,
.vector-wrapper {
  display: flex;
  align-items: flex-start;
}
.vector-wrapper {
  height: 2px;
  width: -16px;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group3 {
  flex: 1;
  overflow: hidden;
  flex-direction: row;
  justify-content: flex-end;
  padding: var(--padding-9xs) 0 var(--padding-26xl);
  z-index: 1;
  margin-left: -107px;
}
.vector-icon1 {
  width: 2.2px;
  height: 2.5px;
  position: relative;
}
.vector-wrapper1 {
  height: 3px;
  width: -18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group4 {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-9xs) 0 var(--padding-26xl);
  z-index: 2;
  margin-left: -107px;
}
.vector-icon2 {
  width: 2.1px;
  height: 2.4px;
  position: relative;
}
.vector-wrapper2 {
  height: 2px;
  width: -20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group5 {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-9xs) 0 var(--padding-26xl);
  z-index: 3;
  margin-left: -107px;
}
.vector-icon3 {
  width: 3.2px;
  height: 3.2px;
  position: relative;
}
.vector-wrapper3 {
  height: 3px;
  width: -10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group6 {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-9xs) 0 var(--padding-25xl);
  z-index: 4;
  margin-left: -107px;
}
.clip-path-group7,
.clip-path-group8 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0.4px;
  right: -0.1px;
  bottom: -0.4px;
  left: 0.2px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 5;
}
.clip-path-group8 {
  z-index: 6;
}
.clip-path-group10,
.clip-path-group11,
.clip-path-group12,
.clip-path-group13,
.clip-path-group14,
.clip-path-group15,
.clip-path-group9 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0.4px;
  right: -0.1px;
  bottom: -0.4px;
  left: 0.2px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 7;
}
.clip-path-group10,
.clip-path-group11,
.clip-path-group12,
.clip-path-group13,
.clip-path-group14,
.clip-path-group15 {
  z-index: 8;
}
.clip-path-group11,
.clip-path-group12,
.clip-path-group13,
.clip-path-group14,
.clip-path-group15 {
  z-index: 9;
}
.clip-path-group12,
.clip-path-group13,
.clip-path-group14,
.clip-path-group15 {
  z-index: 10;
}
.clip-path-group13,
.clip-path-group14,
.clip-path-group15 {
  z-index: 11;
}
.clip-path-group14,
.clip-path-group15 {
  z-index: 12;
}
.clip-path-group15 {
  z-index: 13;
}
.clip-path-group16,
.clip-path-group17,
.clip-path-group18,
.clip-path-group19,
.clip-path-group20,
.clip-path-group21,
.clip-path-group22 {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0.4px;
  right: -0.1px;
  bottom: -0.4px;
  left: 0.2px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 14;
}
.clip-path-group17,
.clip-path-group18,
.clip-path-group19,
.clip-path-group20,
.clip-path-group21,
.clip-path-group22 {
  z-index: 15;
}
.clip-path-group18,
.clip-path-group19,
.clip-path-group20,
.clip-path-group21,
.clip-path-group22 {
  z-index: 16;
}
.clip-path-group19,
.clip-path-group20,
.clip-path-group21,
.clip-path-group22 {
  z-index: 17;
}
.clip-path-group20,
.clip-path-group21,
.clip-path-group22 {
  z-index: 18;
}
.clip-path-group21,
.clip-path-group22 {
  z-index: 19;
}
.clip-path-group22 {
  z-index: 20;
}
.clip-path-group-parent {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: -2.3px;
  bottom: 0;
  left: 2.2px;
}
.vector-icon4 {
  align-self: stretch;
  height: 26.4px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.clip-path-group23,
.vector-wrapper4 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.vector-wrapper4 {
  height: -19px;
  flex: 1;
  flex-direction: column;
  padding: 0 var(--padding-12xs) 0 0;
  box-sizing: border-box;
}
.clip-path-group23 {
  flex: 0.7474;
  overflow: hidden;
  flex-direction: row;
  padding: 0 var(--padding-5xs) var(--padding-51xl) var(--padding-lgi);
  z-index: 21;
  margin-left: -107px;
}
.vector-icon5 {
  width: 17.2px;
  height: 18.5px;
  position: relative;
}
.vector-wrapper5 {
  height: -24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group24 {
  flex: 0.6071;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xl) var(--padding-57xl);
  z-index: 22;
  margin-left: -107px;
}
.vector-icon6 {
  width: 17.2px;
  height: 18.5px;
  position: relative;
}
.vector-wrapper6 {
  height: -20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group25 {
  flex: 0.6071;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-2xl) var(--padding-53xl);
  z-index: 23;
  margin-left: -107px;
}
.vector-icon7 {
  width: 12.6px;
  height: 14.6px;
  position: relative;
}
.clip-path-group26,
.vector-wrapper7 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.vector-wrapper7 {
  height: -24px;
  width: 14px;
  flex-direction: column;
  padding: 0 var(--padding-12xs) 0 0;
  box-sizing: border-box;
}
.clip-path-group26 {
  overflow: hidden;
  flex-direction: row;
  padding: 0 var(--padding-13xl) var(--padding-57xl) var(--padding-42xl);
  z-index: 24;
  margin-left: -107px;
}
.vector-icon8 {
  width: 13.1px;
  height: 19.1px;
  position: relative;
}
.clip-path-group27,
.vector-wrapper8 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.vector-wrapper8 {
  height: -21px;
  flex-direction: column;
  padding: 0 var(--padding-12xs) 0 0;
  box-sizing: border-box;
}
.clip-path-group27 {
  flex: 0.7007;
  overflow: hidden;
  flex-direction: row;
  padding: 0 var(--padding-base) var(--padding-53xl);
  z-index: 25;
  margin-left: -107px;
}
.vector-icon9 {
  width: 38.2px;
  height: 22.7px;
  position: relative;
}
.clip-path-group28,
.vector-wrapper9 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.vector-wrapper9 {
  height: -20px;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group28 {
  flex: 0.7942;
  overflow: hidden;
  flex-direction: row;
  padding: 0 var(--padding-2xs) var(--padding-53xl);
  z-index: 26;
  margin-left: -107px;
}
.vector-icon10 {
  width: 16.8px;
  height: 22.3px;
  position: relative;
}
.vector-wrapper10 {
  height: -21px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group29 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-31xl) var(--padding-53xl) var(--padding-21xl);
  z-index: 27;
  margin-left: -107px;
}
.vector-icon11 {
  width: 13px;
  height: 7px;
  position: relative;
}
.vector-wrapper11 {
  height: -24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-12xs) 0 0;
  box-sizing: border-box;
}
.clip-path-group30 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-31xl) 75px var(--padding-24xl);
  z-index: 28;
  margin-left: -107px;
}
.vector-icon12 {
  width: 13px;
  height: 7px;
  position: relative;
}
.vector-wrapper12 {
  height: -32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 var(--padding-12xs) 0 0;
  box-sizing: border-box;
}
.clip-path-group31 {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-31xl) 83px var(--padding-24xl);
  z-index: 29;
  margin-left: -107px;
}
.vector-icon13 {
  width: 4.9px;
  height: 4.9px;
  position: relative;
}
.clip-path-group32,
.vector-wrapper13 {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.vector-wrapper13 {
  height: -40px;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}
.clip-path-group32 {
  flex: 0.8129;
  overflow: hidden;
  flex-direction: row;
  padding: 0 var(--padding-3xs) 92px;
  z-index: 30;
  margin-left: -107px;
}
.vector-icon14 {
  margin-top: 40px;
  width: 250px;
  height: 50px;
  position: relative;
}
.clip-path-group33 {
  flex: 0.7942;
  overflow: hidden;
  flex-direction: row;
  padding: 0 var(--padding-2xs) 93px;
  z-index: 31;
  margin-left: -107px;
}
.group-icon14,
.group11 {
  position: relative;
  z-index: 1;
}
.group11 {
  width: 109px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-12xs) 0 0;
  box-sizing: border-box;
}
.group-icon14 {
  height: 36.3px;
  width: 110.2px;
  object-fit: cover;
}
.clip-path-container,
.header-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 100%;
}
.header-group {
  justify-content: flex-start;
  padding: 0 var(--padding-12xs) 0 0;
  box-sizing: border-box;
  gap: 47px;
}
.clip-path-container {
  flex: 1;
  /* justify-content: space-between; */
  justify-content: space-around;
  gap: var(--gap-xl);
}
.clip-path-group-cluster {
  width: 729px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0 var(--padding-sm);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-parent25,
.frame-parent26,
.frame-parent28 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100%;
}
.frame-parent28 {
  width: 750px;
  align-items: flex-start;
}
.frame-parent25,
.frame-parent26 {
  align-self: stretch;
  align-items: center;
}
.frame-parent26 {
  gap: var(--gap-8xl);
  flex-shrink: 0;
}
.frame-parent25 {
  gap: var(--gap-12xs);
}
.frame-child37 {
  height: 74px;
  width: 443px;
  position: relative;
  border-radius: var(--br-71xl);
  display: none;
  max-width: 100%;
}
.b10,
.vector-parent6 {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 100%;
  z-index: 1;
}
.b10 {
  height: 59.5px;
  position: relative;
  font-size: var(--font-size-21xl);
  letter-spacing: 0.1em;
  line-height: 50px;
  text-transform: capitalize;
  font-family: var(--font-inter);
  color: var(--color-white);
  text-align: left;
}
.vector-parent6 {
  cursor: pointer;
  border: 4px solid var(--color-white);
  padding: var(--padding-7xs) var(--padding-3xs) var(--padding-4xs)
    var(--padding-13xl);
  background-color: transparent;
  border-radius: var(--br-71xl);
  background: linear-gradient(90deg, #fec12e, #ffcd3f);
  box-shadow: 8px 8px 8px rgba(254, 190, 46, 0.33);
  box-sizing: border-box;
  flex-direction: row;
  justify-content: flex-end;
}
.vector-parent6:hover {
  background-color: var(--color-darkslategray-200);
  background-image: linear-gradient(90deg, #000, #000);
  border: 4px solid var(--color-darkslategray-100);
  box-sizing: border-box;
}
.frame-parent24,
.main-frame1,
.s-v-g-i-d-vector-frame {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
}
.main-frame1 {
  width: 457px;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 var(--padding-sm) 0 0;
  box-sizing: border-box;
  margin: 0 auto;
}
.frame-parent24,
.s-v-g-i-d-vector-frame {
  flex-direction: column;
  align-items: center;
}
.frame-parent24 {
  width: 877px;
  padding: 0 var(--padding-xl);
  box-sizing: border-box;
  gap: 78px;
  text-align: center;
  font-size: var(--font-size-16xl);
  color: var(--brand-yellow);
}
.s-v-g-i-d-vector-frame {
  position: absolute;
  top: 2388px;
  left: 264px;
  gap: var(--gap-20xl);
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--content);
  font-family: var(--font-roboto);
}
.desktop-1440 {
  width: 100%;
  height: 9248px;
  position: relative;
  overflow: hidden;
  letter-spacing: normal;
  text-align: center;
  font-size: var(--font-size-29xl);
  color: var(--color-black);
  font-family: var(--font-roboto);
}
@media screen and (max-width: 1575px) {
  .frame-c-group {
    flex-wrap: wrap;
  }
  .desktop-1440 {
    height: auto;
    min-height: 9248;
  }
}
@media screen and (max-width: 1275px) {
  .frame-e-polygon {
    flex-wrap: wrap;
  }
  .navigation {
    /* padding-left: 355px; */
    padding-left: 40%;
    box-sizing: border-box;
  }
  .title-wrapper {
    flex: 1;
  }
  .frame-container {
    flex-wrap: wrap;
  }
  .frame-parent2,
  .frame-parent4 {
    flex: 1;
  }
  .frame-parent1 {
    flex-wrap: wrap;
  }
  .image-clip-path {
    gap: var(--gap-30xl);
  }
  .frame-j {
    flex: 1;
  }
  .rectangle-e {
    flex-wrap: wrap;
  }
  .frame-with-clip-path {
    padding-left: var(--padding-36xl);
    padding-right: var(--padding-36xl);
    box-sizing: border-box;
  }
  .frame-wrapper1 {
    min-height: auto;
  }
  .rectangle-parent7 {
    flex-wrap: wrap;
    padding-left: var(--padding-11xs);
    box-sizing: border-box;
  }
}

@media screen and (max-width: 825px) {
  .navigation {
    padding-left: 177px;
    box-sizing: border-box;
  }
  .title {
    font-size: var(--font-size-19xl);
    line-height: 40px;
  }
  .kintone-container,
  .title1 {
    font-size: var(--font-size-13xl);
    line-height: 48px;
  }
  .title1 {
    line-height: 40px;
  }
  .frame-container {
    gap: 82px;
    padding-left: 130px;
    padding-right: 134px;
    box-sizing: border-box;
  }
  .b {
    font-size: var(--font-size-13xl);
    line-height: 48px;
  }
  .frame-parent1 {
    gap: var(--gap-14xl);
    padding-left: 151px;
    padding-right: 161px;
    box-sizing: border-box;
  }
  .description4,
  .h1 {
    font-size: var(--font-size-19xl);
    line-height: 48px;
  }
  .content-container,
  .text-description {
    flex: 1;
  }
  .frame-with-group-children {
    flex-wrap: wrap;
  }
  .title2 {
    font-size: var(--font-size-19xl);
    line-height: 40px;
  }
  .b1,
  .kintone-container1 {
    font-size: var(--font-size-13xl);
    line-height: 40px;
  }
  .group5 {
    min-width: 100%;
  }
  .h11,
  .h12 {
    font-size: var(--font-size-13xl);
    line-height: 40px;
  }
  .h12 {
    line-height: 48px;
  }
  .frame-wrapper {
    padding-left: var(--padding-2xl);
    padding-right: var(--padding-2xl);
    box-sizing: border-box;
  }
  .i,
  .i1,
  .i2,
  .i3,
  .i4,
  .i5 {
    font-size: var(--font-size-26xl);
    line-height: 12px;
  }
  .frame-parent11 {
    flex: 1;
    margin-left: 0;
  }
  .ellipse1 {
    flex-wrap: wrap;
  }
  .rectangle-parent5 {
    height: auto;
    min-height: 375;
  }
  .rectangle-parent4 {
    padding-right: var(--padding-12xl);
    box-sizing: border-box;
    width: calc(100% - 40px);
  }
  .b8 {
    font-size: var(--font-size-13xl);
    line-height: 48px;
  }
  .vector-parent5 {
    width: calc(100% - 40px);
  }
  .h13,
  .h14 {
    font-size: var(--font-size-13xl);
    line-height: 48px;
  }
  .frame-j {
    min-width: 100%;
  }
  .rectangle-e {
    gap: var(--gap-xl);
  }
  .path-line-parent {
    gap: var(--gap-6xl);
  }
  .no-code {
    font-size: 26px;
    line-height: 40px;
  }
  .kintone5 {
    font-size: var(--font-size-13xl);
    line-height: 40px;
  }
  .s-v-g-i-d-frame {
    padding-left: var(--padding-19xl);
    padding-right: var(--padding-19xl);
    box-sizing: border-box;
  }
  .frame-with-clip-path {
    gap: var(--gap-xl);
    padding-left: var(--padding-8xl);
    padding-right: var(--padding-8xl);
    box-sizing: border-box;
  }
  .rectangle-frame {
    gap: var(--gap-mini);
  }
  .vector-frame {
    flex-wrap: wrap;
  }

  .description22,
  .description23 {
    font-size: var(--font-size-9xl);
    line-height: 48px;
  }
  .description23 {
    line-height: 40px;
  }
  .clip-path-container {
    flex-wrap: wrap;
    justify-content: center;
  }
  .b10 {
    font-size: var(--font-size-13xl);
    line-height: 40px;
  }
}
@media screen and (max-width: 450px) {
  .navigation {
    padding-left: var(--padding-xl);
    box-sizing: border-box;
  }
  .title {
    font-size: var(--font-size-10xl);
    line-height: 30px;
  }
  .kintone-container {
    font-size: var(--font-size-5xl);
    line-height: 36px;
  }
  .description {
    font-size: var(--font-size-lgi);
    line-height: 19px;
  }
  .title1 {
    font-size: var(--font-size-5xl);
    line-height: 30px;
  }
  .frame-container {
    gap: var(--gap-22xl);
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }
  .b {
    font-size: var(--font-size-5xl);
    line-height: 36px;
  }
  .div4,
  .div6,
  .div8 {
    font-size: var(--font-size-base);
    line-height: 24px;
  }
  .frame-parent1 {
    gap: var(--gap-mid);
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }
  .description4,
  .h1 {
    font-size: var(--font-size-10xl);
    line-height: 36px;
  }
  .div10 {
    font-size: var(--font-size-base);
    line-height: 40px;
  }
  .div11 {
    font-size: var(--font-size-lgi);
    line-height: 48px;
  }
  .path-shape {
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }
  .div12,
  .div13 {
    font-size: var(--font-size-lgi);
    line-height: 48px;
  }
  .rectangle-shape1 {
    padding-right: var(--padding-xl);
  }
  .content-container,
  .rectangle-shape1 {
    padding-left: var(--padding-xl);
    box-sizing: border-box;
  }
  .div14 {
    font-size: var(--font-size-lgi);
    line-height: 48px;
  }
  .title2 {
    font-size: var(--font-size-10xl);
    line-height: 30px;
  }
  .image-clip-path {
    gap: var(--gap-6xl);
  }
  .b1,
  .h11,
  .kintone-container1 {
    font-size: var(--font-size-5xl);
    line-height: 30px;
  }
  .description9 {
    font-size: var(--font-size-lgi);
    line-height: 20px;
  }
  .h12 {
    font-size: var(--font-size-5xl);
    line-height: 36px;
  }
  .i,
  .i1,
  .i2,
  .i3 {
    font-size: var(--font-size-8xl);
    line-height: 8px;
  }
  .frame-parent7 {
    flex-wrap: wrap;
    gap: var(--gap-5xl);
  }
  .i4,
  .i5 {
    font-size: var(--font-size-8xl);
    line-height: 8px;
  }
  .frame-parent9 {
    flex-wrap: wrap;
  }
  .b8 {
    font-size: var(--font-size-5xl);
    line-height: 36px;
  }
  .polygon-f {
    min-width: 100%;
  }
  .h13,
  .h14 {
    font-size: var(--font-size-5xl);
    line-height: 36px;
  }
  .description16,
  .description17,
  .description18 {
    font-size: var(--font-size-base);
    line-height: 40px;
  }
  .description18 {
    line-height: 16px;
  }
  .info-frame-parent {
    flex-wrap: wrap;
  }
  .description19 {
    font-size: var(--font-size-base);
    line-height: 20px;
  }
  .kintone5,
  .no-code {
    font-size: var(--font-size-lgi);
    line-height: 30px;
  }
  .kintone5 {
    font-size: var(--font-size-5xl);
  }
  .b9,
  .description20 {
    font-size: var(--font-size-lgi);
    line-height: 24px;
  }
  .description20 {
    line-height: 19px;
  }
  .div15,
  .div16,
  .div17,
  .div18,
  .div19,
  .div20,
  .div21,
  .it {
    font-size: var(--font-size-base);
    line-height: 40px;
  }
  .vector-frame {
    gap: var(--gap-mid);
  }
  .div22 {
    font-size: var(--font-size-base);
    line-height: 40px;
  }
  .description22,
  .description23 {
    font-size: var(--font-size-2xl);
    line-height: 36px;
  }
  .description23 {
    line-height: 30px;
  }
  .header-group {
    flex-wrap: wrap;
  }
  .b10 {
    font-size: var(--font-size-5xl);
    line-height: 30px;
  }
}

/* 背景画像制御 */
.mv {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* 全体を囲う要素 */
.mv-wrap {
  position: relative;
  /* 背景画像の高さ */
  height: 570px;
}

video {
  display: block;
  width: 100%;
  /* 背景画像の高さ */
  height: 570px;
  /* 高さを維持したまま全体を表示させる */
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.mv-wrap::after {
  content: '';
  display: block;
  width: 100%;
  /* 背景画像の高さ */
  height: 570px;
  position: absolute;
  top: 0;
  left: 0;
  /* 薄いレイヤーの色 */
  background-color: rgba(85 86 90 / .8);
  /* videoの上に乗せる */
  z-index: 3;
}

.bx-pager-item a {
  width: 20px !important;
  height: 20px !important;
  border-radius: 10px !important;
  background: #666;
}
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #F4B91C !important;
}
.bx-wrapper .bx-pager {
  bottom: -50px !important;
}
.title1 p {
  font-weight: 600;
}
.copylight {
  position: absolute;
  right: 40px;
  bottom: 15px;
  color: #fff;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 1.2px;
  text-transform: capitalize;
}
.clip-path-m-mask,
.frame-group {
  margin-left: 2px;
}
.div::after {
  left: 124%;
}
.div1::after {
  left: 120%;
}

/* SPモードCSS */
@media (max-width: var(--sp-width)) {
  #pc-disp {
    display: none;
  }
  #sp-disp {
    display: block;
  }

}

.kintone-logo-txt {
  position: absolute;
  font-size: 38px;
  font-weight: 600;
  top: 19px;
  left: 70px;
}
.pc-box {
  display: block;
}
.tab-box {
  display: none;
}
.group8 {
  display: none;
}

.youtube iframe {
  width: 500px;
  height: 315px;
}

.shape-container-img img,
.shape-frame-item-img img,
.content-container-img img,
.text-description-img img {
  width: 390px;
  height: 240px;
}

/*以下、追加*/
.swiper {
  /*スライダーの幅と高さを調整*/
  width: min(100%, 600px);
  height: 300px;
}

.swiper-slide {
  /*スライド要素の幅と高さを調整*/
  width: 100%;
  height: 100%;

  /*テキストの位置調整*/
  display: flex;
  justify-content: center;
  align-items: center;

  /*テキストの色と太さを指定*/
  color: #fff;
  font-weight: bold;
}

/*①各スライドに以下クラスを追加で付与*/
/*②スライド背景色を設定*/
.slide1 {
  background-color: #88acbd;
}

.slide2 {
  background-color: #99cb1f;
}

.slide3 {
  background-color: #e43a47;
}

.slide4 {
  background-color: #F4B91C;
}