/*
 * Hiraku Ver.1.0.2 (https://www.appleple.com)
 * Copyright appleple | MIT License
 *
 */

@media only screen and (min-width: 801px) {
	.js-hiraku-offcanvas-close-btn {
		display: none;
	}
}

@media only screen and (max-width: 800px) {
	.js-hiraku-offcanvas-active {
		position: fixed;
		z-index: 100001;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: none;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
	}

	.js-hiraku-offcanvas-open {
		display: block;
	}

	.js-hiraku-offcanvas-body {
		z-index: 0;
		left: 0;
		width: 100%;
		transition: left .3s ease-in-out;
	}

	.js-hiraku-offcanvas-body-right {
		position: fixed;
		left: -220px;
		overflow-y: hidden;
	}

	.js-hiraku-offcanvas-body-left {
		position: fixed;
		left: 220px;
		overflow-y: hidden;
	}

	.js-hiraku-offcanvas-body-moving {
		position: fixed;
		left: 0;
	}

	.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar {
		position: fixed;
		z-index: 10002;
		top: 0;
		bottom: 0;
		display: block;
		overflow-y: scroll;
		box-sizing: border-box;
		width: 220px;
		max-width: 100%;
		background-color: #c14b00;
		-webkit-overflow-scrolling: touch;
	}

	.js-hiraku-offcanvas:focus {
		background-color: rgba(0, 0, 0, .5);
	}

	.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-right {
		right: 0;
		left: auto;
		margin-right: -220px;
		transition: margin-right .3s ease-in-out;
	}

	.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-left {
		right: auto;
		left: 0;
		margin-left: -220px;
		transition: margin-left .3s ease-in-out;
	}

	.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-right.active {
		margin-right: 0;
		transition: margin-right .3s ease-in-out;
	}

	.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-left.active {
		margin-left: 0;
		transition: margin-left .3s ease-in-out;
	}

	.js-hiraku-offcanvas-body-right,
	.js-hiraku-offcanvas-body-left {
		overflow: hidden;
	}

	.js-hiraku-offcanvas-body-right .js-hiraku-header-fixed {
		margin-left: -220px;
	}

	.js-hiraku-offcanvas-body-left .js-hiraku-header-fixed {
		margin-left: 220px;
	}

	.js-hiraku-offcanvas-close-btn {
		position: absolute;
		overflow: hidden;
		clip: rect(0 0 0 0);
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
	}

	.hiraku-open-btn {
		padding: 6px;
		cursor: pointer;
		border: 1px solid #ccc;
		border-radius: 3px;
		background: transparent;
	}

	.hiraku-open-btn-line {
		position: relative;
		display: block;
		width: 18px;
		height: 2px;
		margin: 6px 0;
		transition: .1s all;
		border-radius: 1px;
		background-color: #fff;
	}

	.hiraku-open-btn-line:before,
	.hiraku-open-btn-line:after {
		position: absolute;
		display: block;
		width: 100%;
		height: 2px;
		content: '';
		transition: .3s all;
		border-radius: 1px;
		background-color: #fff;
	}

	.hiraku-open-btn-line:before {
		top: -6px;
	}

	.hiraku-open-btn-line:after {
		bottom: -6px;
	}

	[aria-expanded='true'] .hiraku-open-btn-line {
		background-color: transparent;
	}

	[aria-expanded='true'] .hiraku-open-btn-line:before,
	[aria-expanded='true'] .hiraku-open-btn-line:after {
		width: 22px;
	}

	[aria-expanded='true'] .hiraku-open-btn-line:before {
		-ms-transform: translate(-2px, 6px) rotate(45deg);
		transform: translate(-2px, 6px) rotate(45deg);
	}

	[aria-expanded='true'] .hiraku-open-btn-line:after {
		-ms-transform: translate(-2px, -6px) rotate(-45deg);
		transform: translate(-2px, -6px) rotate(-45deg);
	}
}