@charset "utf-8";
/* CSS Document */


#contact{
      margin: 0;
      color: #333;
      line-height: 1.8;
    }



#contact .hero {
      position: relative;
      width: 100%;
      height: 300px;
      background: url("../img/contact/contact_main.jpg") center center / cover no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

#contact .hero-text {
      color: white;
	  text-align: center;
      /*text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);*/
    }

#contact .hero-text h1.mainttl {
      font-size: 60px!important;
      margin: 60px 0 0 0;
      font-weight:bold; 
		line-height: 1;
    }

#contact .hero-text h2.mainttl2 {
      font-size: 16px !important ;
      margin: 8px 0 0 ;
	  text-align: center ;
	  font-style: normal;
	line-height: 1!important;
    }


    @media (max-width: 600px) {
      #contact .hero {
        height: 300px;
      }

     #contact .hero-text h1.mainttl  {
        font-size: 32px;
      }

     #contact .hero-text h2.mainttl2 {
        font-size: 14px;
      }
    }

/* 親コンテナの横幅と中央寄せ */
#contact-contents {
    max-width: 1000px; /* ページの最大横幅 */
    margin: 0 auto; /* 中央寄せ */
    padding: 60px 20px; /* セクション全体の上下左右の余白 */
    box-sizing: border-box;
}


#contact .contentsttl {
    background-color: #4D31BC;
    color: white;
    font-weight: bold;
    font-size: 23px;
    padding: 12px 40px;
    margin: 0px 0 30px 0 ;
    border-radius: 50px 0 0 0px;
}

#contact .contbox{
	
	width: 300px;
	margin: 0 auto;
}

#contact .contbox .obi{

	background-color: #FFE2E8;
	text-align: center;
	font-size: 18px;
	padding: 3px 0;
}

#contact .contbox .obi_number{
	text-align: center;
	color: #4D31BC;
	font-weight: 900;
	font-size: 38px;
	margin: 5px 0;
}

/* ===============================
   お問い合わせページ全体のコンテナ
   =============================== */
#contact-page-contents {
    max-width: 1000px; /* ページの最大横幅 */
    margin: 0 auto; /* 中央寄せ */
    padding: 40px 20px; /* セクション全体の上下左右の余白 */
    box-sizing: border-box;
}

/* フォームセクションの共通スタイル */
#contact-form-section {
    margin-top: 40px; /* タイトルからの余白 */
    padding: 20px;
    background-color: transparent; /* ★修正：背景色を透明に */
    border-radius: 0; /* ★修正：角丸を削除 */
    box-shadow: none; /* ★修正：シャドウを削除 */
}

/* 各フォームステップ（入力、確認、完了）の共通スタイル */
.form-step {
    display: none; /* 初期状態では非表示 */
}

.form-step.active {
    display: block; /* アクティブなステップのみ表示 */
}

/* フォームグループ（ラベル、入力フィールド、必須タグ） */
.form-group {
    display: flex;
    align-items: center; /* 垂直方向中央揃え */
    margin-bottom: 25px; /* 各フォーム項目間の余白 */
    flex-wrap: wrap; /* スマホで折り返す */
}

.form-label {
    flex: 0 0 150px; /* ラベルの固定幅 */
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-right: 20px; /* ラベルと入力フィールドの間隔 */
    text-align: right; /* ラベルを右寄せ */
}

/* 必須タグのデザイン */
.required-tag {
    background-color: #4D31BC; /* 指定された背景色 */
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 10px; /* ★修正：必須マークとフィールドの間に余白を追加 */
    margin-right: 20px; /* ★追加：フィールドとの間に余白 */
    flex-shrink: 0; /* 縮まないように */
}

/* 入力フィールドの共通スタイル */
.form-input,
.form-textarea {
    flex: 1; /* 残りのスペースを埋める */
    max-width: 515px; /* 指定された横幅 */
    padding: 12px 15px;
    border: 1px solid #ccc; /* 1pxグレーのボーダー */
    border-radius: 8px; /* 角丸 */
    font-size: 16px;
    color: #333;
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

.form-textarea {
    height: 150px; /* お問い合わせ内容の縦広さ */
    resize: vertical; /* 縦方向のみリサイズ可能 */
    min-height: 100px; /* 最小高さを設定 */
}

/* プライバシーポリシー同意チェックボックス */
.privacy-checkbox-wrapper {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center; /* 中央寄せ */
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}

.privacy-checkbox-wrapper input[type="checkbox"] {
    margin-right: 10px;
    width: 18px; /* チェックボックスのサイズ */
    height: 18px;
    flex-shrink: 0;
}

.privacy-checkbox-wrapper .privacy-link {
    color: #2196F3; /* リンクの色 */
    text-decoration: underline;
}

/* ボタンコンテナ */
.form-button-container {
    text-align: center; /* ボタンを中央寄せ */
    margin-top: 40px;
}

/* 送信ボタンのスタイル (menu_bottom5をベースに調整) */
.menu_bottom5 {
    border-radius: 10px;
    box-shadow: 5px 5px 5px 0 #bbb;
    width: 350px;
    border: none; /* PHPでsubmitされるため、borderは不要 */
    background-color: #4D31BC; /* 指定された背景色 */
    color: #fff; /* テキスト色を白に */
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    height: 60px;
    line-height: 60px; /* テキストを垂直方向中央に */
    margin: 0 auto; /* 中央寄せ */
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; /* 横方向の中央揃え */
    gap: 20px; /* 画像とテキストの間隔 */
    cursor: pointer; /* カーソルをポインターに */
    transition: background-color 0.3s ease; /* ホバーアニメーション */
}

.menu_bottom5:hover {
    background-color: #3E2796; /* ホバー時の色を少し暗く */
}

.menu_bottom5 img {
    vertical-align: middle;
    margin-left: 8px; /* 矢印アイコンの左マージン */
    width: 16px; /* 矢印アイコンのサイズ */
}

/* 確認画面のスタイル */
#form-confirm-step h3,
#form-complete-step h3 {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
}

.confirm-details {
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 30px;
}

.confirm-item {
    display: flex;
    margin-bottom: 10px;
    font-size: 16px;
}

.confirm-item:last-child {
    margin-bottom: 0;
}

.confirm-label {
    font-weight: bold;
    flex: 0 0 120px; /* ラベルの幅 */
    color: #555;
}

.confirm-value {
    flex: 1;
    color: #333;
    word-break: break-word; /* 長い単語の改行 */
}

/* 完了画面のスタイル */
.complete-message {
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
    color: #333;
}

.complete-message:last-of-type {
    margin-bottom: 30px;
}

/* 確認画面のボタン配置 */
#form-confirm-step .form-button-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* ボタン間のスペース */
    flex-wrap: wrap; /* スマホで折り返す */
}

#form-confirm-step .form-button-container .menu_bottom5 {
    margin: 10px auto; /* ボタンの上下マージン */
}

#form-confirm-step .form-button-container form {
    margin: 0; /* formタグのデフォルトマージンをリセット */
}

.radio-group {
    margin-top: 10px;
}
.radio-group input[type="radio"] {
    margin-right: 5px;
}
.radio-group label {
    margin-right: 20px; /* 項目間の余白 */
    cursor: pointer;
}


/* ===============================
   レスポンシブデザイン（スマートフォン向け）
   =============================== */
@media (max-width: 768px) {
    #contact-page-contents {
        padding: 40px 15px; /* スマホ用パディング */
    }

    #contact-form-section {
        margin-top: 30px;
        padding: 15px;
    }

    .form-group {
        display: block; /* ★修正：Flexboxを解除してブロック要素に */
        margin-bottom: 20px;
        /* align-items: flex-start; や flex-direction: column; は不要になります */
    }

    .form-label {
        width: auto; /* ★修正：幅を自動調整 */
        display: inline-block; /* ★修正：インラインブロック要素に */
        text-align: left; /* 左寄せ */
        margin-right: 5px; /* ★修正：必須タグとの間隔を調整 */
        margin-bottom: 0; /* ★修正：下部の余白を削除 */
        vertical-align: middle; /* 垂直方向の中央揃え */
    }

    .required-tag {
        display: inline-block; /* ★修正：インラインブロック要素に */
        margin-left: 0; /* ★修正：左マージンをリセット */
        margin-top: 0; /* ★修正：上マージンをリセット */
        margin-right: 0; /* ★修正：右マージンをリセット */
        vertical-align: middle; /* 垂直方向の中央揃え */
        order: 0; /* ★修正：orderプロパティはdisplay:blockでは無効ですが、念のためリセット */
    }

    .form-input,
    .form-textarea {
        display: block; /* ★修正：ブロック要素に */
        width: 100%; /* 幅を100%に */
        max-width: 100%; /* 確実に100%に */
        font-size: 15px;
        margin-top: 10px; /* ★追加：入力フォームの上部に余白を追加 */
    }

    .form-textarea {
        height: 120px; /* スマホでの高さ調整 */
    }

    .privacy-checkbox-wrapper {
        flex-direction: row; /* 横並びを維持 */
        justify-content: flex-start; /* 左寄せ */
        text-align: left;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 13px;
    }

    .privacy-checkbox-wrapper input[type="checkbox"] {
        margin-right: 10px;
        width: 16px;
        height: 16px;
    }

    .menu_bottom5 {
        width: 100%; /* スマホで幅を100%に */
        height: 50px;
        line-height: 50px;
        font-size: 15px;
        gap: 10px;
    }

    #form-confirm-step .form-button-container {
        flex-direction: column; /* ボタンを縦並びにする */
        gap: 15px;
    }

    .confirm-item {
        flex-direction: column; /* 確認画面の項目も縦並び */
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .confirm-label {
        width: 100%; /* ラベルの幅を100%に */
        margin-bottom: 5px;
    }

    .confirm-value {
        width: 100%;
        font-size: 15px;
    }

    #form-confirm-step h3,
    #form-complete-step h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .complete-message {
        font-size: 15px;
    }
}

/* さらに小さなスマホ向けの調整 */
@media (max-width: 480px) {
    .form-label {
        font-size: 15px;
    }
    .form-input,
    .form-textarea {
        font-size: 14px;
    }
    .privacy-checkbox-wrapper {
        font-size: 12px;
    }
    .menu_bottom5 {
        font-size: 14px;
    }
    .confirm-item,
    .confirm-label,
    .confirm-value,
    .complete-message {
        font-size: 14px;
    }
}