@charset "utf-8";

/* FV */
/* -------------------------------------------------- */
#fv {
	width: 100%;
	padding: 0;

	& #fvInner {
		width: 100%;
		height: 72vh;
		min-height: 500px;
		padding: 3vh 10%;
		background: linear-gradient(rgba(1, 35, 19, 0.5), rgba(1, 73, 40, 0.5)), url(../../img/top/fv_bg.jpg) no-repeat center;
		background-size: cover;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0 3em;
		position: relative;

		& img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		& #fvLogo {
			width: auto;
			max-width: 280px;
			height: 14vh;

		}

		& #fvCc {
			width: auto;
			max-width: 740px;
			height: 14vh;
			/* display: flex;
			flex-direction: column;
			align-items: flex-start; */

			& img {
				/* min-width: 600px; */
			}
		}

		& #fvInstrument {
			height: 42vh;
			max-width: 960px;

			& img {
				min-width: 700px;
			}
		}

		& #fvBadge {
			display: none
		}

	}

	& #fvBadge {
		display: flex;
		flex-direction: column;
		justify-content: end;
		align-items: flex-end;
		gap: 0.5em;

		& img {
			width: 28vw;
			max-width: 360px;
		}

		& p {
			color: #333;
			font-size: clamp(0.9rem, 1.1vw, 1.2rem);
		}

	}

	& #fvMessage {
		width: 96%;
		max-width: 1200px;
		margin: 0 auto;
		background: white;
		padding: 1em;
		line-height: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2em;
		position: relative;
	}

	& #fvMessage::before {
		content: "";
		width: 28%;
		max-width: 150px;
		aspect-ratio: 3 / 4;
		background: url(../../img/top/fv_person.png) no-repeat;
		background-size: contain;
		position: absolute;
		left: 13%;
		bottom: -20%;
	}

	& #fvMsgInner {
		margin-left: 10%;
		display: flex;
		flex-direction: column;
		align-items: center;
		letter-spacing: 0.05em;
		flex-shrink: 0;
		position: relative;
	}

	& #fvMsgInner .msgTop {
		font-size: clamp(1.4rem, 1.8vw, 2.0rem);
		font-weight: 600;
		color: var(--text);
		position: relative;
	}

	& #fvMsgInner .msgTop::before,
	& #fvMsgInner .msgTop::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 1.2em;
		height: 2px;
		background: var(--gray);
	}

	/* 左 */
	& #fvMsgInner .msgTop::before {
		left: -1.5em;
		transform: translateY(-50%) rotate(70deg);
	}

	/* 右 */
	& #fvMsgInner .msgTop::after {
		right: -1.5em;
		transform: translateY(-50%) rotate(-70deg);
	}

	& #fvMsgInner .msgMain {
		font-size: clamp(2.2rem, 2.4vw, 3rem);
		font-weight: 600;
		color: var(--greenMid);
		line-height: normal;
		margin-bottom: 0;
	}

	& #fvMsgInner .msgSub {
		font-size: clamp(1.2rem, 1.3vw, 1.6rem);
		font-weight: 500;
		color: var(--text);
	}

}

/* 買取実績 */
/* -------------------------------------------------- */
#achievements {
	padding-top: 80px;
	background: #f8f8f8;
}

.buyList {
	width: 94%;
	max-width: 1200px;
	margin: 0 auto 5em;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 2em calc(4%/3);

	& li {
		width: 24%;
		display: flex;

		& a {
			width: 100%;
			padding: 1.0em;
			background: #fff;
			border: 2px solid #ededed;
			display: flex;
			flex-direction: column;
			gap: 1.0em;
		}
	}
}

.buyImg {
	aspect-ratio: 19/14;

	& img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

.buyDate, .buyTit {
	font-size: clamp(0.9rem, 1.1vw, 1.3rem);
}

.buyDate {
	color: #7f7f7f;
}

.buyCat {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1em;
}

.buyCat li {
	width: auto !important;
	padding: 0.15em 0.5em;
	background: #72b927;
	color: #fff;
	font-size: clamp(0.8rem, 1.1vw, 1.1rem);
	line-height: 1.6;
	border-radius: 2px;
	display: flex;
	align-items: center;
	justify-self: center;
}

/* こんな方に選ばれています */
/* -------------------------------------------------- */
#choice {
	padding: 80px 0;
	background: #f8f8f8;
}

#choiceInner {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 4em 2em 5em;
	background: #fff;
	border: 1px solid var(--greenMid);
}

.choiceTit {
	margin-bottom: 1.5em;
	color: var(--greenMid);
	font-size: clamp(1.6rem, 3.2vw, 3.2rem);
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	position: relative;
}

.choiceTit::before,
.choiceTit::after {
	content: '';
	width: 1.5em;
	height: 2px;
	background: var(--greenMid);
}

/* 左 */
.choiceTit::before {
	transform: rotate(70deg);
}

/* 右 */
.choiceTit::after {
	transform: rotate(-70deg);
}

#choiceList {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0 5%;

	& li {
		width: 30%;
		max-width: 280px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 1em;

		& img {
			width: 100%;
		}

		& p {
			font-size: clamp(1.1rem, 2.4vw, 1.6rem);
			font-weight: 600;
			line-height: 1.2;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}
	}
}

/* 強化買取中の楽器 */
/* -------------------------------------------------- */
#enhanced {
	margin: 80px auto;
	max-width: 1500px;
}

#enhancedCont {
	display: flex;
	gap: 2em 2%;
}

.enhancedLink {
	width: 32%;
	background-color: var(--grayLight);
	border-radius: 6px;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	overflow: hidden;
}

.enhancedBox {
	width: 90%;
	padding: 2em;
}

.enhancedTit {
	margin-bottom: 1em;
	color: var(--grayDark);
	font-size: clamp(1.8rem, 2.0vw, 2.2rem);
	font-weight: 600;
	line-height: 1.2;
}

.enhancedInner {
	margin-bottom: 1.5em;
	display: flex;
	justify-content: space-between;
	align-items: center;

	& p {
		width: 70%;
		font-size: clamp(1.3rem, 1.35vw, 1.5rem);
		line-height: normal;
		letter-spacing: 0.02em;
	}
}

.enhancedImg {
	width: 25%;
	height: 10vw;
	max-height: 140px;

	& img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

.brandList {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5em;

	& li {
		width: auto;
		flex: 0 0 auto;
		flex-shrink: 1;

		& img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
}

.enhancedRight {
	width: 10%;
	max-width: 50px;
	height: auto;
	background: var(--greenMid);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* 矢印 */
.enhancedRight::before {
	content: '';
	width: 1em;
	height: 1em;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

/* 楽器を売るのに管弦屋がベストな理由 */
/* -------------------------------------------------- */
#advantage {
	padding: 80px 0;
	background: var(--greenPale);
}

#achievementsCont {
	margin: 0 auto;
	width: 90%;
	max-width: 1200px;
}

.achievementsBox {
	margin-bottom: 70px;
	padding-top: 50px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.achievementsBox:nth-child(2) {
	flex-direction: row-reverse;
}

.achievementsImg {
	width: 54%;
	max-width: 620px;
	position: relative;
	flex-shrink: 0;

	& span {
		color: #72b927;
		font-family: "Roboto", sans-serif;
		font-size: clamp(5.6rem, 6.4vw, 7.6rem);
		font-weight: 500;
		line-height: normal;
		position: absolute;
		top: -0.5em;
		left: 0.1em;
	}

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}


.achievementsInner {
	width: 50%;
	max-width: 600px;
	padding: 5em 3em;
	background: #007b3a;
	color: #fff;
	font-size: clamp(1.4rem, 2.0vw, 1.6rem);
	line-height: 1.5;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	margin-left: -20px;
	margin-bottom: -2em;
}

.achievementsBox:nth-child(2) {
	flex-direction: row-reverse;

	& .achievementsInner {
		margin-left: auto;
		margin-right: -20px;
	}
}

.achievementsTit {
	margin-bottom: 0.75em;
	padding-bottom: 0.75em;
	color: #fcf9c5;
	border-bottom: 1px solid #7cba99;
	font-size: clamp(1.6rem, 3.0vw, 1.8rem);
	font-weight: 600;
}

/* 買取について */
/* -------------------------------------------------- */
#purchase {
	margin-top: 60px;
}

#purchaseLinkList {
	display: flex;
	align-items: stretch;
	justify-content: space-between;

	& li {
		width: 32%;
		display: flex;

		& a {
			height: 100%;
			background: var(--greenPale);
			border-radius: 1em;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			gap: 1em;
			overflow: hidden;

			& img.purchaseImg {
				width: 100%;
				height: 100%;
				aspect-ratio: 4 / 3;
				object-fit: cover;
			}

			& p {
				margin-top: 0.5em;
				padding: 0 1em;
				color: var(--grayDark);
				font-size: clamp(1.2rem, 1.6vw, 1.8rem);
				font-weight: 600;
				line-height: normal;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;

			}

			& span.icon {
				width: 100%;
				padding: 0.5em 0.75em 0.75em;
				display: flex;
				justify-content: flex-end;

				& img {
					width: 1.8em;
					aspect-ratio: 1/1;

				}
			}
		}
	}
}


/* 2つの買取方法 */
/* -------------------------------------------------- */
#method {
	margin-top: 80px;
}

.methodTit {
	margin-bottom: 1em !important;
	color: var(--grayDark);
	text-align: center;
	font-size: clamp(2.0rem, 3.6vw, 3.6rem);
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.05em;

	& p {
		margin-bottom: 0.25em;
		font-size: clamp(1.3rem, 1.6vw, 2.0rem);
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		position: relative;

	}

	& p::before,
	& p::after {
		content: '';
		width: 1.2em;
		height: 2px;
		background: var(--gray);
	}

	/* 左 */
	& p::before {
		transform: rotate(70deg);
	}

	/* 右 */
	& p::after {
		transform: rotate(-70deg);
	}
}

.tabWrap {
	padding-bottom: 60px;
	background: #f8f8f8;

}

.tabNav {
	width: 100%;
	max-width: 1200px;
	margin: 140px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.tabNav#tab2 {
	margin: 40px auto 0;
}

.tabNav.person::before {
	content: "";
	width: 240px;
	height: auto;
	aspect-ratio: 5 / 3;
	background: url(../../img/top/method_person.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: -130px;
}


.tabNav li {
	width: 50%;
	cursor: pointer;
}

.tabNav li a {
	width: 100%;
	padding: 1em 0;
	background: #edebeb;
	color: #929391;
	font-size: clamp(1.6rem, 1.8vw, 1.8rem);
	font-weight: 600;
	line-height: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}


.tabNav li.active a {
	background: #c7dfca;
	color: #1b7a28;
}

.tabPanel {
	width: 90%;
	max-width: 1200px;
	margin: 2em auto;
	padding: 50px;
	background: #fff;
	border: 2px solid #e8e6e6;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	gap: 4em;

	& .commonLink {
		width: 100%;
	}
}

.tabInner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.methodImg {
	width: 40%;

	& img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}

.methodList {
	width: 56%;
	display: flex;
	flex-direction: column;
	gap: 1.0em;

	& li {
		font-size: clamp(1.3rem, 1.6vw, 1.8rem);
		letter-spacing: 0.05em;
		display: flex;
		align-items: flex-start;
		gap: 0.5em;
		position: relative;

		& p {
			line-height: normal;

			& span {
				color: #d91900;
				font-weight: 600;
			}
		}
	}

	& li::before {
		content: "";
		width: auto;
		height: 1.5em;
		aspect-ratio: 1 / 1;
		background: url(../../img/common/icon_check.svg) no-repeat;
		background-size: contain;
		position: relative;
		display: flex;
	}
}

/* 楽器買取の管弦屋とは？ */
/* -------------------------------------------------- */

#about {
	padding-top: 80px;
	background: #def0e1;
}

.aboutSlider {
	overflow: hidden;
	width: 100%;
}

.sliderTrack {
	display: flex;
	gap: 1em;
	width: max-content;
	animation: scroll 20s linear infinite;
}

.slide {
	width: 74vw;
	max-width: 400px;
	aspect-ratio: 4 / 3;
	flex-shrink: 0;
}

.slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.aboutTxt {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2em 0 80px;
	font-size: clamp(1.4rem, 1.8vw, 1.6rem);
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.05em;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

/* 探すリンク */
/* -------------------------------------------------- */
#searchLink {
	margin: 80px auto;
}

.searchLinkList {
	display: flex;
	gap: 1em 2%;

	& li {
		width: 32%;

		& a {
			padding: 1em;
			border: 2px solid #e8e6e6;
			border-radius: 5px;
			font-size: clamp(1.5rem, 2.0vw, 1.8rem);
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: .3s ease-in-out all;

			& .searchLinkListInner {
				width: 90%;
				display: flex;
				align-items: center;
				gap: 1em;
			}

			& .searchLinkImg {
				width: 56%;
				flex-shrink: 0;
				overflow: hidden;

				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition-duration: .5s;
				}
			}

			& p {
				line-height: normal;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			& .searchBig {
				font-size: clamp(1.7rem, 2.2vw, 2.0rem);
				font-weight: 600;
			}
		}

		& a:hover {
			& .searchLinkImg {
				& img {
					transform: scale(1.1);
				}
			}
		}

		& a::after {
			content: "";
			width: auto;
			height: 1.5em;
			aspect-ratio: 1 / 1;
			background: url(../../img/common/arrow_g.svg) no-repeat;
			background-size: contain;
			position: relative;
			display: flex;
		}

	}
}

@media screen and (max-width: 1220px) {
	/* #fv {
		& #fvInner {
			padding: 2vh 0;
		}

		& #fvMessage {
			width: 90%;
			justify-content: flex-end;
			gap: 0.5em;
		}
	} */

}

@media screen and (max-width: 1100px) {
	#fv {
		& #fvInner {
			& #fvLogo {
				max-width: 220px;
			}

			& #fvCc {
				max-width: 570px;
			}
		}
	}
}


/* -------------------------------------------------- */
/* PC */
/* -------------------------------------------------- */
@media screen and (min-width: 1025px) {}


/* -------------------------------------------------- */
/* TAB */
/* -------------------------------------------------- */
@media screen and (max-width: 1024px) {

	#fv {

		& #fvInner {
			height: 64vh;
			flex-direction: column;
			gap: 2em;

			& #fvLogo {
				height: 9vh;
			}

			& #fvCcSp {
				height: 7vh;
			}

			& #fvCc {
				flex-direction: row;
			}

			& #fvInstrument {
				height: 34vh;
			}
		}

		& #fvMessage::before {
			left: 10%;
		}

		& #fvMsgInner {
			margin-left: 16%;
		}
	}


	#enhancedCont {
		flex-direction: column;
		gap: 2em;
	}

	.enhancedLink {
		width: 100%;
		border-radius: 6px;
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		overflow: hidden;
	}

	#advantage {
		padding-bottom: 0;
	}


	#achievementsCont {
		width: 100%;
		margin-top: -5em;
	}

	.achievementsBox {
		display: block;
		margin-bottom: 0;
		padding-top: 6em;
	}

	.achievementsImg {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto -5em;
		position: relative;

		& span {
			color: #72b927;
			font-family: "Roboto", sans-serif;
			font-weight: 500;
			line-height: normal;
			position: absolute;
			top: -0.5em;
			left: 0.1em;
		}

		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.achievementsInner {
		width: 100%;
		max-width: none;
		margin: 0 !important;
		padding: 5em 5% 2em;
		background: #007b3a;
		color: #fff;
		line-height: 1.5;
		letter-spacing: 0.02em;
	}

}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.searchLinkList {
		& li {
			& a {
				& .searchLinkListInner {
					flex-direction: column;
					gap: 0.5em;
				}
			}
		}
	}
}


/* -------------------------------------------------- */
/* SP */
/* -------------------------------------------------- */



@media screen and (max-width: 767px) {

	#fv {
		& #fvMessage {
			margin-right: 1em;
			padding: 2em 0;
			justify-content: flex-end;
		}

		& #fvInner {
			height: 52vh;
			min-height: 380px;
			background: url(../../img/top/fv_bg.jpg) no-repeat;
			background-size: cover;
			justify-content: flex-start;
			flex-wrap: nowrap;
			gap: 1em;

			& #fvLogo {
				width: 30vw;
				height: auto;
			}

			& #fvCc {
				display: none;
			}

			& #fvCcSp {
				width: 90vw;
				max-width: 360px;
				height: auto;

				& img {
					min-width: auto;
				}
			}

			& #fvInstrument {
				width: 92vw;
				height: auto;

				& img {
					min-width: auto;
				}
			}

			& #fvBadge {
				display: flex;
				position: absolute;
				bottom: 2em;
				right: 5%;

				& img {
					width: 64vw;
				}

				& p {
					color: #fff;
				}
			}
		}

		& #fvLogo {
			margin-bottom: 0;
		}

		& #fvMessage {
			padding: 1.5em 0;
			justify-content: center;

			& #fvBadge {
				display: none;
			}
		}

		& #fvMessage::before {
			content: "";
			width: 38vw;
			aspect-ratio: 3 / 4;
			background-size: contain;
			position: absolute;
			left: 0;
			bottom: -4vw;
		}

		& #fvMsgInner {
			margin-left: 32%;
		}

		/* & #fvMsgInner .msgTop {
			font-size: clamp(1.4rem, 2.8vw, 2.4rem);
			font-weight: 400;
		}

		& #fvMsgInner .msgMain {
			font-size: clamp(1.8rem, 5.6vw, 4.0rem);
		}

		& #fvMsgInner .msgSub {
			font-size: clamp(1.2rem, 2.7vw, 2.2rem);
		} */
	}

	#achievements {
		padding-top: 40px;
		background: #f8f8f8;
	}

	.buyList {
		margin: 0 auto 4em;
		gap: 1em 2%;

		& li {
			width: 32%;
			display: flex;

			& a {
				padding: 0.5em;
				gap: 0.5em;
			}
		}
	}

	.buyList li:nth-child(n+10) {
		display: none;
	}

	#choice {
		padding: 40px 0;
	}

	#choiceInner {
		padding: 2em 1em;
	}

	#enhanced {
		margin: 40px auto;
	}

	.enhancedImg {
		width: 24%;
		height: 36vw;
	}

	#advantage {
		padding: 40px 0 0;
	}

	.achievementsTit {
		margin-bottom: 0.75em;
		padding-bottom: 0.75em;
		color: #fcf9c5;
		border-bottom: 1px solid #7cba99;
		font-size: clamp(1.6rem, 3.0vw, 1.8rem);
		font-weight: 600;
	}

	#purchase {
		margin-top: 40px;
	}

	#purchaseLinkList {
		display: flex;
		align-items: stretch;
		justify-content: space-between;

		& li {
			width: 32%;
			display: flex;

			& a {
				height: 100%;
				background: var(--greenPale);
				border-radius: 3px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				overflow: hidden;

				& img.purchaseImg {
					width: 100%;
					height: auto;
					aspect-ratio: auto;
				}

				& p {
					margin: 0;
				}
			}
		}
	}

	#method {
		margin-top: 40px;
	}

	.tabWrap {
		padding-bottom: 0;
	}

	.tabNav {
		margin: 9em auto 0;
	}

	.tabNav#tab2 {
		margin: 4em auto 0;
	}

	.tabNav.person::before {
		content: "";
		width: 150px;
		height: auto;
		aspect-ratio: 5 / 3;
		position: absolute;
		top: -80px;
	}

	.tabPanel {
		padding: 20px;
		border-radius: 5px;

		& .commonLink {
			width: 100%;
		}
	}

	.tabPanel.active {
		gap: 2em;
	}

	.tabInner {
		flex-direction: column;
		gap: 1em;
	}

	.methodImg {
		width: 100%;

	}

	.methodList {
		width: 100%;
		gap: 0.5em;

		& li {
			font-size: clamp(1.3rem, 1.6vw, 1.5rem);

		}
	}

	#about {
		padding-top: 40px;
		background: #def0e1;
	}

	.aboutTxt {
		padding: 2em 0;
		text-align: left;
	}

	#searchLink {
		margin: 40px auto;
	}

	.searchLinkList {
		flex-direction: column;
		gap: 1em 0;

		& li {
			width: 100%;
		}
	}
}

@media screen and (min-width: 551px) and (max-width: 767px) {
	#fv {
		& #fvInner {
			padding: 2vh;
			justify-content: center;
			align-items: center;
			gap: 0.5em 1em;

			& #fvLogo {
				max-width: 110px;
			}

			& #fvCcSp {
				max-width: 440px;
			}

			& #fvBadge {
				display: none;
			}
		}

		& #fvMessage {
			gap: 1%;

			& #fvBadge {
				display: flex;
			}
		}

		& #fvMessage::before {
			content: "";
			width: 23vw;
			left: -4vw;
		}

		& #fvMsgInner {
			margin-left: 18%;
		}

		& #fvBadge {
			& img {
				width: 38vw;
			}
		}
	}

	@media screen and (max-width: 550px) {
		& #fvInner {
			max-height: 460px;
		}
	}