@charset "utf-8";
/* CSS Document */

/*!----------------------------------------------------*\
   宝石探し
\*!----------------------------------------------------*/

/*!----------------------------------------------------*\
   ///////////▼共通▼
\*!----------------------------------------------------*/
#hoo_new{
	color: #fff;
	background: #000;
	background-image: url("../img/hoo_new/hoo_back_01.png")
}

#hoo_exc,
#hoo_geo,
#hoo_rem{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5rem;
	width: 100%;
}

#hoo_exc h2,
#hoo_geo h2,
#hoo_rem h2{
	margin: 0 auto 1rem auto;
	font-size: 1.8rem;
    text-align: center;
}

/*制限時間・料金*/
.hoo_fee{
	margin-top: 1rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0.5rem 0;
	width: 90%;
	max-width: 350px;
	border-top: solid 2px #008ece;
	border-bottom: solid 2px #008ece;
}
.hoo_fee p{
	line-height: 2rem;
}
.hoo_fee p span{
	margin-right: 0.5rem;
	padding: 0.1rem 0.5rem;
	color: #fff;
	background-color: #008ece;
	border-radius: 3px;
}

/*!----------------------------------------------------*\
   ///////////▼概要▼
\*!----------------------------------------------------*/
#hoo_top{
	margin-bottom: 5rem;
}

.hoo_top_wrap1{
	margin-bottom: 1rem;
	position: relative;
}
.sagaso-logo{
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.sagaso-logo > div{
	margin-left: auto;
	margin-right: auto;
	max-width: 260px;
}
.sagaso-logo p{
	text-align: center;
	text-shadow: 0 0 10px #000,0 0 15px 
}

.hoo_top_image01{
	height: 400px;
	background-image: url(../img/hoo_new/hoo_top_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.hoo_top_image02{
	height: 400px;
	background-image: url(../img/hoo_new/hoo_top_02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.hoo_top_image03{
	height: 400px;
	background-image: url(../img/hoo_new/hoo_top_03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.hoo_top_wrap2{
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	display: flex;
    justify-content: space-evenly;
}
.hoo_top_wrap2 > div{
	width: 32%;
}
.hoo_top_wrap2 > div a:hover{
	opacity: 0.5;
}
.hoo_top_wrap2 > div img{
	width: 100%;
}

/*!----------------------------------------------------*\
   ///////////▼発掘調査コース▼
\*!----------------------------------------------------*/
#hoo_exc h2:before {
	margin-right: 8px;
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url("../img/hoo_new/hoo_icon_01.png");
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: middle;    
}

#exc_wrap01{
	margin-bottom: 1rem;
}
.exc_exp_wrap01{
	height: 300px;
	background-image: url("../img/hoo_new/exc_01.jpg");
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: cover;
}
.exc_exp_wrap02{
	padding: 30px 0;
	height: 470px;
	background-image: url("../img/hoo_new//hoo_back_02.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;  
}
.exc_exp_wrap02 p{
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	color: #000;
}
.exc_exp_wrap02 span.red{
	color: red;
}

#exc_wrap02{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
#exc_wrap02 > div{
	margin-bottom: 0.5rem;
	width: 48%;
}
#exc_wrap02 > div > img{
	width: 100%;
}

/*!----------------------------------------------------*\
   ///////////▼地質調査コース▼
\*!----------------------------------------------------*/
#hoo_geo h2:before {
	margin-right: 8px;
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url("../img/hoo_new/hoo_icon_02.png");
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: middle;    
}

#geo_wrap01{
	margin-bottom: 1rem;
}
.geo_exp_wrap01{
	height: 300px;
	background-image: url("../img/hoo_new/geo_01.jpg");
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: cover;
}
.geo_exp_wrap02{
	padding: 30px 0;
	height: 470px;
	background-image: url("../img/hoo_new//hoo_back_02.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;  
}
.geo_exp_wrap02 p{
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	color: #000;
}

#geo_wrap02{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
#geo_wrap02 > div{
	margin-bottom: 0.5rem;
	width: 48%;
}
#geo_wrap02 > div > img{
	width: 100%;
}

/*!----------------------------------------------------*\
   ///////////▼掘削遠隔コース▼
\*!----------------------------------------------------*/
#hoo_rem h2:before {
	margin-right: 8px;
	content: '';
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url("../img/hoo_new/hoo_icon_01.png");
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: middle;    
}

#rem_wrap01{
	margin-bottom: 1rem;
}
.rem_exp_wrap01{
	height: 300px;
	background-image: url("../img/hoo_new/rem_01.jpg");
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: cover;
}
.rem_exp_wrap02{
	padding: 30px 0;
	height: 470px;
	background-image: url("../img/hoo_new//hoo_back_02.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;  
}
.rem_exp_wrap02 p{
	margin-left: auto;
	margin-right: auto;
	width: 85%;
	color: #000;
}

#rem_wrap02{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
#rem_wrap02 > div{
	margin-bottom: 0.5rem;
	width: 48%;
}
#rem_wrap02 > div > img{
	width: 100%;
}

/*!----------------------------------------------------*\
   ///////////▼クラフト▼
\*!----------------------------------------------------*/
#hoo_cra{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5rem;
	padding-bottom: 8rem;
	width: 90%;
}
#hoo_cra h2{
	margin: 0 auto 1rem auto;
	font-size: 1.8rem;
    text-align: center;
	color: #008ece;
}
.cra_wrap01 p{
	margin-bottom: 2rem;
	text-align: center;
}
.cra_wrap02{	
	display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.cra_wrap02 > div{
	margin-bottom: 1rem;
	width: 45%;
	text-align: center;
}
.cra_wrap02 > div > div > img{
	width: 100%;
}
.hoo_s{
	font-size: 0.7rem;
}


/*!----------------------------------------------------*\
////////////////////////////
............................
   48em 768px以上
............................
////////////////////////////
\*!----------------------------------------------------*/
@media (min-width: 48em) {
	/*!----------------------------------------------------*\
	///////////▼発掘調査コース▼
	\*!----------------------------------------------------*/
	.exc_exp_wrap02,
	.geo_exp_wrap02,
	.rem_exp_wrap02{
		height: 350px;
	}
	/*!----------------------------------------------------*\
	///////////▼クラフト(768px以上)▼
	\*!----------------------------------------------------*/
	.cra_wrap2{
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: 1000px;
	}
	.hoo_s{
		font-size: 0.9rem;
	}
	
}

/*!----------------------------------------------------*\
////////////////////////////
............................
   64em 1024px以上
............................
////////////////////////////
\*!----------------------------------------------------*/
@media (min-width: 64em) {
	/*!----------------------------------------------------*\
	   宝石探し
	\*!----------------------------------------------------*/
	
	/*!----------------------------------------------------*\
	///////////▼top(1024px以上)▼
	\*!----------------------------------------------------*/
	.hoo_top_image01,.hoo_top_image02,.hoo_top_image03,.hoo_top_image04,.hoo_top_image05{
		height: 570px;
	}

	/*!----------------------------------------------------*\
	///////////▼クラフト(1024px以上)▼
	\*!----------------------------------------------------*/
	#hoo_cf{
		margin-bottom: 5rem;
	}
	.hoo_cf_wrap2>div{
		width: 32%;
	}
}