.gazou{
	overflow: hidden;
}.gazou img{
	width:100%;
}

.contents{
	position: relative;
	color:white;
}
.yakkan{
	width:60%;
	margin:0 auto;
	padding:10% 0 5% 0;
	display: flex;
	flex-direction: column;
	gap:50px;
}
.contents h1{
	font-size:20pt;
  letter-spacing: 2pt;
  line-height: 1.5;
	display: flex;
	justify-content: center;
	color:#B6815A;
}
.contents h2{
	font-size:15pt;
  letter-spacing: 2pt;
  line-height: 1.5;
}
.contents h3{
	font-size:15pt;
  letter-spacing: 2pt;
  line-height: 1.5;
}
.contents a:hover{
	opacity: 0.5;
	transition: 0.5s;
	
}
.contents p{
	font-size:10pt;
  letter-spacing: 2pt;
  line-height: 2;
}
.contents hr{
	width:15%;
	margin:0 auto;
	color:#B6815A;
	padding-bottom:5%;
}




input[type=radio] {
display: none; /* ラジオボタンを非表示にする */
}

.gender {
position: relative; /* ボックスの位置を指定する */
padding: 0 0 0 42px; /* ボックス内側の余白を指定する */
}
.gender:after, .gender:before {
position: absolute; /* ボックスの位置を指定する */
content: ""; /* ボックスのコンテンツ */
display: block; /* ブロックレベル要素化する */
top: 50%; /* 上部から配置の基準位置を決める */
}
.gender:after {
left: 15px; /* 左から配置の基準位置を決める */
margin-top: -10px; /* チェック枠の位置 */
width: 16px; /* ボックスの横幅を指定する */
height: 16px; /* ボックスの高さを指定する */
border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
border-radius: 50%; /* ボックスの角丸を指定する */
}
.gender:before {
left: 18px; /* 左から配置の基準位置を決める */
margin-top: -7px; /* チェックマークの位置 */
width: 10px; /* ボックスの横幅を指定する */
height: 10px; /* ボックスの高さを指定する */
background: #0171bd;/* ボックスの背景色を指定する */
border-radius: 50%; /* ボックスの角丸を指定する */
opacity: 0; /* 要素を透過指定する */
}
input[type=radio]:checked + .gender:before {
opacity: 1; /* 要素を表示する */
}
.gender:hover:after {
border-color: #0171bd; /* ボックスの境界線を実線で指定する */
}






.contact {
  width: 60%;/*横幅*/
  margin: 0 auto;/*中央寄せ*/
  padding: 10% 0;
}
.contact-ttl{
  font-size: 2em;
  margin-bottom: 40px;
  text-align: center;
	color:white;
}
.contact-table {
  width: 100%;
  margin-bottom: 20px;
}
.contact-item,
.contact-body {
	font-size:1em;
  padding: 20px;
  border: 1px solid #ccc;
	background:white;
	color:black;
}

tr{
	display:flex;
	flex-direction: column;
}
.contact-item {
  text-align: left; /* テキスト左寄せ */
  width: 100%; /* 横幅30%指定（グレーの背景色部分） */
  background-color: #eee; /* グレーの背景色 */
}

.contact-body {
  width: 100%; /* 横幅70%指定（白背景色部分） */
}

input,select{
  border: 1px solid #ccc;
}

.honbun{
	width:100%;
	min-height:100px;
  border: 1px solid #ccc;
}

.red{
	position: relative;
	font-size:0.5em;
	color:red;
	bottom:10px;
	left:5px;
}



.button-box{
	display: flex;
	gap:20px;
	justify-content: center;
}
.sub-button{
	color:white;
	padding:15px;
}
.sub-button:hover{
	opacity: 0.5;
	transition: 0.25s;
}
.re-button{
	color:white;
	padding:15px;
}
.re-button:hover{
	opacity: 0.5;
	transition: 0.25s;
}

.main{
	width:60%;
	margin:0 auto;
	padding:10% 0 5% 0;
	display: flex;
	flex-direction: column;
	gap:50px;
}

.main-logo{
	max-width:300px;
	margin:0 auto;
}
.main-logo img{
	width:100%;
}
.mfe{
	color:red;
	font-size:12pt;
  letter-spacing: 2pt;
  line-height: 2;
	text-align: center;
}
.c-buttonbox{
	margin:0 auto;
}
.c-button{
	color:white;
	padding:15px;display:inline-block;
  border: 1px solid #ccc;
}
.c-button:hover{
	opacity: 0.5;
	transition: 0.25s;
}
.chu{
	color:white;
	font-size:12pt;
  letter-spacing: 2pt;
  line-height: 2;
	text-align: center;
}
.modoru{
	color:white;
	font-size:10pt;
  letter-spacing: 2pt;
  line-height: 2;
	padding-top:20px;
}



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

.yakkan{
	width:90%;
}
.contact {
  width: 90%;
}
.honbun{
}
.main{
	width:90%;
}
.contact-item,
.contact-body {
	font-size:0.8em;
}
}