@charset "utf-8";

/*-------------------------
　全体設定
-------------------------*/

:root {
  font-size: 16px; /* ルート要素のフォントサイズを設定 */
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* コンテンツ幅の制御 */
.content-wrapper {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  color: #333333;
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

@media screen and (max-width: 1200px) {
  .section-title {
    font-size: clamp(1.25rem, 0.614rem + 3.18vw, 3rem); /* min:20px */
  }
}

/* ページスクロール */

body {
  scroll-behavior: smooth;
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.05em;
  padding-top: 100px;
}

@media screen and (max-width: 1200px) {
  body {
    padding-top: clamp(2.75rem, 1.9rem + 3.62vw, 6.25rem);
  }
}

/* recapchaのバッジ削除CSSCSS */
.grecaptcha-badge {
  visibility: hidden !important;
}

.recaptcha-notice {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: justify;
}

.recaptcha-notice a {
  color: #333;
  text-decoration: underline;
}

/* 通常のボタンのスタイル  */

.button {
  display: inline-flex;
  align-items: center;
  padding: 11px 28px 11px 30px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  color: #fff;
  background-color: #f68c1c;
  border: 2px solid #f68c1c;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(3px 3px 6px rgba(130, 130, 130, 0.5));
  transition: all 0.3s;
}

.button:hover {
  background-color: #fff;
  color: #f68c1c;
  border: 2px solid #fff;
}

.button:hover::before {
  border: 2px solid #f68c1c;
}

.button .content {
  display: flex;
  align-items: center;
}

.button img.default {
  display: block; /* 通常時の画像を表示 */
}

.button img.hover {
  display: none; /* ホバー時の画像を非表示 */
}

.button:hover img.default {
  display: none; /* ホバー時に通常の画像を非表示 */
}

.button:hover img.hover {
  display: block; /* ホバー時にホバー用の画像を表示 */
}

.button img {
  margin-left: 13px;
}

.button::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: 30px;
  border: 2px solid #fff;
}

@media screen and (max-width: 1200px) {
  .button {
    padding: clamp(0.5rem, 0.415rem + 0.36vw, 0.688rem) clamp(0.875rem, 0.477rem + 1.7vw, 1.75rem) clamp(0.5rem, 0.415rem + 0.36vw, 0.688rem) clamp(1.063rem, 0.693rem + 1.58vw, 1.875rem);

    font-size: clamp(0.688rem, 0.489rem + 0.85vw, 1.125rem);
  }
  .button img {
    margin-left: clamp(0.438rem, 0.267rem + 0.73vw, 0.813rem);
    width: clamp(0.625rem, 0.398rem + 0.97vw, 1.125rem);
  }
}

/* メールアイコンあり */
.custom-btn {
  display: inline-flex;
  align-items: center;
  padding: 26px 60px 26px 118px;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.34;
  letter-spacing: 0.03em;
  color: #fff;
  background-color: #f68c1c;
  border: 2px solid #f68c1c;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  /* filter: drop-shadow(3px 3px 3px #005c75); */
  box-shadow: 3px 3px 3px #005c75;
  transition: all 0.3s;
}

.custom-btn:hover {
  background-color: #fff;
  color: #f68c1c;
  border: 2px solid #fff;
}

.custom-btn:hover::before {
  border: 2px solid #f68c1c;
}

.custom-btn .icon-wrapper {
  position: absolute;
  left: -14px;
}

/* ホバー時にicon-wrapper内のメール画像を切り替え */
.custom-btn .icon-wrapper img.default {
  display: block;
}

.custom-btn .icon-wrapper img.hover {
  display: none;
}

.custom-btn:hover .icon-wrapper img.default {
  display: none;
}

.custom-btn:hover .icon-wrapper img.hover {
  display: block;
}

.custom-btn .content {
  display: flex;
  align-items: center;
}

.custom-btn .content img {
  margin-left: 37px;
}

/* ホバー時にcontent内の矢印画像を切り替え */
.custom-btn .content img.default {
  display: block;
}

.custom-btn .content img.hover {
  display: none;
}

.custom-btn:hover .content img.default {
  display: none;
}

.custom-btn:hover .content img.hover {
  display: block;
}

.custom-btn::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 50px;
  border: 2px solid #fff;
}

@media screen and (max-width: 1200px) {
  .custom-btn {
    padding: clamp(0.813rem, 0.517rem + 1.48vw, 1.625rem) clamp(1.75rem, 1.023rem + 3.64vw, 3.75rem) clamp(0.813rem, 0.517rem + 1.48vw, 1.625rem) clamp(4.25rem, 3.114rem + 5.68vw, 7.375rem);

    /* min 13px 60px 13px 68px */

    font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem); /* min:16px */
  }

  .custom-btn .icon-wrapper {
    width: clamp(3.125rem, 1.693rem + 7.16vw, 7.063rem); /* min:50px */
    top: 2px;
    left: -10px;
  }

  .custom-btn .content img {
    width: clamp(0.875rem, 0.511rem + 1.82vw, 1.875rem); /* min:14px */
    margin-left: clamp(1.625rem, 1.375rem + 1.25vw, 2.313rem); /* min:26px */
  }
}

/* submit-btn  */

.submit-btn {
  display: inline-flex;
  align-items: center;
  padding: 26px 52px 26px 52px;
  font-size: clamp(1rem, 0.545rem + 1.94vw, 2rem);
  font-weight: bold;
  line-height: 1.34;
  letter-spacing: 0.05em;
  color: #fff;
  background-color: #f68c1c;
  border: 2px solid #f68c1c;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(3px 3px 3px #005c75);
  cursor: not-allowed; /* クリックできない状態 */
  opacity: 0.5;
}

.submit-btn .content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn img {
  margin-left: 40px;
}

.submit-btn::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 50px;
  border: 2px solid #fff;
}

.submit-btn.can-sent {
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s ease;
}

.submit-btn.can-sent:hover {
  background-color: #fff;
  color: #f68c1c;
  border: 2px solid #fff;
}

.submit-btn.can-sent:hover::before {
  border: 2px solid #f68c1c;
}

/* .submit-btnにcan-sentクラスが付いたときにhoverしたら画像を入れ替える */
.submit-btn.can-sent:hover .default {
  display: none;
}

.submit-btn.can-sent:hover .hover {
  display: inline-block;
}

/* 初期状態でhover用の画像を非表示にする */
.submit-btn .hover {
  display: none;
}

@media screen and (max-width: 1200px) {
  .submit-btn {
    padding: clamp(0.813rem, 0.517rem + 1.48vw, 1.625rem) clamp(1.75rem, 1.023rem + 3.64vw, 3.75rem) clamp(0.813rem, 0.517rem + 1.48vw, 1.625rem) clamp(1.75rem, 1.023rem + 3.64vw, 3.75rem);

    /* min 13px 60px 13px 68px */

    font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem); /* min:16px */
  }

  .submit-btn .icon-wrapper {
    width: clamp(3.125rem, 1.693rem + 7.16vw, 7.063rem); /* min:50px */
    top: 2px;
    left: -10px;
  }

  .submit-btn .content img {
    width: clamp(0.875rem, 0.511rem + 1.82vw, 1.875rem); /* min:14px */
    margin-left: clamp(1.625rem, 1.375rem + 1.25vw, 2.313rem); /* min:26px */
  }
}

/* thanks.htmlのトップに戻るボタン */

.top-btn {
  display: inline-flex;
  align-items: center;
  padding: 34px 50px 34px 60px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  color: #fff;
  background-color: #339baa;
  border: 2px solid #339baa;
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  filter: drop-shadow(3px 3px 6px rgba(130, 130, 130, 0.5));
  transition: all 0.2s;
}

.top-btn:hover {
  background-color: #fff;
  color: #339baa;
  border: 2px solid #fff;
}

.top-btn:hover::before {
  border: 2px solid #339baa;
}

.top-btn .content {
  display: flex;
  align-items: center;
}

.top-btn img.default {
  display: block; /* 通常時の画像を表示 */
}

.top-btn img.hover {
  display: none; /* ホバー時の画像を非表示 */
}

.top-btn:hover img.default {
  display: none; /* ホバー時に通常の画像を非表示 */
}

.top-btn:hover img.hover {
  display: block; /* ホバー時にホバー用の画像を表示 */
}

.top-btn img {
  margin-left: 24px;
}

.top-btn::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  left: 6px;
  border-radius: 50px;
  border: 2px solid #fff;
}

@media screen and (max-width: 1200px) {
  .top-btn {
    padding: clamp(0.875rem, 0.42rem + 2.27vw, 2.125rem) clamp(2.75rem, 2.614rem + 0.68vw, 3.125rem) clamp(0.875rem, 0.42rem + 2.27vw, 2.125rem) clamp(3.375rem, 3.239rem + 0.68vw, 3.75rem);
    font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
  }
  .top-btn img {
    width: clamp(0.875rem, 0.511rem + 1.82vw, 1.875rem);
  }
}