/* ---------------------------------------------------------------
	start max 850px
--------------------------------------------------------------- */

@media print,screen and ( max-width: 850px ) {

	body {
		margin-top: 72px;
	}

	/* --------------- header -------------- */

	#header {
		height: 72px;
		background-color: #fff;
		border-bottom-width: 3px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.col_header {
		width: 100%;
		height: 100%;
		padding-left: 3%;
	}

	.logo_header {
		max-width: 330px;
		margin: 0;
	}

	#menubtn {
		width: 69px;
		height: 69px;
		margin: 0 0 0 auto;
		padding: 0;
		background-color: #fff;
		display: block;
		position: relative;
		z-index: 2;
	}

	#menubtn .btn {
		width: 36px;
		height: 100%;
		margin: 0 auto;
		position: relative;
		z-index: 0;
	}

	#menubtn .btn span {
		width: 100%;
		height: 3px;
		margin: auto;
		padding: 0;
		background-color: #21a889;
		display: inline-block;
		transition: all .4s;
		-moz-transition: all .4s;
		-webkit-transition: all .4s;
		position: absolute;
		left: 0;
		right: 0;
	}

	#menubtn span:nth-child(1) {
		top: 20px;
	}

	#menubtn span:nth-child(2) {
		top: 34px;
	}

	#menubtn span:nth-child(3) {
		top: 48px;
	}

	#menubtn.active span:nth-of-type(1) {
		width: 96%;
		-webkit-transform: translateY(20px) rotate(-45deg);
		transform: translateY(20px) rotate(-45deg);
		top: 14px;
	}

	#menubtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	#menubtn.active span:nth-of-type(3) {
		width: 96%;
		-webkit-transform: translateY(-20px) rotate(45deg);
		transform: translateY(-20px) rotate(45deg);
		top: 53px;
	}

	nav {
		width: 100%;
		max-width: 280px;
		height: calc(100vh - 72px);
		margin: 0;
		padding: 15px 15px;
		background-color: #b6d9ca;
		position: fixed;
		top: 72px;
		right: 0;
		z-index: 100;
		display: none;
	}

	#navi {
		margin-bottom: 15px;
		overflow: auto;
	}

	#navi,
	.btn_l_member {
		width: 100%;
		max-width: 100%;
	}

	#navi,
	.btn_l_jsht {
		width: 100%;
		max-width: 100%;
	}

	#navi li {
		margin: 0;
		border-radius: 0;
		border-bottom-color: #fefefe;
	}
	
	#navi li:nth-of-type(3){
		margin: 0;
		border-radius: 0;
		border-bottom-color: #fefefe;
	}
	
	#navi li:last-of-type {
		border: solid 1px #21a889;
	}
	
	#navi li.sub.box2:last-of-type{
		border-bottom-color: #fff;
	}
	
	.btn_l_member,
	.btn_l_jsht {
		border-radius: 6px;
	}

	#contents {
		width: 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		   -ms-flex-direction: column;
		       flex-direction: column;
	}

	#leftcontents {
		width: 100%;
		padding: 0;
		-webkit-box-ordinal-group: 2;
		           -ms-flex-order: 1;
		                    order: 1;
	}

	#rightcontents {
		width: 94%;
		margin: 0 auto;
		-webkit-box-ordinal-group: 1;
		           -ms-flex-order: 0;
		                    order: 0;
	}

	.wrap_contents {
		max-width: 100%;
		min-height: 350px;
		margin: 15px;
	}

	.mds1 .deco {
		width: 42px;
		height: 65%;
		margin-right: 0;
		background-image: url(../img/sp/deco_mds.svg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.mds1 .deco:before,
	.mds1 .deco:after {
		content: none;
	}

	.col_content {
		max-width: 100%;
	}

	#overlay {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.6);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: none;
		z-index: 10;
	}

	.open #overlay {
		display: block;
	}

	/* --------------- movie --------------- */

	.single #rightcontents {
		width: 94%;
		margin: 0 auto;
	}
	
	.accordion-content{
		margin: 0;
	}
	

}

/* ---------------------------------------------------------------
	end max 850px
--------------------------------------------------------------- */
