@charset "UTF-8";
/*
Template Name: contact
Theme Name: Gifted Style
Author: Hashikure@Polyphony

お問合せページ用のCSS
*/

.content {
  margin-top: 0;
  & .wrap {
    max-width: 960px;
  }
}

.main {
  width: auto;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* コンテンツヘッダー */
.article-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
  & h1 {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-style: normal;
    font-weight: 700;
    transform:rotate(0.03deg);
  }
}

/* タイトル */
.entry-title {
  &::before {
    background-image: url(../imgs/icon00.svg);
    width: 87px;
    height: 87px;
  }
}

/* Contact Form 7 フォーム ----- */

/* コンテンツのマージン設定 */
.page #main .entry-content,
.single-post #main .entry-content {
  & .wpcf7 {
    &:not(:first-child) {
      margin-top: 64px;
    }
    &:not(:last-child) {
      margin-bottom: 64px;
    }
  }
}

/* フォームのスタイル設定 */
.wpcf7 {
  & form {
    max-width: 660px;
    margin: 0 auto 120px;
    & .wpcf7-response-output{
      background-color: #b8eeff;
      border: none;
      border-radius: 8px;
      margin: 24px 0;
      padding: 8px 16px;
      text-align: center;
      &::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        display: inline-block;
        margin-right: 0.5rem;
      }
    }
     /* 内容に不備があった場合 */
    &.invalid .wpcf7-response-output {
      background-color: #ffecb6;
      &::before {
        content: "\f071";
        color: #ffb900;
      }
    }
    /* 通信エラーなどで送信に失敗した場合 */
    &.failed, &.aborted {
      & .wpcf7-response-output {
        background-color: #f6d5d5;
        &::before {
          content: "\f057";
          color: #a82424;
        }
      }
    }
    /* 送信に成功した場合 */
    &.sent .wpcf7-response-output {
      background-color: #b2e1b6;
      &::before {
        content: "\f058";
        color: #218029;
      }
    }
  }
  /* 送信ボタン */
  & .wpcf7-submit {
    background-color: #31a6c2;
    border: 4px solid #31a6c2;
    border-radius: 32px;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    padding: 14px 24px;
    transition: background-color .3s ease-in-out, color .3s ease-in-out;
    &:hover {
      background-color: #fff;
      color: #36788a;
    }
    &:disabled {
      background-color: #ccc;
      border-color: #ccc;
      color: #666;
    }
  }
}

/* 内容に不備があった箇所のメッセージ */
.wpcf7-not-valid-tip {
  color: #a82424;
  display: inline-block;
  &::before {
    content: "\f057";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.25rem;
  }
}

input + .wpcf7-not-valid-tip {
  margin-top: 8px;
}

/* フォームフィールドのスタイル */
.field {
  margin-bottom: 1.5rem;
  /* ラベル項目のセット */
  & .label-set span{
    display: inline-block;
  }
  & > label, & >.label-set {
    display: block;
    line-height: 1.4;
    margin-bottom: 6px;
  }
  & label[for="msg"] {
    margin-right: 8px;
  }
  /* 任意項目 */
  & .optional {
    background-color: #f7f7f7;
    border: 1px solid #e6e6e6;
    color: #666;
    line-height: 1;
    padding: 4px 8px;
    margin-right: 16px;
  }
  /* 備考コメント */
  & .comment {
    color: #666;
    font-size: 0.875rem;
  }
}

.wpcf7-form-control-wrap {
  display: block;
}

/* 入力項目のスタイル */
input[type=text], input[type=password], input[type=date], input[type=datetime], input[type=email], input[type=number], input[type=tel], input[type=time], input[type=url], textarea, select {
  border-width: 2px;
  border-radius: 8px;
  font-family: YuGothic, "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  transition: background-color .1s ease-in-out, border-color .1s ease-in-out;
  &:hover {
    background-color: #f7f7f7;
  }
  &:focus-visible {
    outline: none;
    background-color: #f0f8f9;
    border-color: #65abbe;
    box-shadow: 0 0 2px 2px #65abbe;
    caret-color: #36788a;
  }
  /* 状態別スタイル設定 */
  &.wpcf7-not-valid {
    background-color: #f6d5d5;
    border-color: #d77;
    &:hover {
      background-color: #f5bfbf;
    }
    &:focus-visible {
      background-color: #f0f8f9;
      border-color: #65abbe;
    }
  }
}

.wpcf7-form-control-wrap[data-name=inq-type] {
  display: block;
  position: relative;
  &::after {
    color: #333;
    content: "\f107";
    display: block;
    font-family: "Font Awesome 5 Free";
    font-size: 1.5rem;
    font-weight: 900;
    height: 24px;
    line-height: 1;
    position: absolute;
    right: 12px;
    text-align: center;
    top: 13px;
    width: 24px;
  }
}
select {
  appearance: none;
  background-color: #fff;
}
option {
  background-color: #fff;
  &[value=""] {
    color: #666;
  }
}

/* 文字数カウンター */
.msg-count {
  & .wpcf7-character-count:not(.too-short) {
    color: #218029;
  }
}

/* フォーム送信時のスピナー */
.wpcf7-spinner {
  display: none;
  margin: 16px auto;
}
form.submitting .wpcf7-spinner {
  display: block;
}

/* reCAPTCHAバッジ */
.grecaptcha-badge {
  z-index: 1;
}
@media (height < 768px), (width <= 1024px) {
  /* reCAPTCHAバッジと被るのを避けるためbottomを調整 */
  .main-scroll {
    bottom: 144px;
  }
}
@media (width <= 834px) {
  .entry-content {
    padding-inline: 24px;
  }

   /* reCAPTCHAバッジと被るのを避けるためbottomを調整 */
  .main-scroll.is-avoided {
    bottom: 144px;
  }
}

/* H880px未満（追従CTAボタン用） */
@media (height < 880px) {
  .main-scroll,.main-scroll.is-avoided {
    /* bottom: 64px; */
    bottom:calc( 64px + var(--giftedstyle-recaptcha-haight)  )
  }
}

@media (width <= 768px) {

  /* reCAPTCHAバッジと被るのを避けるためbottomを調整 */
  .main-scroll {
    /* bottom: 144px; */
    bottom: calc( 144px + var(--giftedstyle-gototop-haight)  );
  }

  .main-scroll.is-avoided {
    /* bottom: 144px; */
    bottom: calc( 144px + var(--giftedstyle-gototop-haight)  );
  }

  .go-to-top {
    /* bottom: 10px; */
    bottom: calc( 10px + min( var(--giftedstyle-line-footer-haight) , 55px ) + var(--giftedstyle-recaptcha-haight) );
  }
}