/*
Theme Name: x graphic
Author: kentarou suzuki
Description: Custom theme for x graphic
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@layer reset, base, layout, components, utilities;

@import "./assets/css/reset.min.css" layer(reset);

@layer base {
  :root {
    /* カラーパレット */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-light: #f5f5f5; /*ライトテキスト*/
    --color-accent: #c9a063;
    --color-gray: #e4eaed; /*グレー背景*/
    --color-muted: #9da0a6; /*メールフォーム任意*/
    --color-required: #d55151; /*メールフォーム必須*/

    /* フォントサイズ */
    --font-size-xs: calc(var(--font-size-base) * 0.75); /* 12px */
    --font-size-sm: calc(var(--font-size-base) * 0.875); /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: calc(var(--font-size-base) * 1.125); /* 18px */
    --font-size-xl: calc(var(--font-size-base) * 1.25); /* 20px */
    --font-size-2xl: calc(var(--font-size-base) * 1.5); /* 24px */
    --font-size-3xl: calc(var(--font-size-base) * 1.875); /* 30px */

    --font-size-navi: calc(var(--font-size-base) * 2); /* 32px */

    --font-size-title--pc: calc(var(--font-size-base) * 1.375); /* 22px */
    --font-size-title--sp: var(--font-size-sm);

    --font-size-display--pc: calc(var(--font-size-base) * 2.5); /* 40px */
    --font-size-display--tb: calc(var(--font-size-base) * 2); /* 32px */
    --font-size-display--sp: var(--font-size-base);

    --font-size-text-pc: var(--font-size-base);
    --font-size-text-sp: var(--font-size-sm);

    --font-size-company-name-pc: var(--font-size-3xl);
    --font-size-company-name-sp: var(--font-size-lg);
    --font-size-office-pc: var(--font-size-sm);
    --font-size-office-sp: var(--font-size-xs);
    --font-size-address-sp: var(--font-size-sm);
    --font-size-address-pc: var(--font-size-base);
    --font-size-executive: var(--font-size-sm);
    --font-size-executive-name: var(--font-size-2xl);
    --font-size-open: var(--font-size-sm);
    --font-size-open-time-pc: var(--font-size-2xl);
    --font-size-open-time-sp: var(--font-size-xl);
    --font-size-open-remarks: var(--font-size-sm);
    --font-size-phone: var(--font-size-base);
    --font-size-email: var(--font-size-base);

    --font-size-form-label-sp: var(--font-size-sm);
    --font-size-form-label-pc: var(--font-size-base);

    --font-size-404-title: calc(var(--font-size-base) * 6);
    --font-size-404-text: var(--font-size-base);

    /* フォントファミリー */
    --font-family-jp: "Zen Kaku Gothic New", sans-serif;
    --font-family-en: "Inter", sans-serif;

    --font-family-title: var(--font-family-en);
    --font-family-navi: var(--font-family-en);

    /* コンテンツサイズ */
    --container-xl: 1280px;
    --container-2xl: 1440px;

    /* 背景 */
    --bg-header: var(--color-gray);
    --bg-whats-plus1: url("./assets/img/whats-plus1-bg.webp");
    --bg-design-field: url("./assets/img/design-field-bg.webp");
    --bg-profile--pc: url("./assets/img/profile-bg__pc.webp");
    --bg-profile--sp: url("./assets/img/profile-bg__sp.webp");
    --bg-profile-signature: url("./assets/img/signature.png");
    --bg-contact-us: var(--color-gray);
    --bg-map: var(--color-white);
    --bg-footer: var(--color-black);
  }
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-family-jp);
    color: var(--color-black);
    background-color: var(--color-white);
    min-height: 100vh;
  }
  iframe {
    border: none;
  }
  iframe,
  input,
  textarea,
  img {
    display: block;
  }
  img {
    width: 100%;
    height: auto;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  address {
    font-style: normal;
  }
  a {
    text-decoration: none;
  }
  figure {
    margin-bottom: 0 !important;
  }
}

@layer layout {
  /* 汎用コンテナ */
  .container-xl {
    max-width: var(--container-xl);
  }
  .container-2xl {
    max-width: var(--container-2xl);
  }
  .container-xl,
  .container-2xl {
    width: 100%;
    margin: 0 auto;
  }
  /* ヘッダー */
  .header {
    width: 100%;
    height: 100svh;
    min-height: 667px;
    background-color: var(--bg-header);
    @media (width >= 1024px) {
      min-height: 600px;
    }
  }
  .header__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: 100%;
    @media (width >= 1024px) {
      flex-direction: row;
      justify-content: space-between;
      gap: 2rem;
      padding: 0 2.5rem;
    }
  }
  .header__left {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    .header__nav {
      display: none;
      @media (width >= 1024px) {
        display: block;
      }
    }
  }
  .header__right {
    flex: 1;
    @media (width >= 1024px) {
      padding: 4rem 0;
    }
  }
  .header__hamburger {
    display: flex;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    @media (width >= 1024px) {
      display: none;
    }
  }
  /* What's +1 */
  .whats-plus1 {
    background: var(--bg-whats-plus1) no-repeat;
    background-color: var(--color-black);
    background-size: contain;
    background-position: top center;
    padding: 2rem;
    @media (width >= 768px) {
      padding: 5rem 2.5rem;
      background-size: cover;
      background-position-y: top;
      background-position-x: 80%;
    }
  }
  .whats-plus1__container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    @media (width >= 768px) {
      gap: 5rem;
    }
  }
  .whats-plus1__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    @media (width >= 768px) {
      gap: 5rem;
    }
  }
  /* Design Field */
  .design-field {
    background: var(--bg-design-field) no-repeat top left;
    background-size: contain;
    background-color: var(--color-white);
    &:before {
      display: block;
      content: "";
      width: 100%;
      aspect-ratio: 433 / 400;
      @media (width >= 768px) {
        display: none;
      }
    }
  }
  .design-field__container {
    width: 100%;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0rem 2rem 2rem;
    margin-top: -1rem;
    @media (width >= 768px) {
      background-color: color-mix(in srgb, var(--color-white) 90%, transparent);
      gap: 5rem;
      padding: 5rem 2.5rem;
      margin-top: 0rem;
    }
    @media (width >= 1024px) {
      max-width: 620px;
    }
  }
  .design-field__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    @media (width >= 768px) {
      gap: 5rem;
    }
  }
  .design-field__works {
    container-type: inline-size;
    @media (width >= 768px) {
      margin-top: -3.5rem;
    }
  }
  /* Profile */
  .profile {
    position: relative;
    background: var(--bg-profile--sp);
    background-repeat: no-repeat;
    background-size: contain;
    @media (width >= 768px) {
      background: var(--bg-profile-signature), var(--bg-profile--pc);
      background-repeat: no-repeat, no-repeat;
      background-position-y: 45%, center;
      background-position-x: 95%, 50%;
      background-size:
        30% auto,
        cover;
    }
    @media (width >= 1024px) {
      background-position-x: 90%, 55%;
      background-size:
        25% auto,
        cover;
    }
    &:before {
      display: block;
      content: "";
      width: 100%;
      aspect-ratio: 780 / 528;
      @media (width >= 768px) {
        display: none;
      }
    }
  }
  .profile__content {
    width: 100%;
    padding: 2rem;
    color: var(--color-black);
    display: flex;
    flex-direction: column;
    gap: 5rem;
    @media (width >= 768px) {
      max-width: 470px;
      padding: 5rem 2rem;
      color: var(--color-light);
      background-color: color-mix(in srgb, var(--color-black) 50%, transparent);
    }
    @media (width >= 1024px) {
      max-width: 590px;
      padding: 5rem;
    }
    header {
      position: absolute;
      top: 2rem;
      left: 2rem;
      @media (width >= 768px) {
        position: static;
      }
    }
  }
  /* Contact Us */
  .contact-us {
    background-color: var(--bg-contact-us);
  }
  .contact-us__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    @media (width >= 1280px) {
      flex-direction: row;
      align-items: stretch;
    }
  }
  .contact-us__content {
    width: 100%;
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    @media (width >= 768px) {
      gap: 5rem;
      padding: 5rem;
    }
    @media (width >= 1280px) {
      max-width: 590px;
      align-items: flex-start;
    }
  }
  .contact-us__info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    @media (width >= 768px) and (width < 1280px) {
      align-items: center;
      gap: 3rem;
    }
    @media (width >= 1280px) {
      align-items: stretch;
      gap: 3rem;
    }
    .contact-us__company-name {
      text-align: center;
      @media (width >= 1280px) {
        text-align: left;
      }
    }
  }
  .contact-us__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem 4rem;
    gap: 2rem;
    @media (width >= 768px) {
      padding: 5rem;
    }
    @media (width >= 1280px) {
      align-items: stretch;
    }
  }
  /* map */
  .map {
    background-color: var(--bg-map);
    .map__container {
      width: 100%;
      margin: 0 auto;
    }
  }
  /* フッター */
  .footer {
    background-color: var(--bg-footer);
    color: var(--color-white);
    padding: 0.5rem;
    text-align: center;
  }
}

@layer components {
  /* PCヘッダーコンポーネント */
  .header__logo {
    max-width: 150px;
    width: 100%;
    img {
      object-fit: contain;
      width: 100%;
      height: auto;
    }
    &:hover {
      opacity: 0.8;
      transition: all 0.3s ease;
    }
    @media (width >= 768px) {
      max-width: 333px;
    }
  }
  .header__nav {
    ul {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      a {
        font-family: var(--font-family-navi);
        letter-spacing: 2px;
        display: flex;
        align-items: center;
        color: var(--color-accent);
        font-size: var(--font-size-navi);
        font-weight: 600;
        background-color: var(--color-black);
        width: 100%;
        height: 60px;
        padding: 0 1rem;
        &:hover {
          background-color: var(--color-accent);
          color: var(--color-black);
          transition: all 0.3s ease;
        }
      }
    }
  }
  .header__hero {
    max-width: 600px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 2rem 2.625rem;
    @media (width >= 1024px) {
      max-width: 769px;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      aspect-ratio: 16 / 9;
    }
  }
  /* SPハンバーガーボタン */
  .hamburger-toggle {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
    background-color: var(--color-accent);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    span {
      width: 30px;
      height: 3px;
      background-color: var(--color-white);
    }
  }
  .hamburger-toggle.is-active {
    span:nth-child(1) {
      transform: rotate(45deg) translate(7px, 8px);
      transition: all 0.3s ease;
    }
    span:nth-child(2) {
      opacity: 0;
      transition: all 0.3s ease;
    }
    span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -8px);
      transition: all 0.3s ease;
    }
  }
  /* SPナビゲーション */
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background-color: var(--color-black);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    @media (width >= 1024px) {
      display: none;
    }
    .mobile-nav__logo {
      width: 150px;
      img {
        object-fit: contain;
        filter: invert(1) brightness(2);
      }
    }
    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
      a {
        color: var(--color-light);
        font-size: var(--font-size-lg);
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        &:hover {
          color: var(--color-accent);
        }
      }
    }
  }
  .mobile-nav.is-active {
    transform: translateX(0);
  }
  /* セクションタイトル h2 */
  .section-title {
    font-family: var(--font-family-title);
    font-size: var(--font-size-title--sp);
    font-weight: 600;
    line-height: 1;
    border-bottom: 6px solid var(--color-accent);
    width: fit-content;
    padding-bottom: 0.5rem;
    @media (width >= 768px) {
      font-size: var(--font-size-title--pc);
    }
  }
  /* セクションタイトル h3 */
  .section-display {
    font-size: var(--font-size-display--sp);
    font-weight: 600;
    line-height: 1;
    display: flex;
    flex-direction: column;
    line-height: 2;
    @media (width < 1024px) and (width >= 768px) {
      font-size: var(--font-size-display--tb);
    }
    @media (width >= 1024px) {
      font-size: var(--font-size-display--pc);
    }
  }
  /* セクションテキスト p */
  .section-text {
    font-size: var(--font-size-text-sp);
    line-height: 2.2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    @media (width >= 768px) {
      font-size: var(--font-size-text-pc);
    }
  }
  /* design-field 事業リスト */
  .works-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    @container (width >= 768px) {
      grid-template-columns: repeat(4, 1fr);
    }
    .works-list__item {
      font-size: var(--font-size-sm);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 41px;
      background-color: var(--color-accent);
      color: var(--color-light);
      font-weight: 600;
      @media (width >= 768px) {
        font-size: var(--font-size-base);
      }
    }
  }
  /* Contact-us 会社名 */
  .contact-us__company-name {
    font-size: var(--font-size-company-name-sp);
    font-weight: 600;
    line-height: 1;
    @media (width >= 768px) {
      font-size: var(--font-size-company-name-pc);
    }
  }
  /* Contact-us 事業所情報 */
  .contact-us__office {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1rem;
    .contact-us__office-item {
      display: flex;
      flex-direction: column;
      align-items: start;
      gap: 1rem;
      @media (width >= 768px) and (width < 1280px) {
        align-items: center;
      }
      @media (width >= 1280px) {
        align-items: flex-start;
      }
      h4 {
        font-size: var(--font-size-office-sp);
        background-color: var(--color-accent);
        color: var(--color-light);
        width: 100px;
        padding: 0.175rem 0rem;
        text-align: center;
        @media (width >= 768px) {
          font-size: var(--font-size-office-pc);
          padding: 0.25rem 0rem;
        }
      }
      address {
        display: flex;
        flex-wrap: wrap;
        gap: 0 1rem;
        font-size: var(--font-size-address-sp);
        @media (width >= 768px) {
          font-size: var(--font-size-address-pc);
        }
      }
    }
  }
  /* Contact-us 役員 */
  .contact-us__executive {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 1rem;
    dt {
      font-size: var(--font-size-executive);
    }
    dd {
      font-size: var(--font-size-executive-name);
    }
  }
  /* Contact-us 営業時間 */
  .contact-us__open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    @media (width >= 1280px) {
      align-items: flex-start;
    }
    @media (width >= 768px) and (width < 1280px) {
      align-items: center;
    }
    dt {
      font-size: var(--font-size-open);
    }
    dd {
      .contact-us__open-time {
        font-size: var(--font-size-open-time-sp);
        @media (width >= 768px) {
          font-size: var(--font-size-open-time-pc);
        }
      }
      .contact-us__open-remarks {
        font-size: var(--font-size-open-remarks);
      }
    }
  }
  /* Contact-us お問い合わせフォーム */
  .contact-us__form {
    .wpcf7 {
      width: 100%;
      @media (width >= 768px) {
        max-width: 600px;
      }
    }
    form {
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem 2rem;
      align-items: stretch;
      @media (width >= 1280px) {
        grid-template-columns: auto 1fr;
        gap: 2rem;
        align-items: center;
      }
      label {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        font-size: var(--font-size-form-label-sp);
        @media (width >= 768px) {
          font-size: var(--font-size-form-label-pc);
        }
        span:first-child {
          background-color: var(--color-muted);
          color: var(--color-light);
          width: 70px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          @media (width >= 768px) {
            height: 40px;
          }
        }
        &:last-of-type {
          margin-bottom: auto;
        }
      }

      input,
      textarea {
        width: 100%;
      }
      textarea {
        height: 100px;
        margin-top: -0.75rem;
        @media (width >= 768px) {
          margin-top: 0;
        }
      }
      input {
        margin-top: -0.75rem;
        height: 35px;
        @media (width >= 768px) {
          margin-top: 0;
          height: 30px;
        }
      }
      input[type="submit"] {
        grid-column: 1 / -1;
        justify-self: center;
        width: 100%;
        max-width: 100px;
        height: 40px;
        background-color: var(--color-black);
        color: var(--color-white);
        border: none;
        cursor: pointer;
        margin-top: 1rem;
      }
      .wpcf7-response-output {
        margin: 0 !important;
        font-size: var(--font-size-sm) !important;
      }
      .wpcf7-spinner {
        margin: 0 auto !important;
      }
      .wpcf7-response-output {
        margin: 0 auto !important;
        @media (width >= 768px) {
          position: absolute !important;
          inset: auto 0 -3rem 0;
        }
      }
      .wpcf7-spinner {
        position: absolute !important;
        inset: auto 0 -3rem 0;
        margin: 0 auto !important;
      }

      .wpcf7-form-control-wrap {
        .wpcf7-not-valid-tip {
          position: absolute;
          inset: auto 0 -1.3rem auto;
          font-size: var(--font-size-xs) !important;
        }
      }
    }
  }
  /* map iframe */
  .map__iframe {
    iframe {
      width: 100%;
      height: 100%;
      border: 0;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
      @media (width >= 768px) {
        aspect-ratio: 1440 / 735;
      }
    }
  }
  /* 404 */
  .header__404 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-align: center;
    height: 100%;
    .header__404-title {
      font-size: var(--font-size-404-title);
      font-weight: bold;
    }
    .header__404-text {
      font-size: var(--font-size-404-text);
    }
  }
}

@layer utilities {
  .text-light {
    color: var(--color-light);
  }
  .bg-required {
    background-color: var(--color-required);
  }
}