/*====================================

	6. Media Query

====================================*/
/*
 	6.1 ~1024px
====================================*/
@media screen and (max-width: 64em) {
/*====================================

	1. Global Navigation

====================================*/
/*
 	1.3 Hero Header
====================================*/
	/* News List */
	.news {
		position: absolute;
		top: 30%;
	}

	
/*====================================

	3. Footer

====================================*/
	footer .f_inner {
		padding: 0 1rem;
	}

/*====================================

	5. Other

====================================*/
	/* ページトップ */
	#page_top{
		bottom: 150px;
	}

}


/*
 	6.2 ~896px
====================================*/
@media screen and (max-width: 56em) {
}

/*
 	6.3 ~768px（タブレット）
====================================*/
@media screen and ( max-width: 48em) {
/*====================================

	1. Global Navigation

====================================*/
/*
 	1.3 Hero Header
====================================*/
	/* News List */
	.news {
		position: absolute;
		top: 35%;
	}
	.news .newslist_wrap .col-sm-2 {
		padding: 0;
	}

/*
 	1.2 Logo
====================================*/
	.brand_log {
		margin-left: .5rem;
	}
	
/*
 	1.2 Logo
====================================*/
	.brand_log {
		max-width: 100px;
	}

/*
 	2.4 Instagram
====================================*/
	.instagram .insta_frame {
		height: 250px;
	}
}

/*
 	6.4 ~576px (横)
====================================*/
@media screen and (max-width: 36em) {
	
/*====================================

	0. General

====================================*/
	.sp_hidden {
		display: none;
	}

	
/*====================================

	1. Global Navigation

====================================*/
/*
 	1.1 Navigationbar
====================================*/
	.navbar {
		padding: .5rem 0;
	}
	.nav-item {
		padding: 0 1rem .5rem;
	 }
	.nav-item:first-child {
		padding: .5rem 1rem 0;
	}
	.nav-item:last-child {
		padding: 0 1rem 1rem;
	}
	.nav-item:last-child a img {
		border: 1px #fff solid;
	}
	.navbar-collapse {
		background-color: rgb(45,77,58,0.9);

	}

	.navbar-toggler {
		background-color: rgba(45,77,58,1.00);
		margin-right: .5rem;
	}

	.navbar-toggler .navbar-toggler-icon {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
	}

/*
 	1.3 Hero Header
====================================*/
	.hero_header {
		background:  url("../images/main_visual_ph_sp.jpg") no-repeat top center;
		background-size: cover;
		height: 66%;
	}
	
	/* News List */
	.news {
		position: absolute;
		top: 16%;
		margin-top: 15%;
	}
	.news .newslist_wrap {
		padding: 1rem .5rem; 
	}
	.news .newslist_wrap .newslist_item {
		display: block;
		margin-bottom: .5rem;
	}	
	.news .newslist_btn_wrap {
		margin-bottom: .8rem;
	}
	.news .newslist_wrap .newslist_item .date {
		margin-right: 0;
		margin-bottom: .3rem;
	}

/*
 	1.2 Logo
====================================*/
	.brand_log {
		margin-left: .5rem;
	}
	


/*====================================

	2. Mine

====================================*/
/*
 	2.1 About
====================================*/
	.about .about_btn_wrap  {
		margin: 0 auto;
	}

	
/*
 	2.2 Items
====================================*/



/*
 	2.3 Shop
====================================*/
	.shop .onlinestore_btn_wrap {
		margin: 3rem auto 0;
	}
	.shop .onlinestore_btn_wrap .onlinestore_btn a {
		font-size: 150%;
	}
	.shop .onlinestore_btn_wrap .onlinestore_btn a::before {
		background-size: 45px 39px;
		width: 45px;
		height: 39px;
	}


/*
 	2.4 Instagram
====================================*/
	.instagram .insta_frame {
		height: 550px;
	}
	
	

/*====================================

	3. Footer

====================================*/
	footer .f_inner .f_itembox .f_logo {
		width: 60px;
	}
	footer .f_inner .f_itembox .insta_icon {
		font-size: 150%;
		margin-left: auto;
	}

	
/*====================================

	5. Other

====================================*/
	/* ページトップ */
	#page_top{
		width: 60px;
		height: 60px;
		bottom: 100px;
		right: 2%;
	}
	#page_top a{
		width: 60px;
		height: 60px;
	}
	#page_top a::after {
	  top: 30px;
	}
	
	/* モーダルウィンドウ */
	.modal__bg {
		height: 300vh;
	}
	.modal__content {
		padding: 0;
		top: 0;
		transform: translate(-50%,0);
		padding-bottom: 1rem;
	}
	.modal__content h4,
	.modal__content p {
		padding: 1rem;
	}
	.modal__content .inner_box img {
		max-width: 100%;
	}

	a.js-modal-close {
		margin-left: 80%;
	}
	

	
/*====================================

	7. Article / 記事ページ

====================================*/
	#article .txt_box {
		padding: 2rem 1rem; 
	}

}
/*
/*
 	6.5 ~480px
====================================*/
@media screen and (max-width: 30em) {
	/*
		2.4 Instagram
	====================================*/
	.instagram .insta_frame {
		/*height: 380px;*/
	}
}

/*
 	6.6 ~360px
====================================*/
@media screen and (max-width: 20em) { 
	
	/*
		2.4 Instagram
	====================================*/
	.instagram .insta_frame {
		/*height: 305px;*/
	}
	

}