@charset "UTF-8";


/*  l-intro
--------------------------------------------------*/
.l-quality {
	position: relative;
	padding-block: 19.0rem 0;
	background: linear-gradient(90deg, rgba(240, 238, 230, 0) 0%, rgba(240, 238, 230, 1) 50%, rgba(240, 238, 230, 0) 100%);
}
.l-quality::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 17.4rem;
  background: linear-gradient(0deg, rgba(195, 185, 155, 0) 0%, rgb(204 197 176) 100%);
  pointer-events: none;
}
.quality-tablist {
	width: min(90%,878px);
	margin-inline: auto;
	margin-bottom: 12.5rem;
}
.quality-tab {
	width: calc(400 / 878 * 100%);
	height: 8.0rem;
	font-size: 2.2rem;
	color: #c8bfa5;
	letter-spacing: .1em;
	padding-bottom: .1em;
	background-color: #e4dfd2;
	border: solid 1px #c9bfa5;
}
.quality-tab.active {
	background-color: #fff;
}
.quality-tabpanel {
}
.quality-inner {
	max-width: 1400px;
}
.quality-nav {
	position: sticky;
	top: 100px;
	/*width: 230px;*/
	width: fit-content;
	gap: 65px 0;
}
.quality-nav__item {
	position: relative;
	width: 100%;
	font-size: 18px;
	letter-spacing: .1em;
	line-height: 1;
	color: #726256;
	text-align: center;
	padding-left: 0;
	transition: padding-left .3s linear;
}
.quality-nav__item::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	margin-inline: auto;
	width: 0;
	height: 1px;
	background: #a4978e;
	transition: width .3s linear;
}
.quality-nav__item.active::before {
	width: 100%;
}
.quality-nav__item i {
	font-size: calc(22 / 18 * 100%);
}
.quality-container {
	width: calc(100% - 230px);
}
.quality-sec {
	position: relative;
	width: 100%;
	padding-bottom: 12.0rem;
}
.quality-sec__ttl {
	position: relative;
  font-size: 5.2rem;
  letter-spacing: .1em;
  line-height: 1.45;
  color: #726256;
  margin-bottom: 2.0rem;
}
.quality-sec__ttl i {
	font-size: calc(58 / 52 * 100%);
}
.quality-artcle {
	display: grid;
	gap: 5.5rem 5.4rem;
}
.quality-artcle + .quality-artcle {
	margin-top: 6.5rem;
}
.quality-artcle--1col {
	grid-template-columns: repeat(1, 1fr);
}
.quality-artcle--2col {
	grid-template-columns: repeat(2, 1fr);
}
.quality-artcle--3col {
	grid-template-columns: repeat(3, 1fr);
}
.quality-artcle__item {
	position: relative;
	width: 100%;
	gap: 2.0rem 4.0rem;
}
.quality-artcle__item--span2 {
	grid-column: span 2;
}
.quality-artcle__item__detail {
	flex: 1;
}
.quality-artcle__item__detail + .quality-artcle__item__detail {
	margin-top: 4.0rem;
}
.quality-artcle__item__detail__heading {
	border-bottom: solid 1px #b4a882;
	padding-bottom: 1.0rem;
	margin-bottom: 1.0rem;
  gap: 1.0rem 2.0rem;
}
.quality-artcle__item__detail__heading__txt {
	position: relative;
	font-size: 2.2rem;
	line-height: 1.72727273;
	letter-spacing: .075em;
	color: #92804c;
}
.quality-artcle__item__detail__heading__txt span {
  position: absolute;
  left: 110%;
  top: .6em;
  font-size: calc(14 / 22 * 1em);
  color: #333333;
  line-height: 2;
  letter-spacing: .05em;
  white-space: nowrap;
}
.quality-artcle__item__detail__heading__txt i {
	font-size: 1.5rem;
	letter-spacing: .1em;
	line-height: 1;
	color: #fff;
	background-color: #92804c;
	padding: .1em .45em .2em;
	margin-left: 1em;
  vertical-align: .2em;
}
.quality-artcle__item__detail__heading__patch {
	font-size: 1.5rem;
	letter-spacing: .1em;
	line-height: 1;
	color: #fff;
	background-color: #92804c;
	padding: .1em .45em .2em;
	transform: translateY(-.55em);
}
.quality-artcle__item__detail__box {
	gap: 1.0rem 4.0rem;
}
.quality-artcle__item__detail__box + .quality-artcle__item__detail__box {
	margin-top: 1.5rem;
}
.quality-artcle__item__detail__box__desc {
	font-size: 1.4rem;
	line-height: 2.28571429;
	letter-spacing: .1em;
	flex: 1;
}
.quality-artcle__item__detail__box__desc em {
	display: block;
	font-size: calc(16 / 14 * 1em);
	color: #92804c;
	letter-spacing: .1em;
}
.quality-artcle__item__detail__box__desc em small {
	font-size: .7em;
	letter-spacing: .1em;
}
.quality-artcle__item__detail__box__desc span {
	display: block;
	font-size: calc(10 / 14 * 1em);
	line-height: 2;
	color: #666666;
	letter-spacing: .05em;
	margin-top: .5em;
}
.quality-artcle__item__detail__box__photo {
	max-width: 100%;
	width: 100%;
	width: calc(var(--widthCustom) * 0.1rem);
  margin-top: 1.0em;
}
.quality-artcle__item__photo {
	max-width: 100%;
	width: 100%;
	width: calc(var(--widthCustom) * 0.1rem);
}

/*共通*/
.quality-artcle__item--tips {
	position: relative;
	padding: 8.5rem 4.0rem 6.0rem;
	background-color: rgba(180, 153, 90, .1);
}
.quality-artcle__item--tips .quality-artcle__item__detail + .quality-artcle__item__detail {
	margin-top: 0;
}
.quality-artcle__item__detail__enclosure + .quality-artcle__item__detail__enclosure {
	margin-top: 4.0rem;
}
.quality-artcle__item--tips__heading {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	font-size: 2.0rem;
	letter-spacing: .15em;
	line-height: 1;
	color: #fff;
	text-align: center;
	background-color: #92804c;
	padding-block: 1.5rem 1.5rem;
	margin-bottom: 4.5rem;
}
@media (any-hover: hover){
	.quality-nav__item:hover::before {
		width: 100%;
	}
}
@media screen and (min-width: 1000px){
	/*タイトルしたの横並び*/
	.quality-artcle--first {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.quality-artcle--first .quality-artcle__item:nth-child(1) {
		width: calc(650 / 1170 * 100%);
	}
	.quality-artcle--first .quality-artcle__item:nth-child(2) {
		width: calc(450 / 1170 * 100%);
	}
	/*横並びの画像の位置を揃える*/
	.quality-artcle__item__detail--custom {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		height: 100%;
	}
	.quality-artcle__item__detail__box--custom {
		flex: auto;
	}
	.quality-artcle__item__detail__box__photo--custom {
		flex: auto;
		margin-top: auto;
	}
}
@media screen and (max-width: 1000px){
	.quality-artcle__item__detail__box__photo {
		width: 100%;
	}
	.quality-artcle__item__photo {
		width: 100%;
	}
	.quality-artcle--1col {
		grid-template-columns: none; 
	}
	.quality-artcle--2col {
		grid-template-columns: none; 
	}
	.quality-artcle--3col {
		grid-template-columns: none; 
	}
	.quality-artcle__item__detail {
    flex: 100%;
    width: 100%;
	}
	.quality-artcle__item__detail__heading__txt span {
	  position: relative;
	  left: auto;
	  top: auto;
	  font-size: 1.0rem;
	  line-height: 1.45;
	  display: block;
	  margin-top: .8rem;
	}
}
@media screen and (max-width: 768px){
	.l-quality {
		padding-block: 5.5rem 0;
	}
	.l-quality::before {
    height: 8.0rem;
  }
	.quality-tablist {
		width: calc(320 / 380 * 100%);
		margin-bottom: 4.0rem;
	}
	.quality-tab {
		width: calc(150 / 320 * 100%);
		height: 7.0rem;
		font-size: 1.6rem;
		line-height: 1.45;
	}
	.quality-inner {
		max-width: 560px;
	}
	.quality-nav {
		position: relative;
		top: auto;
		width: 100%;
		gap: 2.0rem 2.0rem;
    flex-direction: row;
    margin-bottom: 5.5rem;
	}
	.quality-nav__item {
		width: fit-content;
		font-size: 1.6rem;
		text-align: center;
	}
	.quality-nav__item::before {
		display: block;
		bottom: -4px;
		width: 100%;
	}
	.quality-container {
		width: 100%;
	}
	.quality-sec {
		padding-bottom: 6.5rem;
	}
	.quality-sec__ttl {
	  font-size: 3.0rem;
	  margin-bottom: .5rem;
	}
	.quality-artcle {
		gap: 4.0rem 0;
	}
	.quality-artcle + .quality-artcle {
		margin-top: 4.0rem;
	}
	.quality-artcle__item {
		gap: 2.0rem 0;
	}
	.quality-artcle__item--span2 {
    grid-column: auto;
	}
	.quality-artcle__item__detail {
		flex: 100%;
	}
	.quality-artcle__item__detail + .quality-artcle__item__detail {
		margin-top: 4.0rem;
	}
	.quality-artcle__item__detail__heading__txt {
		font-size: 1.8rem;
	}
	.quality-artcle__item__detail__heading__txt span {
	  position: relative;
	  left: auto;
	  top: auto;
	  font-size: 1.0rem;
	  line-height: 1.45;
	  display: block;
	  margin-top: .8rem;
	}
	.quality-artcle__item__detail__heading__txt i {
		font-size: 1.1rem;
	}
	.quality-artcle__item__detail__heading__patch {
		font-size: 1.1rem;
	}
	.quality-artcle__item__detail__box {
		gap: .5rem 0;
	}
	.quality-artcle__item__detail__box + .quality-artcle__item__detail__box {
		margin-top: 1.5rem;
	}
	.quality-artcle__item__detail__box__desc {
		font-size: 1.2rem;
		line-height: 2;
		flex: 100%;
	}
	.quality-artcle__item__detail__box__photo {
		width: 100%;
	  margin-top: 1.0em;
	}
	.quality-artcle__item__detail__box__photo--spFitTop {
		aspect-ratio: 320 / 320;
		overflow: clip;
	}
	.quality-artcle__item__detail__box__photo--spFitTop img {
		object-fit: cover;
		object-position: center top;
    width: 100%;
    height: 100%;
	}
	.quality-artcle__item__detail__box__photo--spFitCenter {
		aspect-ratio: 320 / 400;
		overflow: clip;
	}
	.quality-artcle__item__detail__box__photo--spFitCenter img {
		object-fit: cover;
		object-position: center center;
    width: 100%;
    height: 100%;
	}
	.quality-artcle__item__photo {
		width: 100%;
	}

	/*共通*/
	.quality-artcle__item--tips {
		padding: 5.0rem 2.5rem 5.0rem;
	}
	.quality-artcle__item--tips .quality-artcle__item__detail + .quality-artcle__item__detail {
		margin-top: 0;
	}
	.quality-artcle__item__detail__enclosure + .quality-artcle__item__detail__enclosure {
		margin-top: 3.0rem;
	}
	.quality-artcle__item--tips__heading {
		font-size: 1.6rem;
		padding-block: .8rem .8rem;
		margin-bottom: 2.0rem;
	}

}