@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

@media screen and (min-width: 601px) {
  .p-mainVisual__slideTitle {
    font-size: 80px;
  }
}

@media screen and (max-width: 600px) {
  .p-mainVisual__slideTitle {
    font-size: 8vw;
  }
}

/* =========================================================
   英字フォント（EB Garamond）
   英数字は EB Garamond、日本語は SWELL の設定フォント
   （var(--swl-font_family)）のまま自動でフォールバックされる
   ========================================================= */
/* ヘッダーのグローバルナビ（通常ヘッダー・固定ヘッダー両方） */
.c-gnav,
/* フッター（フッターナビなどを含む） */
.l-footer,
/* コピーライト */
.copyright {
  font-family: "EB Garamond", var(--swl-font_family);
}

#breadcrumb {
  background-color: #000;
  color: #fff;
}

.bg-position-top {
  background-position: center top !important;
}

/* トップページ */

.p-mainVisual__slideTitle {
  width: fit-content;
  margin-inline: auto;
  mask-image: linear-gradient(to right, #000 50%, transparent);
  mask-size: 200% 100%;
  mask-repeat: no-repeat;
  mask-position: 200% 0%;

  animation:
    mask 2s linear forwards,
    textColor 2s linear forwards;
  color: rgb(71, 71, 71);
}

@keyframes mask {
  to {
    mask-position: 0% 0%;
  }
}

@keyframes textColor {
  to {
    color: #fff;
  }
}

.p-mainVisual .c-filterLayer::before {
  animation: op 3s 0.5s ease-in-out forwards;
  opacity: 1;
}

@keyframes op {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.2;
  }
}

.p-mainVisual__slideText,
.p-mainVisual__slideBtn {
  animation: slideText 2s 1.3s ease-in-out forwards;
  opacity: 0;
}

@keyframes slideText {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.wp-block-heading,
.p-mainVisual__slideTitle {
  font-family: "EB Garamond", var(--swl-font_family);
  letter-spacing: 0.05em;
}

.top-floor {
  figure {
    position: relative;
    z-index: -1;
    &::before {
      content: "";
      position: absolute;
      top: 10%;
      right: 5%;
      width: 100%;
      height: 100%;
      background-color: #282828;
      z-index: -2;
    }
  }
  /* 画像を右に配置したブロック（SWELLが has-media-on-the-right を付与）は飾りを左に出す */
  .has-media-on-the-right figure::before {
    right: auto;
    left: 5%;
  }
}

.top-menu-column {
  .wp-block-cover {
    overflow: hidden;
    img {
      transition:
        transform 0.5s ease,
        filter 0.5s ease;
    }
    &:hover img {
      transform: scale(1.08);
      filter: brightness(1.15);
    }
  }
}

@media (max-width: 600px) {
  .top__menu-item {
    min-height: 250px !important;
  }
}

/* aboutページ */

.is-vertical-rl {
  writing-mode: vertical-rl;
  letter-spacing: 0.4em !important;
}

.about__vertical-top {
  .wp-block-media-text__content {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}

.about-section {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 700px;
    background-color: #282828;
  }

  &:nth-child(even) {
    &::before {
      top: 0;
      bottom: auto;
      left: auto;
      right: 0;
    }
  }
}

/* menuページ */

.swell-block-tab {
  @media screen and (min-width: 601px) {
    .wp-block-media-text__content {
      padding-top: 0 !important;
    }
  }
}

.c-tabList__button {
  color: rgba(255, 255, 255, 0.75);
  .swl-fz {
    @media screen and (max-width: 600px) {
      font-size: 4.5vw !important;
    }
  }
}

.c-tabList__button.c-tabList__button[aria-selected="true"] {
  color: #fff !important;
}

/* コンタクトフォーム */
.cf7-modern-form {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-block: 60px;
  background: transparent;
}

.cf7-modern-form .form-group {
  margin-bottom: 40px;
}

.cf7-modern-form label {
  display: block;
  margin-bottom: -20px;
  font-size: 16px;
}

.cf7-modern-form .required {
  font-size: 14px;
  color: red;
}

.cf7-modern-form input[type="text"],
.cf7-modern-form input[type="email"],
.cf7-modern-form input[type="tel"],
.cf7-modern-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.cf7-modern-form textarea {
  min-height: 150px;
  resize: vertical;
}

.cf7-modern-form .form-submit {
  text-align: center;
  margin-top: 30px;
}

.cf7-modern-form .submit-btn {
  background: #646464;
  color: white;
  font-size: 16px;
  padding: 15px 90px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.cf7-modern-form .submit-btn:hover {
  background: #323232;
}

/*  */

.wpcf7-spinner {
  display: none;
}