@charset "utf-8";

@import  "./destyle.css";
@import url("./pc.css") screen and (min-width: 1024px);
@import url("./sp.css") screen and (max-width: 1023px);

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');



body {
	font-family: "Noto Sans", sans-serif;
	color: #000;
}

.full-width {
	width: 100%;
	margin-left: calc(50% - 50vw);
}

p { line-height: 1.75; }

a { transition: all .3s ease; }

a:hover { color: #ff5a00; }

img {
	width: 100%;
	height: auto;
}

th { font-weight: normal; }

.font-orange { color: #ff5a00; }

.txt-c { text-align: center; }

.txt-r { text-align: right; }


/*--- Contact ---*/
.contact-form {
	border: 1px solid #ddd;
	border-radius: 2rem;
}

.contact-form_post input {
	border: 1px solid #bebebe;
	border-radius: .5rem;
	padding: 0 8px;
	font-size: 18px;
	line-height: 48px;
	width: 100%;
}

.contact-form_post select {
	background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><polyline points='1,1 5,5 9,1' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 1rem center / 10px 6px;
	border: 1px solid #bebebe;
	border-radius: .5rem;
	padding: 0 40px 0 8px;
	font-size: 18px;
	line-height: 48px;
	width: 100%;
	cursor: pointer;
}

.contact-form_post label {
	font-weight: 600;
	margin: 0 0 4px 8px;
	display: block;
}

.contact-form_post input:focus,
.contact-form_post select:focus {
	outline: none;
	border-color: #ff5a00;
}

.contact-form_post-item_input-frame:focus-within label { color: #ff5a00; }

.contact-form_post-submit {
	background-color: #ff5a00;
	border-radius: .5rem;
	color: #fff;
	font-weight: 600;
	font-size: 24px;
	line-height: 48px;
	text-align: center;
	display: block;
}

.contact-form_post-submit:hover { background-color: #ff8a00; }

.contact-form_post-item_input-frame.is-error label { color: #e60023; }

.contact-form_post-item_input-frame.is-error input,
.contact-form_post-item_input-frame.is-error select { border-color: #e60023; }


/*--- Salon ---*/
.salon-image {
	background-color: #ff5a00;
	overflow: hidden;
	position: relative;
}

.salon-image_txt { color: #fff; }

.salon-image_photo {
	position: relative;
	aspect-ratio: 5 / 5;
	overflow: hidden;
}

.salon-image_photo img {
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity 2.2s ease;
	position: absolute;
		top: 0;
		left: 0;
}

.salon-image_photo img.is-active {
	opacity: 1;
	z-index: 1;
}

.salon-funds_table:last-child { margin-bottom: 0; }

.salon-funds_table tr:first-child { border-top: 1px solid #bbb; }

.salon-funds_table tr { border-bottom: 1px solid #bbb; }


/*--- Voices ---*/
.owners-voices-slider {
	overflow: hidden;
	width: 100%;
}

.owners-voices-track {
	display: flex;
	transition: transform 0.4s ease;
	will-change: transform;
}

.owners-voices-item {
	flex: 0 0 100%;
	width: 100%;
}

.owners-voices-prev {
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	position: relative;
	cursor: pointer;
}

.owners-voices-prev::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 13px;
	border-left: 2px solid #333;
	border-bottom: 2px solid #333;
	transform: translate(-50%, -50%) rotate(45deg);
}

.owners-voices-next {
	width: 40px;
	height: 40px;
	border: none;
	background: none;
	position: relative;
	cursor: pointer;
}

.owners-voices-next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 13px;
	border-right: 2px solid #333;
	border-top: 2px solid #333;
	transform: translate(-50%, -50%) rotate(45deg);
}

.owners-voices_bottom {
	margin: 0 auto;
	display: table;
}

.owners-voices-prev,
.owners-voices-next { margin-top: -2px; }

.owners-voices-prev:hover::before,
.owners-voices-next:hover::before { border-color: #ff5a00; }



/* === Confirm & Complete === */
.confirm-details_list-item:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.icon-back a {
    height: 48px;
    padding-left: 10px;
    position: relative;
}

.icon-back a::before {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
	min-width: 0;
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 13px;
	height: 13px;
	border-left: 2px solid #333;
	border-bottom: 2px solid #333;
	transform: translate(-50%, -50%) rotate(45deg);
}

.icon-back a:hover::before { border-color: #ff5a00; }

.confirm-details_action .contact-form_post-submit { margin-top: 0; }