div.g-inner {
	position: relative;
	width: 800px;
	height: 550px;
	margin: 50px auto;
}
#view {
	position: absolute;
	width: 499px;
	height: 373px;
	top: 4px;
	left: 13px;
	overflow: hidden;
}
#view p {
	position: absolute;
	width: 240px;
	height: 150px;
	top: 0px;
	left: -1px;
}
#thumbBtn {
	position: absolute;
	top: 394px;
	right: 21px;
	list-style: none;
	width: 770px;
}
#caption {
	position: absolute;
	top: 31px;
	left: 513px;
	list-style: none;
	width: 262px;
	margin-left: 20px;
}
#thumbBtn li {
    padding: 0 0 0 2px;
    float:left;
    text-align:right;
    width: 150px;
    cursor:pointer;
}
#thumbBtn li img {
    border: solid 1px #ccc;
}
#thumbBtn li.active {
    opacity:0.5;
    filter:alpha(opacity=50);
    -ms-filter: "alpha( opacity=50 )";
}

/* 768px↓のスタイルシート------------------------------------------------- */
@media screen and (max-width: 768px) {
	div.g-inner{
		width: 100%;
	}
	#view p {
		width: 100%;
	}
	#caption {
    position: absolute;
    top: 31px;
    left: 510px;
    list-style: none;
    width: calc( 100% - 530px );
    margin-left: 20px;
	}
}

/* 560px↓のスタイルシート------------------------------------------------- */
@media screen and (max-width: 560px) {
	div.g-inner{
		width: 100%;
		height: 420px;
	}
	#view{
		width: 100%;
		height: 400px;
		left: 0;
	} 

	#view p {
		width: 90%;
		height: auto;
		left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	}
	#caption{
		position: static;
		padding-top: 75%;
		width: 90%;
	}
	div.thumbox{
		height: 400px;
	}
	#thumbBtn{
		position: static;
		width: 100%;
	}
	#thumbBtn li {
		width: 45%;
	}

}/* 消さない */