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

/*********　店舗情報　*********/

#map{
	width: 100%;
	height: 500px;
	border-bottom: solid 1px #d6be45
}
.g_map a{
	color: #d6be45;
	letter-spacing: 3px;
}
.g_map a .mark{
	transition: all 0.2s;
	margin-left: 15px;
	vertical-align: baseline;
	margin-bottom: -3px;
	position: relative;
	display: inline-block;
	height: 13px;
	width: 13px;
	border: solid 1px #d6be45
}
.g_map a .mark::before{
	transition: all 0.2s;
	position: absolute;
	content: "";
	right: -13px;
	top: -1px;
	height: 18px;
	width: 18px;
	display: inline-block;
	border-top: solid 1px #d6be45;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.g_map a .mark::after{
	transition: all 0.2s;
	position: absolute;
	content: "";
	right: -5px;
	top: -5px;
	width: 7px;
	height: 7px;
	border-top: solid 1px #d6be45;
	border-right: solid 1px #d6be45
}
.g_map{
	padding: 20px 0;
	display: block;
	text-align: right
}
.g_map a:hover{
	color: #aee561
}
.g_map a:hover .mark{
	border: solid 1px #aee561
}
.g_map a:hover .mark::before{
	border-top: solid 1px #aee561
}
.g_map a:hover .mark::after{
	border-top: solid 1px #aee561;
	border-right: solid 1px #aee561
}

.info{
	position: relative;
	width: 80%;
	margin: 0 auto;
	border: solid 1px #44c69b;
	margin-bottom: 100px
}
.info::before{
	position: absolute;
	content: "";
	width: 70px;
	height: 70px;
	border: solid 1px #44c69b;
	background: #fff;
	border-radius: 50%;
	display: block;
	top: -36px;
	left: -36px;
	clip: rect(35px, 72px, 72px, 35px);
}
.info::after{
	position: absolute;
	content: "";
	width: 70px;
	height: 70px;
	border: solid 1px #44c69b;
	background: #fff;
	border-radius: 50%;
	display: block;
	bottom: -36px;
	right: -36px;
	clip: rect(0px, 37px, 37px, 0px);
}
.info_wrap{
	position: relative;
	padding: 15px;
}
.info_wrap::before{
	position: absolute;
	content: "";
	width: 70px;
	height: 70px;
	border: solid 1px #44c69b;
	background: #fff;
	border-radius: 50%;
	display: block;
	top: -36px;
	right: -36px;
	clip: rect(35px, 37px, 72px, 0px);
}
.info_wrap::after{
	position: absolute;
	content: "";
	width: 70px;
	height: 70px;
	border: solid 1px #44c69b;
	background: #fff;
	border-radius: 50%;
	display: block;
	bottom: -36px;
	left: -36px;
	clip: rect(0px, 72px, 37px, 35px);
}
.info dl{
	position: relative;
	border: solid 1px #44c69b;
	padding: 6% 7%;
	z-index: 1
}
.info dd{
	padding: 20px;
	padding-left: 240px;
	border-bottom: solid 1px #44c69b;
}
.info dd small{
	letter-spacing: 0
}
.info dt{
	position: absolute;
	left: 8%;
	box-sizing: border-box;
	display: inline-block;
	width: 170px;
	color: #44c69b;
	padding: 5px;
	margin-top: 15px;
	padding-left: 20px;
	border-right: solid 1px #e6e6e6
}


/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 780px){

/*********　店舗情報　*********/
	
#map{
	height: 200px;
}
	
.info{
	width: 100%;
}
.info_wrap{
	position: relative;
	padding: 15px;
}
.info dl{
	padding: 8% 6%
}
.info dd{
	padding: 0;
	padding-bottom: 20px;
	text-align: center;
	border-bottom: solid 1px #44c69b;
	margin-bottom: 20px
}
.info dt{
	position: static;
	left: auto;
	display: block;
	text-align: center;
	width: auto;
	padding: 0;
	margin-top: 0;
	margin-bottom: 20px;
	border-right: none
}
	.info dd span{
		display: inline-block;
		text-align: left
	}

}
/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 700px){
}
@media  screen and (max-width: 321px){
}