@media screen and (max-width: 470px) {
	/*===============================
	MARK: common
	=================================*/
	.sp-content {
		display: block;
	}

	.btn {
		font-size: 19px;
	}

	.site-header {
		z-index: 5;
	}

	.site-header .site-logo img {
		width: 80px;
	}

	.header-inner {
		padding-block: 10px;
	}

	.g-nav .inner {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: all 0.2s;
		background: rgba(37, 30, 28, 0.9);
		position: fixed;
		top: 0;
		right: -100%;
		width: 60%;
		height: 100%;
		padding: 70px 30px 100px 30px;
		flex-direction: column;
		justify-content: start;
		align-items: start;
		gap: 30px;
		z-index: 150;
		overflow: auto;
	}

	.g-nav.open .inner {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		right: 0;
	}

	.menu-content {
		flex-direction: column;
		align-items: start;
		gap: 30px;
	}

	.toggle_btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		border: none;
		border-radius: 0;
		background: none;
		padding-inline: 0.7em;
		position: absolute;
		top: 0;
		right: 0;
		width: 67px;
		height: 100%;
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
		z-index: 200;
	}

	.toggle_btn .toggle_inner {
		position: relative;
		width: 40px;
		height: 18px;
		cursor: pointer;
	}

	.toggle_btn span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		border-radius: 50em;
		background-color: #fff;
		-webkit-transition: all 0.2s;
		transition: all 0.2s;
	}

	.toggle_btn span:nth-child(1) {
		top: 0;
	}

	.toggle_btn span:nth-child(2) {
		top: 8px;
	}

	.toggle_btn span:nth-child(3) {
		bottom: 0;
	}

	.open .toggle_btn span:nth-child(1) {
		transform: translateY(8px) rotate(-20deg);
	}

	.open .toggle_btn span:nth-child(2) {
		width: 0;
		opacity: 0;
	}

	.open .toggle_btn span:nth-child(3) {
		transform: translateY(-8px) rotate(20deg);
	}

	.g-nav nav {
		width: 100%;
	}

	.main-nav {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.sp-nav {
		width: 100%;
	}

	.sp-nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.sp-nav li:not(:first-child) {
		margin-top: 15px;
	}

	.sp-nav img {
		width: 100%;
	}

	.header-bnr {
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}

	.header-bnr a {
		width: 100%;
	}

	.header-bnr img {
		width: 100%;
	}

	/*===============================
	MARK: TOP content
	=================================*/

	.section-inner {
		padding-block: 30px;
	}

	#information img.course {
		width: 100%;
	}

	.detail h2 img {
		width: 45%;
		margin-bottom: 20px;
	}

	.detail h3 img {
		width: 80%;
		margin-inline: auto;
		margin-bottom: 30px;
	}

	.detail .d-flex {
		gap: 10px;
	}

	.schedule-detail {
		margin-block: 30px 60px;
	}

	#information .access {
		margin-bottom: 10px;
		width: 32%;
	}

	#information p {
		font-size: 12px;
	}

	#information .btn-wrap {
		margin-top: 40px;
	}

	.campaign .inner {
		padding: 15px;
	}

	.lesson-list {
		letter-spacing: normal;
		padding-left: 1.5em;
	}

	/*===============================
	MARK: FOOTER
	=================================*/

	.site-footer .d-flex {
		flex-direction: column;
		align-items: center;
	}

	.copyright {
		font-size: 10px;
		margin-top: 20px;
	}
}