/*--------------------*/
/*base
/*--------------------*/

body{
	background-color: #000;
	line-height: 24px;
	font-size: 14px;
	font-family:'ヒラギノ明朝 ProN' ;
	color: #fff;
}
img{
	width: 100%;
	vertical-align: bottom;
}
a{
	text-decoration: none;
}

/*--------------------*/
/*header
/*--------------------*/

header{
	padding:15px 0px 0px 10px ;
	display: flex;
	justify-content:space-between;
}
.logo{
	width:84px ;
	height: 49px;
	z-index: 100;
	
}
.nav{
	right: 8px;
	z-index: 100;
}

.drawer_hidden {
	display: none;
}
/* ハンバーガーアイコンの設置スペース */
.drawer_open {
	display: flex;
	height: 60px;
	width: 60px;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 100;/* 重なり順を一番上にする */
	cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
	content: '';
	display: block;
	height: 2px;
	width: 25px;
	border-radius: 3px;
	background: #fff;
	transition: 0.5s;
	position: absolute;
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
	bottom: 12px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
	top: 12px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
	background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
	bottom: 0;
	transform: rotate(45deg);
}
  
#drawer_input:checked ~ .drawer_open span::after {
	top: 0;
	transform: rotate(-45deg);
}
#drawer_input:checked ~ .drawer_open {
	position: fixed;
	top: 15px;
	right: 0px;
}
/* メニューのデザイン*/
.nav_content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%; /* メニューを画面の外に飛ばす */
	z-index: 99;
	background: #000;
	transition: .5s;
	text-align: center;   
	display: flex;
	justify-content:center;
	align-items:center
}
  /* メニュー黒ポチを消す */
.nav_list {
	list-style: none;
}
.nav_item{
	color: #fff;
	font-size: 17px;
	margin-bottom:40px;
}
.nav_item:last-of-type{
	margin-bottom: 0px;
}
.nav_item a{
	color: #fff;
}
.nav_item a:hover{
	color: #A3A3A3;
}
/* アイコンがクリックされたらメニューを表示 */
  #drawer_input:checked ~ .nav_content {
	left: 0;/* メニューを画面に入れる */
}

/*--------------------*/
/*main
/*--------------------*/
.title-text{
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin:55px 0 ;
}

.thanks_text{
	display: block;
	color: #000;
	background-color: #fff;
	margin: 55px 25px;
	padding: 25px;

}

.information-box{
	background-color: #fff;
	padding: 55px 25px;
	position: relative;

}



.etre-box2{
	width: 100%;
	aspect-ratio: 5/3;
	/* height:236px ; */
	background: url(../image/top/house_in_nozawahara_black.jpg);
	background-size:cover;
	background-position:center center;
	/* position: relative; */
	transform: scale(1);
	transition: .3s ease-in-out;
	border-radius: 35px;
}
.etre-box2:hover{
	transform: scale(1.05);
}
.etre-box2_text {
	width: 100%;
	height: 100%;
	/* position: absolute; */
	top: 0;
	left: 0;
	
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 20px;
}
.information-box_text{
	margin-top:25px ;
	display: flex;
}
.information-box_text img{
	width:78px ;
	height: 76px;
}
.information-box_text_item{
	margin-left: 25px;
	color: #000;
}
.information-box_text_item_text{
	font-size: 12px;
}

.site-map{
	background-color: #fff;
	color: #000;
	line-height: 35px;
	padding: 25px ;
	font-weight: bold;
	position: relative;
}
.site-item a{
	color: #000;
}
.site-item a:hover {
	color: #A3A3A3;
}
.site-map::before{
	content: "";
	background-image:
	linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 7px),  /* 幅2の線を作る */
	linear-gradient(to right, #000, #000 2px, transparent 2px, transparent 7px);  /* 幅2の線を作る */
	background-size: 7px 1px, 7px 1px;          /* グラデーションの幅・高さを指定 */
	background-position: left top, left bottom, left top, right bottom ;  /* 背景の開始位置を指定 */
	background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;       /* 横向きにのみ繰り返す */
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	pointer-events: none;
}

/*--------------------*/
/*footer
/*--------------------*/

footer{
	background-color: #fff;
	color: #A3A3A3;
	font-size: 10px;
	line-height: 18px;
	text-align: center;
	padding: 15px 77px;

}
footer img{
	width: 48px;
	height: auto;
	margin-bottom: 10px;
}
.arrow {
    position: relative;
    width: 20px;  /* 必要に応じてサイズを調整 */
    height: 20px; /* 必要に応じてサイズを調整 */
  }
  
  .arrow::after {
    content: "";
    display: block;
    width: 8px;         /* 辺の長さ */
    height: 8px;        /* 辺の長さ */
    position: absolute;
    right: 0;           /* 右側に配置 */
    top: 50%;           /* 縦方向で中央に配置 */
    transform: translateY(-50%) rotate(45deg); /* 45度回転 */
    border-top: solid 2px;  /* 上辺 */
    border-right: solid 2px; /* 右辺 */
    color: inherit;         /* 親要素の色を継承 */
  }  


@media screen and (min-width: 768px){
	/*--------------------*/
	/*header
	/*--------------------*/
	header{
		padding: 25px 8px 0px 25px;
	}
	#drawer_input:checked ~ .drawer_open {
		top: 25px;
		right: 8px;
	}
	/*--------------------*/
	/*main
	/*--------------------*/
	
	.thanks_text{
		margin: 100px;
		padding: 55px;
	}
	
	.information-box{
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}
	.etre-box2{
		width: 350px;
	}
	.information-box_text{
		/* align-items: flex-end; */
		margin: 0 0 0 25px;
	}
	.site-map ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.site-map{
		padding: 25px 100px;
	}
	
}

@media screen and (min-width: 1024px) {
	/*--------------------*/
	/*header
	/*--------------------*/
	header{
		padding: 50px 35px 0px 50px ;
	} 
	#drawer_input:checked ~ .drawer_open {
		top: 50px;
		right: 35px;
	}
	
	.drawer_open span,
	.drawer_open span:before,
	.drawer_open span:after{
		height: 3px;
		width: 40px;
	}
	.logo{
		width: 115px;
		height: auto;
	}

	/*--------------------*/
	/*main
	/*--------------------*/
	.title-text{
		margin: 100px 0;
		font-size: 26px;
		font-weight: normal;
	}
	
	.thanks_text{
		margin: 160px 250px;
		padding: 100px;
	}
	
	.information-box{
		padding: 55px 200px;
		/* justify-content: space-between; */
	}
	
	.information-box_text{
		margin: 0 0 0 50px;
	}
	.site-map{
		padding: 25px 260px;
	}
	.etre-box2{
		width: 400px;
	}
	.information-box_text img{
		width: 100px;
		height: 100px;
	}
	.information-box_text_item{
		font-size: 17px;
		margin-left: 25px;
	}
	.information-box_text_item_text{
		font-size: 14px;
	}
	
}