.mobile-menu-toggle,
.mobile-menu-overlay {
	display: none;
}

@media only screen and (max-width: 767px) {

	.d-mb-inline-block { display: inline-block !important; }
	.d-mb-block { display: block !important; }
	.d-mb-flex { display: flex !important; }
	div#mainmenu nav:not(#mobile-menu),
	div.headnav h6,
	div.headnav h1:after,
	div.headnav h2:after,
	.d-mb-none { display: none !important; }

	/* ── Shell ── */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	div#cfwrap {
		background: #111 url("../images/bg-top.jpg") no-repeat center top;
		background-size: cover;
		background-attachment: scroll;
		overflow-x: hidden;
	}

	#cfwrap div.center {
		width: 100%;
		max-width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #E8E5D1;
	}

	article.home {
		order: 1;
		float: none;
		width: 100%;
		min-height: 0;
		padding: 0 0 8px;
	}

    aside {
        order: 2;
        float: none;
        width: 100%;
        background: #000;
        padding: 16px;
    }

	/* ── Header ── */
    header {
        width: 100%;
        height: auto;
        padding-bottom: 4px;
        background-image: url(../images/foot-bg.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center bottom;
    }

    header > img#ChordCafeLogo {
        position: relative;
        top: auto;
        display: block;
        width: 80px;
        padding: 34px 0 6px;
        left: 6px;
    }

	div.headnav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 90;
	}

	.mobile-menu-toggle {
		display: block;
		position: absolute;
		right: 6px;
		top: 50%;
		transform: translateY(-50%);
		width: 32px;
		height: 32px;
		margin: 0;
		padding: 4px;
		border: none;
		background: transparent;
		cursor: pointer;
		z-index: 91;
	}

	.mobile-menu-toggle img {
		display: block;
		width: 22px;
		height: 22px;
		margin: 0 auto;
	}

	.mobile-menu-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
		z-index: 195;
	}

	.mobile-menu-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}

	body.mobile-menu-open {
		overflow: hidden;
	}

	div.headnav nav#nen,
	div.headnav nav#nth {
		display: none !important;
	}

	div.headnav h1,
	div.headnav h2 {
		max-width: 90px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align: middle;
	}

	div.headnav input#q {
		width: 72px;
	}

	header > h6,
	header > h6#domain {
		display: none;
	}

	header div#mainmenu {
		position: static;
		width: 0;
		height: 0;
		padding: 0;
		overflow: visible;
	}

	div#mainmenu nav#mobile-menu {
		display: flex !important;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		width: min(280px, 85vw);
		height: 100%;
		margin: 0;
		padding: 52px 0 24px;
		background: #6a2236;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
		z-index: 200;
		box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25);
	}

	div#mainmenu nav#mobile-menu.is-open {
		transform: translateX(0);
	}

	nav#mobile-menu > a,
	nav#mobile-menu > .chordguitar {
		display: block;
		float: none;
		flex-shrink: 0;
		width: 100%;
		height: auto;
		min-height: 44px;
		line-height: 44px;
		margin: 0;
		padding: 0 16px 0 44px;
		border-bottom: 1px solid rgba(232, 229, 209, 0.12);
		box-sizing: border-box;
		text-decoration: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	nav#mobile-menu > a.home {
		font-size: 0;
		padding-left: 44px;
	}

	nav#mobile-menu .chordguitar {
		cursor: pointer;
		position: relative;
	}

	nav#mobile-menu .chordguitar::after {
		content: "";
		position: absolute;
		right: 16px;
		top: 50%;
		width: 8px;
		height: 8px;
		margin-top: -6px;
		border-right: 2px solid #e8e5d1;
		border-bottom: 2px solid #e8e5d1;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	nav#mobile-menu .chordguitar.is-expanded::after {
		transform: rotate(-135deg);
		margin-top: -2px;
	}

	nav#mobile-menu .subnav {
		display: none;
		position: static;
		width: 100%;
		background: rgba(0, 0, 0, 0.18);
	}

	nav#mobile-menu .chordguitar.is-expanded .subnav {
		display: block;
	}

	nav#mobile-menu .subnav a {
		display: block;
		float: none;
		width: 100%;
		height: auto;
		min-height: 40px;
		line-height: 40px;
		margin: 0;
		padding: 0 16px 0 44px;
		background: none;
		border-bottom: 1px solid rgba(232, 229, 209, 0.08);
		box-sizing: border-box;
	}

	nav#mobile-menu .subnav a:hover,
	nav#mobile-menu > a:hover,
	nav#mobile-menu > .chordguitar:hover {
		background-color: #751f3c;
	}

	#mainmenu nav .chordguitar {
		width: 100%;
		min-width: 0;
	}

	/* ── Aside ── */
    aside div#fbbox {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        height: auto;
    }

	aside div.abox,
	aside div.find-us,
	aside div.searchBox,
	aside div.ads1,
	aside div.ads2 {
		width: 100%;
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	aside div.ads1,
	aside div.ads2 {
		width: 200px;
	}
    aside div.find-us h4 {
        text-align: center;
        padding: 10px 10px 0;
    }
    div.find-us ul {
        margin: 5px auto;
    }


	/* ── Welcome ── */
	#welcome #w1,
	#welcome #w2 {
		float: none;
		width: 100%;
		height: auto;
		padding: 16px;
	}

	#welcome #w1 > h1, #welcome #w1 > h6 {
        position: static;
        margin: 8px;
        text-align: right;
    }

	#welcome #w1 > p {
		line-height: 1;
	}

	#welcome #w2 {
        padding: 16px 16px 30px;
        background: #6c7f81;
        margin-bottom: 10px;
	}

    #welcome #w2 > div {
        float: none;
        width: 100%;
        margin-bottom: 20px;
        clear: both;
    }

	div#w2 div h4.rec {
		width: 100%;
	}

	div#w2 div > a.imgnews {
		float: none;
		max-width: 300px;
		height: auto;
		margin: 0 auto;
	}

	div#w2 div > a.imgnews img {
		height: auto;
		display: block;
	}

	div#w2 div > a.imgnews b {
		width: 100%;
	}

	div#w2 div ul li {
		width: 100%;
		height: auto;
		margin-left: 0;
		padding: 2px 0;
	}
	div#w2 div > a {margin: 5px 10px 10px 0;}

	/* ── Banners / Ads ── */
	div.banner-bg.ban-top {
		width: calc(100% - 24px);
		margin: 12px auto;
		padding: 8px;
		height: auto;
	}

	div.banner-bg,
	div.ban-top a.advbtn,
	div.ban-top a.advbtn img,
	div.ban-top .ads728,
	div.ban-top .ads728 ins {
		width: 100% !important;
		max-width: 100%;
		height: auto !important;
	}

	.home div.banner-bg.ban-center {
		width: calc(100% - 24px);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin: 0;
	}

	.home div.banner-bg.ban-center a.advbtn,
	.home div.banner-bg.ban-center a.advbtn img {
		float: none;
		width: 100% !important;
		margin: 0 auto;
	}

	/* ── Rank lists ── */
	article.home div.rank {
		width: 100%;
		padding: 0 8px;
	}

	article.home div.rank > div[style*="ccf-rank-01"] {
		display: none;
	}

	article.home div.rank div.rankbox {
		display: flex;
		flex-direction: column;
	}

	article.home div.rank div.rankbox > div {
		float: none;
		height: auto !important;
		width: 100% !important;
	}

	article.home div.rank div.rankbox > div.sep,
	article.home div.rank.rankmoy div.rankbox > div[style] {
		display: none;
	}

	article.home div.rank.ranktop div.rankbox div.top10,
	article.home div.rank.rankmoy div.rankbox div.top10 {
		width: 100%;
		border-left: none;
		border-right: none;
		margin-bottom: 16px;
	}

	article.home div.rank.rankmoy {
		height: auto;
		padding-bottom: 8px;
	}

	div.top10 h3,
	div.video_pane h3 {
		height: auto;
		white-space: normal;
	}

	.top10 ol li {
		height: auto;
		min-height: 48px;
		padding: 8px 10px;
		display: flex;
		align-items: flex-start;
		gap: 8px;
	}

	.top10 ol li::before {
		flex-shrink: 0;
		line-height: 40px;
		min-width: 1.2em;
	}

	.top10 ol li img {
		float: none;
		margin: 0 !important;
		flex-shrink: 0;
	}

	.top10 ol li.first img {
		margin: 0 !important;
	}

	.top10 ol li.first {
		height: auto;
		min-height: 90px;
		padding-bottom: 8px;
		align-items: center;
	}

	li.rankList > div.title,
	li.rankList.first > div.title {
		flex: 1;
		min-width: 0;
		width: auto;
		height: auto;
		max-height: none;
		display: block;
	}

	.top10 ol li h4 {
		display: block;
		margin-top: 0;
	}

	.top10 ol li h5,
	.top10 ol li h6 {
		display: block;
	}

	.top10 ol li h6 {
		position: static;
		display: inline-block;
		margin-top: 4px;
	}

	/* ── Video pane ── */
	article.home div.video_pane {
		width: calc(100% - 16px);
		height: auto;
		margin: 0 auto 12px;
		padding-bottom: 8px;
	}

	div.video_pane ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		padding: 8px 4px 0;
		margin: 0;
	}

	div.video_pane ul li {
		float: none;
		width: calc(50% - 8px);
		max-width: 160px;
		padding: 4px;
	}

	div.video_pane ul li a {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	div.video_pane ul li a img.clip {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	div.video_pane ul li h5 {
		height: auto;
		max-height: 2.6em;
		line-height: 1.3;
	}

	/* ── Footer ── */
	footer {
		width: 100%;
		height: auto;
		padding-bottom: 16px;
	}

	footer div.sitemap {
		background: url("../images/foot-bg.jpg") no-repeat center center;
		background-size: cover;
		width: 100%;
		height: auto;
		padding-bottom: 12px;
	}
	div.sitemap ul:first-child {
		border-top: 21px solid #161616;
	}
	div.sitemap ul {
		float: none;
		width: 100%;
		padding: 12px 20px 0;
	}
	footer div.right-foot {
		padding: 14px 25px 0 25px;
	}
	footer div.foot-mid,
	footer div.credit {
		width: 100%;
	}
aside div.ads2
	footer div div.btnc {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		padding: 12px 16px;
	}
	footer div.credit { text-align: center; }
    footer div.credit > * {
        float: none !important;
        text-align: center;
        display: inline-block;
        vertical-align: bottom;
    }
    aside div.abox h2 {
        background-image: none;
        background-color: #8f3434;
        width: 100%;
    }
	.abox.feeling { background: none; }
	div.abox.feeling p {         padding: 16px; }
}