﻿/* 本棚
    - 各width はデザイン幅 624 - 左右余白((12+12=24)x2) = 576 で算出
    　漆デザインのため余裕を持たせる
     */

/* 本棚１段 */
div.S1
{
    overflow: hidden;
	text-align: left;
	width: 576px;
	height: 172px;
	line-height: 160px;
	padding-left: 24px; 
	padding-right: 24px;
    background-repeat: no-repeat;
}

/* 本棚３段 */
div.S3
{
    overflow: hidden;
	text-align: left;
	width: 576px;
	height: 492px;
	line-height: 160px;
	padding-left: 24px; 
	padding-right: 24px; 
    background-repeat: no-repeat;
}

/* 本棚５段 */
div.S5
{
    overflow: hidden;
	text-align: left;
	width: 576px;
	height: 812px;
	line-height: 160px;
	padding-left: 24px; 
	padding-right: 24px; 
    background-repeat: no-repeat;
}

div.innerShelf {
    font-size: 0;
    *letter-spacing: -1px; /* IE7 */
    *margin: 8px 0 0 0; /* IE7 */
}

/* 本棚材質
    */

/* 材質：USU */
div.S1_USU
{
    background-image: url('images/hondana_1dan_usu.jpg'); 
}
div.S3_USU
{
    background-image: url('images/hondana_3dan_usu.jpg'); 
}
div.S5_USU
{
    background-image: url('images/hondana_5dan_usu.jpg'); 
}

/* 材質：KOI */
div.S1_KOI
{
    background-image: url('images/hondana_1dan_koi.jpg');
}
div.S3_KOI
{
    background-image: url('images/hondana_3dan_koi.jpg');
}
div.S5_KOI
{
    background-image: url('images/hondana_5dan_koi.jpg');
}

/* 材質：STEEL */
div.S1_STEEL
{
    background-image: url('images/hondana_1dan_steel.jpg'); 
}
div.S3_STEEL
{
    background-image: url('images/hondana_3dan_steel.jpg'); 
}
div.S5_STEEL
{
    background-image: url('images/hondana_5dan_steel.jpg'); 
}

/* 材質：URUSHI */
div.S1_URUSHI
{
    background-image: url('images/hondana_1dan_urushi.jpg'); 
}
div.S3_URUSHI
{
    background-image: url('images/hondana_3dan_urushi.jpg'); 
}
div.S5_URUSHI
{
    background-image: url('images/hondana_5dan_urushi.jpg'); 
}

/* 材質：ENAMEL */
div.S1_ENAMEL
{
    background-image: url('images/hondana_1dan_enamel.jpg'); 
}
div.S3_ENAMEL
{
    background-image: url('images/hondana_3dan_enamel.jpg'); 
}
div.S5_ENAMEL
{
    background-image: url('images/hondana_5dan_enamel.jpg'); 
}

/* 本紹介
    */

/* 本紹介１冊 */
div.I1
{
    background-image: url('images/backI1.jpg');
    box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
    border: 2px solid #568396;
    width: 480px;
    padding-top: 5px;
    padding-bottom: 5px;
}

table.I1 {
    width: 475px;
}

td.I1C1 {
    width: 40%;
    vertical-align: middle;
    text-align: center;
    padding-top: 12px;
    padding-bottom: 12px;
}
td.I1C2 {
    vertical-align: middle;
    padding-left: 10px;
}
.I1ImgBox {
    border-right: 5px double #568396; 
}

/* 本紹介３冊 */
div.I3
{
    background-image: url('images/backI3.jpg');
    box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
    border: 2px solid #568396;
    width: 480px;
}

table.I3
{
    width: 475px;
}

td.I3F
{
    width: 33.33%;
    vertical-align: middle;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 5px;
}
td.I3D
{
    width: 33.33%;
    vertical-align: top;
    text-align: left;
    padding: 1px 15px 10px 20px;
    font-size: small;
}

div.bookTitle
{
    font-size: 125%;
    font-weight: bold;
}

.emptyBook {
    vertical-align: middle;
    text-align: center;
    color: red;
    padding: 1.0em;
}

img.intro {
    height: 150px;
    width: auto;
    vertical-align: middle;
}

img.introS3 {
    max-height: 150px;
    max-width: 148px;
    vertical-align: middle;
}

/* 画像
    */

/* 表表紙画像 */
img.bookSpine {
	border: none;
	vertical-align: bottom;
}
img.bookFront {
	border: none;
	vertical-align: bottom;
    margin-left: 1px;
    margin-right: 1px;
	max-height: 146px;
}

img.H10 {
    height: 120px;
    width: auto;
}
img.H20 {
    height: 128px;
    width: auto;
}
img.H30 {
    height: 135px;
    width: auto;
}
img.H40 {
    height: 146px;
    width: auto;
}

a.bookFront {
    min-width: 60px;
    min-height: 100px;
}

/* 横幅が狭い端末用: 90% 
    ・最大幅: 436.8px
    ・各本は高さを揃えて縮小表示
    */
@media all and (min-width: 0px) and (max-width: 640px)
{
    /* 本棚１段 */
div.S1
{
    overflow: hidden;
	text-align: left;
	width: 518px;
	height: 155px;
	line-height: 144px;
	padding-left: 22px; 
	padding-right: 22px; 
    background-repeat: no-repeat;
    background-size: 562px, auto;
}

/* 本棚３段 */
div.S3
{
    overflow: hidden;
	text-align: left;
	width: 518px;
	height: 443px;
	line-height: 144px;
	padding-left: 22px; 
	padding-right: 22px; 
    background-repeat: no-repeat;
    background-size: 562px, auto;
}

/* 本棚５段 */
div.S5
{
    overflow: hidden;
	text-align: left;
	width: 518px;
	height: 731px;
	line-height: 144px;
	padding-left: 22px; 
	padding-right: 22px; 
    background-repeat: no-repeat;
    background-size: 562px, auto;
}

/* 表表紙画像 */
img.bookFront {
	border: none;
	vertical-align: bottom;
    margin-left: 1px;
    margin-right: 1px;
	max-height: 131px;
    width: auto;
}
img.H10 {
    height: 109px;
}
img.H20 {
    height: 115px;
}
img.H30 {
    height: 121px;
}
img.H40 {
    height: 131px;
}

}
