/* fmirai drawer */

#clonedElement_drawer {
	contain: layout;
}

@media (max-width: 767px) {

	.drawer-content .drawer-panel .pc { display: none !important; }

	.drawer-content {
		background: #fff;
		font-size: clamp(0.844rem, -0.065rem + 4.55vw, 1rem);
		padding: 0 .5em 4em;
	}

	.drawer-content .drawer-panel.youthList {
		border: 1px var( --youth-hdcolor ) solid;
	}
	.drawer-content .drawer-panel.clubList {
		border: 1px var( --children-hdcolor ) solid;
	}
	.drawer-content .drawer-panel.sportsList {
		border: 1px var( --sports-hdcolor ) solid;
	}
	.drawer-content .drawer-panel.artsList {
		border: 1px var( --arts-hdcolor ) solid;
	}
	.drawer-content .drawer-panel.foundationList {
		border: 1px var( --home-hdcolor ) solid;
	}

	.drawer-content .drawer-panel .lv1-title,
	.drawer-content .drawer-panel .lv2-title {
		display: flex;
		align-items: center;
	}
	.drawer-content .drawer-panel .lv1-title {
		color: #fff;
	}
	.drawer-content .drawer-panel .lv1-title > a,
	.drawer-content .drawer-panel .lv2-title > .lv2-heading {
		display: flex;
		align-items: center;
		width: calc( 100% - 3em );
	}
	.drawer-content .drawer-panel .lv1-title > a {
		padding: .5em;
	}
	.drawer-content .drawer-panel .lv2-title > .lv2-heading {
		padding: .75em 0 .75em .5em;
		margin: .25em 0;
	}

	.drawer-content .drawer-panel .lv1-title button em,
	.drawer-content .drawer-panel .lv2-title button em {
		display: block;
		width: 3em;
		height: 1.75em;
		position: relative;
	}

	.drawer-content .drawer-panel .lv1-title button em {
		border-left: 1px #fff solid;
	}
	.drawer-content .drawer-panel .lv2-title button em {
		border-left: 1px #333 solid;
	}

	.drawer-content .drawer-panel .accordion-lv1 .lv1-title button em::after {
		font-family: "icomoon";
		content: "\e90d";
		font-size: clamp(1.25rem, -0.205rem + 7.27vw, 1.5rem);
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.drawer-content .drawer-panel .accordion-lv1.is-open .lv1-title button em::after {
		content: "\e90f";
	}

	.drawer-content .drawer-panel .accordion-lv2 .lv2-title button em::after {
		font-family: "icomoon";
		content: "\e90a";
		font-size: clamp(1.25rem, -0.205rem + 7.27vw, 1.5rem);
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.drawer-content .drawer-panel .accordion-lv2.is-open .lv2-title button em::after {
		content: "\e909";
	}

	.drawer-content .drawer-panel.youthList .lv1-title {
		background: var( --youth-hdcolor );
	}
	.drawer-content .drawer-panel.clubList .lv1-title {
		background: var( --children-hdcolor );
	}
	.drawer-content .drawer-panel.sportsList .lv1-title {
		background: var( --sports-hdcolor );
	}
	.drawer-content .drawer-panel.artsList .lv1-title {
		background: var( --arts-hdcolor );
	}
	.drawer-content .drawer-panel.foundationList .lv1-title {
		background: var( --home-hdcolor );
	}

	.drawer-content .drawer-panel .lv1-title a i {
		font-size: clamp(2rem, -0.182rem + 10.91vw, 2.375rem);
		margin: 0 .2em 0 0;
	}

	.drawer-content .drawer-panel .lv1-panel {  }
	.drawer-content .drawer-panel .icon-play-left { margin: 0 0 0 .5em: }

	.drawer-content .drawer-panel .lv2-panel li a {
		display: block;
		padding: .75em 0 .75em 1.5em;
	}

	.drawer-content .drawer-panel.otherList .accordion-lv1 .lv1-title {
		color: #333;
		border: 1px #333 solid;
		margin: 0 0 1.25em;
	}
	.drawer-content .drawer-panel.otherList .lv1-title > a {
		width: 100%;
	}

	.drawer-content ul.bnrs { margin: 2em 0 0; }
	.drawer-content ul.bnrs li { margin: 0 0 1em; }
	.drawer-content ul.bnrs li a { display: block; }

}

@media (min-width: 768px) {

	header .drawer-nav .inner {
		display: flex;
		justify-content: center;
		flex-direction:row-reverse;
		width: 100%; /* 1170px */
		max-width: 1200px;
		margin: 0 auto;
	}
	header .drawer-categories {
		width: 17%;
		max-width: 200px;
	}
	header .drawer-content {
		width: 83%;
		max-width: 1000px; /* 970px */
	}

	/* drawer-categories */

	.drawer-categories li button,
	.drawer-categories li a {
		display: flex;
		align-items: center;
		width: 100%;
		font-size: clamp(0.813rem, -0.023rem + 1.74vw, 1.25rem);
		padding: 1em .5em;
	}
	.drawer-categories li button i,
	.drawer-categories li a i {
		font-size: clamp(1rem, 0.045rem + 1.99vw, 1.5rem);
		margin: 0 .25em 0 0;
	}
	.drawer-categories li button {
		color: #fff;
	}
	.drawer-categories li a .icon-play3 {
		font-size: clamp(0.625rem, 0.147rem + 1vw, 0.875rem);
		margin: 0 0 0 .25em;
	}

	.drawer-categories [data-category="youth"] {
		background: var( --youth-hdcolor ); 
		/* border: 1px var( --youth-hdcolor ) solid; */
		border-top: 1px var( --home-hdcolor ) solid;
		border-bottom: 1px var( --youth-hdcolor ) solid;
	}
	.drawer-categories [data-category="club"] {
		background: var( --children-hdcolor ); 
		/* border: 1px var( --children-hdcolor ) solid; */
		border-bottom: 1px var( --children-hdcolor ) solid;
	}
	.drawer-categories [data-category="sports"] {
		background: var( --sports-hdcolor );
		/* border: 1px var( --sports-hdcolor ) solid; */
		border-bottom: 1px var( --sports-hdcolor ) solid;
	}
	.drawer-categories [data-category="arts"] {
		background: var( --arts-hdcolor ); 
		/* border: 1px var( --arts-hdcolor ) solid; */
		border-bottom: 1px var( --arts-hdcolor ) solid;
	}
	.drawer-categories [data-category="foundation"] {
		background: var( --home-hdcolor ); 
		/* border: 1px var( --home-hdcolor ) solid; */
		border-bottom: 1px var( --home-hdcolor ) solid;
	}
	.drawer-categories li a {
		background: #fff;
		border-bottom: 1px #f1f1f1 solid;
	}

	.drawer-categories li button:hover,
	.drawer-categories li button.is-active {
		color: #333;
		background: #fff;
		/*
		border-top: 1px var( --home-hdcolor ) solid;
		border-right: 1px var( --home-hdcolor ) solid;
		border-bottom: 1px var( --home-hdcolor ) solid;
		border-left: 1px #fff solid;
		*/
	}

	.drawer-categories li [data-category="youth"]:hover,
	.drawer-categories li [data-category="youth"].is-active {
		color: var( --youth-hdcolor ); 
		
	}
	.drawer-categories li [data-category="club"]:hover,
	.drawer-categories li [data-category="club"].is-active {
		color: var( --children-hdcolor ); 
		
	}
	.drawer-categories li [data-category="sports"]:hover,
	.drawer-categories li [data-category="sports"].is-active {
		color: var( --sports-hdcolor ); 
		
	}
	.drawer-categories li [data-category="arts"]:hover,
	.drawer-categories li [data-category="arts"].is-active {
		color: var( --arts-hdcolor ); 
		
	}
	.drawer-categories li [data-category="foundation"]:hover,
	.drawer-categories li [data-category="foundation"].is-active {
		color: var( --home-hdcolor ); 
		
	}
	.drawer-categories li a:hover {
		color: var( --home-hdcolor ); 
		border-bottom: 1px var( --home-hdcolor ) solid;
	}

	/* drawer-content */

	.drawer-content {
		border-top: 1px var( --home-hdcolor ) solid;
		background: #fff;
		padding: 1em;
	}
	.drawer-content .drawer-panel .lv1-title {
		font-size: clamp(0.688rem, 0.09rem + 1.24vw, 1rem);
	}
	.drawer-content .drawer-panel .lv2-panel {
		font-size: clamp(0.625rem, 0.147rem + 1vw, 0.875rem);
	}
	.drawer-content .drawer-panel .lv2-title {
		font-size: clamp(0.688rem, 0.09rem + 1.24vw, 1rem);
	}
	.drawer-content .drawer-panel.otherList,
	.drawer-content ul.bnrs { display: none; }
	.drawer-content .drawer-panel .lv2-title a span.icon-play-left {
		display: none;
	}

}