@charset "UTF-8";

/* ===============================================
  BiNDecとは（BiNDecの特長）
=============================================== */

/* コンテンツ幅 */
[class^="section-"] > .inner {
  max-width: 1000px;
  margin: 0 auto;
}


/* メインコンテンツ
------------------------------------- */

/* 各カラム */
.image-inner picture {
  width: 44vw;
  position: relative;
}
.text-inner {
  max-width: 540px;
  margin-left: 0;
}

@media (max-width: 768px) {
  .image-inner {
    order: 2;
  }
  .image-inner picture {
    width: 100%;
  }
  .text-inner {
    order: 1;
  }
}

/* 概要 */
.section-outline {
  padding-top: var(--margin-section);
  background-color: rgb(var(--color-gray-light));
  position: relative;
}
.section-outline::before {
  content: url('data:image/svg+xml;utf-8,<svg fill="%23ffffff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 54"><path d="M100,42.3c-4.8,6.6-12.5,10.9-21.2,10.9c-14.4,0-26.2-11.8-26.2-26.2S64.3,0.8,78.8,0.8c8.6,0,16.2,4.1,21,10.5l-7.8,5.8c-2.9-4.1-7.6-6.8-13.2-6.8c-9.4,0-16.2,7.5-16.2,16.7c0,9.2,6.8,16.7,16.2,16.7c5.7,0,10.5-2.8,13.3-7.1L100,42.3z M43.8,7.6C39.1,3.4,33,0.8,26.2,0.8C11.8,0.8,0,12.6,0,27s11.8,26.2,26.2,26.2c8.7,0,16.5-4.3,21.2-10.9l-7.9-5.7c-2.8,4.3-7.6,7.1-13.3,7.1C16.8,43.7,10,36.2,10,27s6.8-16.7,16.2-16.7c3.7,0,7,1.2,9.6,3.2L19.8,25.2l5.9,8.1l15.9-11.6v0l8.2-6v0C48.3,12.6,46.3,9.9,43.8,7.6z"/></svg>');
  width: 40vw;
  max-width: 500px;
  position: absolute;
  top: var(--margin-l);
  left: -1vw;
}

@media (max-width: 768px) {
  .section-outline::before {
    width: 60vw;
    max-width: none;
  }
}

/* PV */
.service-movie-box {
  background-color: rgb(var(--color-gray-light));
  padding-bottom: var(--margin-section);
}
.service-movie-box .section-block {
  max-width: 90%;
}
.service-movie-box .section-block div {
  align-items: flex-start;
}

.service-movie-inner {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.service-movie-inner iframe {
  width: 100%;
  height: 100%;
}


/* ３つの特長
------------------------------------- */

.section-point {
  padding-top: 0;
  padding-bottom: 0;
  counter-reset: count;
}
.section-point > .point {
  max-width: none;
  margin-top: 0;
  padding-top: var(--margin-section);
  padding-bottom: var(--margin-section);
  counter-increment: count;
  position: relative;
  z-index: 0;
}
.section-point > .point:nth-of-type(odd) {
  background-color: rgb(var(--color-gray-light));
}

/* ナンバリング */
.section-point .point .point-inner .col > .heading.size-l::before {
  content: counter(count);
  font-size: 120px;
  color: rgb(var(--color-gray-light));
  font-family: "Inter";
  font-weight: 700;
  position: absolute;
  top: -0.9em;
  left: -0.25em;
  z-index: -1;
}
.section-point > .point:nth-of-type(odd) .point-inner .col > .heading::before {
  color: #fff;
}

/* リスト */
.section-point > .point:nth-of-type(odd) .list.type-table li > *:not(.heading) {
  background-color: #fff;
}


/* 図版 */
.display-image-inner picture {
  width: 55vw;
  background-image: url("https://bindec.jp/wp-content/themes/bindec/_images/demo-edit-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  transition: 0.3s ease;
}
.display-image-inner picture::after {
  content: "";
  width: 100%;
  padding-top: 63%;
  display: block;
}
.display-image-inner picture img {
  width: 85%;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .display-image-inner picture {
    width: 100%;
  }
}

/* 図版2 */
.display-image-inner.bindecapp picture {
  background-image: none;
}
.display-image-inner.bindecapp picture::after {
  content: none;
}
.display-image-inner.bindecapp img {
  display: block;
  width: 70%;
  top: 0;
  left: 0;
  transform: none;
  position: relative;
}

@media (max-width: 768px) {
  .display-image-inner.bindecapp img {
    width: 100%;
  }
}