@charset "utf-8";

/*
	common
-------------------------------------------------------------------- */

#contents section {
	padding: 0 0 20px 0;
}

.sns_box {
	margin: 30px auto;
}

.sns_box a {
	display: block;
	text-align: center;
	float: left;
	color: #FFF;
	font-weight: bold;
	width: 48%;
	padding: 15px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
	border-bottom: 4px solid #CCC;
}

.sns_box .sns01 {
	margin-right: 4%;
	background: rgb(55,228,47);
	background: linear-gradient(145deg, rgba(55,228,47,1) 0%, rgba(9,112,4,1) 100%);
}

.sns_box .sns02 {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fbff16+0,ffbd16+22,ef017c+68,9b12d1+99 */
background: #fbff16; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #fbff16 0%, #ffbd16 22%, #ef017c 68%, #9b12d1 99%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #fbff16 0%,#ffbd16 22%,#ef017c 68%,#9b12d1 99%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #fbff16 0%,#ffbd16 22%,#ef017c 68%,#9b12d1 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbff16', endColorstr='#9b12d1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.sns_box .sns01:hover,
.sns_box .sns02:hover {
	opacity: 0.7;
	transition: 0.4s;
}



/*
	title
-------------------------------------------------------------------- */

h3 {
	position: relative;
	font-weight: bold;
	background: #000;
	box-shadow: 0px 0px 0px 5px #000;
	border: dashed 2px #FFF;
	color: #FFF;
	font-size: 15px;
	padding: 15px;
	margin-bottom: 10px;
}

h3:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #999;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

h4 {
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	color: #000;
	display: flex;
	align-items: center;
	font-size: 20px;
	width: 50%;
	margin: 40px auto;
}

h4:before, h4:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #444;
	display: block;
}

h4:before {
	margin-right: .4em;
}

h4:after {
	margin-left: .4em;
}





/*
	main image
-------------------------------------------------------------------- */

#main_image {
	max-width: 700px;
	margin: 0px auto 30px;
}

#main_image ul {
	display: block;
}


/*
	shop info
-------------------------------------------------------------------- */

.shop_txt {
	margin-bottom: 20px;
}

.info_wrap dl {
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.info_wrap dt {
	width: 15%;
	color: #000;
	float: left;
	text-align: justify;
    text-justify: inter-ideograph;
	font-weight: bold;
}

.info_wrap dd {
	width: 85%;
	color: #555;
	float: left;
	clear: left;
}

.info_wrap dt,
.info_wrap dd {
	border-bottom: 1px dashed #999;
	padding: 15px;
}

.shopinfo_btn a {
	display: block;
	background: #999;
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
	border-bottom: solid 3px #555;
	color: #FFF;
	text-align: center;
	transition: .4s;
	width: 200px;
	border-radius: 5px;
	padding: 10px;
}


/*
	photo
-------------------------------------------------------------------- */

#photo li {
	border: 1px solid #000;
	width: 31.3%;
	float: left;
	margin: 0 1% 10px;
}


/*
	google map
-------------------------------------------------------------------- */

.gmap {
	width: 700px;
	margin: 30px auto;
	border: 15px solid #FFF;	
	box-shadow:0px 0px 5px 1px #CCC;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}

.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}







/* tablet */
@media screen and (max-width: 768px){
/*
	common
-------------------------------------------------------------------- */

#contents section {
	padding: 0 20px 0;
}

.sns_box {
	margin: 30px auto;
}

.sns_box a {
	width: 48%;
	padding: 15px;
}

.sns_box .sns01 {
	margin-right: 4%;
}



/*
	title
-------------------------------------------------------------------- */
h3 {
	font-size: 15px;
	padding: 15px;
	margin-bottom: 10px;
}





/*
	main image
-------------------------------------------------------------------- */

#main_image {
	max-width: 700px;
	margin: 30px 20px;
}


/*
	shop info
-------------------------------------------------------------------- */

.shop_txt {
	margin-bottom: 20px;
}

.info_wrap dt {
	width: 20%;
	float: left;
}

.info_wrap dd {
	width: 80%;
	float: left;
	clear: left;
}

.info_wrap dt,
.info_wrap dd {
	padding: 15px;
}


/*
	photo
-------------------------------------------------------------------- */

#photo li {
	width: 31.3%;
	float: left;
	margin: 0 1% 10px;
}


/*
	google map
-------------------------------------------------------------------- */

.gmap {
	width: 100%;
	margin: 30px auto;
	border: 15px solid #FFF;	
	box-shadow:0px 0px 5px 1px #CCC;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}

.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

}





/* SP */
@media screen and (max-width:640px){

/*
	common
-------------------------------------------------------------------- */

#contents section {
	padding: 0 ;
}

.sns_box {
	margin: 15px 20px;
}

.sns_box a {
	font-size: 11px;
	width: 48%;
	padding: 10px;
}

.sns_box .sns01 {
	margin-right: 4%;
}



/*
	title
-------------------------------------------------------------------- */
h3 {
	font-size: 13px;
	text-align: center;
	padding: 7px 7px 7px 13px;
	margin-bottom: 20px;
	border-left: none;
	border-right: none;
}

h3:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border: none;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

h4 {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	background: #000;
	color: #FFF;
	display: block;
	text-align: center;
	font-size: 13px;
	width: 100%;
	margin: 15px auto;
	padding: 5px 0;
}
	
h4 span{
	display: block;
	border-top: 1px dashed #FFF;
	border-bottom: 1px dashed #FFF;
	padding: 5px 0;
}





/*
	main image
-------------------------------------------------------------------- */

#main_image {
	max-width: 700px;
	margin: 0 0 15px 0;
}


/*
	shop info
-------------------------------------------------------------------- */

.shop_txt {
	margin-bottom: 20px;
}

.info_wrap dt {
	width: 100%;
	float: none;
}

.info_wrap dd {
	width: 100%;
	float: none;
	clear: left;
}

.info_wrap dt {
	background: #EEE;
	border-bottom: none;
	padding: 10px;
}

.info_wrap dd {
	border-bottom: none;
	padding: 15px;
}


/*
	photo
-------------------------------------------------------------------- */

#photo li {
	width: 50%;
	float: left;
	margin: 0;
}


/*
	google map
-------------------------------------------------------------------- */

.gmap {
	width: 90%;
	margin: 10px 5%;
	border: 15px solid #FFF;	
	box-shadow:0px 0px 5px 1px #CCC;
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}

.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}


/*
	banner
-------------------------------------------------------------------- */
	
.bnr {
	margin: 0 20px;
}

}