@charset "utf-8";
/* CSS Document */

/* ================================================================= */
/* ocnk083 -  ヘッダーナビのカテゴリ一覧  */
/* ================================================================= */

/* 大枠 */
.responsive .wide_category_list {
	padding: 30px 10px 20px;
}
.responsive:is(.touch032,.touch_modern) .wide_category_list {
	padding: 20px 0 0;
}

/* カテゴリ一覧 */
.responsive .wide_category_list .custom_category_menu {
	display: grid;
	column-gap: 15px;
	justify-content: center;
	grid-auto-flow: dense;
}

/* タイトルの高さを揃えるgrid */
.responsive .wide_category_list .custom_category_menu .inner_custom_category_menu {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
}

/* タイトル内で中央寄せ */
.responsive .wide_category_list .custom_category_menu .inner_custom_category_menu .custom_category_title {
	display: flex;
	align-items: center;
}


/* 各幅の列数
 # ================================================================= */

/* 最小1列：min_column1 */
.responsive .wide_category_list.min_column1 .custom_category_menu {
	grid-template-columns: repeat(1, minmax(0, 1fr));
	columns: 1;
}

/* 最小2列：min_column2 */
.responsive .wide_category_list.min_column2 .custom_category_menu {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	columns: 2;
}

/* 3列 */
@media only screen and (min-width: 800px) {
	.responsive .wide_category_list:is(.min_column1,.min_column2) .custom_category_menu {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		columns: 3;
	}
}

/* 4列 */
@media only screen and (min-width: 1200px) {
	.responsive .wide_category_list:is(.min_column1,.min_column2) .custom_category_menu {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		columns: 4;
	}
}

/* 5列　※ocnk028適用時 */
@media only screen and (min-width: 1400px) {
	/* 5列 */
	.ocnk028.responsive .wide_category_list:is(.min_column1,.min_column2) .custom_category_menu {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		columns: 5;
	}
}

/* 6列 ※フルスクリーンのみ */
@media only screen and (min-width: 1600px) {
	.ocnk028.responsive.touch_fullscreen .wide_category_list:is(.min_column1,.min_column2) .custom_category_menu {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		columns: 6;
	}
}

/* 各カテゴリ枠 */
.responsive .wide_category_list .custom_category_menu .custom_category_menu_list {
	padding: 10px 0;
}

/* カテゴリ一覧タイトル */
.responsive .wide_category_list .custom_category_menu .custom_category_title {
	border-bottom: 1px solid #E0DFE3;
	padding: 0;
}

/* 各タイトル/各メニュー装飾リセット */
.responsive .wide_category_list .custom_category_menu .inner_main_nav .nav_btn {
	background-image: none;
	background-color: transparent;
	border: none;
}

/* カテゴリ一覧各メニュー下線 */
.responsive .wide_category_list .custom_category_menu ul.inner_main_nav .nav_btn {
	border-bottom: 1px solid #F1F1F1;
	font-weight: 500;
}

/* 通常テンプレート */

/* 各タイトル */
/* 画像なし */
.responsive .wide_category_list .custom_category_menu .custom_category_title .nav_btn {
	padding: 5px;
	margin-bottom: 0;
	font-weight: 700;
}
/* 画像あり */
.responsive .wide_category_list .custom_category_menu .custom_category_title.has_categoryimage .nav_btn {
	padding: 5px 0;
}

/* 各メニュー */
/* 画像なし */
.responsive .wide_category_list .custom_category_menu ul.inner_main_nav .nav_btn {
	padding: 10px 22px 10px 5px;
	margin-bottom: 0;
}
/* 画像あり */
.responsive .wide_category_list .custom_category_menu ul.inner_main_nav .has_image_nav_btn {
	padding: 5px 0;
	margin-bottom: 0;
}
/* 全商品 */
.responsive .wide_category_list .custom_category_menu ul.inner_main_nav .custom_menu_all_link_wrapper .nav_btn {
	padding: 0 22px 10px 5px;
}
/* 画像削除 */
.responsive .wide_category_list .custom_category_menu ul.inner_main_nav .custom_menu_all_link_wrapper .itemlist_categoryimage {
	display: none;
}

/* .touch32/.touch_modernテンプレート */

/* 各タイトル */
/* 画像なし */
.responsive:is(.touch032, .touch_modern) .wide_category_list .custom_category_menu .custom_category_title .nav_btn {
	padding: 5px;
}
/* 画像あり */
.responsive:is(.touch032, .touch_modern) .wide_category_list .custom_category_menu .custom_category_title.has_categoryimage .nav_btn {
	padding: 5px 0;
}

/* 各メニュー */
/* 画像なし */
.responsive:is(.touch032, .touch_modern) .wide_category_list .custom_category_menu ul.inner_main_nav .nav_btn {
	padding: 10px 5px 10px 20px;
}
/* 画像あり */
.responsive:is(.touch032, .touch_modern) .wide_category_list .custom_category_menu ul.inner_main_nav .has_image_nav_btn {
	padding: 5px 0;
}
/* 全商品 */
/* アイコン変更 */
.responsive:is(.touch032, .touch_modern) .wide_category_list .custom_category_menu .custom_menu_all_link_wrapper .nav_btn.has_image_nav_btn {
	position: relative;
	padding: 5px 5px 10px 20px;
}
.responsive:is(.touch032, .touch_modern) .wide_category_list .custom_category_menu .custom_menu_all_link_wrapper .nav_btn.has_image_nav_btn::before {
	content: "\e909";
	font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    font-family: ocnkiconf !important;
	position: absolute;
	top: 5px;
	left: 10px;
	transition: transform .15s linear;
}

/* マウスオーバーアニメーション */
.responsive.use_hover .wide_category_list .custom_category_menu .custom_menu_all_link_wrapper .nav_btn.has_image_nav_btn:hover::before {
	webkit-transform: translate(2px);
    transform: translate(2px);
	transition: transform .15s linear;
}

/* =================================================================
   レスポンシブ840px以上
   ================================================================= */

@media only screen and (min-width: 840px) {
	.responsive .wide_category_list {
		padding: 30px 20px 20px;
	}
}


/* 各テンプレ指定
 # ================================================================= */

/* 1番 */
.responsive:is(.touch001,.touch003,.touch004) .wide_category_list .custom_category_menu .custom_category_title {
	border-color: #D9D9D9;
}
.responsive:is(.touch001,.touch003,.touch004) .wide_category_list .custom_category_menu ul.inner_main_nav .nav_btn {
	border-color: #E0DFE3;
}

/* 2番 */
.responsive.touch002 .wide_category_list .custom_category_menu .custom_category_title {
	border-color: #555555;
}
.responsive.touch002 .wide_category_list .custom_category_menu ul.inner_main_nav .nav_btn {
	border-color: #3333334D;
}

/* 3番 */
.responsive.touch003 .wide_category_list .custom_category_menu .inner_main_nav .nav_btn {
	background-color: #F5F5F5;
	color: #006CD8;
}

/* 黒背景 */
.responsive:is(.touch005,.touch013) .wide_category_list .custom_category_menu .custom_category_title {
	border-color: #666666;
}
.responsive:is(.touch005,.touch013) .wide_category_list .custom_category_menu ul.inner_main_nav .nav_btn {
	border-color: #4444444D;
}

/* 6番 */
.responsive.touch006 .wide_category_list .custom_category_menu .inner_main_nav .nav_btn {
    background-color: #F3EBE3;
    color: #000;
}
.responsive.touch006 .wide_category_list .custom_category_menu .custom_category_title {
	border-color: #A69D80;
}
.responsive.touch006 .wide_category_list .custom_category_menu ul.inner_main_nav .nav_btn {
	border-color: #A69D804D;
}

/* 7番 */
.responsive.touch007 .wide_category_list .custom_category_menu .inner_main_nav .nav_btn {
    background-color: #FFF;
    color: #000;
}

/* 9番 */
.responsive.touch009 .wide_category_list .custom_category_menu .inner_main_nav .nav_btn {
    background-color: #FFF;
    color: #000;
}

/* 10番 */
.responsive.touch010 .wide_category_list .custom_category_menu .inner_main_nav .nav_btn {
    background-color: #FFF;
    color: #000;
}

/* 17番 */
.responsive.touch017 .wide_category_list .custom_category_menu .inner_main_nav .nav_btn {
    color: #000;
}
/* 17番、18番 */
.responsive:is(.touch017,.touch018) .wide_category_list .custom_category_menu .custom_category_title {
	border-color: #000000;
}
.responsive:is(.touch017,.touch018) .wide_category_list .custom_category_menu ul.inner_main_nav .nav_btn {
	border-color: #3333334D;
}

/* 25番 */
.responsive.touch025 .wide_category_list .custom_category_menu .custom_category_title {
	border-color: #59493F;
}
.responsive.touch025 .wide_category_list .custom_category_menu ul.inner_main_nav .nav_btn {
	border-color: #59493F4D;
}


/* 開閉時
 # ================================================================= */

/* 展開部分余白リセット */
.responsive .wide_category_list .custom_category_menu .custom_toggle_box.toggle_closed .custom_toggle_area {
	padding: 0;
}

/* 開閉アイコン用余白 */
.responsive .wide_category_list .custom_category_menu .custom_toggle_box .inner_title_text {
	padding-right: 25px;
}

/* =================================================================
   レスポンシブ839px以下
   ================================================================= */
@media only screen and (max-width: 839px) {
	/* 画像なし1列タイトル　※gridでの高さ取得ができないため */
	.responsive .wide_category_list.min_column1 .custom_category_menu .custom_toggle_box .custom_category_title:not(.has_categoryimage) .nav_btn {
		padding: 15px 5px;
	}
}

/* =================================================================
   レスポンシブ840px以上
   ================================================================= */
@media only screen and (min-width: 840px) {
	/* 展開部分余白 */
	.responsive .wide_category_list.sp_toggle .custom_category_menu .custom_toggle_box.toggle_closed .custom_toggle_area {
		padding: 10px 0;
	}
	/* タイトルのリンク無効化 / 開閉アイコン非表示 */
	.responsive .wide_category_list.sp_toggle .custom_category_menu .custom_toggle_box .custom_category_title .nav_btn {
		pointer-events: none;
	}
	.responsive .wide_category_list.sp_toggle .custom_category_menu .custom_toggle_box .custom_category_title .nav_btn .right_side_nav_icon {
		display: none;
	}
	.responsive .wide_category_list.sp_toggle .custom_category_menu .custom_toggle_box .inner_title_text {
		padding-right: 5px;
	}
	
	/* 840px以上では開閉を強制表示 */
	.responsive .wide_category_list.sp_toggle .custom_category_menu .custom_toggle_box.toggle_closed .custom_toggle_area {
		display: block!important;
		height: auto!important;
		overflow: visible!important;
		pointer-events: all!important;
	}
}