@charset "utf-8";

/*books
---------------------------------------------------------------------------*/
.books_contents01 {
	display: flex;
	flex-direction: column;
}
.books_contents01 .books01_photo {
	width: 100%;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	padding: 4%;
	margin-bottom: 8%;
}
.books_contents01 .books01_photo img{
	width: 100%;
}
.books_contents02{
	display: flex;
	flex-direction: column;
}
/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta2 caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #555;		/*背景色*/
	color: #fff;			/*文字色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta1テーブルブロック設定*/
.ta2 {
	border-top: 1px solid #999;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 4rem;		/*最後の「2rem」がテーブルの下に空けるスペースです。２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta2 tr {
	border-bottom: 1px solid #999;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta2 th, .ta2 td {
	padding: 10px 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta2 th {
	width: 18%;			/*幅*/
	text-align: center;	/*中央よせにする*/
	background: #eee;	/*背景色*/
	font-size: 90%;
}
.red{
	color: #ff0000!important;
}
		/*画面幅768px以上の追加指定*/
		@media screen and (min-width:768px) {
	
			/*PCのみ表示*/
			.books_contents01 {
				display: flex;
				flex-direction: row;
			}
        .books_contents01 .books01_photo {
	            width: 40%;
	            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	            padding: 1.5%;
				height: auto;
				align-self: flex-start;
            }    
		.books_contents01 .books01_txt {
				width: 55%;
				padding: 1.3%;
				margin-left: 5%;
			}
		.books_contents02{
				display: flex;
				flex-direction: row;
				gap:50px 50px;
			}
		.books_contents02 .table_column{
				width: 48%;
			}
		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta2 caption {
					padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
				}
		
		/*th（左側）、td（右側）の共通設定*/
		.ta2 th, .ta2 td {
					padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
				}
		
		/*th（左側）のみの設定*/
		.ta2 th {
					width: 13%;		/*幅*/
					text-align: left;	/*中央よせにする*/
				}

			}/*画面幅768px以上の追加指定ここまで*/


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	

	}/*画面幅900px以上の追加指定ここまで*/