* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 例：スクロールを有効にするための設定 */
body {
	overflow: auto;
	
	height: auto;
}

/* フォーム全体 */
.form_wrapper {
	width: 28%;
	/* 画面の4分の1ほど */
	min-width: 25rem;
	/* 画面を縮めても、フォーム自体は小さくならない */

	box-sizing: border-box;
	/* background-color: #99b7d6; */
	background-color: white;
	padding: 2rem;

	position: fixed;
	/* 画面に対して固定 */
	top: 0;
	right: 8rem;

	height: 100vh;
	/* 高さを画面の高さ一杯にする */
	z-index: 10;

	box-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
	overflow-y: auto;
	/* フォームが画面より長い場合に、ここだけ縦スクロールできるようにする */
	/* --- ここからスクロールバーを非表示にするコード --- */
	/* Firefox用 */
	scrollbar-width: none;

}

/* Chrome, Safari, Edge用 */
.form_wrapper::-webkit-scrollbar {
	display: none;
}

/* ---スクロールバーを非表示　ここまで--- */
.front_main_img_wrap {
	position: fixed;
	/* 画面に対して固定 */
	top: 0;
	left: 0;
	width: 64vw;
    height: 100vh; /* 高さを画面いっぱいに制限 */
	z-index: 1;
}
/* 画像を内包している親要素を基準位置（relative）にする */
.front_main_img_wrap > div {
    position: relative;
    width: 100%;
    height: 100%;
}
/* スマホ用の画像を非表示にする */
.front_main_img_wrap img.front_main_img {
    display: none !important;
}
/* PC用の3枚の画像をそれぞれ調整して配置する場合の例 */
/* 1. 人物の画像 (.front_main_img1) */
.front_main_img1 {
    position: absolute;
    bottom: 0;
    left: 2%;
    width: 48%;
    max-height: 88vh; /* 画面高さに合わせて上部にSNSボックス用の余白を確保 */
    object-fit: contain;
    object-position: bottom left;
    height: auto;
    display: block;
    z-index: 2;
}

/* --- 3. 「現在準備中」サブタイトル（人物の右側の白い余白に配置） --- */
.front_main_img2 {
    position: absolute;
    top: 18%;
    left: 48%; /* 人物の肩にかからない位置へ移動 */
    width: 22%;
    height: auto;
    display: block;
    z-index: 3;
}

/* --- 4. 「若い力で県政を変える」メインタイトル（右端に配置） --- */
.front_main_img3 {
    position: absolute;
    top: 12%;
    right: 3%;
    width: 25%;
    height: auto;
    display: block;
    z-index: 3;
}
/* --- 画像自体の大きさ設定 --- */
.front_main_img_wrap img.front_main_img {
	width: 100%;
	/* 囲み要素（60vw）の幅いっぱいに広げる */
	height: auto;
	/* 比率を維持したまま高さを自動調整 */
	display: block;
	/* 下部の微妙な隙間を消す */
}

/*--- icon ---*/
/* icon 全体囲い */
.sns_box{
position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background-color: #ffffff;
    padding: 0.8rem 1rem;
    border-radius: 0.4rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    z-index: 99;}
/* ｘ～podcast_sまでの囲い */
.sns_icons{
display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;}

.sns_icons a {
    display: flex;
    align-items: center;
    text-decoration: none;
}
/* icon　画像 */
.front_page_icon{
width: 1.7rem;
    height: 1.7rem;
    object-fit: contain;
}

/* 下段：YouTubeリンク（アイコンと文字を並べる） */
.sns_icons2 a {
    display: flex;
  
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
    font-size: 1.3rem;
}

.sns_icons2 .front_page_icon {
   width: 2.5rem;
    height: auto;
}



.form_section {
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	
}

.form_title {
	
	padding: 1rem 0;
}

.form_sub_title {
	
	padding: 0.8rem 0;
}

/* 見出しのデザイン */
.form_himself {
	color: black;
	text-align: center;
	padding-bottom: 2rem;
	
}

/* フォーム全体の枠組（縦並び） */
.form_frame {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* 1行分のレイアウト（ラベルと入力欄を横並び） */
.form_personal_frame {
	display: flex;
	align-items: center;
	/* align-items: flex-start; */
	border-bottom: 0.1rem solid #e0e0e0;
	padding-bottom: 1.5rem;
}

/* ラベル領域（左側） */
.form_personal {
	width: 40%;
	font-weight: bold;
	margin: 0;
	display: flex;
	justify-content: space-between;
	margin-right: 0.5rem;
}

/* 必須タグ */
.required {
	background-color: #a93226;
	color: #fff;
	font-size: 0.8rem;
	padding: 0.2rem 0.6rem;
	border-radius: 0.3rem;
	margin-left: 0. 5rem;
}

/* 入力欄領域（右側） */
.input_box {
	width: 60%;
	position: relative;
	flex-shrink: 0;
}

/* 入力欄（input）のデザイン */
.input_box input {
	width: 100%;
	padding: 1rem 1.2rem;
	font-size: 1.2rem;
	border: 0.1rem solid #99b7d6;
	border-radius: 0.4rem;
	background-color: #d2e1f0;
	box-sizing: border-box;
	outline: none;
}

/* 普段はヒントを非表示にしておく */
.input_box .tooltip-hint {
	position: absolute;
	left: 0;
	bottom: -2.4rem;
	background-color: #009688;
	color: #ffffff;
	font-size: 1.1rem;
	font-weight: bold;
	padding: 0.3rem 1rem;
	border-radius: 1.2rem;
	box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.15);
	white-space: nowrap;
	z-index: 5;
	/* 非表示の設定 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tooltip_hint{
line-height: 2;

}

/* 1. 親コンテナを完全な中央揃えグリッドにする */
.button_container {
    display: grid ;
    place-items: center ; /* 横方向・縦方向を完全に中央に固定 */
    width: 100% ;
    padding: 4rem 0 ;
    clear: both ;
}

/* 2. 中継するタグの影響を一切受け流す */
.button_container p,
.button_container .wpcf7-form-control-wrap {
    display: contents ; /* タグの存在をレイアウト上から無効化し、中身のボタンを直接グリッドの直下に置く */
}

/* 3. 送信ボタン（input）自体を中央に強制配置 */
.button_container input[type="submit"],
.button_container .custom-submit {
    background-color: #007bff ;
    color: #fff ;
    font-size: 1.6rem ;
    font-weight: bold ;
    padding: 0.8rem 3rem ;
    border: none ;
    border-radius: 0.6rem ;
    cursor: pointer ;
    transition: background-color 0.2s ;
    margin: 0 ;
}

.button_container input[type="submit"]:hover,
.button_container .custom-submit:hover {
    background-color: #0056b3 ;
}


/* --- ページトップへ戻るボタンのスタイル --- */
.page_top_btn {
    position: fixed;
    right: 11rem; 
    bottom: 2rem;
    width: 4rem;
    height: 4rem;
    background-color:#2287C4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 99;
    transition: background-color 0.2s, transform 0.2s;
}



/* 縦の棒の部分 */
.page_top_btn::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 0.9rem;
    background-color: #ffffff;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 矢印の先端（三角の部分） */
.page_top_btn::before {
    content: "";
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    transform: translate(-50%, -50%) rotate(-45deg);
    top: 54%;
    left: 50%;

}
@media screen and (min-width: 1281px){
/* 1. 人物の画像 (.front_main_img1) */
.front_main_img1 {
   
   
    left: 5%;        /* 左からの位置調整 */
    width: 55%;      /* 画像の大きさ（必要に応じて変更） */
   
    
   
}

/* 2. 「現在準備中」などのサブタイトル画像 (.front_main_img2) */
.front_main_img2 {
  
    top: 25%;        
    left: 40%;       
  
}

/* 3. 「若い力で県政を変える」のメインタイトル画像 (.front_main_img3) */
.front_main_img3 {
   
    top: 16%;        
    right: 8%;      


}

}
@media screen and (min-width: 1440px){
/* 1. 人物の画像 (.front_main_img1) */
.front_main_img1 {
   
   
    left: 5%;        
    width: 47%;      
}



}


@media screen and (min-width: 1025px) and (max-width: 1280px) {
    /* 左側の画像エリアの幅を少し縮めて、フォームと重ならないようにする */
    .front_main_img_wrap {
        width: 58vw !important;
    }

    /* 右側のフォームの幅を調整する */
    .form_wrapper {
        width: 30% !important;
        right: 8rem !important; /* 右側の固定ヘッダー分の余白を維持 */
    }

    /* ページトップボタンの位置調整 */
    .page_top_btn {
        right: 11rem !important;
    }
}
@media screen and (max-width: 1150px){
.front_main_img1 {
  
  
    left: 0.5%;        /* 左からの位置調整 */
    width: 63%;      /* 画像の大きさ（必要に応じて変更） */
   
}

/* 2. 「現在準備中」などのサブタイトル画像 (.front_main_img2) */
.front_main_img2 {
    
    top: 20%;        /* 上からの位置調整 */
    left: 38%;       /* 左からの位置調整 */
    width: 25%;      /* 画像の大きさ */
   
}

/* 3. 「若い力で県政を変える」のメインタイトル画像 (.front_main_img3) */
.front_main_img3 {
  
    top: 16%;        /* 上からの位置調整 */
    right: 13%;       /* 右からの位置調整 */
    width: 28%;      /* 画像の大きさ */
  
}
}
@media screen and (max-width: 1080px){
/* 2. 「現在準備中」などのサブタイトル画像 (.front_main_img2) */
.front_main_img2 {
    
    top: 20%;        /* 上からの位置調整 */
    left: 22%;       /* 左からの位置調整 */
    width: 25%;      /* 画像の大きさ */
   
}

/* 3. 「若い力で県政を変える」のメインタイトル画像 (.front_main_img3) */
.front_main_img3 {
  
    top: 16%;        /* 上からの位置調整 */
    right: 19%;       /* 右からの位置調整 */
    width: 28%;      /* 画像の大きさ */
  
}

}

@media screen and (max-width: 1024px) {

/* スマホ表示のとき、ページ全体になめらかなスクロールを強制する */
    /* html {
        scroll-behavior: smooth;
    } */

	

    body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        -webkit-overflow-scrolling: touch; /* iOSでの惯性スクロールを有効化 */
    }

    /* 2. 親コンテナの設定 */
    .front_container {
        display: flex ;
        flex-direction: column ;
        width: 100% ;
        position: relative ;
        height: auto;
    }

    /* 3. 画像の固定解除 */
    .front_main_img_wrap {
        position: relative ;
        width: 100% ;
        height: auto ;
    }

    /* PC用の3枚の画像を非表示にする */
    .front_main_img1,
    .front_main_img2,
    .front_main_img3 {
        display: none !important;
    }

    /* スマホ用の1枚の画像を表示する */
    .front_main_img_wrap img.front_main_img {
        display: block !important;
        width: 100%;
        height: auto;
        margin-top: 6.5rem; /* 必要に応じたマージン */
    }

    .sns_box {
        position: relative !important; /* 絶対配置を解除して通常の流れにする */
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 90% !important;          /* 横幅を適切に調整 */
        margin:0 auto; /* 画像の下、フォームの上に配置 */
        box-shadow: none;
        z-index: 5;
    }

    /* icon　画像 */
.front_page_icon{
width: 2.3rem;
    height: 2.3rem;
    
}

.sns_icons2 .front_page_icon {
   width: 2.7rem;
    height: auto;
}

.sns_icons2 a{
    font-size: 1.6rem;
}

/* ｘ～podcast_sまでの囲い */
.sns_icons{
    gap: 2.1rem;

}

    /* フォームの幅と余白の調整 */
    .form_wrapper {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        height: auto;
        background-color: white;
        box-shadow: none !important;
        padding: 2.5rem 3rem;
        z-index: 2;
        overflow-y: visible;
    }

    .form_personal {
        justify-content: flex-start;
        gap: 3rem;
    }

    .page_top_btn {
        right: 2rem;
    }

 .front_main_img {
       width: 90%;
      display: block;
    }

	/* --- 画像自体の大きさ設定 --- */
.front_main_img_wrap img.front_main_img {
	width: 80%;
	
	
}

    /* 4. フォームの幅と影・余白の調整 */
    .form_wrapper {
        position: relative ;
        top: auto;
        right: auto ;
        bottom: auto ;
        left: auto ;
        width: 100%; /* ご要望の約80％の幅に設定（※もし画面全体の80%であれば 80vw などに調整してください） */
	max-width: 1200px; /* 広がりすぎを防ぐための最大幅（必要に応じて調整） */
	min-width: auto;  /* 画面を縮めてもこれ以上小さくならず、崩れを防ぐ */
        height: auto ;
        max-height: none ;
        /* overflow-y: visible ; */
        background-color: white ;
        
        /* 影を復活させる */
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) ;
        
        /* 左右に内側余白を持たせることで、幅を縮めても端が切れないようにする */
        padding: 2.5rem 3rem ; 
        
        
        z-index: 2 ;
overflow-y: visible ; /* スマホではフォーム内のスクロールではなくページ全体でスクロールさせる */
	
    }

   

	.form_personal {
        justify-content: flex-start;
        gap: 3rem;
    }



	

    .front_main_img_wrap img.front_main_img {
        width: 100%;
		margin-top: 6.5rem;
    }

    /* 【追加】560px以下でヘッダーを一番上に持ってくる設定 */
    .side_header_all {
        position: absolute ;
        top: 0;
        left: 0 ;
        right: auto ;
        bottom: auto ;
        width: 100% ;
        height: 90px ; /* 好みに合わせて高さを調整してください */
        background-color: rgba(255, 255, 255, 0.95) ;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999 ;
        display: flex ;
        align-items: center ;
        justify-content: flex-end ;
        padding: 0 1rem ;
    }

	.page_top_btn {
        right: 2rem;
    }

}
@media screen and (max-width: 768px){
.sns_box{

    /* bottom: 3rem; 画像の下部からの位置 */
    left: 2rem;   /* 画像の左側からの位置 */
   
}

}


@media screen and (max-width: 560px){


.sns_box{
    /* bottom: 1rem; */
    padding: 1rem 1.2rem;
    gap: 1rem;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
}





.sns_icons2{
display: flex;
justify-content: center;
}




/* ラベルと入力欄を縦並びにする */
    .form_personal_frame {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    /* ラベル部分の幅を100%にする */
    .form_personal {
        width: 100%;
        margin-right: 0;
    }

    /* 入力欄の囲みを横幅いっぱいに広げる */
    .input_box {
        width: 100%;
    }

    /* 入力欄のinput自体も横幅いっぱいに広げる */
    .input_box input {
        width: 100%;
    }
}

@media screen and (max-width: 480px){
.form_wrapper{
	padding: 2.5rem 2rem;
}

/* icon　画像 */
.front_page_icon{
width: 1.6rem;
    height: 1.6rem;
    
}

.sns_box{
   
    padding: 1rem 1.2rem;
    gap: 1rem;
   
}

/* ｘ～podcast_sまでの囲い */
.sns_icons{
    gap: 1.3rem;

}

.sns_icons2 .front_page_icon {
   width: 2.2rem;
    height: auto;
}



.sns_icons2 a{
    font-size: 1.2rem;
}

}