header {
  margin-bottom: 0px;
  padding: 0 !important;

  .inner {
    padding-top: 0;

    background-color: var(--theme-color);

    svg path {
      fill: white;
    }


  }
}

.survey-result {
  flex-direction: column;
}

.business-innovation {
  .top {
    .images {
      margin-top: 2rem;
    }

    .description {
      margin-top: 12rem;
    }

    .arrow {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      transform: scale(3) translate(-45%, 42%);
      opacity: 0.8;
    }
  }

  .card-container {
    margin-top: 12rem;

    .shadow-box {
      .inner {
        .card-header {
          flex-direction: column;
          margin-top: 4em;

          img {
            margin: auto;
          }

          .texts {
            p:nth-of-type(1) {
              margin-top: 3rem;
            }

            p:nth-of-type(2) {
              margin-top: 3rem;
            }

            div:has(a) {
              justify-content: center;
              margin-top: 6rem;
            }
          }
        }
      }
    }
  }
}

.business-details {
  .top {
    height: calc(100vh - 20vw);
    padding-top: calc(100vh - 130vw);

    .top-cover {
      height: 110vw;
      margin-right: auto;
      -webkit-mask-image: url("../images/business/dotlife1/mask.svg");
      -webkit-mask-size: 150%;
      mask-image: url("../images/business/dotlife1/mask.svg");
      mask-size: 150%;
      mask-repeat: no-repeat;
      mask-position: 100% 0%;

      .cover-trim {
        &.life1 {
          background-position: 80% 0%;
          background-size: 200%;
        }

        &.life2 {
          background-position: 30% 0%;
          background-size: 170%;
        }

        &.life3 {
          background-position: 95% -20%;
          background-size: 175%;
        }

        &.home1 {
          background-position: 95% 20%;
          background-size: 220%;
        }

        &.home2 {
          background-position: 95% 0%;
          background-size: 180%;
        }

        &.stay1 {
          background-position: 70% 20%;
          background-size: 220%;
        }

        &.stay2 {
          background-position: 105% 0%;
          background-size: 180%;
        }

        &.center1 {
          background-position: 70% 0%;
          background-size: 170%;
        }

        &.center2 {
          background-position: 100% 0%;
          background-size: 200%;
        }

        &.junior1 {
          background-position: 50% 0%;
          background-size: 170%;
        }

        &.junior2 {
          background-position: 80% 0%;
          background-size: 230%;
        }

        &.work1 {
          background-position: 100% 0%;
          background-size: 200%;
        }

        &.work2 {
          background-position: 70% 0%;
          background-size: 180%;
        }

        &.work3 {
          background-position: 70% 0%;
          background-size: 180%;
        }
      }
    }

    .logo {
      position: absolute;
      top: 3vh;
      left: 6vw;
      width: 55vw;
      border-bottom: 4px solid white;

      svg {
        width: 60%;
        margin-bottom: 3vw;
      }

      p {
        font-size: 3vw;
        margin-bottom: 3vw;
        color: white;
      }

      svg path {
        fill: white;
      }
    }

  }

  .message-group1 {
    max-width: 100%;

    .message2 {
      font-size: 1.25em;
      line-height: 2.5em;
      max-width: 80%;
      margin: auto;
    }
  }

  .reason {
    margin-top: 8rem;

    .img {
      width: 3rem;
      transform: translate(8px, 8px);
    }

    .title {
      .shadow-box {
        font-size: 1.6rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        text-align: left;
padding-right:1em;
        color: var(--theme-color);

        --border-color: var(--theme-color);
        --shadow-color: var(--theme-color);
        --shadow-size: 1.5rem;
      }
    }

    .reason-grid {
      display: grid;
      margin-top: 6rem;
      grid-template-columns: 1fr;
      gap: 7rem 5rem;

      .grid-item {
        display: flex;
        flex-direction: column;
        width: 100%;

        .title {
          font-size: 1.6rem;
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 92vw;
          margin: auto;
          text-align: center;
          color: var(--theme-color);
          gap: 1rem;

          svg {
            flex-shrink: 0;
            width: 4em;
            fill: var(--theme-color);

            * {
              fill: var(--theme-color);
            }
          }
        }

        .shadow-box {
          font-size: 1.1rem;
          line-height: 2em;
          flex-grow: 1;
          margin-top: 2rem;
          --border-color: var(--theme-color);
          --shadow-color: var(--theme-color);
          --background-color: var(--card-background-color);
          --shadow-size: 1.5rem;
        }
      }
    }
  }

  .survey {
    margin-top: 10rem;

    .title {
      font-size: 1.25rem;
      width: 90vw;
      margin-right: auto;
      margin-left: auto;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      text-align: center;
      color: var(--theme-color);
      --border-color: var(--theme-color);
      --shadow-color: var(--theme-color);
    }

    .survey-result {
      display: flex;

      .flex-center {
        > div {
          width: 100vw;
          text-align: center;

          .quicksand {
            font-size: 3.125rem;
            font-weight: bold;

            span {
              font-size: 4.8125rem;
              line-height: 1.2em;
            }
          }
        }
      }
    }
  }

  .customer-voices {
    .title {
      max-width: 70vw;
      max-height: 40%;
      margin-top: 8rem;
      margin-right: auto;
      margin-bottom: 8rem;
      margin-left: 0;
      padding-top: 10vw;
      padding-bottom: 13vw;
      transform: 0;
      background: var(--background-image);

      .shadow-box {
        font-size: 1.25rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        text-align: center;
        color: var(--theme-color);
        background-color: white;
        --border-color: var(--theme-color);
        --shadow-color: var(--theme-color);
      }
    }

    .voices {
      img:not(:last-child) {
        margin-bottom: 6rem;
        margin-left: 0;
      }

      img:nth-child(2) {
        margin-top: 6rem;
      }

      img:first-child {
        margin-top: -10rem;
      }

      img:nth-child(2n) {
        margin-right: 0;
        margin-left: auto;
      }
    }
  }

  .box {
    .shadow-box {
      display: flex;
      flex-direction: column;
      margin-top: 8rem;

      div:first-child {
        flex-grow: 1;

        p:first-child {
          font-size: 6vw;
          line-height: 2em;
        }

        img {
          margin-top: 1em;
          margin-bottom: 5em;
        }
      }

      .button {

        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 3em;
        padding-top: 1.75em;
        padding-bottom: 1.8em;
        color: white;
        gap: 1em;

        img {
          transform: translateY(0.5em);
        }
      }
    }
  }

  .entry {
    .shadow-box {
      --border-color: var(--theme-color);
      --shadow-color: var(--theme-color);

      div:first-child {
        p:first-child {
          color: var(--theme-color);
        }
      }

      .button {
        --button-color: var(--theme-color);
      }
    }
  }

  .offices {
    .button {
      display: flex;
      align-items: normal;
      flex-direction: column;
      justify-content: none;
      text-align: none;

      img {
        margin: auto;
      }

      p {
        margin: auto;
      }
    }
  }
}

.location {
  .grid {
    grid-template-columns: 1fr;
  }

  .filters {
    flex-direction: column;

    .filter-container {
      width: calc(100%);
      min-height: 67px;
    }

    .filter-title {
      font-size: var(--font-size-16);
    }

    .filter {
      flex-grow: 1;
      margin-right: 8px;

      &:has(.open) {
        position: absolute;
        right: 4%;
        left: 4%;
        margin-bottom: 2em;
      }
    }

    .toggle-submenu {
      font-size: var(--font-size-16);
    }

    .filter-content {
      font-size: var(--font-size-16);
      overflow-y: auto;
      height: 60vh;
      padding-top: 2em;
    }
  }

  .button {
    max-width: 15rem;
    margin-left: auto;
  }

  .cities {
    grid-template-columns: repeat(2, 1fr);

    a {
      font-size: var(--font-size-15);
      line-height: 1.8;
    }
  }

  .services {
    grid-template-columns: repeat(2, 1fr);
    gap: 4em 1em;

    img {
      height: 2.2rem;
      margin-top: 1em;
      margin-right: auto;
    }

    a {
      font-size: var(--font-size-15);
      line-height: 1.8;
      text-align: left;
    }
  }

  .result-grid {
    grid-template-columns: 1fr;
    gap: 6em;
  }
}

.social-innovation {
  .social-top {
    position: relative;

    min-height: calc(110vh - 59px);

    > img {
      max-width: 140%;

    }

    > div {
      position: static;
      max-width: 100%;
      margin-right: auto;
      padding-left: 2rem;

      img {
        width: 100%;
        max-width: 100%;
        margin-top: 10%;
        margin-bottom: 10%;
      }
    }

    & > div {
      margin-top: 0;
      padding-top: 0;

      > p {
        margin-top: 10%;
      }

    }

    > img {
      bottom: 0;
    }
  }

  .dotinnovation p.font-14.l-height-2.mt-4.mb-4 {
    width: 100%;
    margin: 2rem auto 0;

  }

  & div {
    .font-20 {
      font-size: 1.4rem;
      margin-top: 0;
    }
  }

  .shadow-box {
    margin-right: 3%;
    margin-left: 3%;
    --shadow-size: .5rem;

    &.dotjunior {
      .flex {
        grid-template-columns: 1fr 1fr;
      }
    }

    &.dotinnovation {
      .d-grid-2.gap-2.mt-4.pl-2.pr-2 {
        padding: 0;
        grid-template-columns: 1fr;

        & div {
          .font-20 {
            font-size: 1.4rem !important;

          }

        }

      }

      .font-20 {
        margin-top: 4rem;
        text-align: center;
      }

      div:has(a) {
        font-size: 1.2rem;
        line-height: 1.8;
        text-align: center;

        a {
          font-size: 1rem;
          position: static;
          bottom: 0;
          left: 40%;
        }

        .font-14 {
          font-size: 1rem;
          text-align: left;
        }
      }
    }

    img.icon {
      width: 80%;
    }

    .flex {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;

      p {
        font-size: .9rem;

      }

      a {
        font-size: .8rem;
      }
    }

    .flex.biyou {
      display: grid;
      justify-content: space-evenly;
      text-align: center;
      gap: .6rem;
      grid-template-columns: repeat(2, 1fr);
    }
  }

  p.font-14.l-height-2.mt-4 {
    font-size: 1.1rem;
    font-weight: normal;
    margin-top: 0;
  }

}

.animation {
  position: relative;
  z-index: -1;
  right: max(35vw, calc(50vw - 540px + 378px));
  margin-top: min(10vw, 108px);
  margin-bottom: min(10vw, 108px);
  transform: scale(1);
  animation: none;

  &.dotcenter {
    right: 28vw;
    transform: scale(0.7);
  }
}

@keyframes mask-animation {
  0% {
    mask-size: 0%;
    mask-position: -50vh 55vh;

  }
  100% {
    mask-size: 150%;
    mask-position: 100% 0;
  }
}

.business-details {
  & .message-group1 {
    .message1 {
      letter-spacing: 4px;
    }
  }
}

.hero-grid {
  grid-template-columns: repeat(3, 1fr);

  .flip {
    --size: calc((92vw - 2em) / 3);
  }
}

/*???*/
.dictionary {
  & .container {
    & .content {
      & div:nth-child(1) {
        .summary {
          font-size: 15px;
          font-weight: 700;
          line-height: 1.8;
          width: 100%;
          margin: auto;
          margin-top: 30px;
        }
      }
    }
  }
}

.dictionary {
  & .container {
    & .content {
      & .toggle-dictionary-submenu {
        label {
          font-size: 12px;
          font-weight: 700;
          display: flex;
          width: 100%;
          margin-bottom: 30px;
          padding: 4px;
          padding-left: 8px;
          cursor: pointer;
          color: var(--color-mediumblue-500);
          border: 3px solid var(--color-mediumblue-500);
          border-radius: 5px;
          box-shadow: 5px 5px var(--color-mediumblue-500);

          .font-12 {
            font-size: 1.1rem;
          }
        }
      }
    }
  }
}


.dictionary {
  & .container {
    & .content {
      & .dictionary-submenu {
        & > div {
          & ul:nth-child(2) {
            li {
              font-size: 15px;
              margin-bottom: 8px;
            }
          }
        }
      }
    }
  }
}

/*???*/

.business-details {
  & .message-group1 {
    .message2 {
      font-size: 1.1em;
      line-height: 1.8em;
      max-width: 80%;
      margin: auto;
    }
  }
}


.business-innovation {
  & .top {
    & .description {
      p:nth-child(2) {
        font-size: 1.1rem;
        line-height: 1.85em;
        margin-top: 1rem;
      }
    }
  }
}


.location .kensaku.fixed {
  margin-top: 100px;
}

.location .shadow-box .font-12 {
  font-size: 1.1rem;
}

form#search .mb-0-5 {
  font-size: 1.1rem;
}

form#search label {
  font-size: 1rem;
}

.location .result-grid .font-12 {
  font-size: .9rem;
}

.location .tab.d-flex.gap-1.mb-1 {
  margin-bottom: 2rem;
}

.location {
  .button {
    font-size: 1.1rem;
    max-width: 10rem;
    margin-top: 1.5em;
    margin-left: auto;
    padding: .5em 1em;
  }
}


.social-innovation .animation {
  position: absolute;
}

.business-details {
  & .message-group1 {
    .message2 {
      font-size: 1.1em;
      line-height: 1.8em;
      max-width: 80%;
      margin: auto;
    }
  }
}


.business-innovation {
  & .top {
    & .description {
      p:nth-child(2) {
        font-size: 1.1rem;
        line-height: 1.85em;
        margin-top: 1rem;
      }
    }
  }
}


.location .kensaku.fixed {
  margin-top: 100px;
}

.location .shadow-box .font-12 {
  font-size: 1.1rem;
}

form#search .mb-0-5 {
  font-size: 1.1rem;
}

form#search label {
  font-size: 1rem;
}

.location .result-grid .font-12 {
  font-size: .9rem;
}

.location .tab.d-flex.gap-1.mb-1 {
  margin-bottom: 2rem;
}


.social-innovation .animation {
  position: absolute;
}

.business-innovation {
  & .card-container {
    & .shadow-box {
      & .inner {
        & .card-header {
          .mt-2 img.b-voice {
            width: 50px;
            margin-left: 0;
          }
        }
      }
    }
  }
}

.business-innovation {
  & .card-container {
    & .shadow-box {
      & .inner {
        & .card-header {
          .mt-2 .modal-wrapper img {
            width: 90%;
          }
        }
      }
    }
  }
}

img.b-voice + .open-modal span.font-11 {
  font-size: 13px;
}

.business-innovation {
  & .card-container {
    & .shadow-box {
      & .inner {
        & .card-header {
          & .texts {
            p:nth-of-type(1) {
              font-weight: bold;
              margin-top: 3rem;
            }
          }
        }
      }
    }
  }
}

.business-innovation {
  & .card-container {
    & .shadow-box {
      & .inner {
        & .card-header {
          & .texts {
            p:nth-of-type(2) {
              font-size: 1.1rem;
              margin-top: 3rem;
            }
          }
        }
      }
    }
  }
}

.business-innovation {
  & .card-container {
    & .shadow-box {
      & .num {
        .font-30 {
          margin-top: 4px;
          transform: translateX(-55px);
          letter-spacing: 2px;
        }
      }
    }
  }
}

.business-innovation {
  & .card-container {
    & .shadow-box {
      & .inner {
        & .card-header {
          a {
            font-size: 1rem;
            color: black;
          }
        }
      }
    }
  }
}

.business-innovation {
  & .card-container {
    & .shadow-box {
      & .inner {
        & .card-header {
          img.iconlink {
            width: 20px;
            max-width: 20px;
            margin-left: 0;

          }
        }
      }
    }
  }
}

.business-innovation {
  .card-header + div > div {
    .font-20 {
      font-weight: bold;
    }

    .font-20 + .mt-1-5 {
      font-size: 1.1rem;
    }
  }
}

.business-innovation {
  a.font-11.black {
    font-size: 1rem;
  }

  & .card-container {
    & .shadow-box {
      & .inner {
        p {
          font-size: 1rem;
          line-height: 1.8;
        }
      }
    }
  }
}

.business-innovation {
  & .card-container {
    & .shadow-box {
      .text-logo {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
      }
    }
  }
}

.business-innovation {
  & .card-container {
    & .shadow-box {
      & .inner {
        .text-logo p {
          font-size: 1.2rem;
          font-weight: bold;
          line-height: 1.8;
          text-align: center;
        }
      }
    }
  }
}

.location {
  & .box {
    .shadow-box {
      display: flex;
      flex-direction: column;
      margin-top: 4rem;

      & div:first-child {
        img {
          margin-top: 1em;
          margin-bottom: 5em;
        }

        p:first-child {
          font-size: 6vw;
          line-height: 2em;
        }
      }

      .button {
        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        margin-top: 3em;
        padding-top: 1.75em;
        padding-bottom: 1.8em;
        color: white;
        gap: 1em;
      }
    }
  }
}

.business-details {
  & .top {
    & .logo {
      p {
        font-size: 15px;
        margin-bottom: 3vw;
        color: white;
      }
    }
  }
}

.business-details {
  .customer-voices {
    .voices {
      picture img:nth-child(2) {
        margin-top: 0;
      }
    }
  }
}

.business-details {
  & .customer-voices {
    .title {
      margin-bottom: 0;
      transform: translateY(-40px);
    }
  }
}

.location {
    & .services {
        & div {
            > p {
                color: #000;
                font-size: 1.2em;
                    margin-bottom: .5em;
            }
        }
    }
}
.kousiki-btn {
    margin: 2em auto 4em;
}
.theme-dotjunior .kousiki-btn {
    margin: 2em auto 4em;
}
.kousiki-btn .button {
    font-size: 1.4em;
    background-color: rgb(255, 0, 125);
    position: relative;
    margin: 0px auto;
    padding: 1em 4em;
    overflow: hidden;
}

.social-innovation {
    .title {
        font-size: 1.22rem;
    }
}

.offices-s {
    width: 90%;
    margin: 6em auto 0;
    max-width: 440px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.offices-s div:first-child img {
    max-width: 95%;
    margin: 0 auto;
    border-bottom: 4px solid var(--color-dotlife);
    padding-bottom: 1em;
max-height:120px;
}
.offices-s p {
    padding: 1em 0;
    font-size: 1.25em;
}

.inno6 .media-grid img {
    object-fit: cover;
        height: 100px;
}

    .social-innovation {
        & .shadow-box {
            img.icon {
                width: 65%;
            }
        }
    }

.social-innovation {
    & .theme-dotlife, & .theme-dotjunior, & .theme-innovation {
        .title {
            font-size: 1.2rem;
            margin-top: 3rem;
            margin-bottom: 1em;
        }
    }
}


.social-innovation {
  & .shadow-box {
      & .flex {
          &:has(.iryough) {
              grid-template-columns:repeat( 2, 1fr);

            div {
              grid-column:span 2;
            }
          }
      }
  }
}

.social-innovation {
  & .dothome2 {
      & .flex {
          &:has(.iryough) {
              grid-template-columns: 50% 50%;

            div {
              grid-column: auto;
            }
          }
      }
  }
}

.dotinnovation2 {
  .animation {
    &.animation7 {
        bottom: -10%;
        left: max(-15vw);
        transform: scale(2) !important;
    }
  }
}