@charset "utf-8";

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

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

.sns_box {
	max-width: 700px;
	margin: 0 auto 50px;
}

.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 {
 background: #fbff16;
background: -moz-linear-gradient(-45deg,  #fbff16 0%, #ffbd16 22%, #ef017c 68%, #9b12d1 99%); 
background: -webkit-linear-gradient(-45deg,  #fbff16 0%,#ffbd16 22%,#ef017c 68%,#9b12d1 99%); 
background: linear-gradient(135deg,  #fbff16 0%,#ffbd16 22%,#ef017c 68%,#9b12d1 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbff16', endColorstr='#9b12d1',GradientType=1 );
}

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



/*
	title
-------------------------------------------------------------------- */
h2 {
	font-size: 20px;
}

h3 {
	background: #000;
	color: #FFF;
	margin-bottom: 20px;
}

h3 span {
	display: block;
	font-weight: bold;
	border-left: 10px solid #EEE;
	padding: 10px;
	margin: 0 10px;
}


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

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

#main_image ul {
	display: block;
}


/*
	item category
-------------------------------------------------------------------- */

#category ul {
	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;
}


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

#category p {
	width: 70%;
	background: #FFF;
	text-align: center;
	margin: 10px auto 0;
	padding: 3px;
	border: 2px solid #111;
}

#category p span {
	width: 100%;
	display: block;
	background: #111;
	color: #FFF;
	text-align: center;
	padding: 5px 15px;
}


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

.info_wrap .shop_img {
	/* border: 3px solid #000; */
	width: 40%;
	float: left;
	margin-right: 2%;
}

.shop_txt {
	width: 58%;
	margin-bottom: 20px;
	float: right;
}

.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: 20%;
	float: left;
	text-align: justify;
    text-justify: inter-ideograph;
}

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

.info_wrap dt,
.info_wrap dd {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: dashed 1px #CCC;
}

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

.shopinfo_btn a:hover {
	opacity: 0.7;
	transition: 0.4s;
}







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

#contents section {
	padding: 0 20px;
}

.sns_box {
	max-width: 700px;
	margin: 20px;
}

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

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



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

h3 {
	margin-bottom: 20px;
}

h3 span {
	border-left: 10px solid #FFF;
	padding: 10px;
	margin: 0 10px;
}


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

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


/*
	item category
-------------------------------------------------------------------- */

#category li {
	width: 31.3%;
	margin: 0 1% 10px;
	border: 5px solid #000;
}

#category p {
	width: 70%;
	margin: 10px auto 0;
	padding: 3px;
	border: 2px solid #111;
}

#category p span {
	width: 100%;
	padding: 5px 15px;
}


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

.info_wrap .shop_img {
	width: 40%;
	float: left;
	margin-right: 2%;
}

.shop_txt {
	width: 58%;
	margin-bottom: 20px;
	float: right;
}

.info_wrap dt {
	width: 20%;
	float: left;
	text-align: justify;
    text-justify: inter-ideograph;
}

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

.info_wrap dt,
.info_wrap dd {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: dashed 1px #CCC;
}

.shopinfo_btn a {
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.29);
	border-bottom: solid 3px #555;
	text-align: center;
	float: right;
	width: 200px;
	border-radius: 25px;
	padding: 10px;
	margin-top: 10px;
}

}





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

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

#contents section {
	padding: 0;
}

.sns_box {
	max-width: 100%;
	margin: 0 20px 15px;
}

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

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



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

h3 {
	margin-bottom: 10px;
	padding: 5px 0;
}

h3 span {
	border-left: none;
	border-top: 1px dashed #FFF;
	border-bottom: 1px dashed #FFF;
	text-align: center;
	padding: 10px;
	margin: 0;
}


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

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


/*
	item category
-------------------------------------------------------------------- */

#category li {
	width: 48%;
	margin: 0 1% 10px;
	border: 3px solid #000;
}

#category p {
	width: 98%;
	margin: 0px 1% 20px;
	padding: 3px;
	border: 2px solid #111;
}

#category p span {
	font-size: 10px;
	width: 100%;
	padding: 5px 15px;
}


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

.info_wrap .shop_img {
	width: 100%;
	float: none;
	margin: 0 0 10px;
}

.shop_txt {
	width: 90%;
	float: none;
	margin: 0 5% 5px;
}

.info_wrap dt {
	width: 20%;
	float: left;
	text-align: justify;
    text-justify: inter-ideograph;
}

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

.info_wrap dt,
.info_wrap dd {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: dashed 1px #CCC;
}

.shopinfo_btn a {
	width: 80%;
	padding: 10px;
	margin: 5px auto 25px;
	float: none;
}

}