@charset "UTF-8";

/*----------------------------
#dress
----------------------------*/
#dress .main_img {
	padding: 280px 0 170px;
	background: url(../images/main_img.webp) top center / cover no-repeat;
	color: #fff;
}
#dress .main_img h1 span {
	display: block;
	text-align: center;
}
#dress .main_img h1 span:nth-of-type(1) {
	font-size: 280%;
	letter-spacing: 0.2em;
}
#dress .main_img h1 span:nth-of-type(2) {
	margin: 10px auto 0;
}
#dress .main_img h1 + p {
	margin: 120px auto 0;
	max-width: 1100px;
	width: 90%;
	line-height: 2.4;
}
#dress .pankuzu {
	margin: 70px auto 0;
	width: 80%;
}
#dress .category {
	margin: 40px auto 0;
	width: 80%;
	text-align: center;
}
#dress .category > div {
	font-size: 140%;
}
#dress .category > img {
	margin: 70px auto 0;
	max-width: 1128px;
	width: 90%;
}
#dress .category > ul {
	display: flex;
	flex-wrap: wrap;
	margin: 20px auto 0;
}
#dress .category > ul > li {
	margin: 30px 2% 0 0;
	padding: 28px 0 20px;
	width: 31.33%;
	border: 1px solid #c7c7c7;
	border-radius: 60px;
	cursor: pointer;
}
#dress .category > ul > li:nth-of-type(1) {
	order: 1;
}
#dress .category > ul > li:nth-of-type(2) {
	order: 2;
	position: relative;
}
#dress .category > ul > li:nth-of-type(3) {
	order: 4;
}
#dress .category > ul > li:nth-of-type(4) {
	order: 3;
	position: relative;
}
#dress .category > ul > li:nth-of-type(5) {
	order: 5;
}
#dress .category > ul > li:nth-of-type(6) {
	order: 6;
	position: relative;
}
#dress .category > ul > li:nth-of-type(7) {
	order: 7;position: relative;
}
#dress .category > ul > li:nth-of-type(8) {
	order: 9;
}
#dress .category > ul > li:nth-of-type(9) {
	order: 8;
}
#dress .category > ul > li:nth-of-type(10) {
	order: 10;
}
#dress .category > ul > li:nth-of-type(11) {
	order: 11;
}
#dress .category > ul > li.external_link {
	order: 999;
}

#dress .category > ul > li:nth-of-type(4n),
#dress .category > ul > li:last-child {
	margin: 30px 0 0 0;
}
#dress .category > ul > li:hover {
	opacity: 0.7;
}

/* Vancouver fashion week 追加後のカテゴリ3列整列 */
#dress .category > ul {
    column-gap: 2%;
}
#dress .category > ul > li:not(.sub_category) {
    margin-right: 0;
    width: 32%;
}
#dress .category > ul > li:nth-of-type(2):before,
#dress .category > ul > li:nth-of-type(4):before,
#dress .category > ul > li:nth-of-type(7):before {
	display: block;
	position: absolute;
	top: -4px;
	right: 40px;
	bottom: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border-right: 5px solid #9c864b;
	border-bottom: 5px solid #9c864b;
	content: "";
	transform: rotate(45deg);
}
#dress .category > ul > li:nth-of-type(2).open:before,
#dress .category > ul > li:nth-of-type(4).open:before,
#dress .category > ul > li:nth-of-type(7).open:before {
	top: 0;
	bottom: -13px;
	transform: rotate(-135deg);
}
#dress .category > ul > li:nth-of-type(5) ul::before {
  left: auto;
  right: 108px;
}
#dress .category > ul > li:nth-of-type(5) ul::after {
  left: auto;
  right: 100px;
}
#dress .category > ul > li span {
	display: block;
}
#dress .category > ul > li span:nth-of-type(1) {
	color: #9c864b;
	font-size: 140%;
	font-weight: 500;
	line-height: 1.2;
}
#dress .category > ul > li span:nth-of-type(2) {
	font-size: 85%;
}
#dress .category .sub_category {
	margin: 30px auto;
	padding: 0;
	width: 98%;
	border: none;
	cursor: default;
}
#dress .category .sub_category:hover {
	opacity: 1;
}
#dress .category .sub_category ul {
	display: flex;
	justify-content: center;
	position: relative;
	margin: 0 auto;
	width: 90%;
	border: 1px solid #c7c7c7;
	border-radius: 60px;
}
#dress .category > ul > li:nth-child(7) ul {
	width: 50%;
}
#dress .category .sub_category ul:before,
#dress .category .sub_category ul:after {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	content: "";
	transform: translateX(-50%);
}
#dress .category .sub_category ul:before {
	margin-top: -38px;
	border: solid 19px transparent;
	border-bottom: solid 19px #c7c7c7;
}
#dress .category .sub_category ul:after {
	margin-top: -40px;
	border: solid 23px transparent;
	border-bottom: solid 23px #fff;
}
#dress .category .sub_category li {
	padding: 28px 0 20px;
	width: 20%;
	border-right: 1px solid #c7c7c7;
	color: #9c864b;
}
#dress .category > ul > li:nth-child(7) li {
	width: 33.33%;
}
#dress .category .sub_category li:hover {
	opacity: 0.7;
	cursor: pointer;
}
#dress .category .sub_category li:first-child {
	border-radius: 60px 0 0 60px;
}
#dress .category .sub_category li:last-child {
	border-right: none;
	border-radius: 0 60px 60px 0;
}
#dress .modal_list {
	display: flex;
	flex-wrap: wrap;
	margin: 100px 0 0 -0.5%;
}
#dress .modal_list > div {
	margin: 10px 0 0 0.5%;
	width: 24.5%;
}
#dress .modal_list > div img {
	width: 100%;
}
#dress .modal_list a {
	display: block;
	position: relative;
}
#dress .modal_list a:before {
	display: block;
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 50px;
	height: 50px;
	background: url(../images/icon_arrow.png) center center / contain no-repeat;
	content: "";
}
#dress .modal_list .new a:after {
    display: block;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 60px;
    height: 60px;
    background: url(../images/icon_new.png) center center / contain no-repeat;
	content: "";
}

#dress .modal_list .original a:after {
    display: block;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 60px;
    height: 60px;
    background: url(../images/icon_original.png) center center / contain no-repeat;
	content: "";
}

/*----------------------------
#js_modal
----------------------------*/
#js_modal .modal_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 auto;
	max-width: 500px;
	width: 100%;
	transform: translateY(-50%) translateX(-50%);
}
#js_modal .switch_box {
	margin: 20px auto 0;
	text-align: center;
}
#js_modal .switch {
	display: inline-block;
	margin: 0 5px;
    padding: 0 10px;
	min-width: 130px;
	height: 40px;
	background: #c1a557;
	color: #fff;
	font-size: 70%;
	line-height: 40px;
	cursor: pointer;
}
#js_modal .switch.active {
	opacity: 0.3;
	cursor: default;
}
/* Vancouver fashion week modal */
#js_modal .vancouver_fashion_week_modal {
    width: min(500px, calc(100vw - 48px));
    max-height: calc(100vh - 64px);
}
#js_modal .vancouver_fashion_week_modal .dress_image {
    display: flex;
    justify-content: center;
}
#js_modal .vancouver_fashion_week_modal .dress_image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 210px);
    object-fit: contain;
}
#js_modal .vancouver_fashion_week_modal .switch_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}
#js_modal .vancouver_fashion_week_modal .switch {
    margin: 0;
}



	/*----------------------------
    #衣装ページ　外部遷移先追加
    ----------------------------*/
	#dress .category li.external_link a {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		color: inherit;
		text-decoration: none;
	  }
	  
	  #dress .category li.external_link .font_en {
		font-size: 1.4rem;
		line-height: 1.4;
		word-break: break-word;
	  }
	  
	  #dress .category > ul > li.external_link span:nth-of-type(2) {
		font-size: 1rem;
		line-height: 1.5;
	  }

	  #dress .category li.external_link small {
		display: block;
		margin-top: 0.4rem;
		font-size: 0.9rem;
		letter-spacing: 0.08em;
		opacity: 0.6;
	  }

/*----------------------------
#ロケ・海ロケテキスト配置
----------------------------*/
#dress .category > ul > li[data-category="location"],
#dress .category > ul > li[data-category="sea"] {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#dress .category > ul > li[data-category="location"] span,
#dress .category > ul > li[data-category="sea"] span {
	margin: 0;
}

/*----------------------------
スマホ
----------------------------*/
@media screen and (max-width: 767px) {

	/*----------------------------
    #dress
    ----------------------------*/
	#dress .main_img {
		padding: 68vw 0 6vw;
		background: url(../images/main_img_sp.webp) center center / cover no-repeat;
	}
	#dress .main_img h1 + p {
		margin: 22vw auto 0;
		font-size: 90%;
		line-height: 2;
	}
	#dress .main_img h1 span:nth-of-type(1) {
		font-size: 180%;
	}
	#dress .main_img h1 span:nth-of-type(2) {
		margin: 8px auto 0;
	}
	#dress .pankuzu {
		margin: 20px auto 0;
		width: 90%;
	}
	#dress .category {
		margin: 45px auto 0;
		width: 100%;
	}
	#dress .category > ul {
		border-top: 1px solid #c7c7c7;
		column-gap: 0;
	}
	#dress .category > ul > li {
		margin: 0;
		padding: 20px 0 13px;
		width: 50%;
		box-sizing: border-box;
		border-top: none;
		border-right: none;
		border-left: none;
		border-radius: 0;
	}
	/* スマホ版は Vancouver だけ全幅、その他はDOM順のまま2列 */
	#dress .category > ul > li {
		order: initial;
	}
	#dress .category > ul > li[data-category="vancouver_fashion_week"] {
		order: -1;
		width: 100%;
	}
	#dress .category > ul > li.sub_category {
		width: 100%;
	}
	#dress .category > ul > li:nth-of-type(4n),
	#dress .category > ul > li:last-child {
		margin: 0;
	}
	#dress .category > ul > li span:nth-of-type(1) {
		font-size: 110%;
	}
	#dress .category > ul > li span:nth-of-type(2) {
		margin: 2px auto 0;
		font-size: 80%;
	}
	#dress .category > ul > li:nth-of-type(2):before,
	#dress .category > ul > li:nth-of-type(4):before,
	#dress .category > ul > li:nth-of-type(7):before {
		right: 5%;
		width: 12px;
		height: 12px;
		border-right: 3px solid #9c864b;
		border-bottom: 3px solid #9c864b;
	}
	#dress .category .sub_category {
		margin: 0 auto;
		width: 100%;
	}
	#dress .category .sub_category ul,
	#dress .category > ul > li:nth-child(7) ul {
		width: 100%;
		border: none;
		border-bottom: 1px solid #c7c7c7;
		border-radius: 0;
	}
	#dress .category .sub_category ul:before,
	#dress .category .sub_category ul:after {
		display: none;
	}
	#dress .category .sub_category li,
	#dress .category > ul > li:nth-child(7) li {
		padding: 24px 0 20px;
		width: 100%;
		border-right: none;
		border-bottom: 1px dashed #b3b3b3;
	}
	#dress .category .sub_category li:last-child {
		border-bottom: none;
	}
	#dress .category .sub_category li:first-child,
	#dress .category .sub_category li:last-child {
		border-radius: 0;
	}
	#dress .modal_list {
		margin: 30px 0 0 -0.5%;
	}
	#dress .modal_list > div {
		margin: 2px 0 0 0.5%;
		width: 49.5%;
	}
	#dress .modal_list a:before {
        right: 0;
        bottom: 0;
        width: 40px;
        height: 40px;
	}
    #dress .modal_list .new a:after {
        left: 8px;
		top: 8px;
		width: 40px;
		height: 40px;
    }

	/*----------------------------
    #js_modal
    ----------------------------*/
	#js_modal .switch_box {
		margin: 0 auto;
	}
	#js_modal .switch {
		margin: 15px 5px 0;
		font-size: 90%;
	}


/*----------------------------
#衣装ページ　外部遷移先追加
----------------------------*/
#dress .category > ul > li.external_link span:nth-of-type(1) {
	font-size: 100%;
	line-height: 1.3;
}

#dress .category > ul > li.external_link span:nth-of-type(2) {
	font-size: 72%;
	line-height: 1.4;
}

#dress .category > ul > li.external_link small {
	font-size: 68%;
	margin-top: 0.2rem;
}
	
}