@charset "utf-8";

/*
===================================================================
	Site Name: 大日蓮出版
	Description: CSS filter
	Date: 2019/08
	Author: RY
	このスタイルシートの構成
 	　	*各ページ毎のCSS、会社概要、購入方法、定期購読　他

===================================================================

/* --------------------------------------------------- */
/* 書籍一覧
/* --------------------------------------------------- */

.isbn_code:before {
	position: relative;
  	top: 5px;
  	margin: 0 10px 0 0;
  	content: url('../images/icon_ISBN.svg');
}

.photo:before {
	position: relative;
  	top: 5px;
  	margin: 0 10px 0 0;
  	content: url('../images/icon_photo.svg');
}


/*-----------------------------------------------------
 カテゴリ別 cardstyle
------------------------------------------------------*/
.block {
	overflow:hidden;
	margin:20px 0;
	padding:10px;
	border-bottom:1px solid #ccc;
	background:#fff;
}

.new:before {
	position: relative;
  	top: 5px;
  	margin: 0 10px 0 0;
  	content: url('../images/icon_NEW.svg');
}


.isbn:after {
	position: relative;
  	top: 5px;
  	margin: 0 0 0 10px;
  	content: url('../images/icon_ISBN.svg');
}

.imgL {
	float:left;
	margin:0 0.5em 0.5em 0;
	padding-right:0.5em;
}


.description {
	font-family: "ＭＳ 明朝",serif;
}

.published, .author, .translator, .supervisor, .production, .player, .illustrator, .ISBN, .soldout, .subtitle, .compiler, .binding {
	font-size: 0.75rem;
}

.soldout {
	color: #FF0000;
}
.price {
	font-size: 0.875rem;
	padding-bottom: 8px;
}

.in dt {
	font-size: 110%;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	padding-bottom: 3px;
	margin-bottom: 3px;
}

.isbn {
	margin:0 0.5em 0.5em 0;
	padding-bottom: 3px;
}

table.backnumber {
 /*  width: 380px; */
  border: none;
  font-size: 80%;
}



/*-----------------------------------------------------
 会社概要
------------------------------------------------------*/


/*-----------------------------------------------------
 特定商取引の表示
------------------------------------------------------*/


/*-----------------------------------------------------
購入方法の表示
-----------------------------------------------------*/

/* ここから下がボタンのCSS　*/

a.btn-orange{
  padding: 0.5em;
  margin: 10px 0;
  display: block;
  color: #fff; /*!important;*/
  background: #FF8300;
  text-decoration: none;
  font-weight: bold;
  font-size:1rem;
  border: 2px solid #FF8300;
  border-radius: 5px;
  text-align:center;
}
a.btn-orange:after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: -3px 0 0 5px;
  background: url("../images/icon_PDFdl.svg") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.btn-orange:hover {
  color: #fff;
  border: 2px solid #434343;
  background: #434343;
}


a.btn-green{
  padding: 0.5em;
  margin: 10px 0;
  display: block;
  color: #fff !important;
  background: #00913D;
  text-decoration: none;
  font-weight: bold;
  font-size:16px;
  border-radius: 3px;
  text-align:center;
  text-decoration:none !important;
}
a.btn-green:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -3px 5px 0 0;
  background: url("../images/icon_PDFdl.svg") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.btn-green:hover {
    background: #6FB83F;
}

@media screen and (min-width: 768px){
  a.btn-orange{
    padding: 0.5em 2em;
    margin: 10px auto;
    font-size:1.25rem;
    display:inline-block;
    }
  a.btn-orange:before {
        margin: -3px 0 0 10px;
    }
}

@media screen and (min-width: 768px){
  a.btn-green{
    padding: 0.5em 2em;
    margin: 10px auto;
    font-size:20px;
    display:inline-block;
    }
  a.btn-green:before {
        margin: -3px 10px 0 0;
    }
}

/* ここから「購入の流れ」チャート図のCSS　*/

#flowchart {
	    margin: 0 auto 50px;
	}
	 
#flowchart .box1 {
	    margin: 0 auto 33px;
	    width: 80%;
	    padding: 10px;
	    background: #eee;
	    border: 3px solid #ddd;
	    -webkit-border-radius: 5px;
	    border-radius: 5px;
	    position: relative;
	    text-align: center;
	    font-size: 1.6em; /* テキストの指定 */
	    font-weight: bold; /* テキストの指定 */
	    line-height: 1.4; /* テキストの指定 */
	}

#flowchart .box1:after {
	    border-top: 25px solid #ddd; /* #3ebf96; */
	    border-left: 70px solid transparent;
	    border-right: 70px solid transparent;
	    content: "";
	    position: absolute;
	    bottom: -28px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
	    left: 50%;/* 中央寄せに使用 */
	    margin-left: -70px; /* 中央寄せに使用 */
	}

#flowchart .box1:last-child:after {
	    border: none; /* 最後のボックスだけ三角形を表示しない */
	}

#flowchart .box2{
	    margin: 0 auto 33px;
	    width: 80%;
	    padding: 10px;
	    background: #ddd;
	    border: 3px solid #ddd;
	    -webkit-border-radius: 5px;
	    border-radius: 5px;
	    position: relative;
	    text-align: center;
	    font-size: 1.6em; /* テキストの指定 */
	    font-weight: bold; /* テキストの指定 */
	    line-height: 1.4; /* テキストの指定 */
	}

#flowchart .box2:after {
	    border-top: 25px solid #ddd; /* #3ebf96; */
	    border-left: 70px solid transparent;
	    border-right: 70px solid transparent;
	    content: "";
	    position: absolute;
	    bottom: -28px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
	    left: 50%;/* 中央寄せに使用 */
	    margin-left: -70px; /* 中央寄せに使用 */
	}

#flowchart .box2:last-child:after {
	    border: none; /* 最後のボックスだけ三角形を表示しない */
	}
/*-----------------------------------------------------
 定期購読の表示
-----------------------------------------------------*/