@charset "utf-8";

/* *****************************
common（共通設定）
***************************** */
:root {
  /* 色 */
  --primary-white: #ffffff;
  --primary-font: #545454;
  --primary-creamYellow: #fffaf0;
  --primary-lightPink: #f8cdc9;
  --primary-darkPink: #d97f77;
  --primary-brown: #bf7c40;
  --primary-lightGray: #d8d8d8;
  --primary-gray: #9e9e9e;
}

.section {
  width: 89.5%;
  margin: 0 auto;
}
/* ***************************** */
.section--contact {
  margin-top: 120px;
  position: relative;
}

/* 疑似要素：線 */
.section--contact::before {
  content: "";
  position: absolute;
  background-color: var(--primary-gray);
  display: block;
  width: 100%;
  height: 1px;
  top: -60px;
  left: 50%; /* 親要素の左端から50%の位置に移動 */
  transform: translateX(-50%);
  /* 要素の幅の半分だけ左に戻し、完全に中央に配置 */
}

/* 「お問い合わせはメールよりお願いいたします。」 */
.contact__main--heading {
  font-size: clamp(16px, 5.33vw, 28px);
  line-height: 1.8;
  text-align: center;
}

.contact__main--txt {
  margin: 20px auto 0;
  max-width: 100%;
  text-align: left;
  width: fit-content;
}

/* 「※営業メールはご遠慮ください。」 */
.contact__main--note {
  display: block;
  color: var(--primary-darkPink);
}

/* 記載項目 */
.contact__required-items--list {
  text-align: left;
  width: fit-content;
  margin: 20px auto 0;
}

.contact__required-items--item {
  font-size: clamp(12px, 4.2667vw, 20px);
}

/* 「メールはこちら」ボタン */
.contact__mail {
  margin: 15px auto 0;
  text-align: center;
  background-color: var(--primary-lightPink);
  max-width: 335px;
  border: 2px solid var(--primary-lightPink);
  padding: 12px 18px 14px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 背景色とボーダーの色変化を 0.3秒かけて ease で行う */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.contactMailBtn {
  display: inline-flex;
  align-items: center;
}

/* テキストグループを縦方向に並べる */
.contact__text-group {
  display: flex;
  flex-direction: column;
}
.main-txt {
  font-weight: 600;
}
.icon-mail {
  display: inline-block;
  width: 30px;
  height: 24px;
  background-image: url(../images/6_contact/icon_mail.svg);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  /* アニメーション */
  transition: background-image 0.4s ease-in-out;
}

/* ホバーした時 */
.contact__mail:hover {
  background-color: var(--primary-white);
  color: var(--primary-darkPink);
  border: 2px solid var(--primary-darkPink);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.contact__mail:hover .icon-mail {
  background-image: url(../images/6_contact/icon_mail__hover.svg);
}

/* ==============================
 カルチャーセンターページ遷移ボタン
 ============================== */
.toCulturecenterPage {
  margin-top: 90px;
}

/* ------------------------
      common pc
    ------------------------ */
@media screen and (min-width: 840px) {
  /* 疑似要素：線 */
  .section--contact::before {
    width: 80.05vw;
  }
  .section--contact {
    width: 54.7vw;
    text-align: center;
  }
  .contact__main--heading {
    font-size: clamp(20px, 1.94vw, 36px);
    line-height: 1;
  }
  .contact__main--txt {
    margin-top: 30px;
    font-size: clamp(16px, 1.39vw, 28px);
    line-height: 1.8;
  }
  /* ※営業メールはご遠慮ください。 */
  .sub_txt {
    font-size: clamp(12px, 1.11vw, 20px);
  }
  /* 記載項目とボタン */
  .contact__required {
    display: flex;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
    gap: 60px;
  }
  .contact__required-items--list {
    margin: 0;
  }
  .contact__required-items--item {
    font-size: clamp(12px, 1.11vw, 20px);
  }

  /* 「メールはこちら」ボタン */
  .contact__mail {
    align-self: center;
    margin: 0 auto;
    max-width: none;
    width: fit-content;
    padding: 11px 21.5px 7px 53px;
    border-radius: 20px;
    margin-left: 0;
    margin-right: 0;
  }
  /*  「メールはこちら」ボタンが現れるアニメーション */
  /* キーフレームの定義 */
  @keyframes fadeInAnimation {
    /* アニメーション開始時（0%）は透明で縮小した状態からスタート */
    from {
      opacity: 0;
      transform: scale(0.98); /* わずかに縮小させて奥行き感を出す */
    }
    /* アニメーション終了時（100%）は通常の状態（完全に不透明） */
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  /* 要素へのアニメーション適用 */
  .contact__mail {
    animation-name: fadeInAnimation;

    /* 継続時間 */
    animation-duration: 2.5s;

    /* 実行タイミング: ページ読み込み後すぐに開始 */
    animation-delay: 0s;

    /* 繰り返し回数: 1回のみ */
    animation-iteration-count: 1;

    /* 終了時の状態: 最終フレームの状態を保持する */
    animation-fill-mode: forwards;

    /* その他の調整: イージング (緩やかな動き) */
    animation-timing-function: ease-out;
  }

  .main-txt {
    font-size: clamp(16px, 1.39vw, 28px);
    line-height: 1.8;
  }
  .contactMailBtn {
    gap: 5px;
  }

  /* ホバー時の挙動 */
  .contact__mail {
    transition: transform 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
  }
  .contact__mail:hover {
    /* 1.05倍に拡大 */
    transform: scale(1.05);

    /* カーソルをポインターに変える */
    cursor: pointer;
  }

  /* ==============================
     footer
     ============================== */
  .footer {
    margin-top: 200px;
  }
}

/* pc 840 */