@charset "shift_jis";

/* ==================================================

   商品詳細に入れ込むパーツ用CSS

   ・売れ筋ランキング（タブ）
   ・特集

   ※注目の商品もういらないかも？

================================================== */

/* ■ 共通設定
================================================== */

.inc_shosai-cmn {
	position: relative;
	width: 100%;
	max-width: 900px;
	overflow: hidden;
	margin: 0 auto 40px;
}

.inc_shosai-cmn .midashi {
	position: relative;
	width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
	font-size: 20px;
    line-height: 1;
    margin: 30px 0;
    border-bottom: 1px solid #C1B8A9;
    padding-bottom: 20px;
}


/* ■ 売れ筋ランキング（タブ）
================================================== */


/* ---------------- Tabs ---------------- */
.top_tabs {
	position: relative;
	/* overflow: hidden; */
	overflow: visible;
	border-bottom: 1px solid #ccc;
	background: #fff;
	/* コメントアウトを外せばスクロール固定（ランキングの上に貼り付く感じ） */
	/* position: sticky; top: 0; z-index: 10; */
}

.top_tablist {
	position: relative;
	display: flex;
	gap: 20px;
	padding: 0 0 8px;
	box-sizing: border-box;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	/* スクロールバー非表示は「ここだけ」に限定 */
	scrollbar-width: none;
	-ms-overflow-style: none;

	/* ズレ防止：左右パディングは極力 0 に（必要ならJS側で加算が要る） */
	padding-inline: 0;
}
.top_tablist:focus-visible { outline: none; }
.top_tablist::-webkit-scrollbar { display: none; }

.top_tab {
	position: relative;
	height: 44px;
	display: inline-flex;
	align-items: center;
	border: 0;
	background: none;
	padding: 0;
	color: var(--main-clr-gray);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.top_tab[aria-selected="true"]{ color: var(--clr-ss-black); }
.top_tab:focus{ outline: none; }
.top_tab:focus-visible{
  outline: 2px solid var(--main-clr-gray);
  outline-offset: 2px;
  border-radius: 4px;
}

.top_inkbar {
	position: absolute;
	bottom: 0;
	height: 3px;
	background: var(--main-clr-red);
	width: 0;
	left: 0;
	transition: transform .25s ease, width .25s ease;
	will-change: transform, width;
}

/* -------------- Panels / Cards -------------- */
.top_panel {
	display: none;
	padding: 16px 0 0;
}
.top_panel[aria-hidden="false"]{ display:block; }



.top_panel { display: none; }
.top_panel.is-active { display: block; }





/* ■ 特集
================================================== */

.list_shosai-feature {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 20px;
}
.list_shosai-feature > li { position: relative; }
.list_shosai-feature > li > a { display: block; }
.list_shosai-feature > li > a img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.list_shosai-feature > li:hover > a { opacity: 0.8; }

/* カラムパーツ */
.pc_col1 > li { width: 100%;}
.pc_col2 > li { width: calc((100% - 20px*1)/2);}
.pc_col3 > li { width: calc((100% - 20px*2)/3);}
.pc_col4 > li { width: calc((100% - 20px*3)/4);}
.pc_col5 > li { width: calc((100% - 20px*4)/5);}






#inc_shosai_feature {
	position: relative;
	width: 100%;
	margin: 0 auto 60px;
	/*width: 100%;
	overflow: hidden;
	margin: -69px 0px 50px;*/
}

#inc_shosai_feature .midashi {
	font-size: 20px;
	line-height: 1;
    margin: 30px 0;
    border-bottom: 1px solid #C1B8A9;
	padding-bottom: 20px;
    display: flex;
    align-content: center;
    align-items: center;
}
/*#inc_shosai_feature .midashi::before {
	content: "■";
}*/

#inc_shosai_feature ul.ul_inc_shosai_f { 
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 30px;
}
#inc_shosai_feature ul.ul_inc_shosai_f > li { 
	position: relative;
	width: calc((100% - 30px*1)/2);
}
#inc_shosai_feature ul.ul_inc_shosai_f > li > a { 
	position: relative;
	display: block;
}
#inc_shosai_feature ul.ul_inc_shosai_f > li > a > img { 
	width: 100%;
	height: auto;
}

#inc_shosai_feature ul.ul_inc_shosai_f > li:hover > a { 
	opacity: 0.8;
}