@charset "utf-8";
/* CSS Document */
/*大枠のcss*/
#outer{
	width: 1260px;
	margin: 0 auto;
}
html {
	scroll-behavior: smooth;
}
/*マウスオーバーでふぉんってなる*/
#outer a:hover{
	opacity: 0.7;
}
/*見出し*/
#outer .top_parts{
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: #FFBE98;
	margin-bottom: 50px;
}
#outer .top_parts .top_txt{
	width: 54%;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 0 0 25px;
}
#outer .top_parts .top_txt h1{
	font-size: 2.3em;
	font-weight: bold;
	padding-bottom: 5px;
	line-height: 1.2;
color: #243642}
#outer .top_parts .top_txt p{
	font-size: 1em;
	padding-top: 10px;
color: #243642}
#outer .top_parts .top_img{
	width: 44%;
}
#outer .top_parts .top_img img{
	width: 100%;
}
/*レコメンドのところ*/
#recommend_block{
	border-top: inherit;
}
#recommend_block .ec-shelfRole{
	margin-bottom: 0px;
}
/*カテゴリボタン設定*/
#outer .category_btn{
	width: 100%;
	font-size: 1.2em;
	margin: 20px auto 30px;
}
#outer .category_btn a{
	color: #243642;
	border-bottom: solid 3px #FFB200;
	text-decoration: none !important;
	position: relative;
	display: block;
	text-align: center;
	vertical-align: middle;
	margin: auto;
	padding: 10px;
	font-weight: bold;
	border-radius: 100vh;
	background-color: #FADA7A;
	z-index: 1;
}
#outer .category_btn a:hover{
	opacity: 0.7;
}
#outer .jump {
	width: 100%;
	background-color: #ffffff;
	margin: 0 auto 25px;
	box-sizing: border-box;
	position: sticky;
	top: 0;
	z-index: 4;
	padding-bottom: 0;
	padding-top: 0;
	max-width: 100%;
}
.jump ul._genre_menu {
	width: 100%;
	display: flex;
	flex-flow: row;
	justify-content: center;
	margin: 0;
	box-sizing: border-box;
	list-style: none;
	padding: 0;
	border-top: solid 2px #F7DED0;
	border-right: solid 2px #F7DED0;
}
.jump ul._genre_menu li.global_item {
	width: 25%;
	position: relative;
	border-left: solid 2px #F7DED0;
	border-bottom: solid 2px #F7DED0;
	padding-bottom: 15px;
}
.jump ul._genre_menu li.global_item a {
	display: flex;
	/* Flexboxを適用 */
	align-items: center;
	/* 垂直方向に中央揃え */
	justify-content: center;
	/* 水平方向に中央揃え */
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	box-sizing: border-box;
	color: #243642;
	font-size: large;
	min-height: 100px;
	/* 適切な高さを設定（要素に応じて調整） */
}
.jump ul._genre_menu li.global_item a::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: 90%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 17.5px 0 17.5px;
	border-color: #FFBE98 transparent transparent transparent;
}
a.adjustment {
	padding-top: 90px;
	margin-top: -90px;
	display: block;
}
/*h2*/
#outer h2.uline_b{
	font-size: 1.8em;
	font-weight: bold;
	border-bottom: solid 5px #E2BFB3;
	margin-top: 15px;
	margin-bottom: 15px;
	background: #FEECE2;
	padding-left: 3px;
color: #243642}
/*図あり説明文*/
.type_sec {
	width: 100%;
	margin: auto;
	box-sizing: border-box;
	padding: 10px;
	display: flex;
	justify-content: space-between;
	border: 2px solid #ddd;
	border-radius: 7px;
	margin-bottom: 10px;
}
.sec_text {
	width: 80%;
	padding: 10px;
	box-sizing: border-box;
	margin: auto;
	font-size: 1.2em;
}
.sec_text p {
	line-height: 1.5;
	margin: auto;
}
.sec_img {
	width: auto;
	/*imgをレスポンシブにする為のおまじない*/
}
/*サイズのみょーんってとこ*/
.accordion_test{
	margin: 0 auto 20px;
}
/*アコーディオン チェックボックス隠す*/
.accordion-check {
	display: none;
}
.accordion-label{
	display: flex;
	padding: 10px 60px 5px 0;
	background: #ffffff;
	border-bottom: solid 2px #FFBE98;
	cursor: pointer;
	margin: auto;
	box-sizing: border-box;
	position: relative;
	font-size: 20px;
	font-weight: bold;
	padding-left: 3px;
	color: #243642;
	z-index: 2;
}
.accordion-label:after{
	content: '';
	width: 20px;
	height: 3px;
	background-color: #000000;
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translateY(-50%);
	box-sizing: border-box;
}

.accordion-content{
	display: block;
	height: 0;
	opacity: 0;
	padding: 0 10px;
	transition: .5s;
	visibility: hidden;
}
.accordion-check:checked + .accordion-label + .accordion-content{
	height: auto;
	opacity: 1;
	padding: 10px;
	visibility: visible;
}
/*アコーディオン設定 記号*/
.accordion-label::before,.accordion-label::after{
	content: '';
	width: 20px;
	height: 3px;
	background-color: #000000;
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translateY(-50%);
	box-sizing: border-box;
}
.accordion-label::after{
	transform: translateY(-50%) rotate(90deg);
	transition: .5s;
}
.accordion-check:checked + .accordion-label:after {
	transform: translateY(-50%) rotate(0);
}
/*一旦表*/
.table-container {
	width: 100%;
	overflow-x: auto;
	/* スマホ対応：横スクロール */
	margin: auto;
}
.product-table {
	width: 80%;
	margin: auto;
	border-collapse: collapse;
	text-align: center;
	border: 1px solid #ddd;
	position: relative;
	z-index: 3;
}
/* テーブルのヘッダー */
.product-table thead th {
	background-color: #FCE8D8;
	color: #333;
	font-size: 1.2em;
	font-weight: bold;
	border: 1px solid #ccc;
	padding: 5px;
	text-align: center;
}
/* テーブルのセル */
.product-table td {
	border: 1px solid #ccc;
	padding: 5px;
	font-size: 1.2em;
}
/* 用途セルのスタイル */
.product-table td:nth-child(2) {
	text-align: left;
	padding-left: 10px;
	text-align: center;
}
/* 通常時：下線付きの● */
.product-table td a {
	text-decoration: underline;
	/* 下線を付ける */
	text-underline-offset: 2.5px;
	color: black;
	/* 通常時の色 */
	font-size: 1em;
	/* フォントサイズを継承 */
	transition: color 0.3s ease;
	/* 色が滑らかに変わる */
}
/* マウスオーバー時：●の色が青に変わる */
.product-table td a:hover {
	color: blue;
	/* ホバー時の色 */
	text-decoration: underline;
	/* 下線はそのまま保持 */
}
/* シリーズ画像 */
.product-table thead th .series-image img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 5px auto;
}
/* 背景交互色 */
.product-table tbody tr:nth-child(even) {
	background-color: #fafafa;
}
/*関連記事のところ*/
.column{
	width: 100%;
	margin-bottom: 45px;
}
.column h3{
	font-size: 1.5em;
	font-weight: bold;
	margin: 35px 0 15px;
color: #243642}
.column h3::before{
content: "┃"}
.contents_02{
	display: flex;
	flex-wrap: wrap;
	/*	justify-content: space-between;
	*/
	margin: 0 auto;
}
.contents_02 .item_{
	width: 32%;
	box-sizing: border-box;
	/*	border: solid 1px #cccccc;
	*/
	display: flex;
	flex-direction: column;
}
.contents_02::after{
	content: "";
	display: block;
	width: 32%;
	height: 0;
}
.contents_02 .item_ ul.btns_{
	margin-top: auto;
	margin-bottom: 12px;
	padding: 0 10px;
}
.contents_02 .item_ ul.btns_ li.btn_gazou_{
	position: relative;
}
.item_ .btn_gazou_ a{
	display: block;
	position: relative;
	padding: 10px;
	color: #243642;
	background-color: #FADA7A;
	font-weight: bold;
	border-radius: 20px;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
	border: 2px solid #FFB200;
}
.column ul.tokusyu{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	list-style: none;
	margin: 0 auto;
}
.column ul.tokusyu li{
	width: 23%;
	margin-bottom: 10px;
}
.column ul.tokusyu li img{
	width: 100%;
	height: auto;
}
.column ul.tokusyu::before{
	content: "";
	display: block;
	width: 23%;
	order: 1;
}
.column ul.tokusyu::after{
	content: "";
	display: block;
	width: 23%;
}
.btn_gazou_:hover,.tokusyu li:hover{
	opacity: 0.7;
}
/*スマホの設定*/
@media screen and (max-width: 768px) {

/*↓このページがz-indexを入れ子にしているのでスマホだけメニューヘッダーのz-indexの順位を上げる*/
	#header_fix{
	z-index: 5;
	 
	}
/*↑このページがz-indexを入れ子にしているのでスマホだけメニューヘッダーのz-indexの順位を上げる*/
	#outer{
		width: 100%;
	}
	/*見出し*/
	#outer .top_parts{
		flex-direction: column-reverse;
		margin: 0;
	}
	#outer .top_parts .top_txt{
		width: 100%;
		padding: 15px;
	}
	#outer .top_parts .top_txt h1{
		font-size: 1.2em;
		padding: 5px 5px 0 5px;
	}
	#outer .top_parts .top_txt p{
		font-size: 1em;
		padding: 5px;
	}
	#outer .top_parts .top_img{
		width: 100%;
	}
	#outer .top_parts .top_img img{
		width: 100%;
	}
	/*カテゴリボタン設定*/
	#outer .category_btn{
		width: 80%;
		font-size: 1em;
		margin: 15px auto;
	}
	#outer .category_btn a{
		padding: 6px;
		width: 100%;
	}
	a.adjustment {
		padding-top: 90px;
		margin-top: -90px;
		display: block;
	}
	.accordion-label {
		font-size: 1em;
	}
	.type_sec {
		width: 95%;
		display: block;
		padding: 1px;
	}
	.jump ul._genre_menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		margin: 0 auto;
		align-items: stretch;
		justify-content: flex-start;
	}
	.jump ul._genre_menu li.global_item {
		flex: 0 0 33%;
		/* 幅を2列に均等分割 */
		text-align: center;
		/* テキスト中央揃え */
		box-sizing: border-box;
		/* パディングとボーダーを含める */
		margin: 0;
		padding: 0;
		width: 100px;
		height: 70px;
	}
	.jump ul._genre_menu li.global_item a {
		font-size: 0.8em;
		display: block;
		padding: 1px 1px;
	}
	.jump ul._genre_menu li.global_item a::after {
		top: 90%;
	}
	#outer h2.uline_b {
	font-size: 1em}
	.sec_text {
		font-size: 0.8em;
		height:auto;
	}
	.sec_img {
		width: auto;
		text-align: center;
	}
	.product-table {
		width: 100%;
	}
	.product-table thead th {
		font-size: 0.8em;
	}
	.product-table td {
		font-size: 0.8em;
	}
	/*関連記事のとこ*/
	.column{
		width: 100%;
	}
	.column h3{
		padding: 5px;
		font-size: 1.3em;
		margin: 0;
	}
	.column h3::before{
	content: "┃"}
	.contents_02{
		padding: 0 10px;
	}
	.contents_02 .item_{
		width: 100%;
		margin: 5px auto;
		padding: 0;
	}
	.contents_02::after{
		content: none;
	}
	.contents_02 .item_ ul.btns_{
		font-size: 0.8em;
		width: 100%;
		margin-bottom: 0;
		padding: 0;
	}
	.contents_02 .item_ ul.btns_ li.btn_gazou_{
		position: relative;
	}
	.item_ .btn_gazou_ a{
		padding: 10px 0;
		border-radius: 100vh;
		color: #243642;
		font-weight: bold;
		text-align: center;
		display: block;
		position: relative;
		transition: .3s;
		margin: 5px;
	}
	.column ul.tokusyu{
		width: 96%;
		margin: 0 auto;
		padding: 0;
		float: none;
	}
	.column ul.tokusyu li{
		width: 49%;
	}
a.adjustment{
	display: block;
	padding-top: 150px;
	margin-top: -150px;
}
}