html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Montserrat', sans-serif;
  background-image: url(marble-bg.jpg);
}
.wrapper{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main{
  flex: 1;
}



/* ヘッダー */

.site-header {
  text-align: center;
  padding: 10px 0;
  z-index: 999;
}

/* 犬アイコンの設定 */

.left-icon {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 30px;
  background-color: transparent;
}
.left-icon img{
  width: 70px;
}

/* 後ろのハート設定 */

.heart-button::before,
.heart-button::after{
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  position: absolute;
  opacity: 0;
}
.heart-button::before {
  background-image: url('heart.svg');
  top: -40;
  left: 40px;
}
/* 右下のハートのスタイル */
.heart-button::after {
  background-image: url('heart-reverse.svg');
  bottom: 20px;
  right: 20px;
}
/* ボタンホバー時のスタイル */
.heart-button:hover {
  border-color: #ef4b53;
  color: #ef4b53;
}
/* ボタンホバー時の左上のハートのスタイル */
.heart-button:hover::before {
  animation: heart 1.5s infinite ease-out;
}
/* ボタンホバー時の右下のハートのスタイル */
.heart-button:hover::after {
  animation: heart 1.5s 0.2s infinite ease-out;
}
/* ========= アニメーションの設定 ======== */
@keyframes heart {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) scale(1.4);
    opacity: 0;
  }
}

/* ハンバーガーメニュー */
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  position: fixed;
  right: 80px;
  top: 60px;
  z-index: 100;
  cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 40px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 13px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 13px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background-color: white;
  transition: .5s;
  text-align: center;
  padding-top: 200px;
}
/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}
.nav_item a {
  color: black;
  text-decoration: none;
  font-size: 20px;
  padding: 10px;
  margin-bottom: 20px;
}
.nav_item a:hover{
  color: #f3c6cc;
}
.nav_content li{
  padding: 20px;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;
}
.site-tagline{
  padding-top: 20px;
}

/* ヘッダーここまで */











/* メインビジュアル */
.contact{
    color: black;
    padding-top: 30px;
    text-align: center;
}
.contact h1{
    font-family: "Times New Roman";
    font-size: 50px;
    padding-top: 50px;
}
.contact p{
    font-size: 20px;
    padding-top: 0px;
    padding-bottom: 30px;
    color: black;
}




/* 入力から送信までのステップ表示 */
.form-steps {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  gap: 2rem;
}

.step {
  padding: 1rem 2rem;
  border-radius: 50px;
  background-color: rgb(255, 255, 255);
  font-size: 1rem;
  color: #000;
}

.step.current {
  background-color: black;
  font-weight: bold;
}






/* ===== フォーム全体 ===== */
/* === フォーム全体を囲む .gr === */
.gr {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  background: rgba(255, 255, 255, 0.3); /* 白ベースで透け感あり */
  border: 1px solid rgba(255, 255, 255, 0.5); /* 境界線も薄く */
  border: 2px solid #EED9B5; /* シャンパンゴールドの枠線 */
  border-radius: 30px;
  padding: 60px 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  max-width: 800px;
  width: 90%;
  margin: 60px auto 100px auto;
  font-family: 'Noto Serif JP', serif;
  color: #333;
  animation: fadeInUp 0.5s ease-out;
}


/* === フォームの説明文 === */
.form-description {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.contact-form label {
  display: block;
  margin-top: 1.8rem;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  color: #333;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  text-align: center;
  padding: 1rem;
  margin-top: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 15px;
  font-size: 1rem;
  color: #333;
  background-color: white;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* === エラー時のスタイル（オプション） === */
.error {
  border-color: #f88 !important;
  background-color: #fff5f5;
}

/* === エラーメッセージラベル === */
label[style*="red"] {
  color: #c44 !important;
  font-weight: bold;
}

/* === ボタン（確認画面へ） === */
#confirm-btn {
  background: linear-gradient(to right, #F9D857, #D4AF37);
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin: 40px auto 0;
  display: block;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  transition: 0.3s ease;
}
#confirm-btn:hover {
  opacity: 0.9;
}

/* === プライバシーポリシーエリア === */
.privacy-policy {
  background: #f9f6f3;
  border: 1px solid #eee;
  padding: 20px;
  margin-top: 30px;
  border-radius: 10px;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
}
.privacy-policy h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #B29700;
  font-weight: bold;
}

/* === アニメーション（共通） === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===== 各ステップ表示制御 ===== */
.hidden {
  display: none;
}
.form-steps .step {
  color: #aaa;
  font-weight: normal;
}

.form-steps .step.current {
  color: white;
  font-weight: bold;
  border-bottom: 2px solid #000; /* 例：今いるステップに下線をつけるとか */
}






/* ===== 確認画面・完了画面 ===== */
#form-step2 {
  width: 70%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  background: rgba(255, 255, 255, 0.3); /* 白ベースで透け感あり */
  border: 2px solid #EED9B5; /* ゴールド系 */
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  margin: 40px auto;
  padding: 50px 30px;
  color: #444;
  font-family: 'Noto Serif JP', serif;
  transition: all 0.3s ease;
}

#form-step2 h2 {
  font-size: 32px;
  color: #B29700;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

#form-step2 p {
  width: 90%;
  background: #fdf9f4;
  border-left: 5px solid #EED9B5;
  padding: 30px 10px;
  margin: 30px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

#form-step2 p strong {
  display: block;
  color: #333;
  font-size: 20px;
}

#submit-btn{
  background: linear-gradient(to right, #F9D857, #D4AF37);
  color: white;
  padding: 12px 24px;
  font-size: 20px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin: 30px auto 10px;
  display: block;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  transition: 0.3s ease;
}

#submit-btn:hover {
  opacity: 0.9;
}

.back-btn {
  background: transparent;
  color: #333;
  font-size: 18px;
  border: none;
  border-bottom: 1px solid #999;
  margin-top: 10px;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
}






/* フォーム３ */
#form-step3 {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  background: rgba(255, 255, 255, 0.3); /* 白ベースで透け感あり */
  border: 2px solid #EED9B5; /* ゴールド枠線 */
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-width: 700px;
  width: 90%;
  margin: 60px auto;
  padding: 60px 40px;
  color: #444;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  animation: fadeInUp 0.5s ease-out;
}

#form-step3 h2 {
  font-size: 32px;
  color: #B29700;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

#form-step3 p {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
}

.back-to-top {
  background: linear-gradient(to right, #F9D857, #D4AF37);
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  transition: 0.3s ease;
}

.back-to-top:hover {
  opacity: 0.9;
}


/* ===== プライバシーポリシー ===== */
.privacy-policy {
  margin: 2rem auto;
  padding: 1rem;
  font-size: 15px;
  background: #fafafa;
  border: 1px solid #eee;
  text-align: center;
  border-radius: 10px;
}
.privacy-policy p{
    font-size: 15px;
}
.form-steps .step.current {
  font-weight: bold;
  color: white; /* ピンクとか目立たせたい色 */
}


/* ===== フッター ===== */
.footer {
  text-align: center;
  padding:5px;
  color: black;
}
.footer p{
  font-size: 15px;
}









@media (min-width: 768px) and (max-width: 1024px) {
  /* タブレットだけに効くスタイルをここに書く */

  /* 入力から送信までのステップ表示 */
.form-steps {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  gap: 2rem;
}

.step {
  padding: 10px 15px;
  border-radius: 50px;
  background-color: rgb(255, 255, 255);
  font-size: 15px;
  color: #000;
}

.step.current {
  background-color: black;
  font-weight: bold;
}

.contact h1{
    font-family: "Times New Roman";
    font-size: 40px;
    padding-top: 50px;
}
.contact p{
  font-size: 15px;
    padding: 20px;
    color: black;
}


/* ===== フォーム全体 ===== */
.gr{
    width: 500px;
    background-color: white;
    padding: 40px;
    border-radius: 40px;
    text-align: left;
    margin: 50px auto;
    font-size: 13px;
}

.contact-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.contact-form label {
  display: block;
  margin-top: 2rem;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin-top: 0.3rem;
  border: 1px solid black;
  border-radius: 20px;
  font-size: 13px;
  text-align: center;
  color: black;
  background-color: white;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button:hover {
  background-color: #646464;
}

/* ===== エラーメッセージ ===== */
.error-message {
  color: red;
  font-size: 10px;
}

/* ===== 各ステップ表示制御 ===== */
.hidden {
  display: none;
}
.form-steps .step {
  color: #aaa;
  font-weight: normal;
}

.form-steps .step.current {
  color: white;
  font-weight: bold;
  border-bottom: 2px solid #000; /* 例：今いるステップに下線をつけるとか */
}

/* ===== プライバシーポリシー ===== */
.privacy-policy {
  max-width: 500px;
  margin: 2rem auto;
  padding: 1rem;
  font-size: 13px;
  background: #fafafa;
  border: 1px solid #eee;
  text-align: center;
  border-radius: 10px;
}
.privacy-policy p{
    font-size: 10px;
}
.form-steps .step.current {
  font-weight: bold;
  color: white; /* ピンクとか目立たせたい色 */
}

/* ===== フッター ===== */
.footer p{
  text-align: center;
  padding: 5px;
  font-size: 10px;
  color: black;
}


}














@media (max-width: 767px) {
  /* スマホ用の見た目はここに書く */
  /* 犬アイコンの設定 */

  /* ヘッダー */
.left-icon {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 20px;
  background-color: transparent;
}
.left-icon img{
  width: 60px;
}
/* 後ろのハート設定 */
.heart-button::before,
.heart-button::after{
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  position: absolute;
  opacity: 0;
}
.heart-button::before {
  background-image: url('heart.svg');
  top: 30px;
  left: 10px;
}
/* 右下のハートのスタイル */
.heart-button::after {
  background-image: url('heart-reverse.svg');
  bottom: 0px;
  right: 10px;
}
/* ボタンホバー時のスタイル */
.heart-button:active {
  border-color: #ef4b53;
  color: #ef4b53;
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 10px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 10px;
}

/* ボタンホバー時の左上のハートのスタイル */
.heart-button:active::before {
  animation: heart 1.5s infinite ease-out;
}
/* ボタンホバー時の右下のハートのスタイル */
.heart-button:active::after {
  animation: heart 1.5s 0.2s infinite ease-out;
  animation-play-state: paused;
}
/* ========= アニメーションの設定 ======== */
@keyframes heart {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20px) scale(1.4);
    opacity: 0;
  }
}
/* ハンバーガーメニュー */
.drawer_open {
  position: fixed;
  right: 60px;
  top: 45px;
  z-index: 100;
  cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 2px;
  width: 30px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}









/* メインビジュアル */
.contact{
    color: black;
    padding-top: 50px;
    text-align: center;
}
.contact h1{
    font-family: "Times New Roman";
    font-size: 40px;
}
.contact p{
    font-size: 15px;
    color: black;
}




/* 入力から送信までのステップ表示 */
.form-steps {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
  gap: 1rem;
}

.step {
  padding: 10px 15px;
  border-radius: 50px;
  background-color: rgb(255, 255, 255);
  font-size: 13px;
  color: #000;
}

.step.current {
  background-color: black;
  font-weight: bold;
}
.form-step1{
  width: 100%;
  margin: 0 auto;
}
.form-description{
  width: 100%;
  font-size: 13px;

}





/* ===== フォーム全体 ===== */
.gr{
    width: 100%;
    background-color: white;
    border-radius: 40px;
    text-align: center;
    margin: 50px 0px;
    font-size: 10px;
}

.contact-form {
  width: 90%;
  margin: 0 auto;
}

.contact-form label {
  display: block;
  margin-top: 2rem;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
}

.contact-form input,
.contact-form textarea {
  width: 90%;
  margin-top: 0.3rem;
  border: 1px solid black;
  border-radius: 20px;
  font-size: 12px;
  text-align: center;
  color: black;
  background-color: white;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form button {
    display: block;
    margin: 2rem auto;
    text-align: center;
  padding: 1rem 1.5rem;
  background-color: black;
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-size: 13px;
}

.contact-form button:hover {
  background-color: #646464;
}

/* ===== エラーメッセージ ===== */
.error-message {
  color: red;
}

/* ===== 各ステップ表示制御 ===== */
.hidden {
  display: none;
}
.form-steps .step {
  color: #aaa;
  font-weight: normal;
}

.form-steps .step.current {
  color: white;
  font-weight: bold;
  border-bottom: 2px solid #000; /* 例：今いるステップに下線をつけるとか */
}


/* ===== 確認画面・完了画面 ===== */
#form-step2 {
  width: 100%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  background: rgba(255, 255, 255, 0.3); /* 白ベースで透け感あり */
  border: 2px solid #EED9B5; /* ゴールド系 */
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  margin: 40px auto;
  padding: 50px 30px;
  color: #444;
  transition: all 0.3s ease;
}

#form-step2 h2 {
  font-size: 30px;
  color: #B29700;
  text-align: center;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

#form-step2 p {
  width: 90%;
  background: #fdf9f4;
  border-left: 4px solid #EED9B5;
  padding: 10px 15px;
  margin: 10px;
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

#form-step2 p strong {
  display: block;
  color: #333;
  font-size: 15px;
}

#submit-btn{
  background: linear-gradient(to right, #F9D857, #D4AF37);
  color: white;
  padding: 12px 24px;
  font-size: 15px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin: 30px auto 10px;
  display: block;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  transition: 0.3s ease;
}

#submit-btn:hover {
  opacity: 0.9;
}

.back-btn {
  color: #333;
  font-size: 15px;
  border: none;
  border-bottom: 1px solid #999;
  margin-top: 0px;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ===== プライバシーポリシー ===== */
.privacy-policy {
  max-width: 300px;
  margin: 10px auto;
  font-size: 10px;
  background: #fafafa;
  border: 1px solid #eee;
  text-align: center;
  border-radius: 10px;
}
.privacy-policy p{
  color: black;
    font-size: 10px;
}
.form-steps .step.current {
  font-weight: bold;
  color: white; /* ピンクとか目立たせたい色 */
}

#form-step3 h2 {
  font-size: 20px;
  color: #B29700;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

#form-step3 p {
  font-size: 13px;
  color: #555;
  margin-bottom: 40px;
}



/* ===== フッター ===== */
.footer {
  text-align: center;
  font-size: 10px;
  color: black;
}

}