.body {
    background-color: hsl(0, 0%, 100%);
    display: flex;
    /* justify-content: center; */
    flex-direction:column;
    align-items: center;
    font-family: "Osaka-Regular", Helvetica;
    color: #484848;
    /* line-height: 1.2;
    text-align: left;
    font-feature-settings: "palt"; */
    font-size: 15px;
   
    /* margin-top: 50px; */
}

.eye-catching{
    position: relative; /* 子要素の絶対位置指定の基準点にする */
    display: inline-block; /* 画像のサイズにコンテナを合わせる場合など */
    margin: 50px 0px;
}

.element-2{
    display: block; /* 画像下の余分な隙間を防ぐ */
  max-width: 100%; /* コンテナ幅に合わせて画像幅を調整 */
  height: auto; /* 高さを自動調整 */
  }

h1{
    font-size: 25px;
    position: absolute; /* 親要素(image-container)を基準に絶対位置を指定 */
    top: 50%; /* 親要素の上端から50%の位置へ */
    left: 50%; /* 親要素の左端から50%の位置へ */
    transform: translate(-50%, -50%); /* 要素自身の中心を基準点に移動させ、中央揃え */
    /* color: white; 文字色（画像に合わせて見やすい色に） */
    /* 半透明の黒い背景（文字を見やすくするため） */
    background-color: rgba(255, 255, 255, 0.5); 
    border-radius: 3px; /* ここで角の丸みを指定 */ 
    padding: 10px 20px; /* テキスト周りの余白 */
    text-align: center; /* テキストを中央揃え */
}



.form{
   
    display: flex;
    flex-direction:column;
    justify-content: flex-start;
    width: 80vh;
 
}
.form-item{
    display: flex;
    align-items: center;
    border-top: solid 1px #484848;
    /* border-bottom: solid 1px #484848; */
    padding: 20px 0px;
}

.form-item-title{
    width: 170px;
}

/* label{
    width: 200px;
} */

.main-title{
    font-weight: bold; 
}

.required{
    font-size: 12px;
    width: 30px;
    background-color: #41b79c;
    color: #ffffff;
    padding: 0px 20px;
    margin: 20px;
    border-radius: 3px; /* ここで角の丸みを指定 */
}

.sub-title{
    margin: 0px;
    font-size: 10px;
}
/* .name{
    width: 100vh;
    height: 50px;
    font-size: 20px;
} */
      
.input{
    width: 50vh;
    height: 50px;
    font-size: 15px;
}

.textbox{
    width: 50vh;
    height: 100px;
    font-size: 15px;
}

.privacy-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: solid 1px #484848;
}

.privacy{
    font-size: 10px;
    padding-top: 20px;
}

a{
    color: #41b79c;
}
  
a:hover{
    color: #359c84;
}

.privacy-heck{
    font-size: 10px;
    padding-top: 10px;
    display: flex;
    align-items: flex-end;
    
}

#agree{
    margin: 0px 20px;
}

.disabled-button{
    display: flex;
    justify-content: center;
    padding: 30px 0px;

}

.disabled-btn {
    /* 見た目の基本設定 */
    display: inline-block; /* 他の要素と横並びできるようにしつつ、幅・高さを指定可能に */
    padding: 12px 24px; /* 内側の余白（上下に12px, 左右に24px） */
    border: none; /* 枠線を消す */
    border-radius: 25px; /* 角を丸くする（値が大きいほど丸くなる） */
    background-color: #41b79c; /* 背景色（鮮やかな青） */
    color: white; /* 文字色（白） */
    font-size: 16px; /* 文字サイズ */
    font-weight: bold; /* 文字を太字に */
    text-align: center; /* 文字を中央揃え */
    text-decoration: none; /* テキストの下線を消す（<a>タグの場合に有効）*/
    cursor: pointer; /* マウスカーソルを指マークに */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ボタンに影を付ける */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* アニメーションの設定 */
    outline: none; /* クリック時の青い枠線（ブラウザによる）を消す */
  }
  
  /* マウスがボタンに乗った時のスタイル (:hover) */
  .disabled-btn:hover {
    background-color: #359c84; /* 背景色を少し濃い青に */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* 影を少し濃く、大きく */
    transform: translateY(-2px); /* ボタンを少し上に移動させる */
  }
  
  /* ボタンがクリックされた瞬間のスタイル (:active) */
  .disabled-btn:active {
    background-color: #267260; /* 背景色をさらに濃い青に */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 影を控えめに */
    transform: translateY(0); /* ボタンの位置を元に戻す */
  }


  .copyright{
    text-align: center; /* テキストを中央揃えにする */
    padding-top: 200px;
    padding-bottom: 50px;
    font-size: 9px;
  }
  
/* ////////////////////////////// */
/* モーダル部 */
.modal-container{
    font-family: "Osaka-Regular", Helvetica;
    color: #484848;
    font-size: 10px;
}

/* モーダルを開くボタン */
.modal-open-button {
padding: 10px 20px;
font-size: 10px;
cursor: pointer;
color: #41b79c;
background-color: #fff;
border: #fff;
text-decoration: underline; 
}

/* モーダル背景のスタイル */
.modal-container {
display: none; /* 初期状態では非表示 */
position: fixed; /* 画面に固定 */
z-index: 1000; /* 他の要素より手前に表示 */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* コンテンツがはみ出たらスクロール */
background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
justify-content: center; /* 水平中央揃え (Flexbox用) */
align-items: center; /* 垂直中央揃え (Flexbox用) */
}

/* モーダルコンテンツのスタイル */
.modal-content {
background-color: #fff;
margin: auto; /* 上下左右中央 */
padding: 30px;
border: 1px solid #ccc;
width: 80%; /* 幅 */
max-width: 600px; /* 最大幅 */
position: relative; /* 閉じるボタンの位置決めの基準 */
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 閉じるボタン */
.modal-close-button {
color: #aaa;
position: absolute; /* modal-contentを基準に絶対位置指定 */
top: 10px;
right: 15px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

.modal-close-button:hover,
.modal-close-button:focus {
color: #333;
text-decoration: none;
}

/* モーダル表示時のスタイル */
.modal-container.is-open {
display: flex; /* 表示するときは Flexbox を使う */
}

/* プライバシーポリシー本文のスタイル（適宜調整）*/
.privacy-policy-body {
    max-height: 60vh; /* 本文エリアの最大高さを画面の60%に */
    overflow-y: auto; /* 高さを超えたら縦スクロール */
    margin-top: 20px;
    padding-right: 15px; /* スクロールバーとの余白 */
    line-height: 1.6;
}

/* --- レスポンシブ対応CSS (追記分) --- */

/* タブレット・スマートフォン向け (画面幅 992px以下で適用) */
@media (max-width: 992px) {

    /* bodyの基本調整（前回の内容と重複する場合は調整） */
    body {
        padding: 0 15px; /* 左右に余白 */
        /* font-size はスマホでさらに小さくするのでここでは調整しないか微調整 */
        /* font-size: 14.5px; */
        /* margin-top: 30px; */
    }


    /* フォーム全体の幅調整 */
    .form {
        /* width: 80vh; から変更 */
        width: 95%; /* 画面幅の95%を使用 */
        margin: 30px auto; /* 中央寄せにして上下マージン調整 */
    }

    /* フォーム項目のレイアウト調整 */
    .form-item {
        /* display: flex; (デフォルト横並び) から縦並びに変更 */
        flex-direction: column;
        align-items: flex-start; /* 項目名を左揃えに */
        padding: 15px 0px; /* パディング調整 */
    }

    /* フォーム項目名の幅調整 */
    .form-item-title {
        /* width: 170px; から変更 */
        width: 100%; /* 親要素の幅いっぱいに */
        margin-bottom: 5px; /* 項目名と入力欄の間にスペース */
    }

    /* 必須ラベルの調整 */
    .required {
        /* margin: 20px; から変更 */
        margin: 5px 0; /* 上下のみマージン */
        padding: 2px 10px; /* パディングを調整 */
        font-size: 11px; /* サイズ調整 */
        display: inline-block; /* 横並びを維持 */
    }

    /* サブタイトルの調整 */
    .sub-title {
        font-size: 10px; /* 元が小さいので、スマホで調整 */
        margin-left: 5px; /* 必要であれば左マージン調整 */
    }

    /* 入力欄の幅調整 */
    .input,
    .textbox {
        /* width: 50vh; から変更 */
        width: 100%; /* 親要素(form-item)の幅いっぱいに */
        /* heightやfont-sizeはスマホで調整 */
    }

    /* プライバシー同意チェックボックス部分の調整 */
    .privacy-check {
        /* display: flex; (デフォルト横並び) から縦並びに変更 */
        flex-direction: column;
        align-items: flex-start; /* チェックボックスとラベルを左揃えに */
        padding-top: 15px; /* パディング調整 */
    }
    #agree { /* チェックボックス本体 */
        /* margin: 0px 20px; から変更 */
        margin: 0 5px 5px 0; /* 右と下に少しマージン */
    }
     .privacy-check label { /* チェックボックスのラベル */
         margin-left: 0; /* 左マージンをリセット */
         /* font-sizeはprivacy-check全体で調整 */
         font-size: 10px; /* 元が小さいのでスマホで調整 */
     }


    /* 送信ボタンコンテナのパディング調整 */
    .disabled-button {
        /* padding: 30px 0px; から変更 */
        padding: 20px 0px; /* パディングを減らす */
    }

    /* disabled-btn の調整（前回のメディアクエリで定義済み） */
    /* ここでは特に追記不要な想定 */


    /* --- モーダル部の調整 --- */
    .modal-container {
         /* font-size: 10px; から変更。スマホでさらに小さくするのでここでは微調整か */
         font-size: 13px; /* モーダル全体の基本フォントサイズを調整 */
    }

    .modal-open-button {
        padding: 8px 15px; /* パディング調整 */
        font-size: 12px; /* フォントサイズ調整 */
    }

    .modal-content {
        width: 90%; /* 画面幅の90%を使用 */
        /* max-width: 600px; はそのままで良い */
        padding: 20px; /* パディングを減らす */
    }

    .modal-close-button {
        font-size: 24px; /* サイズを小さく */
        top: 5px; /* 位置調整 */
        right: 10px; /* 位置調整 */
    }

    .privacy-policy-body {
        max-height: 50vh; /* 最大高さを調整 */
        margin-top: 15px; /* マージン調整 */
        padding-right: 10px; /* スクロールバーとの余白調整 */
         /* font-sizeはmodal-containerから継承 */
    }
}

/* スマートフォン向け (画面幅 768px以下で適用) */
@media (max-width: 768px) {

     /* bodyの基本調整（前回の内容と重複する場合は調整） */
     body {
        padding: 0 10px; /* 左右の余白をさらに狭める */
        font-size: 13px; /* 基本フォントサイズを小さく */
     }


     /* フォーム全体の幅調整 */
     .form {
         width: 100%; /* 画面いっぱいに */
     }
    }