@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap");
body {
  background-color: #fff;
  margin: 0;
  padding: 0;
  font-family: zen-kaku-gothic-new, sans-serif;
  font-size: 21px;
  color: #333;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.6em;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 18px;
  }
}
body * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

p, ol, ul {
  margin: 0px;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0px;
  font-weight: 900;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}
img[src$="divider_triangle_white.svg"] {
  display: block;
  width: 100%;
  height: 150px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1;
}
@media screen and (max-width: 1080px) {
  img[src$="divider_triangle_white.svg"] {
    height: 10.4166666667vw;
  }
}

ol, ul {
  list-style: none inside;
  padding: 0px;
}
ol.disc li:before, ul.disc li:before {
  content: "\e7d1";
  display: inline-block;
  margin-right: 15px;
  font-family: "Font Awesome 7 Pro", san-serif;
  font-weight: 900;
}
ol.disc.polka li, ol.disc.polka li:before, ul.disc.polka li, ul.disc.polka li:before {
  color: #70B173;
}
ol.disc.aria li, ol.disc.aria li:before, ul.disc.aria li, ul.disc.aria li:before {
  color: #E55F8E;
}
ol.disc.vivi li, ol.disc.vivi li:before, ul.disc.vivi li, ul.disc.vivi li:before {
  color: #f57369;
}
ol.disc.bono li, ol.disc.bono li:before, ul.disc.bono li, ul.disc.bono li:before {
  color: #59ACE4;
}
ol.disc.mauve li, ol.disc.mauve li:before, ul.disc.mauve li, ul.disc.mauve li:before {
  color: #915da3;
}
ol.disc.violet li, ol.disc.violet li:before, ul.disc.violet li, ul.disc.violet li:before {
  color: #4A45A5;
}
ol.disc.umber li, ol.disc.umber li:before, ul.disc.umber li, ul.disc.umber li:before {
  color: #854d25;
}
ol li, ul li {
  margin: 0px;
}

dl {
  margin: 0px;
}
dl dd {
  margin-left: 0px;
}

#headerbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 100%;
  height: 60px;
  background-color: #fff;
  margin-bottom: 30px;
}
#headerbox > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 96%;
}
#headerbox .logomark a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding-top: 6px;
  color: #333;
  text-decoration: none;
}
#headerbox .logomark a img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#headerbox .logomark a p {
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4em;
}
#headerbox .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 50px;
  height: 50px;
  background-color: #333;
  border-radius: 0px 0px 0px 10px;
}
#headerbox .menu a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
}
#headerbox .menu a:before, #headerbox .menu a:after,
#headerbox .menu a span {
  display: block;
  width: 24px;
  height: 6px;
  background-color: #fff;
}
#headerbox .menu a:before, #headerbox .menu a:after {
  content: "";
}
#headerbox .menu a span {
  text-indent: -9999px;
}

#kanban {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  #kanban {
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 544px) {
  #kanban {
    margin-bottom: 30px;
  }
}
#kanban:not(:has(.photo)) {
  margin-bottom: 90px;
}
@media screen and (max-width: 768px) {
  #kanban:not(:has(.photo)) {
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 544px) {
  #kanban:not(:has(.photo)) {
    margin-bottom: 45px;
  }
}
#kanban h1 {
  width: 1080px;
  margin: 0px auto;
  font-size: clamp(1.6875rem, 0.3554rem + 3.9179vw, 3rem);
  line-height: 1.3em;
  color: #333;
}
@media screen and (max-width: 1080px) {
  #kanban h1 {
    width: 92%;
  }
}
#kanban h1 small {
  display: block;
  font-size: 70%;
  line-height: 1;
}
#kanban .photo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 1080px;
  height: 450px;
  position: relative;
  margin: 0px auto 10px;
}
@media screen and (max-width: 1080px) {
  #kanban .photo {
    width: 92%;
    height: 360px;
  }
}
@media screen and (max-width: 544px) {
  #kanban .photo {
    height: auto;
  }
}
#kanban .description {
  background-color: #ebebeb;
  margin-bottom: 10px;
  padding: 15px 0px;
}
#kanban .description p {
  width: 1080px;
  margin: 0px auto;
}
@media screen and (max-width: 1080px) {
  #kanban .description p {
    width: 92%;
  }
}
@media screen and (max-width: 544px) {
  #kanban .description p br {
    display: none;
  }
}

main section.blockbox {
  margin-bottom: 60px;
}
main section.blockbox > .inner {
  width: 1080px;
  margin: 0px auto;
}
@media screen and (max-width: 1080px) {
  main section.blockbox > .inner {
    width: 92%;
  }
}
@media screen and (max-width: 544px) {
  main section.blockbox > .inner:has(li.open) {
    width: 100%;
  }
}
main section.blockbox > .inner:has(.column) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 60px;
}
@media screen and (max-width: 544px) {
  main section.blockbox > .inner:has(.column) {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
main section.blockbox > .inner:has(.column) > h2, main section.blockbox > .inner:has(.column) h3, main section.blockbox > .inner:has(.column) h4 {
  width: 100%;
  margin-bottom: 0px;
}
main section.blockbox > .inner:has(.column) .column {
  width: calc((100% - 60px) / 2);
}
@media screen and (max-width: 544px) {
  main section.blockbox > .inner:has(.column) .column {
    width: 100%;
  }
}
main section.blockbox > .inner + .outer {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  main section.blockbox > .inner + .outer {
    margin-top: 45px;
  }
}
@media screen and (max-width: 544px) {
  main section.blockbox > .inner + .outer {
    margin-top: 30px;
  }
}
main section.blockbox > .outer {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  main section.blockbox > .outer {
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 544px) {
  main section.blockbox > .outer {
    margin-bottom: 30px;
  }
}
main section.blockbox > .outer:last-child {
  margin-bottom: 0px;
}
main section.blockbox > .outer .photo {
  width: 1080px;
  position: relative;
  z-index: 1;
  margin: 0px auto;
  line-height: 1;
}
@media screen and (max-width: 1080px) {
  main section.blockbox > .outer .photo {
    width: 100%;
  }
}
main section.blockbox > .outer .photo img {
  display: block;
}
main section.blockbox > .inner > h2, main section.blockbox > .inner > h3, main section.blockbox > .inner > h4, main section.blockbox > .outer > h2, main section.blockbox > .outer > h3, main section.blockbox > .outer > h4 {
  margin-bottom: 30px;
  font-size: 30px;
  line-height: 1.6em;
}
main section.blockbox .blockttl {
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.2em;
}
main section.blockbox p, main section.blockbox ul, main section.blockbox ol, main section.blockbox table {
  margin-bottom: 1em;
}
main section.blockbox p:last-child, main section.blockbox ul:last-child, main section.blockbox ol:last-child, main section.blockbox table:last-child {
  margin-bottom: 0px;
}
main section.dot:after {
  content: "";
  display: block;
  width: 100%;
  height: 45px;
  background: url(../img000/dot.png) no-repeat center center/contain;
}
@media screen and (max-width: 1080px) {
  main section.dot:after {
    height: 30px;
  }
}
@media screen and (max-width: 544px) {
  main section.dot:after {
    height: 18px;
  }
}
main nav.utility {
  width: 1080px;
  margin: 0px auto;
  padding: 0px 30px 30px;
}
main nav.utility:not(:has(ul:only-child)) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-left: 0px;
}
@media screen and (max-width: 544px) {
  main nav.utility:not(:has(ul:only-child)) {
    display: block;
  }
}
main nav.utility:not(:has(ul:only-child)) ul {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 15px;
}
@media screen and (max-width: 544px) {
  main nav.utility:not(:has(ul:only-child)) ul + ul {
    margin-top: 30px;
  }
}
main nav.utility:not(:has(ul:only-child)) ul li:has(a[href*=maintenanse]) {
  position: relative;
  margin-top: 45px;
}
main nav.utility:not(:has(ul:only-child)) ul li:has(a[href*=maintenanse]):after {
  content: url(../img000/icon_hearts.png);
  display: block;
  position: absolute;
  top: -40px;
  right: 10%;
}
main nav.utility:not(:has(ul:only-child)) ul li:has(a[href*=cms]) {
  position: relative;
  margin-top: 30px;
}
main nav.utility:not(:has(ul:only-child)) ul li:has(a[href*=cms]):after {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  top: -20px;
  right: -30px;
  background: url(../img000/icon_soycms.png) no-repeat center center/cover;
}
main nav.utility ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 60px;
  margin-bottom: 90px;
}
@media screen and (max-width: 544px) {
  main nav.utility ul {
    gap: 30px;
  }
}
main nav.utility ul li.contact.icon {
  position: relative;
  padding-top: 260px;
}
main nav.utility ul li.contact.icon a:after {
  content: "";
  display: block;
  width: 200px;
  height: 260px;
  position: absolute;
  top: 0px;
  background: url(../img000/icon_contact.png) no-repeat left top/cover;
}
main nav.utility ul a {
  font-size: 24px;
  color: #333;
  font-weight: 700;
  text-decoration: none;
}

a.link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
}
a.link:before {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  background: no-repeat center center/cover;
}
a.link.capsule {
  background-color: #333;
  border-radius: 6px;
  padding: 12px 18px;
  font-size: 21px;
  color: #fff;
}
a.link.capsule:before {
  width: 23px;
  height: 23px;
  -webkit-filter: invert(100) brightness(100);
          filter: invert(100) brightness(100);
}
a.link.next {
  text-decoration: none;
}
a.link.next:before {
  background-image: url(../img/bullet_link_next.svg);
}

h1 .highlight, h2 .highlight, h3 .highlight, h4 .highlight, h5 .highlight, h6 .highlight {
  font-weight: 900;
}

.highlight {
  font-weight: 700;
}
.highlight.large {
  font-size: 125%;
}
.highlight.polka {
  color: #70B173;
}
.highlight.aria {
  color: #E55F8E;
}
.highlight.vivi {
  color: #f57369;
}
.highlight.bono {
  color: #59ACE4;
}
.highlight.umber {
  color: #854d25;
}
.highlight.mauve {
  color: #915da3;
}
.highlight.violet {
  color: #4A45A5;
}

.price {
  font-family: "Oswald", sans-serif;
}
.price span {
  font-size: 200%;
  font-weight: 700;
}

ol.itemlist,
ul.itemlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 60px;
}
@media screen and (max-width: 768px) {
  ol.itemlist,
ul.itemlist {
    gap: 45px;
  }
}

dl.itemlist {
  border-top: 3px solid #333;
  border-bottom: 3px solid #333;
  padding: 4px 0px;
}
dl.itemlist .item {
  border-bottom: 1px solid #333;
  padding: 12px 0px;
}
dl.itemlist .item:nth-of-type(1) {
  border-top: 1px solid #333;
}
dl.itemlist:has(+ dl.itemlist) {
  margin-bottom: 30px;
}

.accordion {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}
.accordion.itemlist {
  gap: 6px;
}
.accordion .content {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  -webkit-transition: height 0.4s ease, padding 0.4s ease;
  transition: height 0.4s ease, padding 0.4s ease;
}
.accordion.polka > li.open h2 a, .accordion.polka > li.open h3 a, .accordion.polka > li.open h4 a {
  background-color: #70B173;
}
.accordion.aria > li.open h2 a, .accordion.aria > li.open h3 a, .accordion.aria > li.open h4 a {
  background-color: #E55F8E;
}
.accordion.vivi > li.open h2 a, .accordion.vivi > li.open h3 a, .accordion.vivi > li.open h4 a {
  background-color: #f57369;
}
.accordion.bono > li.open h2 a, .accordion.bono > li.open h3 a, .accordion.bono > li.open h4 a {
  background-color: #59ACE4;
}
.accordion.step {
  counter-reset: step;
}
.accordion.step:before {
  content: "";
  display: block;
  width: 100%;
  height: 80px;
  position: relative;
  background: url(../img000/frog_bono.png) no-repeat left 4% bottom/contain;
  margin-bottom: -6px;
}
.accordion.step > li {
  counter-increment: step;
}
.accordion.step > li h2 a, .accordion.step > li h3 a, .accordion.step > li h4 a {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.accordion.step > li h2 a:after, .accordion.step > li h3 a:after, .accordion.step > li h4 a:after {
  content: counter(step);
  width: auto;
  height: auto;
  background: none;
  font-family: "gill-sans-nova", sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}
.accordion > li {
  width: 100%;
}
.accordion > li.open .content {
  padding: 30px 45px;
}
@media screen and (max-width: 768px) {
  .accordion > li.open .content {
    padding: 24px 15px;
  }
}
.accordion > li h2 a, .accordion > li h3 a, .accordion > li h4 a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 15px;
  background-color: #59656f;
  border-radius: 2px;
  padding: 18px 45px;
  font-size: 27px;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  line-height: 1.25em;
}
@media screen and (max-width: 768px) {
  .accordion > li h2 a, .accordion > li h3 a, .accordion > li h4 a {
    padding: 18px 15px;
    font-size: 24px;
  }
}
.accordion > li h2 a:after, .accordion > li h3 a:after, .accordion > li h4 a:after {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: block;
  width: 60px;
  height: 60px;
  background: url(../img000/icon_egao.png) no-repeat center center/cover;
}
@media screen and (max-width: 768px) {
  .accordion > li h2 a:after, .accordion > li h3 a:after, .accordion > li h4 a:after {
    width: 50px;
    height: 50px;
  }
}
.accordion > li h2 a:has(span), .accordion > li h3 a:has(span), .accordion > li h4 a:has(span) {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 6px auto;
  grid-template-rows: auto auto;
  -ms-grid-columns: auto 6px 50px;
  grid-template-columns: auto 50px;
  gap: 6px;
      grid-template-areas: "title icon" "caption icon";
}
.accordion > li h2 a:has(span) span, .accordion > li h3 a:has(span) span, .accordion > li h4 a:has(span) span {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
  -ms-grid-row-align: end;
      align-self: end;
  line-height: 1.25em;
}
.accordion > li h2 a:has(span) small, .accordion > li h3 a:has(span) small, .accordion > li h4 a:has(span) small {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: caption;
  -ms-grid-row-align: start;
      align-self: start;
  letter-spacing: 0.1em;
  line-height: 1.25em;
}
.accordion > li h2 a:has(span):after, .accordion > li h3 a:has(span):after, .accordion > li h4 a:has(span):after {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: icon;
}
.accordion > li h2 a small, .accordion > li h3 a small, .accordion > li h4 a small {
  font-size: 18px;
  font-weight: 500;
}

#footerbox > .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 1080px;
  position: relative;
  margin: 0px auto 60px;
}
@media screen and (max-width: 1080px) {
  #footerbox > .inner {
    width: calc(100% - 80px);
  }
}
@media screen and (max-width: 544px) {
  #footerbox > .inner {
    width: calc(100% - 40px);
  }
}
#footerbox > .inner .copyright {
  float: none;
  width: auto;
  padding-bottom: 6px;
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

/*
modaal.js
*/
.modaal-inner-wrapper {
  padding: 25px !important;
}

.modaal-container {
  height: calc(100vh - 50px);
  padding: 60px;
  font-size: 18px;
  overflow-y: scroll;
}
@media screen and (max-width: 544px) {
  .modaal-container {
    padding: 60px 30px;
  }
}
.modaal-container p {
  margin-bottom: 2em;
}

.modaal-image .modaal-container {
  height: auto;
}

.modaal-close::after,
.modaal-close::before {
  width: 2px !important;
}

.modaal-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  background-color: #70B173 !important;
}
.modaal-close:hover {
  background-color: #000 !important;
  -webkit-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.modaal-close:focus::after,
.modaal-close:focus::before,
.modaal-close:hover::after,
.modaal-close:hover::before {
  background-color: #fff !important;
}

.modaal-gallery-control {
  background: #000;
}

#regular-pagebox {
  /*
  当社について
  -----------------------------------------------------*/
  /* --------------------------------------------------*/
  /*
  当社について
  -----------------------------------------------------*/
  /* --------------------------------------------------*/
  /*
  制作の流れ
  -----------------------------------------------------*/
  /* --------------------------------------------------*/
  /*
  実績
  -----------------------------------------------------*/
  /* --------------------------------------------------*/
  /*
  制作のスタンス
  -----------------------------------------------------*/
  /* --------------------------------------------------*/
  /*
  表現のポリシー
  -----------------------------------------------------*/
  /* --------------------------------------------------*/
  /*
  どう頼めばいいか、分からない方へ
  -----------------------------------------------------*/
  /* --------------------------------------------------*/
}
#regular-pagebox.cms {
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
}
#regular-pagebox.cms #content-introduction ul.screenshot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 60px;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.cms #content-introduction ul.screenshot {
    gap: 15px;
  }
}
#regular-pagebox.cms #content-introduction ul.screenshot li {
  width: calc((100% - 60px) / 2);
}
@media screen and (max-width: 544px) {
  #regular-pagebox.cms #content-introduction ul.screenshot li {
    width: 100%;
  }
}
#regular-pagebox.cms #content-feature .column {
  --shape-a: 60%;
  --shape-c: 35%;
  --shape-b: 70%;
}
#regular-pagebox.cms #content-feature .column h2, #regular-pagebox.cms #content-feature .column h3, #regular-pagebox.cms #content-feature .column h4 {
  position: relative;
  margin-bottom: 15px;
  padding: 15px 15px 0px;
  font-size: clamp(1.688rem, 1.422rem + 0.781vw, 2.125rem);
  color: #fff;
  letter-spacing: 0.2em;
}
#regular-pagebox.cms #content-feature .column h2:after, #regular-pagebox.cms #content-feature .column h3:after, #regular-pagebox.cms #content-feature .column h4:after {
  content: "";
  display: block;
  width: 100%;
  height: 80px;
  position: absolute;
  top: 100%;
  left: 0px;
  background: inherit;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% var(--shape-a), var(--shape-c) 100%, 0 var(--shape-b));
          clip-path: polygon(0 0, 100% 0, 100% var(--shape-a), var(--shape-c) 100%, 0 var(--shape-b));
}
#regular-pagebox.cms #content-feature .column.polka {
  --shape-a: 30%;
  --shape-b: 60%;
  --shape-c: 50%;
}
#regular-pagebox.cms #content-feature .column.polka h2, #regular-pagebox.cms #content-feature .column.polka h3, #regular-pagebox.cms #content-feature .column.polka h4 {
  background-color: #70B173;
}
#regular-pagebox.cms #content-feature .column.aria {
  --shape-a: 70%;
  --shape-b: 20%;
  --shape-c: 80%;
}
#regular-pagebox.cms #content-feature .column.aria h2, #regular-pagebox.cms #content-feature .column.aria h3, #regular-pagebox.cms #content-feature .column.aria h4 {
  background-color: #E55F8E;
}
#regular-pagebox.cms #content-feature .column.vivi {
  --shape-a: 10%;
  --shape-b: 70%;
  --shape-c: 40%;
}
#regular-pagebox.cms #content-feature .column.vivi h2, #regular-pagebox.cms #content-feature .column.vivi h3, #regular-pagebox.cms #content-feature .column.vivi h4 {
  background-color: #f57369;
}
#regular-pagebox.cms #content-feature .column.bono {
  --shape-a: 30%;
  --shape-b: 30%;
  --shape-c: 100%;
}
#regular-pagebox.cms #content-feature .column.bono h2, #regular-pagebox.cms #content-feature .column.bono h3, #regular-pagebox.cms #content-feature .column.bono h4 {
  background-color: #59ACE4;
}
#regular-pagebox.cms #content-feature .column P:nth-of-type(1) {
  margin-top: 95px;
}
#regular-pagebox.cms #content-feature .summary h5 {
  margin-bottom: 15px;
  font-size: clamp(1.688rem, 1.422rem + 0.781vw, 2.125rem);
  letter-spacing: 0.2em;
}
#regular-pagebox.company {
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
}
#regular-pagebox.company #content-message .profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.company #content-message .profile {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 30px;
  }
}
#regular-pagebox.company #content-message .profile:after {
  content: "";
  display: block;
  width: 360px;
  height: 240px;
  background: url(../column/img/column_kanban_net.webp) no-repeat center center/cover;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.company #content-message .profile:after {
    width: 300px;
    height: 200px;
  }
}
#regular-pagebox.flow {
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
}
#regular-pagebox.flow #kanban .photo {
  background: url(../flow/img/kanban_flow_bg.webp) no-repeat center bottom/cover;
}
#regular-pagebox.works {
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
}
#regular-pagebox.works #content-list ol.itemlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 90px 60px;
}
#regular-pagebox.works #content-list ol.itemlist > li {
  width: calc((100% - 60px) / 2);
}
@media screen and (max-width: 544px) {
  #regular-pagebox.works #content-list ol.itemlist > li {
    width: 100%;
  }
}
#regular-pagebox.works #content-list ol.itemlist .name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 6px;
  position: relative;
  margin: 0px 0px 30px -6px;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.works #content-list ol.itemlist .name {
    margin-bottom: 24px;
  }
}
#regular-pagebox.works #content-list ol.itemlist .name span {
  display: block;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.1em;
  line-height: 0.9em;
}
#regular-pagebox.works #content-list ol.itemlist .name span.text-3 {
  width: 2.8em;
}
#regular-pagebox.works #content-list ol.itemlist .name span.text-4 {
  width: 3.7em;
}
#regular-pagebox.works #content-list ol.itemlist .name span.text-5 {
  width: 4.6em;
}
#regular-pagebox.works #content-list ol.itemlist .name small {
  display: block;
  width: 16px;
  font-size: 16px;
  line-height: 1;
}
#regular-pagebox.works #content-list ol.itemlist ul.spec {
  letter-spacing: 0;
}
#regular-pagebox.works #content-list ol.itemlist ul.spec li {
  margin-bottom: 6px;
}
#regular-pagebox.works #content-list ol.itemlist ul.spec li.link, #regular-pagebox.works #content-list ol.itemlist ul.spec li.tech, #regular-pagebox.works #content-list ol.itemlist ul.spec li.client {
  display: list-item;
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}
#regular-pagebox.works #content-list ol.itemlist ul.spec li.link a, #regular-pagebox.works #content-list ol.itemlist ul.spec li.tech a, #regular-pagebox.works #content-list ol.itemlist ul.spec li.client a {
  color: #333;
  text-decoration: none;
}
#regular-pagebox.works #content-list ol.itemlist ul.spec li.link:before {
  content: none;
}
#regular-pagebox.works #content-list ol.itemlist ol.tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.5em 1em;
  margin-bottom: 30px;
}
#regular-pagebox.works #content-list ol.itemlist ol.tag li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1;
}
#regular-pagebox.works #content-list ol.itemlist ol.tag li:before {
  content: "#";
  display: inline-block;
}
#regular-pagebox.works #content-list ol.itemlist .sample a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 45px;
}
@media screen and (max-width: 768px) {
  #regular-pagebox.works #content-list ol.itemlist .sample a {
    gap: 30px;
  }
}
#regular-pagebox.works #content-list ol.itemlist .sample.reverse a {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#regular-pagebox.stance {
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
}
#regular-pagebox.stance #content-care ol.itemlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 60px;
}
#regular-pagebox.stance #content-care ol.itemlist h2, #regular-pagebox.stance #content-care ol.itemlist h3, #regular-pagebox.stance #content-care ol.itemlist h4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  font-size: clamp(1.5rem, 0.7388rem + 2.2388vw, 2.25rem);
  line-height: 1.25em;
}
#regular-pagebox.stance #content-care ol.itemlist h2:before, #regular-pagebox.stance #content-care ol.itemlist h3:before, #regular-pagebox.stance #content-care ol.itemlist h4:before {
  display: block;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.stance #content-care ol.itemlist .content br {
    display: none;
  }
}
#regular-pagebox.stance #content-care ol.itemlist li {
  width: calc((100% - 60px) / 2);
}
@media screen and (max-width: 544px) {
  #regular-pagebox.stance #content-care ol.itemlist li {
    width: 100%;
  }
}
#regular-pagebox.stance #content-care ol.itemlist li:nth-child(1) h2:before, #regular-pagebox.stance #content-care ol.itemlist li:nth-child(1) h3:before, #regular-pagebox.stance #content-care ol.itemlist li:nth-child(1) h4:before {
  content: url(../stance/img/stance_care_01.png);
}
#regular-pagebox.stance #content-care ol.itemlist li:nth-child(2) h2:before, #regular-pagebox.stance #content-care ol.itemlist li:nth-child(2) h3:before, #regular-pagebox.stance #content-care ol.itemlist li:nth-child(2) h4:before {
  content: url(../stance/img/stance_care_02.png);
}
#regular-pagebox.stance #content-care ol.itemlist li:nth-child(3) h2:before, #regular-pagebox.stance #content-care ol.itemlist li:nth-child(3) h3:before, #regular-pagebox.stance #content-care ol.itemlist li:nth-child(3) h4:before {
  content: url(../stance/img/stance_care_03.png);
}
#regular-pagebox.stance #content-care ol.itemlist li:nth-child(4) h2:before, #regular-pagebox.stance #content-care ol.itemlist li:nth-child(4) h3:before, #regular-pagebox.stance #content-care ol.itemlist li:nth-child(4) h4:before {
  content: url(../stance/img/stance_care_04.png);
}
#regular-pagebox.policy {
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
}
#regular-pagebox.policy main .blockbox .outer h3 {
  position: relative;
  margin-top: -200px;
  padding: 245px 0px 45px;
}
@media screen and (max-width: 1080px) {
  #regular-pagebox.policy main .blockbox .outer h3 {
    margin-top: 0px;
    padding: 24px 4%;
  }
}
#regular-pagebox.policy main .blockbox .outer h3 span {
  display: block;
  width: 1080px;
  margin: 0px auto;
  font-size: clamp(1.5rem, 1.1194rem + 1.1194vw, 1.875rem);
  color: #fff;
  letter-spacing: 0.2em;
  line-height: 1.6em;
}
@media screen and (max-width: 1080px) {
  #regular-pagebox.policy main .blockbox .outer h3 span {
    width: 100%;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.policy main #content-introduction .column img {
    display: table;
    margin: 0px auto;
  }
}
#regular-pagebox.policy main #content-reason .outer .photo:before {
  content: "";
  display: block;
  width: 100%;
  height: 100px;
  background: url(../img000/frog_polka.png) no-repeat 4% bottom/contain;
}
#regular-pagebox.policy main #content-reason .outer h3 {
  background-color: #70B173;
}
#regular-pagebox.policy main #content-why .outer .photo:before {
  content: "";
  display: block;
  width: 100%;
  height: 100px;
  background: url(../img000/frog_aria.png) no-repeat right 10px bottom/contain;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.policy main #content-why .outer .photo:before {
    background-position: right 4% bottom;
  }
}
#regular-pagebox.policy main #content-why .outer h3 {
  background-color: #59ACE4;
}
#regular-pagebox.policy main #content-why .outer h3 span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.policy main #content-why .outer h3 span {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 15px;
  }
}
#regular-pagebox.policy main #content-why .outer h3 span:after {
  content: "";
  display: block;
  width: 80px;
  height: 96px;
  background: url(../img000/frog_bono.png) no-repeat center center/contain;
}
#regular-pagebox.first {
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
  /* --------------------------------------------------*/
}
#regular-pagebox.first #kanban .photo .frog {
  margin-right: 80px;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #kanban .photo .frog {
    margin-right: 0px;
  }
}
#regular-pagebox.first #kanban .photo .question {
  width: 200px;
  position: absolute;
  top: -100px;
  right: 0px;
}
@media screen and (max-width: 1080px) {
  #regular-pagebox.first #kanban .photo .question {
    width: 150px;
    top: -50px;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #kanban .photo .question {
    width: 100px;
  }
}
#regular-pagebox.first #content-concerns {
  height: 680px;
  position: relative;
  background-color: #70B173;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns {
    height: 47.2222222222vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns {
    height: 600px;
  }
}
#regular-pagebox.first #content-concerns .outer {
  height: 100%;
  position: relative;
}
#regular-pagebox.first #content-concerns .display {
  width: 1440px;
  height: 100%;
  position: relative;
  margin: 0px auto;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display {
    width: 100%;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}
#regular-pagebox.first #content-concerns .display ul li {
  position: absolute;
  z-index: 2;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display ul li {
    display: table;
    position: static;
  }
}
#regular-pagebox.first #content-concerns .display ul li img {
  width: 80%;
  height: auto;
}
#regular-pagebox.first #content-concerns .display ul li:nth-child(1) {
  left: 84px;
  top: 20px;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(1) {
    left: 5.8333333333vw;
    top: 1.3888888889vw;
  }
}
#regular-pagebox.first #content-concerns .display ul li:nth-child(1) img {
  width: 681px;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(1) img {
    width: 47.2916666667vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(1) img {
    width: auto;
  }
}
#regular-pagebox.first #content-concerns .display ul li:nth-child(2) {
  right: 10px;
  top: -30px;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(2) {
    top: -2.0833333333vw;
    right: 0.6944444444vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(2) {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    width: 55%;
    margin-top: -30px;
  }
}
#regular-pagebox.first #content-concerns .display ul li:nth-child(2) img {
  width: 416px;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(2) img {
    width: 28.8888888889vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(2) img {
    width: auto;
  }
}
#regular-pagebox.first #content-concerns .display ul li:nth-child(3) {
  left: 0px;
  top: 300px;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(3) {
    left: 0.6944444444vw;
    top: 20.8333333333vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(3) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 70%;
    margin-top: -30px;
  }
}
#regular-pagebox.first #content-concerns .display ul li:nth-child(3) img {
  width: 526px;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(3) img {
    width: 36.5277777778vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(3) img {
    width: auto;
  }
}
#regular-pagebox.first #content-concerns .display ul li:nth-child(4) {
  right: 60px;
  bottom: 10px;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(4) {
    right: 4.1666666667vw;
    bottom: 0.6944444444vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(4) {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    width: 40%;
  }
}
#regular-pagebox.first #content-concerns .display ul li:nth-child(4) img {
  width: 291px;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(4) img {
    width: 20.2083333333vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display ul li:nth-child(4) img {
    width: auto;
  }
}
#regular-pagebox.first #content-concerns .display p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  position: absolute;
  left: 580px;
  top: 300px;
  z-index: 3;
  font-size: clamp(1.125rem, 0.3638rem + 2.2388vw, 1.875rem);
  color: #fff;
  line-height: 1.4em;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display p {
    left: 40.2777777778vw;
    top: 20.8333333333vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display p {
    gap: 15px;
    position: relative;
    left: 50%;
    top: auto;
    margin-top: -30px;
    white-space: nowrap;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
#regular-pagebox.first #content-concerns .display p:after {
  content: "";
  width: 90px;
  height: 111px;
  position: relative;
  background: url(../img000/frog_polka.png) no-repeat center center/cover;
}
@media screen and (max-width: 1440px) {
  #regular-pagebox.first #content-concerns .display p:after {
    width: 6.25vw;
    height: 7.7083333333vw;
  }
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-concerns .display p:after {
    width: 72px;
    height: 88.8px;
  }
}
#regular-pagebox.first #content-guidance p.lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0px;
}
#regular-pagebox.first #content-guidance p.lead:after {
  content: "";
  display: block;
  width: 50px;
  height: 77px;
  background: url(../img000/frog_vivi.png) no-repeat center bottom/contain;
}
@media screen and (max-width: 544px) {
  #regular-pagebox.first #content-guidance p.lead {
    padding: 0px 15px;
  }
}
#regular-pagebox.first #content-guidance ol.accordion li.open h4 a {
  background-color: #f57369;
}