/* FAQセクション */
  .faq-section {
    background-color: transparent;
    padding: 20px;
  }
  
 /* バナー全体のスタイル */
.faq-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 700px; /* 必要に応じて高さを調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

/* 画像コンテナ */
.banner-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* バナー画像 */
.banner-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を全体にフィット */
  opacity: 0; /* 初期状態では非表示 */
  transform: scale(1); /* 初期ズーム値 */
  transition: opacity 2s ease-in-out, transform 10s ease-in-out; /* フェードとズームのトランジション */
}

/* アクティブな画像を表示 */
.banner-image.active {
  opacity: 1;
}
  
  .faq-banner h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 2rem;
    background: rgba(50, 50, 50, 0.5);
    padding: 10px 20px;
    border-radius: 5px;
  }
  
 /* FAQ全体を囲む枠 */
 .faq-wrapper {
   background-color: rgba(255, 255, 255, 0.9); /* 白背景に透明度を設定 */
   padding: 20px;
   margin: 20px auto;
   border-radius: 15px; /* 全体の角丸設定 */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
   max-width: 900px; /* コンテンツの最大幅を設定 */
  }

  /* FAQ内容 */
  .faq-content {
    margin: 20px auto;
    max-width: 800px;
  }
  
  /* 各質問と回答の間の余白 */
  .faq-item {
    background: rgba(255, 255, 255, 0.8);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
  }
  
  /* 質問のデザイン */
  .faq-item .question {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }
  
  /* 回答のデザイン */
.faq-item .answer {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  border-bottom: 1px solid #ccc; /* 下線を追加 */
  padding-bottom: 5px; /* 下線との間隔を調整 */
}

  /* セクション見出し */
.faq-heading {
  text-align: center;
  margin-top: 150px; /* 上部に余白を追加 */
  margin-bottom: 30px; /* 「よくある質問」とWRAPの間を広げる */
}

.faq-heading .faq-subtitle {
  font-size: 4.7rem;
  font-family: 'Dancing Script', cursive; /* 筆記体フォント適用 */
  font-weight: bold;
  color: rgba(208, 185, 185, 0.293); /* 薄い文字 */
  letter-spacing: 0.2rem; /* 少し文字間隔を広げる */
  margin-bottom: -30px;
}

.faq-heading h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin: 3px;
  margin-bottom: 30px; /* 余白を追加して隙間を広げる */
}

.contact-form .faq-subtitle {
  font-size: 4.7rem;
  font-family: 'Dancing Script', cursive; /* 筆記体フォント適用 */
  font-weight: bold;
  color: rgba(208, 185, 185, 0.293); /* 薄い文字 */
  letter-spacing: 0.2rem; /* 少し文字間隔を広げる */
  margin-top: 150px;
  margin-bottom: -105px;
}

  /* お問い合わせフォームセクション */
  .form-heading {
    margin-top: 80px; /* フォーム用のh2の上に余白を追加 */
  }
  
  .button-section {
    display: flex;
    gap: 70px; /* カード間の余白を好きなように */
    justify-content: center;
    align-items: center;
    margin-top: 80px;
    margin-bottom: 130px;
  }

/* 大きなカード風にするためにサイズとレイアウトを調整 */
.button-wrapper {
  position: relative;
  display: flex;              /* アイコンやラベルを縦方向に配置 */
  flex-direction: column;
  align-items: center;        /* 中央寄せ */
  justify-content: center;    /* 中央寄せ */
  width: 300px;               /* カードの横幅 */
  height: 300px;              /* カードの縦幅 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 20px;        /* 角を丸く */
  overflow: hidden;
  text-decoration: none;      /* リンクの下線を消す */
  margin: 0 5px;             /* カード間の隙間調整（flexのgapでもOK） */
  background-color: #fff;     /* とりあえず白背景（後述の個別クラスで上書き可） */
}

.button-wrapper img {
    width: 50%;
    height: 50%;
    object-fit: cover;
}

/* カード内のアイコン */
.contact-icon {
  width: 80px;  /* アイコンの大きさを調整 */
  height: 80px; 
  object-fit: contain; /* アイコンのアスペクト比を維持 */
  margin-bottom: 10px;
}

/* カードのラベル文字 */
.contact-label {
  font-size: 1.2rem;
  font-weight: bold;
  color: #555;
  text-align: center;
  margin-top: 45px;
}

.overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
    text-align: center;
}

.line-button {
    border: 5px solid #ffc107;
    border-radius: 15px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* メール用カード */
.mail-card {
  background-color: #fdf1e9;  /* ややオレンジがかったベージュ */
}

/* LINE用カード */
.line-card {
  background-color: #f1f8f5;  /* 薄いグリーン系の背景 */
}

.message-contact  {
  font-size: 3.2rem;
  font-weight: bold;
  font-family: 'Dancing Script', cursive; /* 筆記体フォントで優雅さを演出 */
  color: rgba(50, 50, 50, 0.932);
  text-align: center;
  animation: fadeInOut 4s infinite ease-in-out; /* 4秒ごとにゆっくり変化 */
  text-shadow: 0px 0px 5px rgba(255, 200, 200, 0.2);
  margin-top: 10px;
  margin-bottom: 0px;
}

.musical-line2 {
 display: block;   /* インライン要素のimgをブロック要素にする */
 margin: 0 auto;   /* 左右のマージンをautoにして中央配置 */
 width: 400px;
 margin-top: -100px;
 margin-bottom: 80px;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}




/* 携帯表示対応 */
@media (max-width: 768px) {
  .faq-banner h1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    white-space: nowrap; /* これで折り返し防止 */
  }

  .button-section {
    display: flex;
    gap: 50px;
    margin-bottom: 80px;
  }

  .button-wrapper {
      width: 200px; /* 幅を200pxに縮小 */
      height: 200px; /* 高さを133pxに縮小 */
  }

  .overlay-text {
      font-size: 15px; /* フォントサイズを15pxに縮小 */
  }

  /* カードのラベル文字 */
.contact-label {
  font-size: 0.9rem;
  margin-top: 30px;
}

.message-contact  {
  font-size: 2.2rem;
  letter-spacing: 0.2rem; /* 少し文字間隔を広げる */
  margin-top: 10px;
  margin-bottom: 0px;
}

.musical-line2 {

 width: 300px;
 margin-top: -70px;
 margin-bottom: 80px;
}

}




  ----------------------

  .contact-form {
    max-width: 56%;
    padding: 20px; /* 全体の内側余白 */
    margin: 0 auto; /* セクション全体の余白をリセット */
    background-color: transparent; /* ページ全体の背景と同化 */
  }
  
  .contact-form h2 {
    font-size: 2rem;
    text-align: center;
    color: #050505; /* 見出しをアクセントカラーに設定 */
    margin-bottom: 40px;
  }
  
  .contact-form p {
    text-align: center;
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
  }
  
  /* フォームグループ */
  .form-group {
    display: flex;
    flex-wrap: wrap; /* 入力ボックスを折り返し可能に */
    gap: 30px; /* ラベルと入力ボックスの左右間隔 */
    justify-content: space-between;
    align-items: center; /* 縦方向で中央揃え */
    margin-bottom: 15px; /* 行間を狭く設定 */
  }
  
  .form-group label {
    flex: 0 0 30%; /* ラベル幅 */
    flex-shrink: 0; /* ラベルのサイズを固定（入力ボックスの縮小に影響されない） */
    font-weight: normal;
    margin-right: 10px; /* ラベルと入力ボックスの間隔を設定 */
    margin-bottom: 10px;
  }
  
  .form-group input {
    flex-grow: 1; /* 入力ボックスを残りの幅いっぱいに拡大 */
    padding: 18px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    margin-bottom: 10px; /* 携帯表示で縦間隔を確保 */
  }
  
  .form-group input:focus {
    border-color: #ff6f61;
    outline: none;
  }

  .form-group textarea {
    width: 100%; /* 幅を全体に広げる */
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: vertical; /* ユーザーが縦方向のみリサイズ可能に */
    min-height: 100px; /* 最低の高さを設定 */
  }
  
  .form-group textarea:focus {
    border-color: #ff6f61; /* フォーカス時の強調 */
    outline: none;
  }
  
  
  /* チェックボックスグループ */
  .checkbox-group {
    display: flex;
    flex-wrap: wrap; /* 横方向に自由に配置 */
    gap: 20px; /* チェックボックス間の余白を広く */
    margin-top: 20px; /* ラベルとのスペースを広く */
  }
  
  .checkbox-group label {
    font-weight: normal;
    background-color: #ffe4e1; /* 淡いピンク色 */
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  
  .checkbox-group input[type="radio"] {
    margin-right: 5px;
  }
  
  /* ボタン */
  .contact-form button {
    width: 100%;
    padding: 15px;
    background-color: #ff6f61;
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  .contact-form button:hover {
    background-color: #e65c53;
  }

  @media (max-width: 430px) {
    /* FAQセクション */
    .faq-section {
      padding: calc(20px * 0.55);
    }
    
    /* バナー全体 */
    .faq-banner {
      height: calc(700px * 0.45);
    }
    .faq-banner h1 {
      font-size: calc(2rem * 0.55);
      padding: calc(10px * 0.55) calc(20px * 0.55);
      border-radius: calc(5px * 0.55);
    }
    .message-contact  {
      font-size: calc(2.2rem*0.65);
      letter-spacing: 0.05rem; /* 少し文字間隔を広げる */
      margin-top: 6px;
      margin-bottom: 0px;
    }
    
    .musical-line2 {
     width: 180px;
     margin-top: -40px;
     margin-bottom: 40px;
    }

    .button-wrapper img {
      margin-top: 10px;
      margin-bottom: -10px;
      width: 50%;
      height: 50%;
      object-fit: cover;
  }


    -----------

    
    /* FAQ全体を囲む枠 */
    .faq-wrapper {
      padding: calc(20px * 0.55);
      margin: calc(20px * 0.55) auto;
      border-radius: calc(15px * 0.55);
      max-width: calc(900px * 0.55);
    }
    
    /* FAQ内容 */
    .faq-content {
      margin: calc(20px * 0.55) auto;
      max-width: calc(800px * 0.55);
    }
    
    /* 各質問と回答の間の余白 */
    .faq-item {
      padding: calc(15px * 0.55);
      margin-bottom: calc(15px * 0.55);
      border-radius: calc(10px * 0.55);
    }
    
    /* 質問 */
    .faq-item .question {
      font-size: calc(1.2rem * 0.55);
      margin-bottom: calc(10px * 0.55);
    }
    
    /* 回答 */
    .faq-item .answer {
      font-size: calc(1rem * 0.55);
      padding-bottom: calc(5px * 0.55);
      /* line-heightは見やすさを保つためにそのままでも良い場合も */
    }
    
    /* セクション見出し */
    .faq-heading {
      margin-top: calc(150px * 0.35);
      margin-bottom: calc(30px * 0.15);
    }
    .faq-heading .faq-subtitle {
      font-size: calc(4.7rem * 0.55);
      letter-spacing: calc(0.2rem * 0.55);
      margin-bottom: calc(-30px * 0.55);
    }
    .faq-heading h2 {
      font-size: calc(2rem * 0.55);
      margin: calc(3px * 0.55);
      margin-bottom: calc(30px * 0.55);
    }

    .contact-form .faq-subtitle {
      font-size:calc(4.7rem * 0.55);
      margin-bottom: -94px;
      margin-top: 50px;
    }
    
    /* お問い合わせフォームセクション */
    .contact-form {
      max-width: 70%; /* パーセンテージの場合はそのまま */
      padding: 7px;
      margin: 0 auto;
    }
    .contact-form h2 {
      font-size: 1.2rem;
      margin-bottom: 22px;
    }
    .contact-form p {
      font-size: 0.6rem;
      margin-bottom: 16px;
    }
    

    
    /* チェックボックスグループ */
    .checkbox-group {
      gap: calc(20px * 0.55);
      margin-top: calc(20px * 0.55);
    }
    .checkbox-group label {
      padding: calc(10px * 0.55) calc(15px * 0.55);
    }
    
    /* ボタン */
    .contact-form button {
      padding: 8px;
    }
    
    /* 大きなカード（ボタン） */
    .button-section {
      gap: 13px;
      margin-top: 20px!important;
      margin-bottom: 32px!important;
    }
    .button-wrapper {
      width: 120px!important;
      height: 120px!important;
      border-radius: 10px;        /* 角を丸く */
    }
    .contact-icon {
      width: 53px!important;
      height: 53px!important;
      margin-bottom:0px!important;
      margin-top: 0px!important;
    }
    .contact-label {
      font-size: 0.65rem;
      margin-top: 22px;
    }
    .overlay-text {
      font-size: 10px;
      padding: 6px 0;
    }
  }