@charset "utf-8";

/* reset
============================================================*/

html,

body {
  background-color: #fff;
  color:#262626;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:100%;
  -webkit-text-size-adjust : 100% ;/*スマホを横向きにした時のフォントサイズ*/
}

h1, h2, h3, h4, h5, h6, p, th, td, address, small, i {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: 500;
  font-style: normal;
}

ul, dl, dt, dd {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: 500;
  font-style: normal;
}

ol {
  margin: 0 0 0 30px;
  padding: 0;
  font-weight: 500;
  font-style: normal;
}

img, object, embed {
  border: 0;
  vertical-align: bottom;
}

img {
	max-width: 100%;
	height: auto;
}
.img100{
	width:100%;
}


input {
    vertical-align : middle;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

.bold{
	font-weight:bold;
}

.full {
	width: auto;
}

.hoge {
	overflow: hidden;
	width:90%; }
}

.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.clear { clear:both; } 

.position-r{
	float: right;
}

/* --- テキストスタイル --- */

h3.mgreen {
	font-weight:bold;
	padding:0 0.5em;
	margin:2em 0 0.5em 0;
	color:#494949;
	border-left: solid 5px #eead1a;
}

a.white{
	color:#FFFFFF;
}

.mincho{
	font-family:"Sawarabi Mincho","游明朝", YuMincho ,serif;
}

.bold{
	font-weight:bold;
}

.font12{
	font-size:12px;
}
.font13{
	font-size:13px;
}
.font14{
	font-size:14px;
}
.font16{
	font-size:120%;
}
.font20{
	font-size:20px;
}
.font28{
	font-size:28px;
}
.gray{
	color:#999999;
}
.purple{
	color:#792990;
}
.red{
	color:#ff3300;
}
.yamabuki{
	color:#eead1a;
}

.white{
	color:#FFFFFF;
}
.green{
	color:#3c8b39;
}

.orange{
	color:#ff7233;
}

.pink{
	color:#e06685;
}

.blue{
	color:#194392;
}
.navy{
	color:#494d74;
}

.contents{
	margin:auto 20px;
	text-align:center;
}

.placeholder{
    color:#666;
}

input.fleft{float:left;}
label{display:block; overflow:hidden;}

.width100{
	width:100px;
}

.width70{
	width:70px;
}

.height100{
	height:100px;
}

/*水平線のデザイン*/
.hr-pgray{
	height: 4px;
	background-color: #DBE0D7;
	border: none;
	color: #DBE0D7;
}

.hr-gray{
	height: 1px;
	background-color: #d3d6d1;
	border: none;
	color: #DBE0D7;
}


/* --- マージン設定 --- */

.imgr5{
	margin-right:5px;
}

.imgr10{
	margin-right:10px;
}

.margin10a{
	margin:10px 10px;
}

.margin15{
	margin:15px 0;
}

.margin20{
	margin:0px 20px;
}

.margin-b5{
	margin-bottom:5px;
}
.margin-b10{
	margin-bottom:10px;
}
.margin-b20{
	margin-bottom:20px;
}

.padding10a{
	padding:10px 10px;
}
.padding-l20{
	padding-left:1.5em;
}


/* --- 全体のリンクテキスト --- */
	a:link { color: #275e95; text-decoration: none; }
	a:visited { color: #275e95; text-decoration: none; }
	a:hover { color: #275e95; text-decoration: underline; }
	a:active { color: #275e95; text-decoration: none; }

/* --- 白色のリンクテキスト --- */
	a.white:link { color: #ffffff; text-decoration: none; }
	a.white:visited { color: #ffffff; text-decoration: none; }
	a.white:hover { color: #ffffff; text-decoration: underline; }
	a.white:active { color: #ffffff; text-decoration: none; }



/* --- 位置指定 --- */
.center{
	text-align:center;
}

.center100{
	width:100%;
	text-align:center;
}
.right{
	text-align:right;
}
.left{
	text-align:left;
}

.middle{
	vertical-align:middle;
}
.top{
	vertical-align:top;
}

.float-left{
	float: left;
}
.float-right{
	float: right;
}

.img_right{
	float: right;
	margin-left: 15px;
}
.img_left{
	float: left;
	margin-right: 15px;
}

/* --- 表示非表示 --- */
.hide{
	visibility:hidden;
}
.visible{
	visibility:visible;
}

/* --- リストスタイル --- */
ul.list-circle {
	list-style-type: circle;
	padding-left:30px;
}
ul.list-circle li {
	margin:3px 0 10px;
}

ol.list-guide {
	padding-left:1em;
}
ol.list-guide li {
	margin:0.5em 0;
}

/* --- ラインスタイル --- */
.dot-orange{
	border-bottom:1px dotted #ff7233;
}

/* --- フォームスタイル --- */
.form01{
	line-height: 1.2em;
	border:1px solid #469143;
	margin-right:5px;
	max-height:110%;
	height:auto;
	padding:5px;
	font-size:110%;
}

/* --- ページナビ --- */
.pagenav {
	margin: 0 0 10px;
	padding: 10px 10px 5px;
	background: #fff;
	text-align: center;
}
.pagenav li {
	display: inline;
	margin: 0 2px;
	padding: 0;
}
.pagenav li span,
.pagenav li a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 1px 8px;
	background: #fff;
	border: 1px solid #aaa;
	text-decoration: none;
	vertical-align: middle;
}
.pagenav li a:hover {
	background: #eeeff7;
	border-color: #00f;
}

#menu-box{
 display:block;
	width:96%;
	margin-right: auto;
	margin-left : auto;
	text-align:center;
}

.box-orange{
	background-color:#ffebd9;
}



.title-green{
	background-color:#3c8b39;
	padding:5px 15px;
}

/* --- コピーライト --- */
.copyright{
	padding:10px 0px;
	background-color:#78c64c;
	text-align:center;
}

/* --- 検索エリア --- */
.search_area{
display:flex;
width:100%; 
margin:0 auto;
}
.search_area div{
width: calc(100% / 3);
height: 2.3em;
}
.search_container{
  box-sizing: border-box;
  position: relative;
  border: 1px solid #3c8b39;
  display: block;
  padding: 3px 10px;
  border-radius: 8px;
  height: 2.3em;
  width: 400px;
  overflow: hidden;
	text-align:left;
	margin-top:20px;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: "Font Awesome 5 Free";
  border: none;
  background: #3c8b39;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -8px;
  outline : none;
	font-weight:900;
}

/* --- パンクズ --- */
#crumb{
	background-color:#e8ebce;
	padding:3px 10px;
	margin-bottom:30px;
}

#crumb ul {
display: table;
font-size: 13px;
}
#crumb ul li {
margin: 0 10px 0 0;
font-size: 13px;
float: left;
}
#crumb ul li:first-child::before {
padding: 0 3px 0 0;
content: "";
font-family: "Font Awesome 5 Free";
font-size: 14px;
}
#crumb ul li::before {
padding: 0 10px 0 0;
content: "\f105";
  font-family: "Font Awesome 5 Free";
font-size: 14px;
	font-weight:900;
}



.button-green{
	background-color:#3c8b39;
	color:#FFFFFF;
	border-radius: 6px;
	padding:5px 10px;
}

.button-orange{
	background-color:#ff7233;
	color:#FFFFFF;
	border-radius: 6px;
	padding:5px 10px;
}

.button-gray2{
	background-color:#787878;
	color:#FFFFFF;
	border-radius: 6px;
	padding:5px 10px;
}

.button-gray{
	background-color:#787878;
	color:#FFFFFF;
	text-align:center;
	border-radius: 6px;
	padding:2px 6px;
	font-size:14px;
}
.button-seikyu{
	background-color:#3c8b39;
	color:#FFFFFF;
	border-radius: 6px;
	padding:8px 15px;
	margin-bottom:15px;
}
.b-orange{
	position:absolute;
	right:10px;
	top:20%;
	background-color:#ff7233;
	color:#FFFFFF;
	text-align:center;
	border-radius: 6px;
	padding:2px 6px;
	font-size:12px;
}

#headder {
  display: flex;
	  display: -webkit-flex;

}
#logo {
  max-width: 520px;
}
#logo-right {
  -webkit-flex: 1;
  flex: 1;
	background-image: url("../img/background/headder.png");
	background-repeat:repeat-x;
	text-align:right;
}

/* テーブル */
table.tb01 {
  border-collapse: collapse;
	width:500px;
	margin-bottom:20px;
}
table.tb01 td {
  border: solid 1px #5b9e57;
	padding:5px 5px;
}

table.tb01 th {
  border: solid 1px #5b9e57;
	padding:5px 5px;
	background-color:#e3f2de;
	width:150px
}

table.tb02 {
  border-collapse: collapse;
	margin-left:auto;margin-right:auto;
}
table.tb02 td {
  border: solid 0px #5b9e57;
	padding:5px 5px;
	text-align:left;
}
table.tb02 th {
  border: solid 0px #5b9e57;
	padding:5px 5px;
	text-align:left;
}

table.tb03 {
  border-collapse: collapse;
	width:100%;
	margin-bottom:20px;
}
table.tb03 td {
  border: 1px solid #5b9e57;
	padding:5px 10px;
}

table.tb03 th {
  border-top:1px solid #5b9e57;
  border-right:1px solid #5b9e57;
  border-bottom:1px solid #b7ceae;
  border-left:1px solid #5b9e57;
	padding:5px 10px;
	background-color:#e3f2de;
	width:250px;
	text-align:left;
	color:#3c8b39;
	position:relative;
	background-clip: padding-box;
}
table.tb03 th.end {
  border-top:1px solid #5b9e57;
  border-right:1px solid #5b9e57;
  border-bottom:1px solid #5b9e57;
  border-left:1px solid #5b9e57;
	padding:5px 10px;
	background-color:#e3f2de;
	width:250px;
	text-align:left;
	color:#3c8b39;
	position:relative;
	background-clip: padding-box;
}

table.tb04 {
  border-collapse: collapse;
	width:100%;
	margin-bottom:20px;
}
table.tb04 td {
  border: solid 1px #5b9e57;
	padding:5px 10px;
}

table.tb04 th {
  border: solid 1px #5b9e57;
	padding:5px 10px;
	background-color:#e3f2de;
	text-align:center;
	color:#3c8b39;
}

.bg-green{
	background-color:#e3f2de;
}

table.tb05 {
  border-collapse: collapse;
	margin-bottom:20px;
}
table.tb05 td {
  border: solid 1px #5b9e57;
	padding:5px 10px;
}

table.tb05 th {
  border: solid 1px #5b9e57;
	padding:5px 10px;
	background-color:#ffffff;
	text-align:left;
	color:#3c8b39;
}




.list-head{
	margin-top:25px;
}

.list-head li{
	display: inline-block;
	border-right:1px solid #FFF;
}

.list-head li.none{
	display: inline-block;
	border-right:0px solid #FFF;
	margin-left:10px;
	margin-right:20px;
}

/* --- ヘッダーカートデザイン --- */
.cart{
	position: relative;
	border:1px solid #4c9843;
	background-color:#fff;
	padding: 0;
  border-radius: 3px;
	width:150px;
	height:2em;
}
.carttitle{
  position: absolute;
  left:10px;
  top: 5px;
	color:green;
	border-right:1px solid #4c9843;
	padding-right:5px;
}
.cartcount{
  position: absolute;
	right:10px;
  top: 3px;
	color:#4c9843;
}

/* --- タブ切り替えデザイン --- */

#menu{
  margin: 10px auto;

}
#menu li{
  display: block;
  float: left;
  width: 14.2%;
  margin: 0;
  padding: 0;
  font-size: 15px;
 }
#menu li.nor a{
  display: block;
  padding: 12px 0 10px;
	background: -moz-linear-gradient(to bottom,#FFF,#e0e0e0 30%,#FFFFFF); 
	background: -webkit-linear-gradient(to bottom,#FFF,#e0e0e0 30%,#e0e0e0); 
	background: linear-gradient(to bottom,#FFF,#e0e0e0 30%,#FFFFFF); 
	border-top:1px solid #d0d0d0;
	border-right:0px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
  text-align: center;
  text-decoration: none;
}

#menu li.mend a{
  display: block;
  padding: 12px 0 10px;
	background: -moz-linear-gradient(to bottom,#FFF,#e0e0e0 30%,#FFFFFF); 
	background: -webkit-linear-gradient(to bottom,#FFF,#e0e0e0 30%,#e0e0e0); 
	background: linear-gradient(to bottom,#FFF,#e0e0e0 30%,#FFFFFF); 
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
  text-align: center;
  text-decoration: none;
}

#menu li.mselect a{
  display: block;
  padding: 12px 0 10px;
	background: #f2aa36; 
	border-top:1px solid #f2aa36;
	border-right:1px solid #f2aa36;
	border-bottom:1px solid #f2aa36;
	border-left:1px solid #f2aa36;
  text-align: center;
  text-decoration: none;
}

.balloon {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
	padding: 6px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	background: #f2aa36;
	border-top:0px solid #666;
	border-right:0px solid #666;
	border-bottom:0px solid #666;
	border-left:0px solid #666;
}
.balloon:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #f2aa36;
}
.balloon1 p {
	margin: 0;
	padding: 0;
}

#menu li a:hover{
  text-decoration: underline;
}
#toggle{ 
 display: none;
}

#booktitle{
	border-bottom:dotted 1px #3c8b39;
	width:100%;
	padding:0 0 10px 0;
	font-weight:bold;
}

.title{
	padding-left:20px;
}


.d-orange{
	background-color:#f2aa36;
	padding:5px 10px;
}

/* --- 詳細ページ本レイアウト --- */
.container{
		display: flex;
		padding:20px 20px
	}
.bookimg{
		width: 250px;
	}
.main{
		flex: 1;
		order: 2;
}

/* --- 詳細ページ注文数 --- */
.order{
	display: flex;
	width:500px;
	}
.count{
	width: 250px;
	padding:0 20px;
	}
.cart-b{
	flex: 1;
	order: 2;
	text-align:right;
}

/* --- 本の詳細 --- */
.item{
	display: inline-block;
	position: relative;
	width:220px;
	margin:0 30px 50px 30px;
	text-align:left;
	vertical-align:top;
}
.frontcover{
	margin-bottom:17px;
	text-align:center;
}
.booktitle{
	width:220px;
	font-size:95%;
	text-align:left;
	margin-bottom:15px;
	height:60px;
}
.price{
	width:220px;
	font-size:108%;
	margin-bottom:5px;
}

/* --- 詳細はこちらボタン --- */
.detail{
	border:2px solid #80ca57;
	color:#379b0e;
	padding:5px 5px;
	font-size:14px;
	text-align:center;
}
.detail a{
	color:#379b0e;
}

.frame-green{
	border:1px solid #3c8b39;
	width:900px;
	margin:0 auto;
	padding:10px 0;
}

.frame-green2{
	border:1px solid #3c8b39;
	margin:0;
	padding:0;
}

.frame-orange{
	border:1px solid #ff7233;
	width:900px;
	margin:0 auto;
	padding:10px 0;
}


.frame00{
	border:0px solid #3c8b39;
	width:900px;
	margin:0 auto;
	padding:10px 0;
}


/* --- フッターメニュー --- */
ul.fmenu {
	margin: 0 0 10px;
	padding: 10px 0px 5px;
	background: #fff;
	text-align: center;
	width:100%
}
ul.fmenu li {
	display:inline-block;
	margin: 0 10px;
	padding: 0;
}
ul.fmenu li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  color: #eead1a; /*アイコン色*/
	font-weight:900;
	padding-right : 5px;
}

/* スクロール固定table  */

/* 外枠 */
div.x_data_area {
  max-width: 900px;
  overflow: hidden; /* floatさせた要素を内包しているため指定 */
  border-right: 1px solid #5b9e57;
  border-bottom: 0px solid #5b9e57;
  border-left: 1px solid #5b9e57;
}
 
/* ロック部分 */
div.lock_box {
  float: left;
  /*width: 200px; */
  width: 140px;
}
 
/* 横スクロール部分 */
div.x_scroll_box {
  float: left;
   /*width: 699px; */
  width: 758px;
  border-left: 0px solid #CCC;
  overflow-y: hidden; /* 縦スクロール非表示 */
  overflow-x: scroll; /* 横スクロール */
}
 
/* テーブル */
.width500 {
  /*width: 200px; */
  width: 140px;
}
 
.width400 {
  width:760px;
}
 
table.data {
  table-layout: fixed; /* 内容を固定 */
  border-collapse: separate;
  border-spacing: 0; /* tableのcellspacing="0"の代わり */
}
 
table.data th {
  border-top: solid 1px #5b9e57;
  border-bottom: solid 1px #5b9e57;
  border-right: solid 1px #5b9e57;
	padding:5px 10px;
	background-color:#e3f2de;
	text-align:center;
	color:#3c8b39;
	font-size:85%;
}
table.data td {
	padding:5px 10px;
  border-right: 1px solid #5b9e57;
  border-bottom: 1px solid #5b9e57;
  overflow: hidden; /* データが幅を超えたとき非表示に */
}
 
table.data th.r_none,
table.data td.r_none {
  border-right: none; /* 右ボーダーの重なりを防止 */
}
 

 
table.data td p {
  margin: 0; /* 余分なマージンを消去 */
}
 
/* IE6 */
table.data {
  _border-collapse: collapse; /* IE6がborder-spacing: 0;に対応していないので */
}
 
/* IE7 */
*:first-child+html table.data {
  border-collapse: collapse; /* IE7がborder-spacing: 0;に対応していないので */
}


/* pc */
@media print, screen and (min-width: 781px) {
/*ここにpc用スタイルを記述*/
#headder {
  display: flex;
	  display: -webkit-flex;

}
#logo {
  max-width: 520px;
}
#logo-right {
  -webkit-flex: 1;
  flex: 1;
	background-image: url("../img/background/headder.png");
	background-repeat:repeat-x;
	text-align:right;
}

.pcnone { display: none;}

.br-sp {
  display:none;
}

.br-pc {
  display:block;
}

}



 
/* tablet  */
@media only screen and  (min-width: 641px) and (max-width: 780px)  {
/*ここにtablet用スタイルを記述*/
.spnone {
	display: none;
  }

.br-sp {
    display:block;
  }

.br-pc {
    display:none;
  }

#logo {
  width: 100%;
  max-width: 780px;
  background-image: url("../img/background/tb-head.png");
}

#logo img {
	width: auto;
}

#hbottom{
  width: 100%;
	background-image: url("../img/background/sp-head.png");
	background-repeat:repeat-x;
	height:49px;
	position: relative;
}

#hbottom-l{
  position: absolute;
  left:10px;
  bottom: 15px;
}

#hbottom-r{
  position: absolute;
  right:10px;
  bottom: 15px;
}

.frame-green{
	border:1px solid #3c8b39;
	width:100%;
	margin:0 auto;
	padding:10px 0;
	overflow:hidden;
}

.frame-orange{
	border:1px solid #ff7233;
	width:100%;
	margin:0 auto;
	padding:10px 0;
}

.frame00{
	border:0px solid #3c8b39;
	width:98%;
	margin:0 auto;
	padding:10px 0;
}

.title{
	padding-left:0px;
	font-size:125%;
}

.bookimg{
		margin:15px 0;
		text-align:center;
	}

/* スクロール固定table  */

/* 外枠 */
div.x_data_area {
  width: 100%;
  min-width: 350px;
  overflow: hidden; /* floatさせた要素を内包しているため指定 */
  border-right: 1px solid #5b9e57;
  border-bottom: 0px solid #5b9e57;
  border-left: 1px solid #5b9e57;
}
 
/* ロック部分 */
div.lock_box {
  float: left;
    /*width: 200px; */
   /*width: 140px; */
   width: 130px;
   }
 
/* 横スクロール部分 */
div.x_scroll_box {
  float: left;
  width: auto;
  max-width: 80%;
  border-left: 0px solid #CCC;
  overflow-y: hidden; /* 縦スクロール非表示 */
  overflow-x: scroll; /* 横スクロール */
}
 
/* 横スクテーブル */
.width500 {
  width: 130px;
}
 
.width400 {
  width:760px;
}
 
table.data {
  table-layout: fixed; /* 内容を固定 */
  border-collapse: separate;
  border-spacing: 0; /* tableのcellspacing="0"の代わり */
}
 
table.data th {
  border-top: solid 1px #5b9e57;
  border-bottom: solid 1px #5b9e57;
  border-right: solid 1px #5b9e57;
	padding:5px 10px;
	background-color:#e3f2de;
	text-align:center;
	color:#3c8b39;
	font-size:80%;
}
table.data td {
	padding:5px 10px;
  border-right: 1px solid #5b9e57;
  border-bottom: 1px solid #5b9e57;
  overflow: hidden; /* データが幅を超えたとき非表示に */
}
 
table.data th.r_none,
table.data td.r_none {
  border-right: none; /* 右ボーダーの重なりを防止 */
} 
 
table.data td p {
  margin: 0; /* 余分なマージンを消去 */
}
 
/* IE6 */
table.data {
  _border-collapse: collapse; /* IE6がborder-spacing: 0;に対応していないので */
}
 
/* IE7 */
*:first-child+html table.data {
  border-collapse: collapse; /* IE7がborder-spacing: 0;に対応していないので */
}

/* --- 詳細ページ注文数 --- */
.order{
	display: inline;
	width:100%;
	}
.count{
	display: inline;
	width:100%;
	padding:0 10px;
	}
.cart-b{
	display: inline;
	text-align:right;
}
.d-orange{
	background-color:#f2aa36;
	padding:5px 10px;
}

/* テーブル */
table.tb01 {
  border-collapse: collapse;
	width:100%;
	margin-bottom:20px;
}
table.tb01 td {
  border: solid 1px #5b9e57;
	padding:5px 5px;
}

table.tb01 th {
  border: solid 1px #5b9e57;
	padding:5px 5px;
	background-color:#e3f2de;
	width:150px
}

table.tb02 {
  border-collapse: collapse;
	margin-left:auto;margin-right:auto;
}
table.tb02 td {
  border: solid 0px #5b9e57;
	padding:5px 5px;
	text-align:left;
}
table.tb02 th {
  border: solid 0px #5b9e57;
	padding:5px 5px;
	text-align:left;
}

table.tb03 {
	border-collapse: collapse;
	margin-bottom:20px;
}
table.tb03 td {
	display: block;
	border: solid 0px #5b9e57;
	padding:5px 10px;
	width:97%;
}
table.tb03 th {
	display:block;	
	width:97%;
}
table.tb03 th {
	display: block;
	width:97%;
}
table.tb03 th.end {
	display:block;	
	width:97%;
}

table.tb05 {
  border-collapse: collapse;
	margin-bottom:20px;
}
table.tb05 td {
  border: solid 1px #5b9e57;
	padding:5px 10px;
}

table.tb05 th {
  border: solid 1px #5b9e57;
	padding:5px 10px;
	background-color:#ffffff;
	text-align:left;
	color:#3c8b39;
}

.accordion {text-align: center; position: relative;}
.accordion .inner {display: none; position: absolute; top:45px; left:-10px; z-index:999;}
.accordion p{cursor: pointer;}
.accordion .inner li{padding: 10px 10px; background-color:#3b8639; color:#FFFFFF; border-bottom:1px solid #FFFFFF; max-width:100%; min-width:240px; text-align:left }

.accordion .inner li a{
	color:#FFFFFF;
	text-decoration:none;
}


.accordion .inner li a:before{
	font-family: "Font Awesome 5 Free";
	content:  "\f0da";
  margin-top: -6px;
	margin-left:5px;
	font-weight:900;
	padding-right:15px;
	color:#FFFFFF
}

/* --- 検索エリア --- */
.search_area{
display:block;
}
.search_area div{
width: calc(100% - 20px);
margin-left:20px;
}
.search_container{
  box-sizing: border-box;
  position: relative;
  border: 1px solid #3c8b39;
  display: block;
  padding: 3px 10px;
  border-radius: 8px;
  height: 2.3em;
  width: 96%;
  overflow: hidden;
	text-align:left;
	margin-top:20px;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: "Font Awesome 5 Free";
  border: none;
  background: #3c8b39;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -8px;
  outline : none;
	font-weight:900;
}

/* --- ヘッダーカートデザイン --- */
.cart{
	position: relative;
	border:1px solid #4c9843;
	background-color:#fff;
	padding: 0;
  border-radius: 3px;
	width:150px;
	height:2em;
}
.carttitle{
  position: absolute;
  left:10px;
  top: 5px;
	color:green;
	border-right:1px solid #4c9843;
	padding-right:5px;
}
.cartcount{
  position: absolute;
	right:10px;
  top: 3px;
	color:#4c9843;
}

/* --- フッターメニュー --- */
ul.fmenu {
	width:250px;
	margin:0 auto;
	padding: 10px 10px 20px 10px;
	background: #fff;
	text-align: center;
}
ul.fmenu li {
	display: inline-block;
	width:100%;
	margin: 0 10px;
	padding: 0;
	text-align: left;
}
ul.fmenu li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  color: #eead1a; /*アイコン色*/
	font-weight:900;
	padding-right : 5px;
}




.list-head{
	margin-top:25px;
}

.list-head li{
	display: inline-block;
	border-right:1px solid #FFF;
}

.list-head li.none{
	display: inline-block;
	border-right:0px solid #FFF;
	margin-left:50px;
	margin-right:50px;
}

/* --- タブ切り替えデザイン --- */

#menu{
    display: none;
  }
#menu li{
    width: 100%;
  }

#menu li.nor a{
  display: block;
  padding: 12px 10px;
	background: #FFFFFF; 
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
  text-align: left;
  text-decoration: none;
}

#menu li.mend a{
  display: block;
  padding: 12px 10px;
	background: #FFFFFF; 
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
  text-align: left;
  text-decoration: none;
}

#menu li.mselect a{
  display: block;
  padding: 12px 10px;
	background: #fff; 
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
  text-align: left;
  text-decoration: none;
}

 #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #FFF;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #79bd3a;
    color: #000;
    text-align: left;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before{
	font-family: "Font Awesome 5 Free";
	content:  "\f107 ";
  margin-top: -6px;
	margin-left:5px;
	font-weight:900;
	padding-right:15px;
	color:#79bd3a
 }


/* --- 本の詳細 --- */
.item{
	display: block;
	position: relative;
	max-width:100%;
	margin:0 20px 10px 20px;
	text-align:left;
	vertical-align:top;
	height:200px;
}
.frontcover{
	margin-bottom:10px;
	text-align:center;
	position: absolute; top:0px; left:0px ;
}
.booktitle{
	max-width:80%;
	font-size:14px;
	text-align:left;
	margin-bottom:15px;
	height:80px;
	position: absolute; top:0px; left:140px;
}
.price{
	max-width:100%;
	font-size:14px;
	margin-bottom:5px;
	position: absolute; top:70px; left:140px ;
}

/* --- 詳細はこちらボタン --- */
.detail{
	border:3px solid #80ca57;
	color:#379b0e;
	padding:5px 5px;
	font-size:14px;
	text-align:center;
	width:100%;
	position: absolute; top:140px; left:140px ;
}
.detail a{
	color:#379b0e;
}

}





 
/* smartPhone */
@media only screen and (max-width: 640px) {
/*ここにスマホ用スタイルを記述*/

.spnone { display: none;}

.br-sp {
    display:block;
  }

.br-pc {
    display:none;
  }

#logo {
  width: 100%;
  max-width:640px;
}

#logo img {
	width: 100%;
}

#hbottom{
  width: 100%;
	background-image: url("../img/background/sp-head.png");
	background-repeat:repeat-x;
	height:49px;
	position: relative;
}

#hbottom-l{
  position: absolute;
  left:10px;
  bottom: 15px;
}

#hbottom-r{
  position: absolute;
  right:10px;
  bottom: 15px;
}

.frame-green{
	border:1px solid #3c8b39;
	width:100%;
	margin:0 auto;
	padding:10px 0;
	overflow:hidden;
}

.frame-orange{
	border:1px solid #ff7233;
	width:100%;
	margin:0 auto;
	padding:10px 0;
}

.frame00{
	border:0px solid #3c8b39;
	width:98%;
	margin:0 auto;
	padding:10px 0;
}

.title{
	padding-left:0px;
	font-size:125%;
}

.bookimg{
		margin:15px 0;
		text-align:center;
	}

/* スクロール固定table  */

/* 外枠 */
div.x_data_area {
  width: 99%;
  min-width: 318px;
  overflow: hidden; /* floatさせた要素を内包しているため指定 */
  border-right: 1px solid #5b9e57;
  border-bottom: 0px solid #5b9e57;
  border-left: 1px solid #5b9e57;
}
 
/* ロック部分 */
div.lock_box {
  float: left;
    /*width: 200px; */
   /*width: 140px; */
   max-width: 115px;
   }
 
/* 横スクロール部分 */
div.x_scroll_box {
  float: left;
  max-width: 62%;
  border-left: 0px solid #CCC;
  overflow-y: hidden; /* 縦スクロール非表示 */
  overflow-x: scroll; /* 横スクロール */
}
 
/* テーブル */
table.tb02 td {
	display:block;
}
table.tb02 th {
	display:block;	
}
table.tb03 td {
	display:block;
	width:98%;
}
table.tb03 th {
	display:block;	
	width:95%;
}
.width500 {
  max-width: 115px;
}
 
.width400 {
  max-width:765px;
}
 
table.data {
  table-layout: fixed; /* 内容を固定 */
  border-collapse: separate;
  border-spacing: 0; /* tableのcellspacing="0"の代わり */
}
 
table.data th {
  border-top: solid 1px #5b9e57;
  border-bottom: solid 1px #5b9e57;
  border-right: solid 1px #5b9e57;
	padding:5px;
	background-color:#e3f2de;
	text-align:center;
	color:#3c8b39;
	font-size:80%;
}
table.data td {
	padding:5px 6px;
  border-right: 1px solid #5b9e57;
  border-bottom: 1px solid #5b9e57;
  overflow: hidden; /* データが幅を超えたとき非表示に */
}
 
table.data th.r_none,
table.data td.r_none {
  border-right: none; /* 右ボーダーの重なりを防止 */
}
 

 
table.data td p {
  margin: 0; /* 余分なマージンを消去 */
}
 
/* IE6 */
table.data {
  _border-collapse: collapse; /* IE6がborder-spacing: 0;に対応していないので */
}
 
/* IE7 */
*:first-child+html table.data {
  border-collapse: collapse; /* IE7がborder-spacing: 0;に対応していないので */
}

/* --- 詳細ページ注文数 --- */
.order{
		display: inline;
		width:100%;
	}
.count{
	display: block;
	width:100%;
	padding:0 10px 15px 10px;
	clear:both;
	}
.cart-b{
		display: inline;
	text-align:right;
}

.d-orange{
	background-color:#f2aa36;
	padding:5px 10px;
}

/* テーブル */
table.tb01 {
  border-collapse: collapse;
	width:100%;
	margin-bottom:20px;
}
table.tb01 td {
  border: solid 1px #5b9e57;
	padding:5px 5px;
}

table.tb01 th {
  border: solid 1px #5b9e57;
	padding:5px 5px;
	background-color:#e3f2de;
	width:150px
}

table.tb02 {
  border-collapse: collapse;
	margin-left:auto;margin-right:auto;
}
table.tb02 td {
  border: solid 0px #5b9e57;
	padding:5px 5px;
	text-align:left;
}
table.tb02 th {
  border: solid 0px #5b9e57;
	padding:5px 5px;
	text-align:left;
}

table.tb03 {
	border-collapse: collapse;
	margin-bottom:20px;
}
table.tb03 td {
	display: block;
	border: solid 0px #5b9e57;
	padding:5px 10px;
}

table.tb03 th {
	display: block;
  border: solid 1px #5b9e57;
	padding:5px 10px;
	background-color:#e3f2de;
	text-align:left;
	color:#3c8b39;
	position:relative;
}

table.tb05 {
  border-collapse: collapse;
	margin-bottom:20px;
}
table.tb05 td {
  border: solid 1px #5b9e57;
	padding:5px 10px;
}

table.tb05 th {
  border: solid 1px #5b9e57;
	padding:5px 10px;
	background-color:#ffffff;
	text-align:left;
	color:#3c8b39;
}

.accordion {text-align: center; position: relative;}
.accordion .inner {display: none; position: absolute; top:45px; left:-10px; z-index:999;}
.accordion p{cursor: pointer;}
.accordion .inner li{padding: 10px 10px; background-color:#3b8639; color:#FFFFFF; border-bottom:1px solid #FFFFFF; width:400px; text-align:left }

.accordion .inner li a{
	color:#FFFFFF;
	text-decoration:none;
}


.accordion .inner li a:before{
	font-family: "Font Awesome 5 Free";
	content:  "\f0da";
  margin-top: -6px;
	margin-left:5px;
	font-weight:900;
	padding-right:15px;
	color:#FFFFFF
}

/* --- 検索エリア --- */
.search_area{
display:block;
}
.search_area div{
width: calc(100% - 20px);
margin-left:20px;
}
.search_container{
  box-sizing: border-box;
  position: relative;
  border: 1px solid #3c8b39;
  display: block;
  padding: 3px 10px;
  border-radius: 8px;
  height: 2.3em;
  width: 96%;
  overflow: hidden;
	text-align:left;
	margin-top:20px;
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: "Font Awesome 5 Free";
  border: none;
  background: #3c8b39;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.0em;
  right:0px;
  top: -8px;
  outline : none;
	font-weight:900;
}

/* --- ヘッダーカートデザイン --- */
.cart{
	position: relative;
	border:1px solid #4c9843;
	background-color:#fff;
	padding: 0;
  border-radius: 3px;
	width:150px;
	height:2em;
}
.carttitle{
  position: absolute;
  left:10px;
  top: 5px;
	color:green;
	border-right:1px solid #4c9843;
	padding-right:5px;
}
.cartcount{
  position: absolute;
	right:10px;
  top: 3px;
	color:#4c9843;
}

/* --- フッターメニュー --- */
ul.fmenu {
	width:250px;
	margin:0 auto;
	padding: 10px 10px 20px 10px;
	background: #fff;
	text-align: center;
}
ul.fmenu li {
	display: inline-block;
	width:100%;
	margin: 0 10px;
	padding: 0;
	text-align: left;
}
ul.fmenu li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  color: #eead1a; /*アイコン色*/
	font-weight:900;
	padding-right : 5px;
}




.list-head{
	margin-top:25px;
}

.list-head li{
	display: inline-block;
	border-right:1px solid #FFF;
}

.list-head li.none{
	display: inline-block;
	border-right:0px solid #FFF;
	margin-left:50px;
	margin-right:50px;
}

/* --- タブ切り替えデザイン --- */

#menu{
    display: none;
  }
#menu li{
    width: 100%;
  }

#menu li.nor a{
  display: block;
  padding: 12px 10px;
	background: #FFFFFF; 
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
  text-align: left;
  text-decoration: none;
}

#menu li.mend a{
  display: block;
  padding: 12px 10px;
	background: #FFFFFF; 
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
  text-align: left;
  text-decoration: none;
}

#menu li.mselect a{
  display: block;
  padding: 12px 10px;
	background: #fff; 
	border-top:1px solid #d0d0d0;
	border-right:1px solid #d0d0d0;
	border-bottom:1px solid #d0d0d0;
	border-left:1px solid #d0d0d0;
  text-align: left;
  text-decoration: none;
}

  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #FFF;
  }
  #toggle a{
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #79bd3a;
    color: #000;
    text-align: left;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before{
	font-family: "Font Awesome 5 Free";
	content:  "\f107 ";
  margin-top: -6px;
	margin-left:5px;
	font-weight:900;
	padding-right:15px;
	color:#79bd3a
 }

/* --- 本の詳細 --- */
.item{
	display: block;
	position: relative;
	max-width:100%;
	margin:0 20px 10px 20px;
	text-align:left;
	vertical-align:top;
	height:200px;
}
.frontcover{
	margin-bottom:10px;
	text-align:center;
	position: absolute; top:0px; left:0px ;
}
.booktitle{
	max-width:80%;
	font-size:14px;
	text-align:left;
	margin-bottom:15px;
	height:80px;
	position: absolute; top:0px; left:140px;
}
.price{
	max-width:100%;
	font-size:14px;
	margin-bottom:5px;
	position: absolute; top:70px; left:140px ;
}

/* --- 詳細はこちらボタン --- */
.detail{
	border:2px solid #80ca57;
	color:#379b0e;
	padding:5px 5px;
	font-size:14px;
	text-align:center;
	width:45%;
	position: absolute; top:140px; left:140px ;
}
.detail a{
	color:#379b0e;
}


}