﻿/* メインボックス */
.salesBox 
{
  margin		: auto;                 /* 中央寄せ */
  box-sizing	: border-box;           /* 罫線も含む長さ      */
  background	: #fff;                 /* BOXの背景色         */
  margin        : 2px 2px 0px 2px;                  /* BOXの間     */
}
.salesBox div.salesTopMove
{
  font-size:medium;
}
.salesBox div.salesTopMove:before
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

/* 日付データ */
.salesBox div.salesBaseDate
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #FFFFFF;              /* BOXの背景色         */
  font-size:x-large;
}
.salesBox div.salesBaseDate:before
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

/* Item 情報 */
.salesBox div.salesItem
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #B0C4DE;              /* BOXの背景色         */
  border         : 2px solid #35557f;    /* 枠線の指定          */
  width          : 355px;                 /* BOXの幅     */
  margin         : 2px;                  /* BOXの間     */

  float          : left;                 /* 左から右            */
}

/* シリーズ名（出版社名） */
.salesItem div.salesSeries
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #B0C4DE;              /* BOXの背景色         */
  border         : 2px solid #35557f;    /* 枠線の指定          */
  font-size:large;
  text-align:center;
  height:31px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis; /*Safari用*/
    -o-text-overflow: ellipsis; /*Opera用*/
}

.salesSeries img.saleNewImage 
{
	float:right;
	margin:8px 3px 0px 3px;
}
.salesSeries img.saleNewImage:after 
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

/* 書籍情報 */
.salesItem div.salesBook
{
  background     : #FFFFFF;              /* BOXの背景色         */
}

/* 書籍画像 */
.salesBook div.salesImage
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #FFFFFF;              /* BOXの背景色         */
  width          : 148px;
  height:224px;
  margin: 2px 0px 0px 2px;

  float          : left;                 /* 左から右            */
}

/* タイトル */
.salesBook div.salesTitle
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  background     : #FFFFFF;              /* BOXの背景色         */
  font-size:large;
  margin: 2px 0px 0px 2px;
}

.salesBook div.salesTitle:after 
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

.salesTitle img.salesTitlePickup
{
	float:right;
	margin:5px 5px 0px 3px;
}

/* 著者 */
.salesItem div.salesAuthor
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  margin: 4px 0px 0px 10px;
  font-size:large;
  height:31px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis; /*Safari用*/
    -o-text-overflow: ellipsis; /*Opera用*/
}

/* メモ（発売日/値段） */
.salesItem div.salesMemo
{
  background     : #B0C4DE;              /* BOXの背景色         */
}

/* 発売日 */
.salesMemo div.salesDate
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  margin         : 2px;                  /* BOXの間     */
  width          : 162px;
  text-align	: right;

  float          : left;                 /* 左から右            */
}

/* 値段 */
.salesMemo div.salesPrice
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  margin         : 2px;                  /* BOXの間     */
  width          : 162px;
  text-align:right;

  float          : left;                 /* 左から右            */
}

/* 各種ボタン */
.salesItem div.salesButton
{
  background     : #B0C4DE;              /* BOXの背景色         */
}

.salesItem div.salesButton:after 
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

/* 楽天で購入 */
.salesButton div.salesRakuten
{
  box-sizing	: border-box;
  margin		: 2px;
  width			: 162px;
  text-align:center;

  float			: left;
}

/* Amazonで購入 */
.salesButton div.salesAmazon
{
  box-sizing	: border-box;
  margin		: 2px;
  width			: 162px;
  text-align:center;

  float			: left;
}

/* 書籍詳細情報 */
.salesItem div.salesCaption
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  text-align	 : center;
  margin-top: 4px;
  font-size:large;
}

.salesItem div.salesCaption:before
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

.salesCaption div.salesCaptionBox
{
  box-sizing     : border-box;           /* 罫線も含む長さ      */
  text-align	 : left;
  margin: 2px 10px 0px 10px;
  font-size:medium;
}

.salesCationBox div.salesCaptionIsbn
{
	
}

.salesCaptionIsbn img.salesCaptionPickup
{
	float:right;
	margin:5px 5px 0px 3px;
}

/* 後始末系 */
.salesBox div.salesItem:after 
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

.salesBox:after 
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

.salesBox div.salesResult
{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-left: double 7px #4ec4d3;/*左線*/
    border-right: double 7px #4ec4d3;/*右線*/	
}

.salesBox div.salesResult:before
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}
.salesBox div.salesResult:after
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}
.salesResult div.salesResultBox
{
    margin: 0; 
    padding: 0;	
}
/* サーチボックス */
.searchBaseBox
{
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;	
}

.searchBaseBox span.searchTitle
{
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;	
}

.searchBaseBox div.searchBox
{
    margin: 0; 
    padding: 0;	
}

.searchBaseBox:after
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

/* アコーディオン */
.searchBox details 
{
  border: 1px solid #ccc;
}
.searchBox details:not(:last-child) 
{
  margin-bottom: 2px;
}

/**
 * list-style: none; ←デフォルト三角削除（Chrome非対応）
 * cursor: pointer; ←カーソルをポインターに
**/
.searchBox details summary 
{
  list-style: none;
  cursor: pointer;
  padding: 3px;
  background: #e4e4e4;
  color: #242323;
}
/**
 * Chrome用のデフォルト三角削除
**/
.searchBox details summary::-webkit-details-marker
{
  display: none;
}
/**
 * Font Awesomeのプラスアイコン使用
**/
.searchBox details summary::before
{
  font-family: FontAwesome;
  content: '\f067';
  margin-right: 10px;
}
/**
 * アコーディオンがオープン時はマイナスアイコンに変更
**/
.searchBox details[open] summary::before 
{
  content: '\f068';
}

details div
{
  margin: 0;
  padding: 10px;
}

.searchBox label.formLabel01
{
	margin: 3px 5px 0px 0px;
}

.searchBox input.formFirstDate
{
	margin: 2px 0px 5px 3px;
	width:125px;
}

.searchBox label.formLabel02
{
	margin:0px 5px 0px 5px;
}

.searchBox input.formLastDate
{
	margin: 2px 0px 5px 3px;
	width:125px;
}

.formOption
{
	
}

.formGenre
{
	float:left;
	margin:-10px -5px -5px -10px;
}

.formIsNewDay
{
}

.formLabel03
{
	margin:0px 5px 0px 5px;
}

.formLabel04
{
	margin:0px 5px 0px 5px;
}

.formLabel05
{
	
}

.formLabel06
{
	
}

.formLabel06:after
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

.formTitle
{
	float:left;
}

.formTitleBase:after
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

.formInputTitle
{
	width:135px;
}

.formAuthor
{
	float:left;
}

.formAuthorBase:after
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

.formInputAuthor
{
	width:135px;
}

.formPublisher
{
	float:left;
}

.formPublisherBase:after
{
  display    : block;
  clear      : both;
  height     : 0px;
  visibility : hidden;
  content    : " ";
}

.formInputPublisher
{
	width:135px;
}

.txtIsNewDays
{
	width: 45px;
	text-align: right;
}

.formSubmit
{
  display       : inline-block;
  border-radius : 20%;          /* 角丸       */
  font-size     : 12pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 8px 15px;   /* 余白       */
  background    : #6666ff;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
  border        : 2px solid #6666ff;    /* 枠の指定 */	
  float:right;
  margin:3px 0px 0px 0px;
}
.formSubmit:hover
{
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #6666ff;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}

.formReset
{
  display       : inline-block;
  border-radius : 20%;          /* 角丸       */
  font-size     : 12pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 8px 15px;   /* 余白       */
  background    : #6666ff;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
  border        : 2px solid #6666ff;    /* 枠の指定 */	
  float:left;
  margin:3px 0px 0px 0px;
}
.formReset:hover
{
  box-shadow    : none;        /* カーソル時の影消去 */
  color         : #6666ff;     /* 背景色     */
  background    : #ffffff;     /* 文字色     */
}
