@charset "utf-8";
/* CSS Document */

.dress_mv img {
	object-position: 45%;
}


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

	dress_cmn

================================================= */
#dress_cmn > section {
	padding: 100px 0;
}
#dress_cmn > section:nth-child(odd) {
	background: #f9f9f9;
	padding: 80px 0;
}
.dress_ttl {
	position: relative;
	padding-left: calc(22% - 20px);
}
.dress_ttl::before {
	border-top: 1px solid #143677;
	content: "";
	width: 100%;
	position: absolute;
	left: 0;
	top: 30%;
}
.dress_ttl > * {
	position: relative;
}
.dress_ttl .cmn_ttl_h2 {
	margin-bottom: 40px;
	text-align: left;
}
.dress_ttl .cmn_ttl_h2 > * {
	padding-left: 20px;
}
.dress_ttl .cmn_ttl_h2 h2 {
	background: #f9f9f9;
}
#dress_cmn > section:nth-child(even) .dress_ttl .cmn_ttl_h2 h2 {
	background: #fff;
}

@media screen and (max-width: 1536px) {
}
@media screen and (max-width: 1024px) {
	.dress_ttl {
		padding-left: calc(15% - 20px);
	}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
	#dress_cmn > section {
		padding: 50px 0;
	}
	#dress_cmn > section:nth-child(odd) {
		padding: 50px 0;
	}
	.dress_ttl .cmn_ttl_h2 {
		margin-bottom: 30px;
	}
}


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

	dress_list

================================================= */
.dress_list {
	padding-left: calc(22% - 10px);
}
.dress_list li {
	margin: 0 10px;
}
.dress_list figcaption {
	text-align: center;
	margin-top: 14px;
	font-size: 1.3rem;
	color: #525252;
}
.dress_list .slick-dots {
	text-align: left;
}
@media screen and (max-width: 1024px) {
	.dress_list {
		padding-left: calc(15% - 10px);
	}
}
@media screen and (max-width: 768px) {
	.dress_list li {
		margin: 0 8px;
	}
}


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

	dress_salon

================================================= */
#dress_salon {
	background: #f9f9f9;
	margin-bottom: 100px;
}
#dress_salon .cmn_layoutTxt_ttl h3 {
	word-break: keep-all;
}
#dress_salon .cmn_ttl_h2 {
	margin-bottom: 100px;
	position: relative;
	padding-top: 40px;
}
#dress_salon .cmn_ttl_h2 h2 {
	font-size: 2rem;
}
#dress_salon .cmn_ttl_h2 .font_en {
	top: 0;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	color: rgba(184, 184, 184, 0.2);
}
@media screen and (max-width: 480px) {
	#dress_salon {
		margin-bottom: 0;
	}
}

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

	cmn_layoutArea

================================================= */
.cmn_layout {
	padding: 100px 5%;
}
.cmn_layout .cmn_ttl_m.cmn_ttl_h2 {
	margin-bottom: 60px;
}
.cmn_layoutArea {
	max-width: 1400px;
	margin: 0 auto;
}
.cmn_layoutArea section {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5%;
	position: relative;
	min-height: 450px;
	counter-increment: count;
}
.cmn_layoutArea section .cmn_layoutImg {
	max-width: 650px;
	width: 46.4%;
}
.cmn_layoutTxt {
	max-width: 700px;
	width: 47%;
	position: relative;
	z-index: 1;
	background: rgba(255,255,255,0.6);
	padding: 60px 70px;
}
.cmn_layoutTxt_ttl {
	margin-bottom: 45px;
	display: flex;
	align-items: center;
	gap: 15px;
}
.cmn_layoutTxt_ttl div {
	font-family: "EB Garamond", serif;
	position: relative;
	padding-left: 15px;
	letter-spacing: 0;
}
.cmn_layoutTxt_ttl div::before {
	content: 'Point.'counter(count, decimal-leading-zero);
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	text-align: center;
	writing-mode: vertical-lr;
	white-space: nowrap;
	font-family: "Cormorant Garamond", serif;
	color: rgba(106,74,37,0.8);
}
.cmn_layoutTxt_ttl h3 {
	font-size: 2.2rem;
	color: #143677;
	line-height: 150%;
	letter-spacing: 0.15em;
	font-weight: 500;
	font-family: "Cormorant Garamond", serif;
}
.cmn_layoutTxt p {
	max-width: 510px;
	line-height: 242%;
}
.cmn_layoutTxt dl {
	margin-top: 40px;
	display: flex;
	flex-flow: row wrap;
	gap: 5px 20px;
	font-size: 1.3rem;
}
.cmn_layoutTxt dl dt {
	width: 3.5em;
	line-height: 130%;
}
.cmn_layoutTxt dl dd {
	line-height: 130%;
	font-family: "Cormorant Garamond", "Zen Old Mincho", serif;
}
.dress_salon_url {
	margin-top: 10px;
}
.dress_salon_url a {
	color: #143677;
	font-family: "Cormorant Garamond", serif;
}
.dress_salon_url a:hover {
	text-decoration: underline;
}
@media screen and (max-width: 1194px) {
	.cmn_layoutArea section {
		flex-flow: column;
		min-height: inherit;
		gap: 40px;
	}
	.cmn_layoutArea section .cmn_layoutImg {
		position: relative;
		top: 0;
		width: 100%;
	}
	.cmn_layoutTxt {
		width: 90%;
		min-height: inherit;
		padding: 80px 60px 60px!important;
	}
}
@media screen and (max-width: 1024px) {
	.cmn_layout {
		padding: 100px 0;
	}
	#dress_salon .cmn_ttl_h2 .font_en {
		font-size: clamp(8rem, 13vw, 12rem);
	}
}
@media screen and (max-width: 896px) {
	#dress_salon .cmn_ttl_h2 {
		padding-top: 30px;
		margin-bottom: 80px;
	}
}
@media screen and (max-width: 768px) {
	.cmn_layoutTxt {
		padding: 60px 8%!important;
	}
	.cmn_layoutTxt_ttl {
		margin-bottom: 35px;
	}
	.cmn_layoutTxt_ttl h3 {
		font-size: 1.9rem;
	}
	.cmn_layoutTxt p {
		word-break: inherit;
	}
	.cmn_layoutTxt_ttl div {
		font-size: 10rem;
	}
	.cmn_layoutTxt_ttl div::before {
		font-size: 1.7rem;
	}
}
@media screen and (max-width: 640px) {
	.cmn_layoutTxt_ttl {
		flex-flow: column;
		align-items: flex-start;
		gap: 8px;
	}
	.cmn_layoutTxt_ttl div {
		font-size: 9rem;
	}
	.cmn_layoutTxt_ttl div::before {
		font-size: 1.6rem;
	}
	#dress_salon .cmn_ttl_h2 .font_en {
		font-size: clamp(6rem, 12vw, 8rem);
	}
}
@media screen and (max-width: 480px) {
	.cmn_layout {
		padding: 50px 0 60px;
	}
	.cmn_layout .cmn_ttl_m.cmn_ttl_h2 {
		margin-bottom: 40px;
	}
	.cmn_layoutTxt {
		padding: 40px 8%!important;
	}
	.cmn_layoutTxt_ttl {
		margin-bottom: 25px;
		gap: 5px;
	}
	.cmn_layoutTxt_ttl h3 {
		font-size: 1.65rem;
		letter-spacing: 0.1em;
	}
	.cmn_layoutTxt p {
		line-height: 210%;
	}
	.cmn_layoutTxt_ttl div {
		font-size: 7.5rem;
	}
	.cmn_layoutTxt_ttl div::before {
		font-size: 1.4rem;
	}
	#dress_salon .cmn_ttl_h2 {
		padding-top: 40px;
		margin-bottom: 70px;
	}
	.cmn_layoutTxt dl {
		font-size: 1.2rem;
	}
}


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

	dress_salon_brand

================================================= */
.dress_salon_brand {
	max-width: 1000px;
	margin: 60px auto 0;
	font-size: 1.3rem;
	text-align: center;
	background: #f3f3f3;
	padding: 40px;
}
.dress_salon_brand dl dt {
	color: #143677;
	margin-bottom: 20px;
}
.dress_salon_brand dl dd {
	font-family: "Cormorant Garamond", serif;
	font-weight: 500;
	line-height: 140%;
}
@media screen and (max-width: 1024px) {
	.dress_salon_brand {
		max-width: inherit;
		width: 90%;
		padding: 30px;
	}
}
@media screen and (max-width: 480px) {
	.dress_salon_brand {
		margin-top: 30px;
	}
	.dress_salon_brand dl dt {
		margin-bottom: 15px;
	}
	.dress_salon_brand dl dd {
		text-align: left;
	}
}


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

	dress_salon_takami

================================================= */
.dress_salon_takami {
	margin-top: 25px;
}
.dress_salon_takami dl {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 10px 20px;
	font-family: "Cormorant Garamond", serif;
}
.dress_salon_takami dl dd a {
	text-decoration: underline;
	color: #143677;
}
.dress_salon_takami dl dd a:hover {
	text-decoration: none;
}
@media screen and (max-width: 480px) {
	.dress_salon_takami dl {
		gap: 10px 15px;
	}
}


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

	#dress + #under_faq

================================================= */
#dress + #under_faq {
	margin-bottom: 100px;
}
@media screen and (max-width: 480px) {
	#dress + #under_faq {
		margin-bottom: 60px;
	}
}