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

#img_show {
	width: 100%;
	background-color: #ffffff;
}

.img_show img {
	padding-bottom:5px;
	padding-left:5px;
}

.square_btn {
	width:80%;
	height:25px;
    display: inline-block;
    padding: 2px 4px 0px;
    text-decoration: none;
    color:#64BCFC;
    border: solid 2px #64BCFC;
    border-radius: 5px;
    transition: .4s;
	text-align:center;
}

.square_btn:hover {
    background: #64BCFC;
    color: white;
}
.square_btn1 {
	width:30%;
	height:25px;
    display: inline-block;
    padding: 2px 4px 0px;
    text-decoration: none;
    color:white;
    border: solid 2px #64BCFC;
    border-radius: 5px;
    transition: .4s;
	text-align:center;
	margin-top:5px;
	background: #64BCFC;
}
.square_btn1:hover {
    background: white;
    color: #64BCFC;
}
h1 {
border-bottom: solid 3px #64BCFC;
position: relative;
text-align:center;
font-size:20px;
}

h1:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #ffc778;
bottom: -3px;
width: 30%;
}
.btn{
  display: inline-block;
  text-decoration: none;
  color: #64BCFC;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  border: double 4px #64BCFC;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  transition: .6s;
}

.btn:hover{
  -webkit-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
.box-text {
	width:95%;
	height:70px;
	margin:0 auto;
	
}
.box-item-name{
	height:25px;
	overflow:hidden;
	font-size:85%;
	border-bottom:1px dotted black;
	color:black;
}
.box-item-price{
	margin-top:5px;
	height:20px;
	font-size:85%;
	overflow:hidden;
	color:black;
}
.table {
	width: 100%;
	display: table;
	table-layout: fixed;
	text-align: center;
	margin: 0;
	padding: 0;
	border-spacing: 1px;
}

.table li {
	display: table-cell;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
	border:1px solid #E1E1E1;
	padding-bottom:10px;
	padding-top:10px;
}
	.table img{
		width:95%;
	}

@media screen and (min-width:0px){
  /*0px以上で適用する内容*/
	.img_show img {
		float: none;
		width:100%;
	}
}

@media screen and (min-width:300px){
  /*300px以上で適用する内容*/
	.img_show img {
		float: none;
		width:100%;
	}
}

@media screen and (min-width:600px){
  /*600px以上で適用する内容*/
	.img_show img {
		width:49%;
		float: left;
	}
}