@media screen and (max-width: 765px) {
  html {
    font-size: 2.66vw;
  }
}

/*******************
main
********************/
@media screen and (max-width: 765px) {
  #consulting-page main {
    padding-top: 56px;
  }
}

/*************************************
section / section header
**************************************/
@media (max-width: 765px) {
  .section-header {
    padding: 17.33vw 0 15.47vw;
  }

  .section-header-text {
    margin-top: 4.53vw;
  }

  .section-header-ttl {
    font-size: 3.5rem;
    line-height: 1.25;
  }

  .service-page-link {
    top: 3.2vw;
    left: 3.2vw;
    width: 30.13vw;
    height: 6.4vw;
    background-size: 30.13vw 6.4vw;
  }
}

/*************************************
component
**************************************/
@media (max-width: 765px) {
  .br-sp {
    display: block;
  }
}

/*************************************
section / service-planning
**************************************/
@media (max-width: 765px) {
  #sec-service-planning {
    padding-bottom: 21.33vw;
  }

  #sec-service-planning .service-planning-top {
    height: 66.67vw;
    background-image: url(/service/img/img-service-planning-sp.png);
  }

  #sec-service-planning .sec-ttl-area-bg {
    bottom: -1px;
    width: 85.6vw;
    height: 21.33vw;
  }

  #sec-service-planning .sec-ttl-area {
    left: 0;
    bottom: -1px;
    width: 85.6vw;
    height: 21.33vw;
    padding: 3.2vw 5.33vw;
    transform: translateX(0);
  }

  #sec-service-planning .sec-ttl {
    font-size: 2rem;
    line-height: 2;
    letter-spacing: 1.11px;
  }

  #sec-service-planning .sec-ttl-ja {
    margin-top: 0;
    font-size: 1.2rem;
  }

  #sec-service-planning .section-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 8vw 5.33vw 0;
  }

  #sec-service-planning .sec-detail {
    display: block;
  }

  #sec-service-planning .sec-label {
    margin-right: 0;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 1.67px;
  }

  #sec-service-planning .sec-text {
    margin-top: 4.53vw;
    font-size: 1.4rem;
    line-height: 2.14;
    letter-spacing: 2px;
  }
}

/*************************************
section / service-planning / example
**************************************/
@media (max-width: 765px) {
  #service-planning-example {
    padding: 16vw 0 0;
  }

  .service-planning-ttl-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .service-planning-ttl {
    flex-shrink: 0;
    margin-right: 8vw;
    padding: 7.73vw 0;
    font-size: 1.6rem;
    line-height: 1;
  }

  .service-planning-ttl-border {
    width: 100%;
    padding: 7.73vw 0;
  }

  .service-planning-ttl-border-text {
    position: absolute;
    bottom: 5.33vw;
    left: 0;
    font-size: 1.2rem;
    line-height: 1.17;
  }

  #service-planning-case .service-planning-ttl {
    padding: 7.73vw 0 10.4vw;
  }

  #service-planning-example .example-wrap {
    padding: 6.67vw 5.33vw;
  }

  #service-planning-example .example-wrap .example-wrap-item:last-child {
    margin-top: 10.67vw;
  }

  #service-planning-example .example-wrap .example-wrap-content {
    display: block;
  }

  #service-planning-example .example-wrap .example-wrap-content .example-wrap-item {
    width: 100%;
  }

  #service-planning-example .example-img-area {
    height: auto;
    padding: 2.67vw 5.87vw 2.4vw;
    border-radius: 15px;
  }

  #service-planning-example .example-img-area img {
    width: 100%;
    height: 100%;
  }

  #service-planning-example .example-label {
    margin-top: 4vw;
    font-size: 1.4rem;
    line-height: 1.25;
    letter-spacing: 2.29px;
  }

  #service-planning-example .example-text {
    margin-top: 1.33vw;
    font-size: 1.4rem;
  }

  #service-planning-example .other-example {
    margin-top: 14.4vw;
    padding-top: 9.33vw;
  }

  #service-planning-example .other-example .other-example-caption {
    top: -8%;
    padding: 2.13vw 2.67vw 2.67vw;
    line-height: 1;
    letter-spacing: 1.71px;
  }

  #service-planning-example .other-example ul {
    display: block;
  }

  #service-planning-example .other-example li {
    width: 100%;
    padding: 3.2vw 0;
  }

  #service-planning-example .other-example li:not(:first-child) {
    margin-top: 1.33vw;
  }
}

/*************************************
section / service-planning / workshop
**************************************/
@media (max-width: 765px) {
  #service-planning-workshop {
    padding: 17.07vw 0 0;
  }

  #service-planning-workshop .workshop-wrap {
    display: block;
    padding: 5.33vw 4.53vw 8.8vw 3.47vw;
  }

  #service-planning-workshop .workshop-wrap .workshop-wrap-img {
    width: 100%;
    height: 100%;
  }

  #service-planning-workshop .workshop-wrap .workshop-wrap-content {
    margin-left: 0;
  }

  #service-planning-workshop .workshop-wrap .workshop-wrap-label {
    margin-top: 4vw;
    font-size: 1.6rem;
    line-height: 1.88;
    letter-spacing: 2.29px;
  }

  #service-planning-workshop .workshop-wrap .workshop-wrap-text {
    margin-top: 1.87vw;
    font-size: 1.4rem;
    line-height: 1.86;
    letter-spacing: 2px;
  }

  #service-planning-workshop .view-more-area {
    width: fit-content;
    margin: 8vw auto 0;
  }
}

/*************************************
section / system design
**************************************/
@media (max-width: 765px) {
  #sec-system-design,
  #sec-ui-design {
    padding-top: 0;
    padding-bottom: 21.33vw;
  }

  #sec-system-design .system-design-top {
    height: 66.67vw;
    background-image: url(/service/img/img-sytem-design-sp.png);
  }

  #sec-system-design .section-inner {
    max-width: 100%;
    padding: 8vw 5.33vw 5.33vw;
  }

  #sec-system-design .sec-ttl-area-bg {
    bottom: -1px;
    width: 85.6vw;
    height: 21.33vw;
  }

  #sec-system-design .sec-ttl-area {
    left: 0;
    bottom: -1px;
    width: 85.6vw;
    height: 21.33vw;
    padding: 3.2vw 5.33vw;
    transform: translateX(0);
  }

  #sec-system-design .sec-ttl {
    font-size: 2rem;
    line-height: 2;
    letter-spacing: 1.11px;
  }

  #sec-system-design .sec-ttl-ja {
    margin-top: 0;
    font-size: 1.2rem;
  }

  #sec-system-design .sec-detail {
    display: block;
  }

  #sec-system-design .sec-label {
    margin-right: 0;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 1.67px;
  }

  #sec-system-design .sec-text {
    width: 100%;
    margin-top: 5.07vw;
    font-size: 1.4rem;
    line-height: 2.14;
    letter-spacing: 2px;
  }

  .system-ui-example {
    display: block;
    margin-top: 10.67vw;
  }

  .system-ui-example ul {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 5.33vw;
  }

  .system-ui-example ul li {
    display: flex;
    justify-content: center;
    flex-flow: column;
    width: 44vw;
    min-height: 10.67vw;
    margin-left: 0;
    padding: 1.6vw 0;
    border-radius: 7px;
    background-color: #eceff1;
    font-size: 1.4rem;
    font-weight: 300;
    font-family: "hirakaku-w3";
    text-align: center;
  }

  .system-ui-example ul li span {
    display: block;
    font-size: 1rem;
    font-weight: 300;
    font-family: "hirakaku-w3";
    text-align: center;
    line-height: 1.4;
  }

  .system-ui-example ul li:nth-child(2n) {
    margin-left: 1.33vw;
  }

  .system-ui-example ul li:nth-child(3),
  .system-ui-example ul li:nth-child(4) {
    margin-top: 1.33vw;
  }
}

/*************************************
section / ui design
**************************************/
@media (max-width: 765px) {
  #sec-ui-design .ui-design-top {
    height: 66.67vw;
    background-image: url(/service/img/img-ui-design-sp.png);
  }

  #sec-ui-design .section-inner {
    max-width: 100%;
    padding: 8vw 5.33vw 5.33vw;
  }

  #sec-ui-design .sec-ttl-area-bg {
    bottom: -1px;
    width: 85.6vw;
    height: 21.33vw;
  }

  #sec-ui-design .sec-ttl-area {
    left: 0;
    bottom: -1px;
    width: 85.6vw;
    height: 21.33vw;
    padding: 3.2vw 5.33vw;
    transform: translateX(0);
  }

  #sec-ui-design .sec-ttl {
    font-size: 2rem;
    line-height: 2;
    letter-spacing: 1.11px;
  }

  #sec-ui-design .sec-ttl-ja {
    margin-top: 0;
    font-size: 1.2rem;
  }

  #sec-ui-design .sec-detail {
    display: block;
  }

  #sec-ui-design .sec-label {
    margin-right: 0;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 1.67px;
  }

  #sec-ui-design .sec-text {
    width: 100%;
    margin-top: 5.07vw;
    font-size: 1.4rem;
    line-height: 2.14;
    letter-spacing: 2px;
  }

  #sec-ui-design .case-study {
    margin-top: 8.27vw;
  }

  #sec-ui-design .case-study-ttl {
    display: flex;
    align-items: center;
    margin-bottom: 2.67vw;
  }

  #sec-ui-design .case-study-label {
    margin-right: 4vw;
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: 0.89px;
  }

  #sec-ui-design .case-study-text {
    margin-left: 4vw;
    font-size: 1.1rem;
  }

  #sec-ui-design .case-study-border {
    width: 1px;
    height: 4vw;
  }
}

/*************************************
section / our-service
**************************************/
@media screen and (max-width: 765px) {
  #sec-our-service {
    padding: 16vw 5.33vw;
  }

  #sec-our-service .service-card {
    flex-direction: column;
  }

  #sec-our-service .service-card-img {
    min-width: auto;
    height: 53.87vw;
  }

  #sec-our-service .service-card-container {
    padding: 0;
  }

  #sec-our-service .service-card-content {
    padding: 5.33vw 5.33vw 7.47vw;
  }

  #sec-our-service .service-card-ttl {
    font-size: 2.6rem;
    line-height: 1.35;
  }

  #sec-our-service .service-card-furigana {
    margin-top: 1.33vw;
    font-size: 1.2rem;
  }

  #sec-our-service .service-card-text {
    margin-top: 6.67vw;
    font-size: 1.2rem;
  }

  #sec-our-service .service-card-img {
    border-radius: 10px 10px 0 0;
  }

  #sec-our-service .service-card-chip {
    width: 25.39vw;
    height: 5.07vw;
    padding: 1.6vw 0;
    font-size: 1.2rem;
  }

  #sec-our-service .service-card-view-more-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 6.4vw;
    border-top: solid 1px #e5e5e5;
  }
}

/*************************************
section / inquiry
**************************************/
@media screen and (max-width: 765px) {
  #sec-inquiry {
    padding: 0 5.33vw 21.33vw 5.33vw;
  }

  #sec-inquiry .inquiry-text {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 1.33px;
  }

  #sec-inquiry .inquiry-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8.53vw 8.53vw 11.47vw 8.53vw;
    background-color: #f8f9fa;
  }

  #sec-inquiry .inquiry-button {
    width: 72.8vw;
    padding: 6.93vw 7.73vw 4.8vw;
    margin-top: 7.73vw;
  }

  #sec-inquiry .inquiry-button-label {
    font-size: 1.4rem;
  }

  #sec-inquiry .inquiry-button-text {
    margin-top: 4vw;
    font-size: 2rem;
    letter-spacing: 1.43px;
  }

  #sec-inquiry .inquiry-button-img {
    margin-top: 4.8vw;
    position: unset;
    transform: unset;
  }
}

/*************************************
section / develop
**************************************/
@media (max-width: 765px) {
  #sec-develop {
    padding: 0 0 26.93vw;
  }

  #sec-develop .section-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 8.53vw 5.33vw 0;
    border-top: 0;
  }

  #sec-develop img {
    width: 100%;
    margin-right: 0;
  }

  #sec-develop .sec-detail {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  #sec-develop .sec-ttl-area {
    padding: 8vw 0 8vw;
    background-color: #fff;
  }

  #sec-develop .sec-ttl {
    font-size: 3.2rem;
    line-height: 1;
    letter-spacing: 1.78px;
  }

  #sec-develop .sec-ttl-ja {
    margin-top: 1.33vw;
  }

  #sec-develop .sec-detail {
    display: block;
  }

  #sec-develop .sec-label {
    margin-top: 3.2vw;
    margin-right: 0;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 1.67px;
  }

  #sec-develop .sec-text {
    margin-top: 2.13vw;
    font-size: 1.4rem;
    line-height: 1.86;
    letter-spacing: 2px;
  }
}

/*************************************
case study
**************************************/
@media (max-width: 765px) {
  .case-study {
    position: relative;
    background: none;
    padding-left: 5.33vw;
  }

  .case-study .case-study-inner {
    max-width: 100%;
    padding: 5.33vw;
    background-color: rgba(13, 136, 154, 0.05);
  }

  .case-study ul {
    display: flex;
    align-items: center;
    padding-bottom: 5.33vw;
    column-gap: 4px;
    overflow-x: scroll;
  }

  .case-study ul::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  .case-study ul::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .case-study ul::-webkit-scrollbar-thumb {
    background-color: rgba(139, 139, 139, 0.9);
  }

  .case-study li {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .case-study ul li a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .case-study img {
    min-width: 40vw;
    min-height: 40vw;
    object-fit: cover;
  }

  .case-study-item {
    position: relative;
    height: 100%;
  }

  .overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    padding: 11.73vw 0 0;
    color: #fff;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
    text-align: center;
    overflow: hidden;
  }

  .overlay-label {
    font-size: 1.2rem;
    font-family: "Avenir Heavy", sans-serif;
    line-height: 1.33;
    letter-spacing: 0.36px;
  }

  .overlay-text {
    display: none;
  }

  .overlay-view-more {
    display: none;
  }
}

/*************************************
tab
**************************************/
@media (max-width: 765px) {
  .tabs {
    display: block;
    width: 100%;
    margin: 23.47vw auto 0;
  }

  .tab-item {
    display: block;
    width: calc(100% / 3);
    padding-bottom: 2.93vw;
    border-bottom: 2px solid #d8d8d8;
    float: left;
    color: rgba(0, 0, 0, 0.3);
    font-family: "hirakaku-w6";
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .tab-item:hover {
    opacity: 0.75;
  }

  input[name="tab-item"] {
    display: none;
  }

  .tab-content {
    display: none;
    padding-top: 8vw;
    clear: both;
    overflow: hidden;
  }

  .tab-icon {
    margin: 0 auto;
  }

  .tab-icon--atsurae {
    width: 62px;
    height: 60px;
    background-image: url(/service/img/icon-atsurae.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .tab-icon--customer {
    width: 30px;
    height: 40px;
    background-image: url(/service/img/icon-customer.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .tab-icon--partner {
    width: 39px;
    height: 35px;
    background-image: url(/service/img/icon-partner.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .tab-label {
    margin-top: 2.67vw;
    font-size: 12px;
    font-weight: 600;
    font-family: "hirakaku-w3";
    color: #0d889a;
  }

  .tab-table {
    display: block;
    width: 100%;
    height: 132vw;
    margin-top: 5.33vw;
  }

  .tab-table--atsurae {
    background-image: url(/service/img/img-tab-atsurae.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .tab-table--customer {
    background-image: url(/service/img/img-tab-customer.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .tab-table--partner {
    background-image: url(/service/img/img-tab-partner.png);
    background-size: cover;
    background-repeat: no-repeat;
  }

  #atsurae:checked ~ #atsurae-content,
  #customer:checked ~ #customer-content,
  #partner:checked ~ #partner-content {
    display: block;
  }

  .tabs input:checked + .tab-item {
    border-bottom: 2px solid #d7003c;
    color: #d7003c;
  }

  .table-img {
    display: none;
  }
}

/*************************************
section sticky
**************************************/
@media (max-width: 765px) {
  .section-sticky {
    position: -webkit-sticky;
    position: sticky;
    display: block;
    top: 0;
    z-index: 1;
  }

  .section-sticky-inner {
    padding: 2.4vw 4.53vw 1.87vw;
    background-color: #1f3644;
    font-family: "Avenir Heavy", sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    color: #fff;
  }
}