@charset "UTF-8";
/*--------------------------------------------------------------------------------
 *
 *
 * リセット
 *
 *
--------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; font-size:100%; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
html, body { width:100%; height:100%; line-height:1; font-size: 100%; background-color: #ffff; color: #000; font-size: 0.875rem;
font-family: 'ヒラギノ角ゴ ProN', sans-serif;
}
ol, ul { list-style:none; }
blockquote, q {quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }


img {
  vertical-align: bottom;
}

h1{
	font-size: 2.7em;
	text-align: center;
	font-weight: bold;
}
h2{
	font-size: 1.3em;
	line-height: 30px;
}
li {
  list-style: none;
	font-size: 18px;
line-height: 25px;
}
p {
	line-height: 30px;
	font-size: 18px;
	display: flex;
}
/*
横幅を設定するための共通クラス
*/
.wrapper {
  width: 100%;
  max-width: 1200px;
  padding: 0 16px;
  margin: 0 auto;
}

		.header {
			  width: auto;
				height: 50px;

			}

		#KV_title_wrapper {
			width: 100%;
			height: 400px;
		}

		.title {
				text-align: center;
				font-weight: bold;
				font-size: 2.3em;
        margin: 80px 0 15px;
		}

		#KV_wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 50px;
		}

		.text {
			margin: 0 80px auto;
			text-align: center;
		}

		.text img {
			width: 40%;
			text-align: center;
			margin-bottom: 20px;
			}

		.btn {
			  display: inline-block;
			  padding: 21px 70px;
			  font-size: 20px;
			  text-align: center;
			  text-decoration: none;
			  cursor: pointer;
			  font-weight: bold;
				background-color: #ff6600;
			  color: #fff;
			  border-radius: 50px;
				box-shadow: 1px 1px 0px -1px rgba(255,255,255,0.75) inset,-3px -3px 10px 0px rgba(0,0,0,0.75) inset;
			}

			@media screen and (max-width:766px){
				#KV_title_wrapper{
					padding: 20px;
				}
				#KV_wrapper {
					display: block;
					margin: 20px 0;
					}

					.text {
						margin: auto;
						text-align: center;
					}
					.text img {
						margin: 20px 50px;
						width: 50%;
						}
						.btn {
							margin: 30px 0;
							font-size: 18px;
						}
						.kv_img img {
							width: 100%;
						}
					}
					@media screen and (max-width:1024px){
						#KV_wrapper {
							margin: 30px 5px;
							}
							.text {
								margin: auto;
								text-align: center;
							}
					}


			#sab_kv {
			    background-image: url('img/sab_bg.jpg');
			    background-size: cover; /* 画像を領域に合わせて表示 */
			    background-position: center; /* 画像を中央に配置 */
			    width: 100%; /*幅を100%に設定*/
			    height: 250px; /*適切な高さを指定 */
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 100px;
			}

			#sab_kv .section-title {
				margin: 0 0 10px 100px;
				font-size: 18px;
			}

			.checkbox_wappar {
				position: absolute;
				margin-left: 50px;
			}


			@media screen and (max-width:766px){
					#sab_kv{
						display: block;
						margin-top: 100%;
						height: 550px;
						text-align: center;
					}
					.checkbox_wappar {
					display: none;
				}
				.sab_bg {
						margin: 20px;
				}
				}

				@media screen and (max-width:1024px){
				#sab_kv .section-title {
				margin: 35px;
				}
				.sab_bg {
					  margin: 10px;
				}
				.sab_bg p{
				    line-height: 20px;
						}
						.checkbox_wappar {
							margin: 0;
					}
			}

			#sab_kv2 {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 80px 0 60px;
			}

			.contents_img {
				width: 25%;
			}

			.section-title2 {
				font-size: 25px;
				margin-left: 60px;
			}

			@media screen and (max-width:766px){
				#sab_kv2 {
				  display: block;
				}
				.section-title2 {
					margin: 20px;
				}
				.contents_img img{
					width: 350px;
				}
			}
			@media screen and (max-width:1024px){
				#sab_kv2 {
				  display: block;
				}
				.contents_img {
					width: auto;
					text-align: center;
				}
			}

			#sab_kv3 {
				width: 100%
			}

			.sab_bg3 {
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing:border-box;
				margin: 60px;
			}
			.section-title3 {
				float: left;
				border-right:4px solid #336CAB; /*線の設定*/
				padding:2px 8px; /*余白の設定*/
				font-size: 28px;
			}

			#sab_kv3 .sab_text {
				margin-right: 20px;
			}


			@media screen and (max-width:766px){
				#sab_kv3 {
				  padding: 10px 20px;
				}
				.sab_bg3 {
					text-align: center;
					flex-direction: column;
					margin: 0px 0px 50px 0px;
				}
				.contents1_img {
					width: 100%;
					order: 2;
				}
			}
			@media screen and (max-width:1024px){
				.sab_bg3 {
					flex-direction: column;
					margin-bottom: 50px;
				}
				.contents1_img {
					text-align: center;
					order: 2;
					width: auto;
				}
			}


				 #voice{
				 background-image: url('img/voice_img.jpg');
				 background-size: cover; /* 画像を領域に合わせて表示 */
				 background-position: center; /* 画像を中央に配置 */
				 width: 100%; /*幅を100%に設定*/
				 padding: 10px 60px 80px;
				 margin-top: 100px;
			 }

			 .voice_bg {
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 margin: 10px 150px 10px;
			 }
			 .voice_text {
				 background-color: #ffff
			 }

			 .voice_title {
			 font-size: 25px;
			 font-weight: bold;
			 margin: 50px 150px;
			 padding-top: 30px;
		 }

		 .voice_bg ul{
			 width: 13%;
		 }

		 @media screen and (max-width:766px){
			 #voice {
				 padding: 23px 0px;
				 margin: 0;
			 }
			 .voice_title {
				 margin: 40px 20px;
			 }
		  }

			@media screen and (max-width:1024px){
 			.voice_title {
				padding: 0;
			 }
			 .voice_bg {
			 		 margin: 0;
			 	 }
				 .voice_title {
					margin: 50px 10px;
				 }
				 .voice_text {
					 margin: 10px 30px;
				 }
		 }


		 .siryo {
			 margin: 150px 0 200px 0;
		 }

		 .siryo_title {
			color: #336cab;
			text-align: center;
		 }

		 .siryo_text {
			 display: block;
			 margin: 10px 0 40px 0;
			 font-weight: bold;
		 }

		 .btn1 {
 			  display: inline-block;
 			  padding: 21px 70px;
 			  font-size: 20px;
 			  text-align: center;
 			  text-decoration: none;
 			  cursor: pointer;
 			  font-weight: bold;
 				background-color: #ff6600;
 			  color: #fff;
 			  border-radius: 50px;
 				box-shadow: 1px 1px 0px -1px rgba(255,255,255,0.75) inset,-3px -3px 10px 0px rgba(0,0,0,0.75) inset;
 			}




		 form {
		max-width: 600px;
		margin: 20px auto;
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
		display: block;
		margin-bottom: 8px;
		font-weight: bold;
}

input, textarea {
		width: 100%;
		padding: 10px;
		margin-bottom: 16px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
}

input[type="submit"] {
		background-color: #007BFF;
		color: #fff;
		cursor: pointer;
		border-radius: 50px;
}

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



		.footer {
				background-color: #333;
				color: #fff;
				text-align: center;
				padding: 30px 50px 70px;
				bottom: 0;
				width: 100%;
				background-color: #336cab;
		}

		.footer a {
            color: #fff; / リンクの文字色を白に設定 /
					}

		@media screen and (max-width:766px){
			 .siryo {
				 margin: 150px 20px;
			 }
	}