/* 共通 */
table, td, th {
  /*all: unset;*/
}
#Contents {
	/*width: 100%;
    max-width: calc(1420px + 2rem);
    margin: 0 auto;
    padding: 0 2rem;*/
}
table#tblLayout {
	/*display: block;*/
}
#tblLayout{
	border-collapse: collapse;
}
.container {
	max-width: 1000px;
	margin: 0 auto 60px;
}

.c-breadcrumb.static_breadcrumb ol {
    width: 100%;
}
/* .container h1 {
	margin-bottom: 1rem;
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    text-align: center;
} */
.column-list .container h2 {
		font-size: 2rem;
		margin: 0 auto 10px;
		padding: 5px 0;
		font-family: "Gothic Medium BBB", sans-serif;
    font-weight: normal;
    line-height: 1.4;
	}
.container h3 {
	font-size: 2rem;
  font-weight: normal;
  margin: 24px 0 12px 0;
}
.container p,.container table {
	font-family: "Gothic Medium BBB", sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	margin: 14px 0;
}
.container > p {
	margin-bottom: 60px;
}
.recommend-Block {
	margin-bottom: 120px;
}

/* パンくずリスト */
.c-breadcrumb.static_breadcrumb {
	width: 100vw;
	padding: 1rem 2rem;
}

/* トップ */
.column-title_1 {
	margin-bottom: 1rem;
    letter-spacing: 0.1em;
    text-align: center;
	font-size: 2.4rem;
}
.column-title_2 {
	font-family: "HonMinKok-L", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 500;
	padding: 5px 15px;
	background-color: #eee;
	margin: 30px auto 10px;
	font-size: 2.8rem;
	letter-spacing: 1.4px;
}

.colum_listtop_image {
	margin-bottom: 1rem;
}


/* 特集誘導バナー設置 */
.guidance_banner ul {
	display: flex;
	flex-direction: row;
	gap: 8px;
}
.guidance_banner > ul > li > a:hover{
	opacity: 0.7;
	transition: all 0.3s;
}
.guidance-banner_text {
	display: inline-block;
	font-family: "Gothic Medium BBB", sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	margin-top: 14px;
}

/* 目次 */
.indexMenuArea {
	margin: 90px 0 80px 0;
}
.indexMenuArea li {
	font-family: "Gothic Medium BBB", sans-serif;
	background-color: #f3f3f3;
	margin: 2px 0;
	font-size: 1.6rem;
	font-weight: 400;
	padding: 2px 14px;
}
.indexMenuArea li a {
	position: relative;
}
.indexMenuArea li a::after {
    display: inline-block;
    content: '';
    width: 7px;
    height: 7px;
    position: absolute;
    top: 35%;
    left: 97%;
    border-top: 1px solid#323333;
    border-right: 1px solid #323333;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}
.indexMenuArea > .indexHeader {
	font-family: "HonMinKok-L", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 2.2rem;
	font-weight: 400;
}
.indexMenuArea > .indexBottom {
	padding: 0;
}

/* 商品棚 共通 */
.item-title {
	margin: 15px 0;
	padding: 5px 25px;
	/*background-color: #eee;*/
	width: 95%;
}
.item-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;      /* 垂直方向に配置 */
	overflow: hidden;                  /* 溢れた部分を隠す */
	text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
	-webkit-line-clamp: 2;             /* 最大行数を2行に設定 */
}
.item-name-block {
	/*margin: 0 20px;*/
	transition: all 0.3s;
}
.item-name-block > p {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
}
.itemlist li {
	/*margin: 50px 0 120px;*/
	margin: 50px 0;
}
.itemlist li a:nth-of-type(1) {
	display: block;
	width: 60%;
	margin: 0 auto 20px;
}
.itemlist > li > a:nth-of-type(2) {
	width: 60%;
	margin: 0 auto;
}
.itemlist > li > a:nth-of-type(1):hover img {
	opacity: 0.7;
}
.itemlist > li > a:nth-of-type(1):hover .item-name-block {
	opacity: 0.7;
}
.itemlist > li > a {
	display: block;
}
.item-text-block {
	padding: 10px 25px 0;
	width: 95%;
	display: block;
}
.item-text {
	display: block;
	font-size: 16px;
	font-weight: 400;
}
.itemlist li > a > img {
	transition: all 0.3s;
}
/* 商品棚1カラム */
.pc1column > .itemlist {
	display: block;
	width: 85%;
	margin: 0 auto;
}
.pc1column > .itemlist li {
	display: block;
}

/* 商品棚2カラム */
.pc2column > .itemlist {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0 0;
}
.container .pc2column h3 {
	line-height: 24px;
    font-size: 2rem;
    margin: 0 auto 15px;
    width: 93%;
    padding: 0;
}
.pc2column > .itemlist li {
	width: 50%;
	/*margin-bottom: 100px;*/
	margin-bottom: 0px;
}
.column-list .pc2column > .itemlist li {
	margin-top: 20px;
}
.pc2column > .itemlist li a:nth-of-type(1) {
	width: 93%;
}
.pc2column > .itemlist > li > a:nth-of-type(2) {
	width: 93%;
	margin: 0 auto;
	position: relative;
}
.pc2column > .itemlist li a:nth-of-type(1) .item-name-block {
	margin: 0;
}
.pc2column > .itemlist li .item-text-block {
	width: 93%;
	padding: 0;
	margin: 0 auto;
}

.pc2column .item-name-height-1 {
	display: block;
	margin-bottom: 4rem;
}

.pc2column .item-text-height-1,
.pc2column .item-text-height-2,
.pc2column .item-text-height-3,
.pc2column .item-text-height-4,
.pc2column .item-text-height-5 {
	display: block;
}

.pc2column .item-text-height-5 {
	margin-bottom: 19.4rem;
}
.pc2column .item-text-height-4 {
	margin-bottom: 16.2rem;
}
.pc2column .item-text-height-3 {
	margin-bottom: 13rem;
}
.pc2column .item-text-height-2 {
	margin-bottom: 9.8rem;
}
.pc2column .item-text-height-1 {
	margin-bottom: 6.2rem;
}

/* 商品棚3カラム */
.pc3column > .itemlist {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
}
.pc3column > .itemlist li {
	width: 32%;
	/*margin-bottom: 60px;*/
	margin-bottom: 0px;
}
.pc3column .itemlist li a:nth-of-type(1) {
	width: 90%;
}
.pc3column > .itemlist > li > a:nth-of-type(2) {
	width: 90%;
	margin: 0 auto;
}
.pc3column > .itemlist li a:nth-of-type(1) .item-name-block {
	margin: 0;
}
.pc3column > .itemlist li .item-text-block {
	width: 90%;
	padding: 0;
	margin: 0 auto;
}
/* ランキング */
.ranking-Block .itemlist > li {
	margin: 8rem 0 10rem 0;
}
.itemlist > li {
	position: relative;
}
.rank_icon {
	position: absolute;
	top: -3%;
	left: 23%;
	width: 5rem;
	height: 5rem;
	text-align: center;
	line-height: 3rem;
	z-index: 99;
	border-radius: 50%;
	font-size: 2.0rem;
	padding: 1%;
}
.itemlist > li:nth-child(1) .rank_icon {
	background-color: #c9b561;
	color: #fff;
}
.itemlist > li:nth-child(2) .rank_icon {
	background-color: #b9b9b9;
	color: #fff;
}
.itemlist > li:nth-child(3) .rank_icon {
	background-color: #b39769;
	color: #fff;
}
.itemlist > li:nth-child(n+4) .rank_icon {
	border: 1px solid var(--color-grey);
	background-color: #ffffff;
	color: #323333;
	line-height: 2.8rem;
}
.itemlist > li > a > .sso-CmsBrandModule__Heading3 {
	font-size: 1.6rem;
	font-weight: 400;
	margin: 0;
}

.ranking-Block h3 {
	padding: 5px 0px;
}

.itemlist > li > .sso-CmsBrandModule__Text {
	font-weight: 400;
}

/* ボタンコンポーネント */
.item-morelink {
	display: block;
	width: 100%;
	margin: 30px auto 30px;
	padding: 18px 0;
	text-align: center;
	font-size: 14px;
	border: 1px solid #888;
	background-color: #888;
	color: #fff;
	transition: all 0.3s;
	letter-spacing: 0.1rem;
}
.itemlist > li > a:nth-of-type(2):hover .item-morelink {
	opacity: 0.7;
}
.btn_1 a {
	display: block;
	width: 48%;
	/* ↑原因特定↑ pixel表記(px)だとSPデザインにできなくなる。 #tblayoutのmin-widthがなぜかこのwidthの幅と連動している…。
	つまり、全体の横幅がここで設定したwidthより下にならなくなる。 よって、%表記 */
	margin: 30px auto;
	height: 50px;
	line-height: 3.3;
	text-align: center;
	font-size: 1.4rem;
	border: 1px solid #888;
	background-color: #888;
	color: #fff;
	transition: all 0.3s;
	border-radius: 6px;
	letter-spacing: 0.1rem;
	position: relative;
}
.btn_1 a::after {
	content: "";
  position: absolute;
  top: 50%;
  right: 2.5rem;
  z-index: 1;
  transform: translateY(-50%);
  display: block;
  width: 1.9rem;
  aspect-ratio: 19 / 6;
  background: url(../Contents/ImagesPkg/common/icons/ion-btn-arrow-white.svg) center / 100% no-repeat;
}
.btn_1 a:hover {
	opacity: 0.7;
}

/* テーブル */
/*.table-wrapper .column-table {
	white-space: nowrap;
	margin: 0 0 20px;
}*/
.table-wrapper {
	margin-bottom: 70px;
}
.column-table {
	border-collapse: collapse;
	font-size: 1.6rem;
	width: 100%;
}
.column-table > thead {
	background-color: #f0f0f0;
}
.column-table td {
	border: solid 1px #ccc;
	padding: 15px;
}
.column-table th {
	border: solid 1px #ccc;
	padding: 15px;
}
.column-table > thead > tr > th:nth-child(1){
	width: 17%;
}
.column-table > thead > tr > th:nth-child(2){
	width: 31%;
}
.column-table > thead > tr > th:nth-child(3){
	width: 52%;
}

/*コラム一覧*/
.column-list .container h1 {
	margin: 30px 0 40px;
}
.column-list .item-text {
	font-size: 1.3rem;
	font-weight: 500;
}
.column-list .itemlist li a:nth-of-type(1) {
		margin: 0 auto 10px;
}
.update {
	color: #878787;
}
/*タブレットデザイン*/
@media screen and (min-width: 769px) {

}

/* SPデザイン */
@media (max-width: 767px){
	/* 共通 */
	.container {
		max-width: 100vw;
	}
	.container > p {
		margin-bottom: 30px;
	}
	.container h1 {
		font-size: 1.9rem;
		margin: 20px 2.47%;
        line-height: 1.2;
        text-align: left;
	}
	.container h3 {
		font-size: 18px;
		margin: 0 0 10px;
		padding: 5px 2.47%;
		font-family: "Gothic Medium BBB", sans-serif;
        font-weight: normal;
        line-height: 1.4;
	}
	.container p {
		font-size: 14px;
		padding: 0 2.47%;
        line-height: 1.6;
	}
	.container .item-name-block p {
		padding: 0;
		display: none;
	}
	.item-text-block {
		padding: 10px 0 0;
	    width: 100%;
	}
	.pc1column.sp1column .itemlist .item-name {
		display: none;
	}
	.recommend-Block {
		margin-bottom: 60px;
	}
	.table-wrapper {
		overflow-x: auto;
	    overscroll-behavior-x: contain;
	    /*max-width: 63%;*/
	    padding: 0 2.47%;
	}
	.table-wrapper .column-table {
		white-space: nowrap;
		font-size: 1.4rem;
		
	}
	.column-table th:nth-child(1){
		min-width: 17%;
	}
	.column-table th:nth-child(2){
		min-width: 31%;
	}
	.column-table th:nth-child(3){
		min-width: 52%;
	}
	/* トップ */
	.column-title_1 {
		margin-bottom: 25px;
	}
	.column-title_2 {
		padding: 5px 10px;
		font-size: 22px;
		margin: 0 auto 10px auto;
		line-height: 1.4;
		/* (0.07 * (100vw - 4.94%))h3のmargin: auto;の両幅 */
		/* padding: 5px 2.47% 5px calc((0.07 * (100vw - 4.94%)) / 2 + 2.47%); */
		padding: 5px 2.47% 5px;
	}
	/* .container h2 {
		font-size: 22px;
		margin: 0 auto 10px auto;
		line-height: 1.4;
		padding: 5px 2.47% 5px calc((0.07 * (100vw - 4.94%)) / 2 + 2.47%);
	} */
	.colum_listtop_image {
		margin-bottom: 20px;
	}

	/* 特集誘導バナー設置 */
	.guidance_banner {
		padding: 0 2.47%;
		margin-bottom: 30px;
	}
	.guidance_banner ul {
		flex-direction: column;
	}
	.guidance-banner_text {
		margin: 0 0 14px;
	}
	.indexMenuArea {
		margin: 0 auto 40px;
		padding: 0 2.47%;
	}
	.indexMenuArea > .indexHeader {
		font-size: 22px;
		padding: 4px 14px;
	}
	.indexMenuArea li {
		font-size: 14px;
		line-height: 1.4;
        padding: 7px 14px;
	}
	.indexMenuArea li:last-child {
        padding: 0;
	}

	/* 商品棚 spデザイン */
	.sp1column > .itemlist > li > .item-text-block > .item-text {
		font-size: 14px;
		padding: 0;
		margin-top: 10px;
	}
	.sp1column > .itemlist {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0 2.47%;
	}
	.sp1column > .itemlist li {
		width: 100%;
		margin: 20px 0 50px 0;
	}
	.sp1column > .itemlist li a:nth-of-type(1) {
		margin: 0;
		width: 100%;
	}
	.sp1column > .itemlist > li > a:nth-of-type(2){
		width: 100%;
		padding: 0;
	}
	.container .pc2column h3 {
		font-size: 18px;
		margin: 0 0 15px;
	}
	.item-name-block {
		margin: 0 20px;
	}
	.pc2column > .itemlist li .item-text-block {
		width: 100%;
		margin-top: 10px;
	}
	.pc2column .item-name-height-1{
		display: none;
	}
	.pc2column .item-text-height-1,
	.pc2column .item-text-height-2,
	.pc2column .item-text-height-3,
	.pc2column .item-text-height-4,
	.pc2column .item-text-height-5 {
		display: none;
	}
	.pc3column > .itemlist li .item-text-block {
		width: 100%;
	}
	/* ランキング */
	 .container .ranking-Block h3 {
	 	margin: 15px 0;
	 }
	 .container .ranking-Block p {
	 	padding: 0;
	 }
	.ranking-Block > .sp1column > .itemlist {
		margin-top: 40px;
	}
	.ranking-Block > .sp1column > .itemlist > li {
		margin-bottom: 60px;
	}
	.rank_icon {
		position: absolute;
		top: -3%;
		left: 5%;
		width: 4rem;
		height: 4rem;
		text-align: center;
		line-height: 3.9rem;
		z-index: 99;
		border-radius: 50%;
		font-size: 18px;
		padding: 0;
	}
	.itemlist > li:nth-child(n+4) .rank_icon {
		line-height: 3.7rem;
	}
	.sp1column > .itemlist > li > a > .sso-CmsBrandModule__Heading3 {
		font-size: 14px;
		margin: 0 20px;
	}
	.sp1column > .itemlist > li > .sso-CmsBrandModule__Text {
		/*padding: 0 20px;*/
	}
	/* まとめ */
	.btn_1 {
		padding: 0 2.47%;
	}
	.btn_1 a {
		width: 100%;
	}
	/* テーブル */
	/*.table-wrapper {
		overflow-x: scroll;
		padding: 0 20px;
	}*/
	/*コラム一覧*/
	.column-list .container h1 {
		text-align: center;
	}
	.column-list .container h2 {
		font-size: 18px;
		margin: 0 0 10px;
		padding: 5px 0;
		font-family: "Gothic Medium BBB", sans-serif;
    font-weight: normal;
    line-height: 1.4;
	}
}