.sp_nav {
	display: none;
}

/*----------------------------
			tablet
	----------------------------*/

@media screen and (max-width: 1740px) {
	.projects .container_12 .projects_lists li {
		width: calc(33.3% - 15px);
	}
}

@media screen and (min-width: 1281px) {
	.container_12.page_content .news_link a img {
		height: 309.375px;
	}
}

@media screen and (min-width: 801px) {
	.container_12.project_content .cols2 .video-container {
		padding-bottom: calc( 56.25% / 2 ) !important;
		transform: translateY(0.5rem);
	}
}


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


	.lang_sel ul li a {
		font-size: 14px;
	}

	/*----------------------------
			tablet-projects
	----------------------------*/

	.projects .container_12 .projects_lists a {
		display: block;
	}

	.projects .container_12 .grid_4 {
		width: auto;
		float: none;
		padding: 0;
		margin: 0;
	}

	.projects .container_12 .grid_8 {
		width: auto;
		float: none;
		padding: 0;
		margin: 0;
	}

	.projects .container_12 .grid_12 {
		width: 100%;
		/*float: none;*/
		padding: 0;
		margin-right: 0;
		margin-left: 0;
	}

	.projects .container_12 .projects_lists a .grid_4 {
		width: 100%;
		height: 100%;
		margin: 0;
		float: none;
	}

	.projects .container_12.project_content {
		/* padding: 0 20px; */
	}

	.bottom_content img,
	.lead_image {
		margin-bottom: 24px;
	}




	/*----------------------------------
			CONTACT
	----------------------------------*/
	.contact .container_12 {
		width: 100%;
	}

	.contact .container_12 .grid_6 {
		margin: 0;
	}

}

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

	.head_nav ul li:nth-child(3) {
		margin-right: 30%;
	}

	.head_nav ul li:nth-child(4) {
		margin-left: 14%;
	}
}

@media screen and (max-width: 959px) {
	.container_12 {
		padding: 0 24px;
	}

	.head_nav ul li:nth-child(3) {
		margin-right: 18vw;
	}

	.head_nav ul li:nth-child(4) {
		margin-left: 18vw;
	}

	.head_nav ul li a {
		font-size: 1.2rem;
	}

	header {
		height: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0;
		transition: .5s;
		position: sticky;
		top: 0;
		z-index: 100;
		flex-direction: unset;
		flex-wrap: wrap;
		background: #fff;
	}

	head .head_nav .pc {
		display: none !important;
	}

	.head_nav {
		margin: 0;
	}

	.sp_nav_overlay a:hover,
	.lang_sel a:hover {
		color: #fff !important;
	}

	.lang_sel {
		display: none;
	}

	.head_nav {
		z-index: 10;
		padding-left: 24px;
		flex-basis: 50%;
	}

	.head_nav ul {
		display: none;
	}

	.head_nav .header_logo {
		position: static;
		transform: none;
	}

	.head_nav .header_logo {
		font-size: 24px;
	}

	.sp_nav {
		display: block;
		width: 26px;
		flex-basis: 26px;
		height: 20px;
		position: relative;
		z-index: 10;
		padding-right: 24px;
		transform: translateY(-1px);
	}
	
	.sp_nav.sp_nav_active .sp_nav_line {
		background-color: #fff;
	}

	.sp_nav.sp_nav_active .sp_nav_line {
		background-color: #fff;
	}

	.sp_nav.sp_nav_active .line_top {
		transform: translateY(16px) rotate(-45deg);
		top: -5px;
		transition: .5s;
	}

	.sp_nav.sp_nav_active .line_middle {
		display: none;
		transition: .5s;
	}

	.sp_nav.sp_nav_active .line_bottom {
		transform: translateY(0) rotate(45deg);
		top: 11px;
		transition: .5s;
	}

	.sp_nav .sp_nav_line {
		display: block;
		width: 26px;
		height: 2px;
		background: #000;
		position: absolute;
	}

	.sp_nav .line_top {
		transition: .5s;
	}

	.sp_nav .line_middle {
		top: 8px;
		transition: .5s;
	}

	.sp_nav .line_bottom {
		bottom: 2px;
		transition: .5s;
	}

	.sp_nav_overlay {
		visibility: hidden;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		background: rgba(0, 0, 0, .8);
		padding: 0 24px;
		padding-top: 88px;

	}

	.sp_nav_overlay.nav_active {
		visibility: visible;
		transition: .5s;
	}

	.sp_nav_overlay .lang_sel_sp {
		position: absolute;
		bottom: 24px;
	}

	.sp_nav_overlay .lang_sel_sp ul {
		display: flex;
	}

	.sp_nav_overlay .lang_sel_sp ul li {
		text-transform: uppercase;
	}

	.sp_nav_overlay .lang_sel_sp ul li a {
		color: #999 !important;
	}

	.sp_nav_overlay .lang_sel_sp ul li a.active {
		color: #fff !important;
	}

	.sp_nav_overlay .lang_sel_sp li:not(:last-child):after {
		content: ' / ';
		position: relative;
		top: 1px;
		color: #999;
	}

	.sp_nav_overlay .social_spnav {
		display: flex;
		position: absolute;
		right: 24px;
		bottom: 24px;
	}

	.sp_nav_overlay .social_spnav li {
		margin-left: 1.25rem;
	}

	.sp_nav_overlay .social_spnav li a img {
		width: 1rem;
	}

	.nav_container {
		visibility: visible;
		width: 100%;
		order: 3;
		margin: 16px 16px 0;
	}

	.nav_container .navigation li a {
		/* font-size: 3.21vw; */
		font-size: 2vw;
		margin: 0 0.4vw;
		letter-spacing: 0.1vw;

	}

	.nav_container.nav_container_hidden {
		visibility: hidden;
	}

	header.nav_active_h {
		transition: .5s;
	}

	header.nav_active_h .head_nav .header_logo a {
		color: #fff;
		transition: .5s;
	}

	.sp_nav_overlay li {
		list-style: none;
		display: block;
	}

	.sp_nav_lists {
		color: #fff;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: 0.05rem;
		margin-bottom: 1rem;
		position: relative;
		left: 30px;
		transition: .9s;
		visibility: hidden;
		opacity: 0;
		display: block;
	}

	.sp_nav_lists.sp_nav_active {
		visibility: visible;
		padding-left: 0;
		left: 0;
		opacity: 1;
		transition: .9s;
		display: block;
	}

	.sp_nav_overlay .active .sp_nav_lists {
		color: #aaa !important;
	}

	.owl-wrapper-outer {
		height: calc(100vh - 64px);
	}

	.sidebar_item:first-of-type {
		margin-top: 2rem;
	}

	/*----------------------------
		NEWS
	----------------------------*/


	.press .container_12,
	.news .container_12 {
		width: 100%;
	}

	.press .container_12 .grid_12,
	.news .container_12 .grid_12 {
		margin: 0;
		float: none;
	}

	.press .container_12 .grid_12 article .container_12,
	.news .container_12 .grid_12 article .container_12 {
		display: flex;
		justify-content: space-between;
		padding: 0;
	}

	.press .container_12,
	.news .container_12 {
		width: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.press .container_12 .grid_3,
	.news .container_12 .grid_3 {
		width: 31%;
		margin: 0;
		float: none;
	}

	.press .container_12 .clearfix,
	.news .container_12 .clearfix {
		display: block;
	}
	
	.press .container_12 .clearfix > .image,
	.news .container_12 .clearfix > .image {
		width: 100%;
		margin: 0 0 2rem;
	}

	.press .container_12 .clearfix > article,
	.news .container_12 .clearfix > article {
		width: 100% !important;
		margin: 0;
	}
	.press .container_12 .clearfix > .desc,
	.news .container_12 .clearfix > .desc {
		margin: 0 !important;
	}

	.press .container_12 .clearfix > .col,
	.news .container_12 .clearfix > .col {
		margin: 0 0 32px !important;
	}

	.press .nav_container,
	.news .nav_container {
		text-align: left;
		margin: 16px 24px 0;
	}

	.press .nav_container .navigation li a,
	.news .nav_container .navigation li a {
		font-size: 18px;
		margin: 0 0.5rem 0 0;
	}
	.container_12.page_content .news_link a img {
		height: calc( ( 100vw - 48px) * 0.5625 );
	}

	/* about */

	.about .bio {
		flex-wrap: wrap;
	}
	
	.about .bio > * {
		width: 100% !important;
	}
	
	.about .bio > .grid_8 {
		order: 2;
	}
	.about .bio > .grid_6 {
		order: 1;
		margin: 0 0 2rem;
	}
	
	.about .awards {
		display: block;
	}
	.about .awards > * {
		display: block;
		width: 100% !important;
		margin: 0 0 3rem;
		text-align: left;
	}
	.project_title h6 {
		line-height: 1.25;
		font-size: 18px;
	}
	.project_title p {
		font-size: 13px;
	}

	footer {
		margin-top: 1rem;
	}

}

/*----------------------------
				sp
	----------------------------*/
@media screen and (max-width: 800px) {
	.sidebar_item > *,
	p {
		font-size: 16px;
		line-height: 1.35;
	}

	/*----------------------------------
		800px_work
	----------------------------------*/
	.container_12.project_content {
		display: block;
	}

	.container_12.project_content .project_photo {
		width: 100%;
	}

	.container_12.project_content .project_desc {
		width: 100%;
		margin-left: 0;
	}

	.container_12.project_content .project_desc .cols2 {
		display: block;
		margin: 0;
	}

	.container_12.project_content .project_desc .cols2 > * {
		width: 100%;
		padding: 0;
		margin: 0 0 32px;

	}

	.overlay_content {
		padding: 10px;
	}


	/*----------------------------------
		800px_news
	----------------------------------*/
	.press .container_12 .grid_12 article .container_12 .grid_7,
	.news .container_12 .grid_12 article .container_12 .grid_7 {
		font-size: 16px;
	}

	.press .container_12 .grid_12 article .container_12 .grid_7 .link_more,
	.news .container_12 .grid_12 article .container_12 .grid_7 .link_more {
		margin-bottom: 1rem;
	}

	.press .news_page .news_page_img,
	.news .news_page .news_page_img {
		width: 100%;
		margin-bottom: 20px;
	}

	.press .news_page article,
	.news .news_page article {
		width: 100%;
	}

	.press .news_page article time,
	.news .news_page article time {
		font-size: 15px;
	}

	.owl-theme .owl-controls .owl-buttons .owl-next {
		width: 32px;
	}

	.owl-theme .owl-controls .owl-buttons .owl-prev {
		width: 32px;
	}
}

@media screen and (max-width: 600px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	body {
		padding: 0;
	}

	/*----------------------------
		header
	----------------------------*/
	body.scroll_no {
		overflow: hidden;
	}

	/*--------clients--------*/
	.about .clients_lists {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.about .clients_lists::after {
		content: "";
		display: block;
		width: 30%;
	}

	.about .container_12 .grid_3 {
		width: 30%;
		margin: 0;
	}

	/*----------------------------------
		PROJECTS
----------------------------------*/
	.projects {
		min-width: auto;
	}

	.projects .grid_8 {
		margin: 0;
		width: 100%;
	}

	.projects .grid_12 {
		/*margin: 0;*/
	}

	.projects .container_12 {
		padding: 0 24px;
	}

	.projects .container_12 .projects_lists li {
		width: calc(50% - 10px);
		margin-bottom: 1rem;
	}

	.projects .container_12 .projects_lists {
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.projects .container_12 .projects_lists a li {
		width: 100%;
		float: none;
	}

	.projects .project_content .grid_4 p {}

	.pagination {
		margin: 0;
		font-size: 13px;
	}

	/*----------------------------------
		CONTACT
----------------------------------*/
	.contact {
		min-width: auto;
	}

	.contact .container_12 {
		width: auto;
	}

	.contact .container_12 .grid_6 {
		order: 2;
		width: 100%;
	}

	.contact .container_12 .grid_6 form {
		margin-bottom: 2rem;
	}

	.contact-form label {
		font-size: 16px;
	}

	.contact-form .contact-form input {
		height: 40px;
	}

	.contact-form select,
	.contact-form input,
	.contact-form textarea {
		font-size: 16px;
	}

	.contact-form textarea {
		height: 8rem;
	}

	.contact_sns a span {
		top: 5px;
		font-size: 14px;
	}

	/*----------------------------------
		NEWS
----------------------------------*/
	.news,
	.news {
		min-width: auto;
	}

	.press .container_12,
	.news .container_12 {
		width: auto;
		float: none;
		margin: 0;
	}

	.press .container_12 .grid_12 article,
	.news .container_12 .grid_12 article {
		margin-bottom: 2rem;
		padding: 0 0 1rem !important;
		width: 100%;
		border-bottom: 1px solid #707070;
	}

	.press .container_12 article .container_12,
	.news .container_12 article .container_12 {
		padding: 0;
		display: block !important;
	}

	.press .container_12 .grid_12,
	.news .container_12 .grid_12 {
		float: none;
		margin: 0;
	}

	.press .container_12 h6,
	.news .container_12 h6 {
		font-size: 1.1rem;
	}

	.press .container_12 .grid_7,
	.news .container_12 .grid_7 {
		width: auto;
		margin: 0;
	}

	.press .container_12 .grid_12 article .container_12 .grid_5,
	.news .container_12 .grid_12 article .container_12 .grid_5 {
		width: 100%;
		margin: 0 0 1rem;
	}

	.press .container_12 .grid_5 img,
	.news .container_12 .grid_5 img {
		width: 100%;
	}

	.press .container_12 .grid_3,
	.news .container_12 .grid_3 {
		float: none;
		margin: 0;
		width: 100%;
	}

	.news .press_list .grid_12 ul li p {
		font-size: 18px;
	}

	.press_list ul li .headline {
		font-size: 16px;
	}

	.press_list ul li a span {
		font-size: 14px;
	}

	.news .press_list .grid_12 ul li p:nth-child(2) {
		font-style: italic;
	}

	.owl-theme .owl-controls .owl-buttons .owl-prev {
		width: 16px;
		left: 15px;
	}
	.owl-theme .owl-controls .owl-buttons .owl-next {
		width: 16px;
		right: 15px;
	}
}

@media screen and (max-width: 460px) {
	.nav_container .navigation li a {
		font-size: 3.21vw;
	}
}