@charset "UTF-8";
@media only screen and (max-width: 640px) {
	.Hero__imgWrap {
		opacity: 0.95;
		background-image: url(../img/2.jpg);
		background-size: cover;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		/*	width: calc(1467 / 1920 * 100%);*/
		width: 100%;
		z-index: -1;
	}

	
	.Hero {
		height: auto;
	}
	.Hero__ttlWrap {
		height: 100vh;
		padding: 11rem 2rem;
	}
	.Hero__ttl {
		font-size: 3.5rem;
		line-height: 1;
		margin: 0 0 1rem;
		
	}
	.Hero__itemName {
		font-size: 1.6rem;
		letter-spacing: 0.3rem;
		line-height: 1.4;
		margin: 0 0 2rem;
		
	}
	
	.Hero__excl {
		font-size: 1.2rem;
		font-weight: normal 100;
		margin: 0 0 2rem;
		
	}
	.Hero__brandLogo {
		width: 8rem;
	}
	.Hero__imgWrap {
		height: 100vh;
		width: 100%;
	}
	
	.brand_main_philosophy {
		margin: 5rem auto;
	}
	
	
	.brand_main_philosophy .logo_img {
		text-align: center;
		width: 15rem;
		margin: 5rem auto;
	}
	
	.logo_img_sub {
		margin: 0 auto 5rem;
	}
	.brand_main_philosophy .logo_comment {
		margin: 0 auto 5rem;
		padding: 1.5rem;
		text-align: left;
		font-size: 1.6rem;
		letter-spacing: 0.05rem;
		line-height: 3rem;
		text-align: justify;
		color: #232323;
	}
	
	.brand_main_philosophy .logo_comment br{
		display: none;
	}
	
	
	
	.border {
		content: "";
		margin: 1rem;
		width: 15rem;
	}
	
	.suvin {
		margin: 0 auto 5rem;
		padding: 2rem;
		width: 100%;
		text-align: left;
		font-size: 1.6rem;
		letter-spacing: 0.05rem;
		line-height: 3rem;
	}
	
	.suvin span {
		font-size: 1.6rem;
		font-weight: bold;
		display: inline-block;
		margin: 0;
	}

	.suvin br {
		display: none;
	}

	
	.item_title {
		padding: 5rem 2rem;
	}
	
	.sub_com {
		padding: 5rem 0 0;
		width: 100%;
		font-size: 1.2rem;
		letter-spacing: 0.1rem;
		line-height: 1.5rem;
	}
	
	.main_com {
		padding: 2rem 0 0;
		width: 100%;
		font-size: 1.6rem;
		font-weight: bold;
		letter-spacing: 0.1rem;
	}
	.silhouette_slider_warp li p {
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		font-weight: bold;
		font-size: 1.4rem;
	}
	
	.img_textile {
		margin: 0 auto;
	}
	
	.com {
		margin: 0 auto;
		padding: 2rem;
		max-width: 100%;
		text-align: left;
		font-size: 1.4rem;
		letter-spacing: 0.2rem;
		line-height: 2.5rem;
		text-align: justify;
	}
	
	.item_introduction__text{
		padding: 2rem;
	}
	
	.item_silhouette_warp{
		width: 100%;
	}
	
	.arklogo {
		text-align: center;
		width: 10rem;
		margin: 0;
		padding: 5rem 0;
	}
	
	
	.item_introduction .item_name {
		margin: 0 auto 2rem;
		padding: 0;
		width: 100%;
		text-align: left;
		font-size: 1.6rem;
		letter-spacing: 0.1rem;
		line-height: 2rem;
	}
	
	.item_introduction .sub_com {
		margin: 5rem auto 2rem;
		padding: 0;
		width: 100%;
		text-align: left;
		font-size: 1.2rem;
		letter-spacing: 0.06rem;
		line-height: 2rem;
	}
	
	.item_introduction .img_full {
		margin: 0 auto;
		width: 100%;
	}
	
	.item_introduction .item_comment {
		margin: 0 auto;
		padding: 2rem;
		max-width: 100%;
		text-align: left;
		font-size: 1.4rem;
		letter-spacing: 0.2rem;
		line-height: 2.5rem;
		text-align: justify;
	}
	
	.to_page {
		padding: 5rem 0 7rem;
		margin: 0 auto;
		text-align: center;
	}
	
	.silhouette_comparison_warp {
		display: flex;
		display: block;
	}
	.baggy_warp {
		width: 100%;
		padding: 0 2rem;
	}
	
	.silhouette_name {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		font-weight: bold;
	}

	.silhouette_slider_warp {
		width: 100%;
		padding: 0 2rem;
	}
	.item_textile {
		width: 100%;
		margin: 0 auto;
	}
	
	.brand_warp {
		width: 100%;
		padding: 2rem;
	}
	
	.brand_sub_philosophy {
		margin: 5rem 0;
		text-align: justify;
	}
	
	.item_detail_warp {
		display: block;
		width: 100%;
		font-size: 1.6rem;
		letter-spacing: 0.15rem;
		line-height: 3.2rem;
	}
	.item_warp {
		background: linear-gradient(#FFF 20%, #f5f5f5 0, #f5f5f5 80%, #fff 0);
		display: block;
		margin: 5rem auto;
	}
	.img_baggy {
		width: 80%;
		margin: 1rem auto;
	}
	.item_detail {
		display: block;
		flex-direction: column;
		justify-content: center;
		padding: 10%;
		width: 100%;
	}

	.brand_logo {
		width: 12rem;
		margin: 2rem 0;
	}

	.reading {
		margin: 2.5rem 0;
	}
	.brand_sub_philosophy {
		margin: 2.5rem 0 5rem;
		text-align: justify;
	}
	
	
	.shop_list_warp {
		width: 100%;
		margin: 5rem auto;
		padding: 2rem;
	}
	
	.shop_list_warp {
		width: 100%;
	}
	.shoplist_block_warp{
		display: block;
	}
	.shoplist_block {
		width: 100%;
		margin: 1rem 0;
		padding: 0 2rem;
		background: #fff;
	}
	.shop_name {
		margin: 0 0 2rem;
		padding: 2.5rem 0;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 2.5rem;
		border-bottom: 1px solid #707070;
	}
	
	.shoplist_block .to_page {
		text-align: left;
		padding: 2.5rem 0;
		font-size: 1.2rem;
	}
	
	footer {
		margin: 0 auto;
	}
	footer .logo {
		width: 5rem;
		text-align: center;
		margin: 0 auto;
	}
	footer .copy {
		text-align: center;
		margin: 5rem auto;
		font-size: 1.2rem;
	}
	.toggle_btn {
		display: block;
		position: fixed;
		top: 25px;
		right: 25px;
		width: 30px;
		height: 30px;
		transition: all .5s;
		cursor: pointer;
		z-index: 3;
		opacity: 0.9;
	}
	#page-top {
		position: fixed;
		bottom: 25px;
		right: 25px;
		width: 30px;
		line-height: 1;
		z-index: 99;
	}
	.main_title_nav {
		font-size: 1.4rem;
		text-align: left;
		margin: 1rem 0 3rem;
		line-height: 1.5;
		width: 60%;
	}
	
	.wear_warp {
		width: 100%;
		margin: 5rem auto 10rem;
	}

	.wear_warp img {
		padding: 10px;
		margin: 1rem 0;
		opacity: 0.95;
	}

	.wear01_block_01 {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		flex-wrap: wrap;
		margin: 5rem auto;
	}

	.wear01_block_02 {
		width: 100%;
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin: 5rem auto;
	}


	.wear01_block_02 ul .to_page {
		padding: 2.5rem 0;
		margin: 0 auto;
		text-align: left;
	}


	.wear01_block_02 li{
		margin: 1rem auto;
		padding: 0 2rem;
		font-size: 1.2rem;
	}
	
	.wear02_block_02 li {
		margin: 1rem auto;
		padding: 0 2rem;
		font-size: 1.2rem;
	}
	.wear01_block_02 li:hover{
		opacity: 0.8;
	}


	.wear01_block_01 {
		margin: 2rem auto;
	}

	.wear01_01 {
		width: 100%;
		margin: 2rem auto;
	}

	.wear01_02 {
		width: 80%;
		margin: 5rem auto;
	}

	.wear01_03 {
		width: 90%;
		margin: 5rem 0;
	}

	.wear01_04 {
		width: 70%;
		margin: 5rem 0 5rem auto;
	}

	.wear02_01 {
		width: 100%;
		margin: 5rem auto;

	}

	.wear02_02 {
		width: 90%;
		margin: 5rem auto 5rem 0;
	}

	.wear02_03 {
		width: 90%;
		margin: 5rem 0 5rem auto;
	}
	.wear02_04 {
		width: 80%;
		margin: 5rem auto;
	}
	
	
}


@media only screen and (min-width: 640px) and (max-width: 1024px) {
	.Hero__imgWrap {
		opacity: 0.95;
		background-image: url(../img/2.jpg);
		background-size: cover;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		/*	width: calc(1467 / 1920 * 100%);*/
		width: 100%;
		z-index: -1;
	}


	.Hero {
		height: auto;
	}
	.Hero__ttlWrap {
		height: 100vh;
		padding: 11rem 5rem;
	}
	.Hero__ttl {
		font-size: 3.5rem;
		line-height: 1;
		margin: 0 0 1rem;

	}
	.Hero__itemName {
		font-size: 2.4rem;
		letter-spacing: 0.2rem;
		line-height: 1.4;
		margin: 0 0 2rem;

	}

	.Hero__excl {
		font-size: 1.6rem;
		font-weight: normal 100;
		margin: 0 0 2rem;

	}
	.Hero__brandLogo {
		width: 10rem;
	}
	.Hero__imgWrap {
		height: 100vh;
		width: 100%;
	}
	
	.brand_main_philosophy {
		margin: 10rem 2rem;
	}

	.brand_main_philosophy .logo_img {
		text-align: center;
		width: 20rem;
		margin: 15rem auto 10rem;
	}

	.item_silhouette_warp {
		width: 100%;
		margin: 0 auto;
	}
	.item_textile {
		width: 100%;
		margin: 0 auto;
	}
	.brand_warp {
		width: 100%;
		margin: 10rem auto;
		padding: 10rem 0;
		font-size: 1.4rem;
		line-height: 2;
	}
	.shop_list_warp {
		width: 100%;
		margin: 0 auto;
		padding: 10rem 0;
	}
	.item_introduction__text {
		padding: 10rem 0;
	}
	.item_introduction .item_comment {
		margin: 0 auto;
		padding: 2rem 5rem;
		max-width: 100%;
		text-align: left;
		font-size: 1.6rem;
		letter-spacing: 0.2rem;
		line-height: 3.2rem;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	.to_page {
		padding: 10rem 0;
		margin: 0 auto;
		text-align: center;
	}
	.item_silhouette_warp {
		width: 100%;
		margin: 0 auto;
		padding: 2.5rem;
	}
	.item_title {
		padding: 10rem 2rem 5rem;
	}
	.com {
		margin: 5rem auto;
		padding: 2rem 0;
		max-width: 100%;
		text-align: left;
		font-size: 1.6rem;
		letter-spacing: 0.2rem;
		line-height: 3.2rem;
		text-align: justify;
		text-justify: inter-ideograph;
	}
	.img_baggy {
		width: 50%;
	}
	.item_detail{
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 2rem 0;
			position: relative;
			width: 50%;
	}
	
	.wear01_block_01 {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		flex-wrap: wrap;
		margin: 5rem auto;
	}

	.wear01_block_02 {
		width: 100%;
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin: 5rem auto;
	}


	.wear01_block_02 ul .to_page {
		padding: 2.5rem 0;
		margin: 0 auto;
		text-align: left;
	}


	.wear01_block_02 li{
		margin: 1rem auto;
		padding: 0 2rem;
		font-size: 1.2rem;
	}

	.wear02_block_02 li {
		margin: 1rem auto;
		padding: 0 2rem;
		font-size: 1.2rem;
	}
	
	.brand_warp {
		width: 100%;
		margin: 10rem auto;
		padding: 10rem 2rem;
		font-size: 1.4rem;
		line-height: 2;
	}
	.shop_list_warp {
		width: 100%;
		margin: 0 auto;
		padding: 10rem 2rem;
	}
	
	.wear_warp {
		width: 100%;
		margin: 5rem auto 10rem;
	}
	.wear01_block_01 {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		flex-wrap: wrap;
		margin: 5rem auto;
	}
	
}