/* CSS Document */

:root {
    --color-base-md-main: #cc6968; /*未使用？変更しない*/
    --color-base-md-bg: #009EDF; /*背景色、変更する*/
    --color-base-md-subttl: #EA545D; /*未使用？変更しない*/
	--color-base-list-one: #52b547; /*ボタン色のため変更しない*/
	--color-base-list-two: #fdd000; /*ボタン色のため変更しない*/
	--color-base-list-three: #ff6699; /*ボタン色のため変更しない*/
}

#contents .parts.md_top_list.bk_color{
    background: var(--color-base-md-bg);
}

.md_cat_list #contents{
    background: var(--color-base-md-bg);
	position: relative;
	
}
/*
.md_cat_list #contents::before {
	content:"";
	position:absolute;
	left:0;
	top: 0;
	background: url("../kjt-season/2402/md_left.png") left 0;
	height: 100%;
	width: 180px;
	z-index: 0;
	background-repeat: repeat-y;
	
}
.md_cat_list #contents::after {
	content:"";
	position:absolute;
	top:0;
	right: 0;
	background: url("../kjt-season/2402/md_right.png") right 0;
	height: 100%;
	width: 180px;
	z-index: 0;
	background-repeat: repeat-y;
}
*/
.md_cat_list #contents .inner {
	z-index: 1;
}
.md_cat_list #contents #contents-main {
	padding-top: 0px;
}
.md_cat_list #contents h3.mdCat-title {
	background: none;
	text-align: center;
}
.md_cat_list #contents #contents-main .subttl{
    background: var(--color-base-md-subttl);
	padding: 14px 0;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 20px;
}
.md_cat_list #md-cat-list-header-navi {
	    margin-bottom: 25px;
}
.md_cat_list #md-cat-list-header-navi ul {
	    display: flex;
    flex-wrap: nowrap;
    column-gap: 20px;
}
.md_cat_list #md-cat-list-header-navi ul li {
	    width: 100%;
}
.md_cat_list #md-cat-list-header-navi ul li a{
	display: block;
    padding: 25px 0;
    border-radius: var(--box-radius-medium);
    text-align: center;
    position: relative;
	background: #fff;
	font-weight: bold;
	font-size: 16px;
}
.md_cat_list #md-cat-list-header-navi ul li.top a {
	border: 3px solid var(--color-base-list-one);
	color: var(--color-base-list-one);
	
}
.md_cat_list #md-cat-list-header-navi ul li.bottom a {
	border: 3px solid var(--color-base-list-two);
	color: var(--color-base-list-two);
}
.md_cat_list #md-cat-list-header-navi ul li.gift a {
	border: 3px solid var(--color-base-list-three);
	color:  var(--color-base-list-three);
}
.md_cat_list #md-cat-list-header-navi ul li.on a{
    color: #fff;
}
.md_cat_list #md-cat-list-header-navi ul li.top.on a{
    background: var(--color-base-list-one);
}
.md_cat_list #md-cat-list-header-navi ul li.bottom.on a{
    background: var(--color-base-list-two);
}
.md_cat_list #md-cat-list-header-navi ul li.gift.on a{
    background: var(--color-base-list-three);
}
.md_cat_list #md-cat-list-header-navi ul li.on a::before{
    content: "";
    display: inline-block;
    border: 16px solid transparent;
    border-top-color: transparent;
    position: absolute;
    bottom: -32px;
    z-index: 3;
    left: 50%;
	transform: translateX(-50%);
}
.md_cat_list #md-cat-list-header-navi ul li.top.on a::before {
	border-top-color: var(--color-base-list-one);
}
.md_cat_list #md-cat-list-header-navi ul li.bottom.on a::before {
	border-top-color: var(--color-base-list-two);
}
.md_cat_list #md-cat-list-header-navi ul li.gift.on a::before {
	border-top-color: var(--color-base-list-three);
}
.md_cat_list #contents-main .NewsItemList #items {
    gap: 20px;
}
.md_cat_list #contents-main .NewsItemList .item {
    background: #FFF;
    width: calc(100% / 3 - 14px);
    padding: 16px 20px 20px;
    margin: 0;
    border-radius: var(--box-radius-medium);
}

/*
------------------------------------------SP ↓----------------------------------------
*/
/*
.sp.md_cat_list #contents::before {
	background: url("../kjt-season/2402/md_left_sp.png") left 0;
	width:110px;	
}
.sp.md_cat_list #contents::after {
	background: url("../kjt-season/2402/md_right_sp.png") right 0;
	width: 110px;
}
*/
.sp.md_cat_list #contents h3.mdCat-title {
/*	width: 55%;*/
    margin: 0 auto;
}
.sp.md_cat_list #md-cat-list-header-navi ul {
    column-gap: 10px;
}
.sp.md_cat_list #md-cat-list-header-navi ul li a {
	padding: 10px 2px;
	font-size: 12px;
}
.sp.md_cat_list #contents-main .NewsItemList #items {
	gap:10px;
}