@charset "utf-8";

/*.pのブレイクポイントは1000px（もと1120px jsに設定有り）
---------------------------------------------------------------------------*/
.p #home-names{font-size: 18px; padding-left: 10px;}
.p #menubar ul {
	list-style: none;margin: 0;padding: 10px;
	font-size: 1rem;
	letter-spacing:0.1em;
	line-height: 1;
}


	/*---------------------------------------------------------------------------
	ここから下は画面幅600px以上の追加指定
	---------------------------------------------------------------------------*/
	@media screen and (min-width:600px) {
	
	.sp, .sm, .sh {display: none;}
	.pc {display: block;}
	.md {display: block;}

	main h2 {
		font-size: 2.2rem;
	}
	body.home main h2 {
	margin-top: 15px;
	}
	/*ボックス内のfigure画像*/
	.list figure {
/*		width: 30%;*/
/*		margin-right: 5%;*/
		padding-top: 0.7em;
	}
	
	/*ボックス内のtextブロック*/
	.list .text {
		flex: 1;
		margin-right: 5%;
	}
	.history dl{
		margin-bottom: 55px;
		display: flex;
		align-items:flex-start;
	}
	.history dt{
		font-size: 30px;
		width: 140px;
	}
	.history dd{
		width: calc(100% - 140px);
		font-size: 1.3rem;
	}
	.amazon.md{
		display: flex;
	}
	.history td small{
		display: none;
	}
}


/*---------------------------------------------------------------------------
ここから下は画面幅800px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {


		/*全体の設定
		---------------------------------------------------------------------------*/
		html, body {
			font-size: 15px;	/*基準となるフォントサイズの上書き*/
		}
		
		#mainimg {
			padding-top: 20px;
			object-position: 50px 50%
			height: 500px;
			object-fit:contain;
		}
		#mainimg img{
			max-height: 480px;
		}
		
		/*menubarブロック設定
		---------------------------------------------------------------------------*/
		/*メニューブロック全体*/
		.p #menubar {
			background-color: #802a2e;
			color: #fff;
		}
		.p #home-names{
			opacity: 1;
			font-size: 24px;
		}
		.p #menubar nav{
			opacity: 1;
			display: flex;
			align-items:center;
			justify-content: space-between;
		}
		
		.p #menubar ul {
			margin: 0;
			display: flex;
			align-items:center;
			justify-content: space-around;
		}
		
		
		
		/*2カラムの場合
		---------------------------------------------------------------------------*/
		/*2カラム（.mainと.sub）を囲むブロック*/
		.c2 {
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
		}
		
		/*listブロック
		---------------------------------------------------------------------------*/
		.list-container {
			display: flex;
			flex-wrap: nowrap;
			/*justify-content: space-between;	並びかたの種類の指定*/
		}
		.list-container.center {
			justify-content: center;
		}
		.list {
			flex-direction: column;
			margin-right: 4%;
		}
		.list.mb0 {
			margin-bottom: 0px;
		}
		.list.box3 {
			width: 31%;
		}
		.list.box2 {
			width: 48%;
			margin-bottom: 0px;
		}
		.list.box3:nth-of-type(3n) {
			margin-right: 0;
		}
		.list.box2:nth-of-type(2n) {
			margin-right: 0;
		}
		.list.last {
			margin-right: 0;
		}
		/*ボックス内のfigure画像*/
		.list .figure {
			width: 100%;
			margin-right: 0;
		}
		.list .figure.half {
			width: 50%;
			margin-right: 15px;
			padding-top: 5px;
		}
		/*ボックス内のtextブロック*/
		.list .text, .list .caption {
			margin-right: 0;
			font-size: 0.95rem;
			line-height: 1.7;
		}
		.list .caption {
			margin-right: 0;
			font-size: 1rem;
		}
		/*ボックス内のh4タグ*/
		.list h4 {
			margin: 0 0 10px;	/**/
		}
		
		
		/*テーブル
		---------------------------------------------------------------------------*/
		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta1 caption {
			padding: 5px 15px;		/*上下、左右へのボックス内の余白*/
		}
		
		/*th（左側）、td（右側）の共通設定*/
		.ta1 th, .ta1 td {
			padding: 20px 15px;		/*上下、左右へのボックス内の余白*/
		}
		
		/*th（左側）のみの設定*/
		.ta1 th {
			width: 20%;		/*幅*/
		}
	.footermenu-container{
		padding: 10 20px;
		margin: 0 auto;
	}
	#footermenu li {
		display: inline;
		font-size: 1.05rem;	
		line-height: 2rem;
		padding: 10px 10px;
	}

	.history dt{
		width: 200px;
	}
	.history dd{
		width: calc(100% - 200px);
		font-size: 1.1rem;
	}
	.history td small{
		display: none;
	}
	.age ul, .era ul{
		font-size: 1.5rem;
		line-height: 1.8rem;
	}
	table.tablesorter {
		width: 100%;
		margin: 0;
		font-size: 1rem;
	}
	table.tablesorter thead tr th, table.tablesorter tfoot tr th {
		padding: 4px 12px;
	}
	table.tablesorter tbody td {
		padding: 4px 12px;
	}
	table.tablesorter th:nth-child(1), table.tablesorter td:nth-child(1){width: 10%}
	table.tablesorter th:nth-child(2), table.tablesorter td:nth-child(2){width: 46%}
	table.tablesorter th:nth-child(3), table.tablesorter td:nth-child(3){width: 27%;display: table-cell;}
	table.tablesorter th:nth-child(4), table.tablesorter td:nth-child(4){width: 18%}
	table.tablesorter td:nth-child(3) small{display: none;}

		/*その他
		---------------------------------------------------------------------------*/
		.ws {width: 48%;display: inline;}
		.link{
			font-size: 18px;
			line-height: 18px;
			padding: 6px 12px 3px;
		}
		.amazon.pc{
			display: flex;
		}
}

@media screen and (min-width:900px) {
	/*３本バー（ハンバーガー）アイコン設定
	---------------------------------------------------------------------------*/
	/*ハンバーガーメニューを非表示にする*/
	#menubar_hdr {display: none;}
		
	.main {
		padding-left: 30px;
		padding-right: 30px;
	}
	#home-names{
		font-size: 28px;
	}
	.footermenu-container{
		margin: 0 auto;
		max-width:940px;
		padding-top: 10px;
		padding-bottom: 10px;
		display: flex;
		justify-content: space-between;
	}
	.sp {display: none;}
	.pc {display: block;}

	.age ul, .era ul{
		font-size: 1.3rem;
		line-height: 1.3rem;
	}
	.history td small{
		display: none;
	}
}

@media screen and (min-width:800px) {
	.amazon img{height: 260px;}
}

@media screen and (min-width:800px) {
		body.home #container {
			background: url("/images/img_top_background.jpg") center -280px no-repeat;
		}
}
@media screen and (min-width:900px) {
		body.home #container {
			background: url("/images/img_top_background.jpg") center -180px no-repeat;
		}
		#home-names-sp {
			display: none;
		}
}