/*
Theme Name: xeory_child
Template: xeory_extension
*/
html,
body {
  font-family:
    "Noto Sans JP",
    "BIZ UDPGothic",
    "Open Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}
.body {
  background-image: none;
}
p.dummy {
  display: none;
}
#header {
  background-color: #296fca !important;

  #logo,
  #header-right {
    float: none;
  }

  .wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;

    @media (width <= 991px) {
      margin: 0 !important;
    }

    &:after {
      display: none;
    }

    #logo {
      a {
        &:hover,
        &:focus-visible {
          text-decoration: none;
          opacity: 0.8;
        }

        &:focus-visible {
          outline: 2px solid #fff;
          outline-offset: 4px;
          border-radius: 4px;
        }
      }
    }
  }

  nav {
    background: none;

    #gnav-ul {
      li {
        a {
          background: #296fca;

          &:hover,
          &:focus-visible {
            text-decoration: none;
            opacity: 0.8;
          }

          &:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
            border-radius: 4px;
          }
        }
      }
    }
  }

  #header-nav-btn {
    display: none;
    align-items: center;
    justify-content: flex-end;

    @media (width <= 991px) {
      display: flex;
    }

    .nav-button {
      text-align: center;
      display: block;
      color: #fff;
      background: unset;
      font-size: clamp(40px, 7vw, 50px);
      border: none;
      transition: all ease-in-out 0.3s;
      font-family: "Noto Sans JP";

      &:hover,
      &:focus-visible {
        opacity: 0.8;
      }

      &:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 3px;
        border-radius: 4px;
      }
    }

    .lang-change-nav {
      display: flex;
      gap: 12px;

      a {
        background: none;
        width: 48px;

        &:hover,
        &:focus-visible {
          opacity: 0.8;
        }

        &:focus-visible {
          outline: 2px solid #fff;
          outline-offset: 3px;
          border-radius: 4px;
        }
      }
    }
  }
}

nav#gnav-sp {
  background: #296fca;

  .wrap {
    #gnav-ul-sp {
      li {
        a {
          font-size: 20px;

          &::before {
            display: none;
          }

          &:hover,
          &:focus-visible {
            text-decoration: none;
            opacity: 0.8;
          }

          &:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 3px;
            border-radius: 4px;
          }
        }
      }
    }
  }
}
.home {
  /* トップページ */
  .wrap {
    margin: 0px;
  }
  main {
    .wrap {
      max-width: 1280px;
      /* width: calc(100% - 350px);
      margin-left: auto;
      margin-right: 0px; */
      margin-inline: auto;
      &::after {
        display: none;
      }
    }
  }
  h2 {
    font-size: 64px;
    font-weight: 600;
    color: black;
    font-family: "BIZ UDPGothic", "Noto Sans JP", "Open Sans", sans-serif;
  }
  #content {
    padding-top: 0px;
  }
  section {
    margin-top: 60px;
    margin-bottom: 60px;
    .wrap {
      padding: 0 24px;
      box-sizing: border-box;
    }
  }
  .mv-sec {
    margin-top: 0px;
    .mv-l {
      margin-inline: auto;
      max-width: 900px;
      width: 80%;
    }
    .mv-in {
      .mv-toggle {
        margin-top: 54px;
        text-align: center;
        border: none;
        margin-inline: auto;
        display: block;
        background-color: unset;
        .fa-circle-pause,
        .fa-circle-play {
          width: 50px;
          font-size: 50px;
        }
      }
      .p-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }
    }
    .slick-slider {
      .slick-prev,
      .slick-next {
        top: unset;
        bottom: -100px;
        background-color: black;
        display: none !important;
      }
      .slick-next {
        right: unset;
        left: calc(50% + 50px);
      }
      .slick-prev {
        left: unset;
        right: calc(50% + 50px);
      }
    }
  }
  .explanation {
    background-color: #bce9ff4f;
    padding: 12px;
    box-sizing: border-box;
    .m-lead {
      h2 {
        font-size: clamp(24px, 7.333vw, 100px);
        text-align: center;
        margin-bottom: 24px;
        font-family: "Sora", sans-serif;
        letter-spacing: 12px;
        font-weight: 700;
        .m-eh,
        .m-sh {
          font-size: clamp(32px, 8.333vw, 120px);
          display: inline;
          background-repeat: no-repeat;
          background-position: left bottom;
          background-size: 0% 100%;
          transition: background-size 0.8s ease-out;
          letter-spacing: 6px;
          font-weight: 700;
        }

        .m-eh {
          background-image: linear-gradient(transparent 70%, #296fca 70%);
        }

        .m-sh {
          background-image: linear-gradient(transparent 70%, #006c35 70%);
        }

        .m-eh.is-show,
        .m-sh.is-show {
          background-size: 100% 100%;
        }
      }
      margin-top: 120px;
      margin-bottom: 120px;
    }
  }
  .t-toc-sec {
    position: fixed;
    left: 24px;
    color: black;
    font-size: 24px;

    .t-toc-in.wrap {
      display: flex;
      flex-direction: column;
      width: fit-content;
      padding: 4px;
      margin-left: 0px;
      a {
        color: black;
        font-weight: bold;
      }
    }
  }
  .news {
    margin-bottom: 120px;
    .news-in {
      .n-c-w {
        .n-c {
          border-top: solid 1px;
          padding-top: 24px;
          padding-bottom: 24px;
          display: block;
          color: black;
          &:nth-child(3) {
            border-bottom: solid 1px;
          }
          &:hover {
            background-color: rgba(0, 0, 0, 0.25);
            text-decoration: none;
          }
          .n-c-a {
            display: flex;
            justify-content: space-between;
            padding: 0px 12px;
            span {
              border: solid 1px;
              border-radius: 100%;
              width: 30px;
              height: 30px;
              display: flex;
              align-content: center;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
  /* .t-toc-sec {
    .t-toc-in {
      &.wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        gap: 36px;

        a {
          display: block;
          padding: 12px 14px;
          border: 1px solid #ddd;
          border-radius: 8px;
          text-decoration: none;
          line-height: 1.4;
          background-color: black;
          color: white;
          text-align: center;
          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
  } */
  .pj {
    /* プロジェクト共通 */
    .p-info {
      position: relative;
      overflow: hidden;
      /* background: #000; */

      /* 全幅にする */
      /* margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: calc(50vw - 50%); */
    }
    .p-topic {
      padding-top: 64px;
      padding-bottom: 64px;
      h3 {
        font-size: 40px;
        font-weight: bold;
      }
      .topic-in {
        display: flex;
        gap: 24px;
        flex-direction: column;
        .topic-con {
          .t-in {
            display: flex;
            gap: 32px;
            .lp {
              max-width: 500px;
            }
          }
          &.tc2 {
            .t-in {
              flex-direction: row-reverse;
            }
          }
          h4 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 16px;
          }
        }
        a {
          width: 300px;
          background-color: black;
          color: white;
          display: block;
          margin-inline: auto;
          padding: 24px;
          text-align: center;
          margin-top: 32px;
        }
      }
    }
    .p-media {
      .p-media-in {
        .ml {
          &:hover {
            opacity: 0.7;
            text-decoration: none;
            background-color: #0000006f;
          }
          h3 {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 32px;
          }
          .media-con {
            display: flex;
            gap: 24px;
            margin-bottom: 24px;
            img {
              max-width: 200px;
              border-radius: 12px;
            }
            .me-in {
              p {
                color: black;
              }
            }
          }
        }
      }
    }
  }
}
#footer {
  border: none;

  .footer-01,
  .footer-02 {
    background: #296fca;
  }

  .row {
    margin: 0px;
  }

  .wrap {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    &::after {
      display: none;
    }
  }

  #footer-gnav-ul {
    .pll-parent-menu-item {
      &::before {
        display: none;
      }

      .sub-menu {
        display: block !important;
      }

      > a {
        display: none;
      }
    }
  }

  .footer-01 {
    .wrap {
      display: flex;
      justify-content: space-between;
      margin-inline: auto;
      padding: 30px 12px;
      box-sizing: border-box;
      @media (width <= 768px) {
        flex-direction: column;
      }
      &::after {
        display: none;
      }
    }

    #footer-list-area {
      width: 100%;
    }

    #footer-brand-area {
      border: none;
      display: flex;
      flex-direction: column;

      a {
        &:hover,
        &:focus-visible {
          opacity: 0.8;
        }

        &:focus-visible {
          outline: 2px solid #fff;
          outline-offset: 4px;
        }
      }

      .footer-logo {
        width: 100%;
        padding-left: 0px;

        img {
          width: 240px;
        }
      }

      .footer-sns {
        margin-top: 24px;
        display: flex;
        gap: 8px;

        a {
          img {
            width: 25px;
          }
        }
      }
      .company-info {
        margin-top: 24px;
        p {
          margin-bottom: 12px;
        }
        .ci-in {
          display: flex;
          gap: 10px;
          .ci-link {
            width: 140px;
            text-align: center;
            background-color: white;
            color: #296fca;
            display: block;
            border: solid white 1.5px;
            margin-right: auto;
            padding: 8px 12px;
            border-radius: 24px;

            &:hover,
            &:focus-visible {
              text-decoration: none;
              color: white;
              background-color: #296fca;
              opacity: 1;
            }

            &:focus-visible {
              outline: 2px solid white;
              outline-offset: 2px;
            }
          }
        }
      }
    }

    #footer-content-area {
      #footer-list-area {
        width: 100%;
      }

      #footer-cont-content {
        width: 100%;

        .menu-item {
          padding-bottom: 5px;
          background-image: linear-gradient(#ffffff, #ffffff);
          background-repeat: no-repeat;
          background-position: bottom right;
          background-size: 0 2px;
          transition: background-size 0.3s;

          &:hover,
          &:focus-within {
            background-position: bottom left;
            background-size: 100% 1px;
          }
        }

        .pll-parent-menu-item {
          background-image: none;
        }

        a {
          &:hover,
          &:focus-visible {
            color: inherit;
          }

          &:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 4px;
          }
        }
      }
    }
  }
}
.jp {
  footer {
    .dropdown-toggle {
      display: none !important;
    }
    #footer-gnav-ul {
      .pll-parent-menu-item {
        .lang-item {
          &:before {
            content: "";
            mask: url(./lib/images/icon/angle-right.svg) no-repeat;
            mask-size: contain;
            width: 10px;
            height: 10px;
            background-color: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            left: 0;
            display: block !important;
          }
        }
        @media (width <= 767px) {
          a {
            text-indent: 0em;
          }
        }
      }
    }
  }
}

/* 汎用：body の言語クラスに一致しない言語ブロックは非表示 */
body.jp .lang-en,
body.jp .lang-ar {
  display: none !important;
}

body.en .lang-jp,
body.en .lang-ar {
  display: none !important;
}

body.ar .lang-jp,
body.ar .lang-en {
  display: none !important;
}

.en {
  .s-en {
    display: none !important;
  }
  .s-jp,
  .s-ar {
    display: block;
  }
}

.ar {
  .s-ar {
    display: none !important;
  }
  .s-en,
  .s-jp {
    display: block;
  }
}

.jp {
  .s-jp {
    display: none !important;
  }
  .s-ar,
  .s-en {
    display: block;
  }
}
.pagetop {
  width: 50px;
  height: 50px;
  background-color: black;
  border-radius: 100%;
  @media screen and (max-width: 768px) {
    bottom: 40px;
    right: 50px;
  }
  :hover {
    opacity: 0.6;
  }
  i {
    width: 50px;
    height: 50px;
    position: relative;
    &:before {
      left: 16px;
    }
  }
}

/* ブログ記事 */
.single {
  article {
    border: none;
  }
}

/* 問い合わせフォーム */
form {
  .c-wrap {
    .c-r {
      .wpcf7-form-control.wpcf7-radio {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
        label {
          display: flex;
          flex-direction: row-reverse;
          justify-content: center;
          align-content: center;
          align-items: center;
          justify-content: flex-end;
          gap: 12px;
          input {
            width: 32px;
          }
        }
      }
    }
    input,
    textarea {
      width: 100%;
    }
    p:has(.wpcf7-submit) {
      text-align: center;
      input.wpcf7-submit {
        background: #296fca;
        max-width: 300px;
        margin-inline: auto;
        border-radius: 24px;
        :hover {
          opacity: 0.8;
        }
      }
    }

    p:has(.wpcf7-acceptance) {
      display: flex;
      .wpcf7-form-control-wrap {
        width: 100%;
        .wpcf7-list-item {
          width: 100%;
          label {
            display: flex;
            align-items: center;
            .wpcf7-list-item-label {
              width: 100%;
              a {
                display: inline-block;
              }
            }
            input {
              width: 30px;
            }
          }
        }
      }
    }
  }
}