@charset "UTF-8";

/* common parts
============================================================================= */
body {
	padding-top:0 !important;
	overflow:visible;
}
.mod_main {
	overflow: visible;
}
:where(.page_container *) {
	box-sizing: border-box;
}
:where(.page_container img) {
	display:block;
	max-width:100%;
	height:auto;
}
.breadcrumb {
	display:none;
}

/* Javascript
============================================================================= */
/* Accordion
----------------------------------------------------------------------------- */
.js-accordion-button {
	cursor: pointer;
}
@media (width > 767px) {
	.js-accordion-button.is-pc {
		cursor: pointer;
	}
	:where(.js-accordion-group:has(.js-accordion-button.is-pc)) {
		.js-accordion-target[aria-hidden="true"] {
			height: 0;
		}
		.js-accordion-target[aria-hidden="false"] {
			z-index: 1;
		}
	}
}
@media (width <= 767px) {
	.js-accordion-button.is-sp {
		cursor: pointer;
	}
	:where(.js-accordion-group:has(.js-accordion-button.is-sp)) {
		.js-accordion-target[aria-hidden="true"] {
			height: 0;
		}
		.js-accordion-target[aria-hidden="false"] {
			z-index: 1;
		}
	}
}
:where(.js-accordion-group:not(:has(.js-accordion-button:is(.is-sp,.is-pc)))) {
	.js-accordion-target[aria-hidden="true"] {
		height: 0;
	}
	.js-accordion-target[aria-hidden="false"] {
		z-index: 1;
	}
}
.js-accordion-target {
	overflow: hidden;
	position: relative;
}

/* Tab
----------------------------------------------------------------------------- */
.js-tab-button[aria-expanded="true"] {
  pointer-events: none;
}
.js-tab-group {
}
.js-tab-target {
}
.js-tab-target[aria-hidden="true"] {
  display:none;
}
.js-tab-target[aria-hidden="false"] {
  opacity:1;
}
.js-tab-button {
  margin-block-start: 0 !important;
}
.js-tab-target {
  margin-block-start: 0 !important;
}
.js-tab-target_wrap {
  position:relative;
}
.js-tab-target-arrow {
  display:flex;
  justify-content: center;
  align-items: center;
  width:4.0rem;
  height:4.0rem;
}
.js-tab-target-arrow::after {
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  transform:rotate(45deg);
}
.js-tab-target-arrow.-prev::after {
  margin-inline-start:0.4rem;
  border-block-end:1px solid #000;
  border-inline-start:1px solid #000;
}
.js-tab-target-arrow.-next::after {
  margin-inline-end:0.4rem;
  border-block-start:1px solid #000;
  border-inline-end:1px solid #000;
}
@media (hover) {
  .js-tab-target-arrow {
    transition-duration: var(--duration-hover-A);
    transition-property: opacity;
    position:absolute;
  }
  .js-tab-target-arrow:hover {
    opacity:.6;
  }
}
@media (width > 640px) {
  .js-tab-target-arrow {
    margin-block:auto;
    inset-block:0;
  }
  .js-tab-target-arrow.-prev {
    left:-6.0rem;
  }
  .js-tab-target-arrow.-next {
    right:-6.0rem;
  }
  .js-tab-target-pager {
    display:none;
  }
}
@media (width <= 640px) {
  [data-option*="arrow"] .js-tab-target_wrap {
    /* padding-block-end:6.0rem; */
  }
  .js-tab-target_actions {
    display:flex;
    align-items: center;
    justify-content: center;
    gap:2.0rem;
    margin-block-start:3.0rem;
  }
  .js-tab-target-arrow {
    width:1.8rem;
    height:1.8rem;
    position:relative;
  }
  .js-tab-target-arrow.-prev {
  }
  .js-tab-target-arrow.-next {
  }
  .js-tab-target-pager {
    display:flex;
    align-items: center;
  }
  .js-tab-target-pager-item {
    display:flex;
    align-items: center;
    justify-content: center;
    width:1.6rem;
    height:1.6rem;
  }
  .js-tab-target-pager-item::after {
    content:"";
    display:block;
    border-radius: 50%;
    width:0.6rem;
    height:0.6rem;
    background-color:var(--cc-gray-C-hex);
    transition-duration: var(--duration-hover-A);
    transition-property: background-color;
  }
  .js-tab-target-pager-item.__current::after {
    background-color:#000;
  }
}

/* Layout Parts
============================================================================= */
.quality-l-deco {
	height:100%;
	color:#AFAFAF;
	opacity:.2;
	position:absolute;
	top:0;
	pointer-events: none;

	> span {
		font-size:1.91rem;
		letter-spacing: 0;
		line-height:.6;
		writing-mode: vertical-rl;
		position:sticky;
		top:var(--header-height);
	}
}

.quality-l-heading {
	display:grid;
	justify-content: center;
	text-align: center;
	gap:.20rem;
	padding-block:1.20rem .80rem;
	line-height:1;

	@media (width <= 767px) {
		padding-block:.64rem .48rem;
	}

	.en {
		font-weight:400;
		font-size:.60rem;
		letter-spacing: 0;

		@media (width <= 767px) {
			font-size:.45rem;
		}
	}
	.ja {
		font-weight:700;
		font-size:.20rem;
		letter-spacing: .04em;
		
		@media (width <= 767px) {
			font-size:.14rem;
		}
	}
}


/* .Keyvisual
============================================================================= */
.quality-kv {
	display:flex;
	justify-content: center;
	align-items: flex-end;
	height:100svh;
	position:relative;
	color:#fff;

	.copy_1 {
		width:fit-content;
		font-size:.36rem;
		font-weight:700;
		font-feature-settings: "palt" 0;
		letter-spacing: .15em;
		line-height:2;
		writing-mode: vertical-rl;
		position:absolute;
		top:2.00rem;
		@media (width <= 767px) {
			width:fit-content;
			font-size:.24rem;
			top:1.12rem;
		}
	}
	.bottom {
		@media (width > 767px) {
			width:min(13.40rem,100%);
		}

		.h1 {
			display:flex;
			flex-direction: column;
			margin-bottom:.28rem;
			border-bottom:1px solid;
			width:9.72rem;
			overflow:hidden;
			@media (width <= 767px) {
				margin-bottom:.16rem;
				width:2.88rem;
			}

			.ja {
				margin-bottom:-.20rem;
				width:2.12rem;
				@media (width <= 767px) {
					margin-bottom:-.04rem;
					width:1.14rem;
				}
			}
		}
		.scroll {
			display:block;
			margin-left:auto;
			border-left:1px solid;
			padding-left:.20rem;
			padding-bottom:.40rem;
			width:fit-content;
			font-size:.14rem;
			letter-spacing: .05em;
			@media (width <= 767px) {
				margin-left:50%;
				padding-block:.12rem .14rem;
				font-size:.12rem;
			}
		}
	}

	.bg {
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		z-index: -1;
		img {
			width:100%;
			height:100%;
			object-fit: cover;
		}
	}
}


/* .Intro
============================================================================= */
.quality-intro {
	display:grid;
	padding-block:1.60rem;
	@media (width > 767px) {
		grid-template-columns:auto auto;
		justify-content: space-between;
		margin-inline:auto;
		width:9.20rem;
	}
	@media (width <= 767px) {
		padding-inline:.40rem;
		padding-block:.96rem;
	}
	.heading {
		font-weight:700;
		font-size:.28rem;
		line-height:2.14;
		letter-spacing: .08em;
		@media (width <= 767px) {
			margin-bottom:.32rem;
			font-size:.20rem;
			line-height:2.0;
			letter-spacing: .1em;
		}
	}
	.desc {
		font-size:.16rem;
		font-weight:700;
		letter-spacing: .14em;
		line-height:2.62;
		text-align: justify;
		@media (width <= 767px) {
			font-size:.14rem;
			line-height:2.42;
			margin-right:-.40rem;
		}

		&:not(:first-child) {
			margin-top:1.5em;
		}
	}
}


/* .Nav
============================================================================= */
.quality-nav {
	@media (width > 767px) {
		background-color:var(--cc-gray-A);
		position:sticky;
		top:0;
		z-index: 1000;
	}
	@media (width <= 767px) {
	}
	> ul {
		display:grid;
		@media (width > 767px) {
			grid-template-columns:repeat(6,1fr);
			margin-inline:auto;
			width:14.00rem;
		}
		@media (width <= 767px) {
			grid-template-columns:repeat(2,1fr);
			gap:1px;
		}

		> li {
			position:relative;

			@media (width > 767px) {
				&:not(:first-child) {
					&::before {
						content:"";
						margin-block:auto;
						border-left:1px solid #fff;
						height:.40rem;
						position:absolute;
						inset-block:0;
						left:0;
					}
				}
			}
			@media (width <= 767px) {
				background-color:var(--cc-gray-A);
			}
			> a {
				display:flex;
				justify-content: center;
				align-items: center;
				height:.96rem;
				font-size:.16rem;
				font-weight:700;
				letter-spacing: .14em;
				line-height:2.62;
				gap:.16rem;
				transition-duration:.5s;
				transition-property:opacity;
				@media (hover) {
					&:hover {
						opacity:.6;
					}
				}
				@media (width <= 767px) {
					gap:.08rem;
					height:.88rem;
					font-size:.14rem;
					line-height:2.42;
				}

				> img {
					width:.24rem;
				}
			}
		}
	}
	.heading {
		font-weight:700;
		font-size:.28rem;
		line-height:2.14;
		letter-spacing: .08em;
		@media (width <= 767px) {
			margin-bottom:.32rem;
			font-size:.20rem;
			line-height:2.0;
			letter-spacing: .1em;
		}
	}
	.desc {
		font-size:.16rem;
		font-weight:700;
		letter-spacing: .14em;
		line-height:2.62;
		text-align: justify;
		@media (width <= 767px) {
			font-size:.14rem;
			line-height:2.42;
		}

		&:not(:first-child) {
			margin-top:1.5em;
		}
	}
}


/* .Main
============================================================================= */
.quality-main {
	position:relative;

	.-ss_side {
		position:absolute;
		height:100%;
		left:0;
		pointer-events: none;
		@media (width > 767px) {
			width:calc(100% * (1 - var(--tftl)));
			min-width:5.34rem;
		}
		@media (width <= 767px) {
			width:100%;
		}
		&:not([style*="--tftl: 0;"]) > .sticky .copy_1:not(.-fixed),
		&:not([style*="--tftl: 1;"]) > .sticky .copy_1:is(.-fixed) {
			transform:translateY(-.50rem);
			opacity:0;
			@media (width <= 767px) {
				transform:translateY(-.30rem);
			}
		}
		> .sticky {
			display:flex;
			justify-content: center;
			align-items: center;
			width:100%;
			position:sticky;
			top:.96rem;
			color:#fff;
			background-color:#fff;
			@media (width > 767px) {
				height:calc(100svh - .96rem);
			}
			@media (width <= 767px) {
				height:calc(100svh * (1 - var(--tftl)));
				min-height:1.80rem;
				z-index:1002;
				top:0;
			}
		}
		.quality-l-heading {
			padding-block:0;
			z-index: 10;
			position:absolute;
			@media (width > 767px) {
				margin-top:calc(-4.00rem * var(--tftl));
			}
			@media (width <= 767px) {
				margin-left:calc(-1.60rem * var(--tftl));
			}
		}
		.copy_1 {
			font-size:.36rem;
			font-weight:700;
			font-feature-settings: "palt" 0;
			letter-spacing: .15em;
			line-height:2;
			writing-mode: vertical-rl;
			position:absolute;
			z-index:10;
			white-space:nowrap;
			transition-property: opacity,transform;
			transition-duration: 1s;
			@media (width > 767px) {
				top:2.00rem;
				right:1.20rem;
			}
			@media (width <= 767px) {
				width:fit-content;
				font-size:.24rem;
				top:.64rem;
				right:.48rem;
			}
			&.-fixed {
				@media (width > 767px) {
					top:50svh;
					right:2.00rem;
				}
				@media (width <= 767px) {
					width:fit-content;
					font-size:.24rem;
					top:.36rem;
					right:.24rem;
				}
			}
		}
		.img {
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			transition-duration:.5s;
			transition-property: opacity;

			&:not(.is-active) {
				opacity:0;
			}
			img {
				width:100%;
				height:100%;
				object-fit: cover;
				@media (width > 767px) {
					object-position:top;
				}
			}
		}
	}
	.-ss_ios_wrap {
		padding-top:120svh;
		@media (width > 767px) {
			padding-left:5.34rem;
		}
		@media (width <= 767px) {
			padding-inline:.40rem;

		}
	}
	.-ss_ios_item {
		padding-block:1.40rem;
		@media (width <= 767px) {
			padding-block:.48rem;
		}
		.inner {
			@media (width > 767px) {
				margin-inline:auto;
				width:6.30rem;
			}
		}
		.blank {
			height:150svh;
			@media (width <= 767px) {
				height:50svh;
			}

			& + .inner {
				@media (width > 767px) {
					margin-top:-25svh;
				}
			}
		}

		.heading {
			display:flex;
			align-items: flex-end;
			gap:.16rem;
			margin-bottom:.32rem;
			color:var(--cc-green-A);
			line-height:1;
			border-bottom:1px solid;
			padding-bottom:.08rem;
			width:fit-content;
			@media (width <= 767px) {
				gap:.08rem;
				margin-bottom:.24rem;
			}

			.en {
				display:flex;
				align-items: flex-end;
				gap:.08rem;
				line-height:.7;
				@media (width <= 767px) {
					gap:.04rem;
				}
				small {
					margin-bottom:.1em;
					font-size:.24rem;
					@media (width <= 767px) {
						font-size:.18rem;
					}
				}
				span {
					margin-bottom:-.1em;
					font-size:.54rem;
					@media (width <= 767px) {
						font-size:.40rem;
					}
				}
			}
			.ja {
				font-weight:700;
				font-size:.18rem;
				letter-spacing: .14em;
				@media (width <= 767px) {
					font-size:.16rem;
				}
			}
		}

		.subheading {
			margin-bottom:.12rem;
			font-size:.28rem;
			font-weight:700;
			letter-spacing: .1em;
			line-height:2.14;
			@media (width <= 767px) {
				margin-block:.24rem .12rem;
				font-size:.20rem;
				line-height:2.0;
			}
		}
		.desc {
			font-weight:700;
			font-size:.16rem;
			line-height:2.14;
			letter-spacing: .09em;
			text-align: justify;
			@media (width > 767px) {
			}
			@media (width <= 767px) {
				font-size:.14rem;
				line-height:1.8;
				letter-spacing: .14em;
			}
		}
		.figure {
			margin-top:.64rem;
			@media (width <= 767px) {
				margin-top:.40rem;
			}

			img {
				@media (width > 767px) {
					width:var(--pc-w);
				}
				@media (width <= 767px) {
					width:var(--sp-w);
				}

			}
		}
	}
}


/* .Feature
============================================================================= */
.quality-features {
	padding-bottom:1.20rem;
	background-color:rgb(from var(--cc-blue-B) r g b / 0.85);
	color:#fff;
	position:relative;

	@media (width <= 767px) {
		padding-bottom:.60rem;
	}

	.quality-l-deco {
		color:#001432;
	}
	.quality-l-heading {
		@media (width > 767px) {
			padding-top:1.60rem;
		}
	}
}
.quality-features-contents {
	display:grid;
	gap:.80rem;
	@media (width > 767px) {
		margin-inline:auto;
		width:12.00rem;
	}
	@media (width <= 767px) {
		padding-inline:.40rem;
		gap:.48rem;
	}

	.item {
		display:grid;

		@media (width > 767px) {
			grid-template-rows:1px auto auto 1fr;
			grid-template-columns:4.80rem 1fr;
			column-gap:.80rem;
		}
		@media (width <= 767px) {
				padding-top:.24rem;
				position:relative;
		}

		&::before,&::after {
			content:"";
			border-top:1px solid #ABABAB;
			margin-bottom:.48rem;
			@media (width > 767px) {
				grid-row:1/2;
				grid-column:2/3;
			}
			@media (width <= 767px) {
				position:absolute;
				top:0;
				left:0;
			}
		}
		&::before {
			border-top:1px solid #ABABAB;
			@media (width <= 767px) {
				width:100%;
			}
		}
		&::after {
			border-top:1px solid var(--cc-green-A);
			@media (width > 767px) {
				width:1.20rem;
			}
			@media (width <= 767px) {
				width:.56rem;
			}
		}
	}
	.img {
		@media (width > 767px) {
			grid-row:1/-2;
			grid-column:1/2;
		}
	}
	.heading {
		display:flex;
		align-items: center;
		line-height:1;
		font-weight:700;
		@media (width > 767px) {
			grid-row:2/3;
			grid-column:2/3;
			margin-block:.48rem .24rem;
		}
		@media (width <= 767px) {
			margin-bottom:.20rem;
		}

		.v {
			writing-mode: vertical-rl;
			font-size:.14rem;
			letter-spacing: .2em;
			line-height:1.2;
			@media (width <= 767px) {
				font-size:.12rem;
			}
		}
		.n {
			margin-inline:.04rem .08rem;
			font-weight:400;
			font-size:.52rem;
			letter-spacing: 0;
			@media (width <= 767px) {
				font-size:.40rem;
			}
		}
		.t {
			font-size:.20rem;
			letter-spacing: .04em;
			@media (width <= 767px) {
				font-size:.16rem;
			}
		}
	}
	.text {
		@media (width > 767px) {
			grid-row:3/4;
			grid-column:2/3;
		}
		@media (width <= 767px) {
		}
	}
	.text-heading {
		margin-bottom:.12rem;
		font-size:.28rem;
		font-weight:700;
		letter-spacing: .1em;
		line-height:2.14;
		@media (width <= 767px) {
			margin-block:.32rem .16rem;
			font-size:.20rem;
			line-height:2.0;
		}
	}
	.text-desc {
		font-size:.16rem;
		font-weight:700;
		letter-spacing: .13em;
		line-height:2.62;
		text-align: justify;
		@media (width <= 767px) {
			font-size:.14rem;
			line-height:2.0;
			letter-spacing: .14em;
		}
	}
	.text-note {
		margin-top:.12rem;
		font-size:.13rem;
		letter-spacing: .08em;
		line-height:1.8;
		@media (width <= 767px) {
			font-size:.11rem;
			letter-spacing: .14em;
		}
	}
}


/* .Spec
============================================================================= */
.quality-spec {

	@media (width > 767px) {
		display:grid;
		grid-template-columns:repeat(3,1fr);
		margin-inline:auto;
		gap:.48rem;
		padding-top:1.60rem;
		width:12.00rem;
	}
}
.quality-spec-header {
	@media (width > 767px) {
		display:flex;
		justify-content: center;
		align-items: center;
		height:auto;
		aspect-ratio: 1/1;
		background-color:var(--cc-blue-B);
		color:#fff;
	}
	.quality-l-heading {
		@media (width > 767px) {
			padding-block:0;
			align-items: flex-start;
			text-align: left;
		}
	}
}
.quality-spec-contents {
	@media (width > 767px) {
		display:contents !important;
	}
	@media (width <= 767px) {
		padding-inline:.40rem;
		overflow:hidden;
	}
	.splide__track {
		@media (width > 767px) {
			display:contents !important;
		}
		@media (width <= 767px) {
			overflow:visible;
		}
	}
	.splide__list {
		@media (width > 767px) {
			display:contents !important;
		}
		@media (width <= 767px) {
			align-items: flex-start;
		}
	}
	.splide__slide {
		background-color:var(--cc-gray-A);
		position:relative;
		@media (width > 767px) {
			height:auto;
			aspect-ratio: 1/1;
			padding:1.36rem .32rem .32rem;
		}
		@media (width <= 767px) {
			padding:1.16rem .20rem .20rem;
		}
	}
	.splide__arrow {
		display:flex;
		justify-content: center;
		align-items: center;
		width:.60rem;
		height:.60rem;
		margin-block:auto;
		position:absolute;
		inset-block:0;
		z-index: 10;
		&.is-prev {
			left:-.10rem;
			transform:scaleX(-1);
		}
		&.is-next {
			right:-.10rem;
		}

		svg {
			width:100%;
			height:auto;
			fill:var(--cc-blue-B);
		}
	}

	.number {
		display:flex;
		justify-content: center;
		align-items: center;
		width:.80rem;
		height:auto;
		aspect-ratio: 1/1;
		background-color:var(--cc-blue-B);
		color:#fff;
		position:absolute;
		top:0;
		left:0;
		@media (width <= 767px) {
			width:.72rem;
		}

		.number_inner {
			display:flex;
			justify-content: center;
			align-items: center;
			font-weight:400;
			border-bottom:1px solid;
			line-height:1;
			> small {
				writing-mode: vertical-rl;
				font-size:.13rem;
				letter-spacing: .03em;
				@media (width <= 767px) {
					font-size:.12rem;
				}
			}
			> span {
				font-size:.38rem;
				letter-spacing: .03em;
				@media (width <= 767px) {
					font-size:.34rem;
				}
			}
		}
	}
	.icon {
		position:absolute;
		pointer-events:none;
		@media (width > 767px) {
			width:var(--pc-w);
			inset:var(--pc-pos);
		}
		@media (width <= 767px) {
			width:var(--sp-w);
			inset:var(--sp-pos);
		}
	}
	.heading {
		margin-bottom:.12rem;
		font-weight:700;
		@media (width > 767px) {
			display:flex;
			align-items: flex-end;
			font-size:.24rem;
			line-height:1.6;
			letter-spacing: .08em;
			min-height:2lh;
		}
		@media (width <= 767px) {
			font-size:.18rem;
			line-height:1.7;
			letter-spacing: .10em;
			margin-bottom:.08rem;
		}

		sup {
			font-size:.14rem;
			@media (width <= 767px) {
				font-size:.12rem;
			}
		}
	}
	.desc {
		font-size:.14rem;
		font-weight:700;
		line-height:2.0;
		letter-spacing: .08em;
		text-align: justify;
		@media (width <= 767px) {
			font-size:.12rem;
			font-weight:700;
			line-height:1.8;
			letter-spacing: .08em;
		}
	}
	.sp_note {
		@media (width <= 767px) {
			margin-block:.08rem -.08rem;
			font-size:.08rem;
			line-height:1.6;
			letter-spacing: .08em;
			font-weight:700;
		}
	}
}
.quality-spec-pc_note {
	@media (width > 767px) {
		grid-column:1/-1;
		margin-top:-.12rem;
		margin-left:auto;
		font-size:.13rem;
		font-weight:700;
		line-height:1;
		letter-spacing: .08em;
	}
}


/* .Merit
============================================================================= */
.quality-specification {
	position:relative;
	@media (width <= 767px) {
		padding-bottom:.32rem;
	}

	.quality-l-deco {
		padding-top:1.20rem;
	}
}
.quality-specification-contents {
	@media (width > 767px) {
		margin-inline:auto;
		width:12.00rem;
		overflow:hidden;
	}
	@media (width <= 767px) {
	}
	.buttons {
		display:grid;
		grid-template-columns:repeat(4,1fr);
		gap:.40rem;
		margin-bottom:.48rem;

		@media (width <= 767px) {
			padding-inline:.40rem;
			grid-template-columns:repeat(2,1fr);
			gap:.10rem;
			margin-bottom:.40rem;
		}
	}
	.js-tab-button {
		display:flex;
		justify-content: center;
		align-items: center;
		position:relative;

		&[aria-expanded="true"] {
			&::before {
				opacity:1;
			}
			.text > i {
				background-color:var(--cc-green-A);
				&::after {
					border-right-color:#fff;
					border-bottom-color:#fff;
				}
			}
		}

		@media (hover) {
			&:hover {
				&::before {
					opacity:1;
				}
			}
		}

		&::before {
			content:"";
			margin:auto;
			background-color:rgba(0,0,0,.4);
			backdrop-filter:blur(5px);
			position:absolute;
			inset:0;
			transition-duration:.5s;
			transition-property:opacity;
			opacity:0;
			z-index: 9;
		}

		.text {
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			gap:.08rem;
			font-weight:700;
			font-size:.20rem;
			letter-spacing: .04em;
			line-height:1;
			color:#fff;
			position:absolute;
			z-index: 10;
			@media (width <= 767px) {
				gap:.04rem;
				font-size:.14rem;
			}

			> i {
				display:flex;
				justify-content: center;
				align-items: center;
				border-radius:50%;
				border:1px solid var(--cc-green-A);
				width:.24rem;
				height:.24rem;
				background-color:#fff;
				transition-duration:.5s;
				transition-property:background-color;
				@media (width <= 767px) {
					width:.16rem;
					height:.16rem;
				}
				&::after {
					content:"";
					display:block;
					margin-top:-.03rem;
					width:.04rem;
					height:.04rem;
					border-right:1px solid var(--cc-green-A);
					border-bottom:1px solid var(--cc-green-A);
					transform:rotate(45deg);
					transition-duration:.5s;
					transition-property:border-color;
					@media (width <= 767px) {
						margin-top:-.01rem;
						width:.03rem;
						height:.03rem;
					}
				}
			}
		}
	}
	.item {
		width:100%;
	}
	.splide__track {
		overflow:visible;
	}
	.splide__slide {
		display:grid;
		position:relative;
		width:100%;

		@media (width > 767px) {
			grid-template-columns:1fr 7.20rem;
			gap:1.00rem;
		}
		@media (width <= 767px) {
			align-content: flex-start;
			padding-inline:.40rem;
		}
		.text {
			@media (width <= 767px) {
				display:contents;
			}
		}

		.heading {
			display:grid;
			gap:.16rem;
			line-height:1;

			@media (width > 767px) {
				padding-block:.72rem .32rem;
			}
			@media (width <= 767px) {
				grid-row:1/2;
				gap:.12rem;
				padding-bottom:.28rem;
			}

			.en {
				font-weight:400;
				font-size:.56rem;
				letter-spacing: 0;

				@media (width <= 767px) {
					font-size:.36rem;
				}
			}
			.ja {
				font-weight:700;
				font-size:.16rem;
				letter-spacing: .04em;
				
				@media (width <= 767px) {
					font-size:.12rem;
				}
			}
		}
		.desc {
			font-weight:700;
			font-size:.16rem;
			line-height:2.62;
			letter-spacing: .14em;
			text-align: justify;
			@media (width <= 767px) {
				grid-row:3/4;
				font-size:.14rem;
				line-height:2;
				letter-spacing: .14em;
			}
		}
		.img {
			position:relative;
			@media (width <= 767px) {
				margin-bottom:.20rem;
				margin-inline:-.40rem;
				height:3.20rem;

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

			.cap {
				font-weight:700;
				font-size:.16rem;
				line-height:1;
				letter-spacing: .14em;
				position:absolute;
				left:.26rem;
				bottom:.24rem;
				@media (width <= 767px) {
					font-size:.12rem;
					left:.16rem;
					bottom:.16rem;
				}
				&.-white {
					color:#fff;
				}
			}
		}
	}
	.pagination {
		display:flex;
		align-items: center;
		width:fit-content;
		gap:.08rem;
		font-size:.16rem;
		color:var(--cc-green-A);
		@media (width > 767px) {
			position:absolute;
			right:8.20rem;
			bottom:0;
		}
		@media (width <= 767px) {
			justify-content: flex-end;
			margin-top:.16rem;
			height:.45rem;
			margin-inline:0;
			padding-right:.64rem;
			background-color:#fff;
			width:100%;
			position:sticky;
			bottom:0;
		}
		.timebar {
			margin-right:.16rem;
			width:.64rem;
			height:1px;
			background-color:#d3d3d3;
			position:relative;
			&::after {
				content:"";
				display:block;
				background-color:var(--cc-green-A);
				width:calc(100% * var(--progress));
				height:100%;
				position:absolute;
				top:0;
				left:0;
			}
		}
		.button {
			
			&::after {
				content:"";
				display:block;
				margin-top:-.03rem;
				width:.08rem;
				height:.08rem;
				border-top:1px solid var(--cc-green-A);
				border-right:1px solid var(--cc-green-A);
				transform:rotate(45deg);
				transition-duration:.5s;
				transition-property:border-color;
			}

			&.is-prev {
				transform:scaleX(-1);
			}
		}
	}
}
.quality-specification-others {
	@media (width > 767px) {
		margin-inline:auto;
		width:12.00rem;
		overflow:hidden;
	}
	@media (width <= 767px) {
		padding-inline:.40rem;
	}

	.heading {
		display:flex;
		align-items: center;
		justify-content: center;
		gap:.16rem;
		margin-block:.96rem .40rem;
		text-align: center;
		font-weight:700;
		font-size:.28rem;
		line-height:2.14;
		letter-spacing: .1em;
		@media (width <= 767px) {
			gap:.08rem;
			margin-block:.64rem .24rem;
			font-size:.20rem;
		}

		&::before,&::after {
			flex:1;
			content:"";
			border-bottom:1px solid #D3D3D3;
		}
	}
	.list {
		display:grid;

		@media (width > 767px) {
			grid-template-columns:repeat(6,1fr);
			gap:.18rem;
		}
		@media (width <= 767px) {
			border-bottom:1px solid #d3d3d3;
			padding-bottom:.32rem;
		}
	}
	.item {
		@media (width <= 767px) {
			display:grid;
			grid-template-rows:auto 1fr;
			grid-template-columns:1.20rem 1fr;
			gap:.12rem .20rem;
			&:not(:first-child) {
				margin-top:.32rem;
				border-top:1px solid #d3d3d3;
				padding-top:.32rem;
			}
		}
		.img {
			@media (width <= 767px) {
				grid-row:1/-1;
			}
		}
		.h {
			font-weight: 700;
			font-size:.16rem;
			line-height:1;
			letter-spacing: .04em;
			@media (width > 767px) {
				margin-block:.24rem .16rem;
				text-align: center;
			}
			@media (width <= 767px) {
				font-size:.15rem;
			}
		}
		.d {
			font-weight: 700;
			font-size:.13rem;
			line-height:1.8;
			letter-spacing: .12em;

			@media (width > 767px) {
				margin-inline:.08rem;
			}
			@media (width <= 767px) {
				font-size:.12rem;
			}
		}
	}
	.list2 {
		margin-top:.80rem;
		background-color:var(--cc-gray-A);
		padding:.32rem .48rem;
		font-weight:700;
		font-size:.16rem;
		line-height:2.62;
		letter-spacing: .13em;
		@media (width <= 767px) {
			padding:.25rem;
			font-size:.14rem;
			line-height:2.0;
			letter-spacing: .14em;
		}
	}
	.note {
		margin-top:.12rem;
		font-size:.13rem;
		font-weight:700;
		line-height:2;
		letter-spacing: .08em;
		@media (width > 767px) {
			width:fit-content;
			margin-left:auto;
		}
		@media (width <= 767px) {
			margin-top:.12rem;
			font-size:.11rem;
		}
	}

}

/* .Merit
============================================================================= */
.quality-merit {
	padding-bottom:1.60rem;
	position:relative;
	@media (width <= 767px) {
		padding-bottom:.64rem;
	}

	.merit-table {
		@media (width > 767px) {
			margin-inline:auto;
			width:10.40rem;
		}
		.inner {
			@media (width <= 767px) {
				padding-left:.40rem;
				padding-bottom:.48rem;
				overflow-x:scroll;
				.simplebar-content {
					display:flex;
					&::after {
						flex-shrink:0;
						content:"";
						width:.40rem;
					}
				}
				.simplebar-horizontal {
					margin-inline:.40rem;
					height:1px;
					background-color:var(--cc-gray-A);
					.simplebar-scrollbar {
						background-color:var(--cc-green-A);
						&::after {
							content:none;
						}
					}
				}
			}
		}
		table {
			table-layout: fixed;
			border-collapse: collapse;
			@media (width > 767px) {
				width:100%;
			}
			@media (width <= 767px) {
				flex-shrink: 0;
			}	
		}
		col {
			@media (width > 767px) {
				width:var(--w-pc);
			}
			@media (width <= 767px) {
				width:var(--w-sp);
			}
		}
		thead {
			th {
				&:not(.blank) {
					border-top:1px solid var(--cc-gray-B);
				}
				&.modenato {
					background-color:var(--cc-blue-B);
					color:#fff;
				}
			}
		}
		tbody {
			tr {
				&:nth-child(odd) {
					background-color:var(--cc-gray-A);
				}
				@media (width <= 767px) {
					&:nth-child(odd) {
						th:first-child {
							background-color:var(--cc-gray-A);
						}
					}
					&:nth-child(even) {
						th:first-child {
							background-color:#fff;
						}
					}
					th:first-child {
						&::after {
							content:"";
							display:block;
							border-right:1px solid var(--cc-gray-B);
							height:100%;
							position:absolute;
							right:-1px;
							top:0;
						}
					}
				}
			}
		}
		:is(th,td) {
			border-bottom:1px solid var(--cc-gray-B);
			padding-block:.24rem;
			vertical-align: middle;
			font-size:.16rem;
			font-weight:700;
			line-height:1;
			letter-spacing: .13em;
			text-align: center;
			@media (width <= 767px) {
				font-size:.12rem;
			}
			& + :is(th,td) {
				border-left:1px solid var(--cc-gray-B);
			}
		}
		th {
			@media (width <= 767px) {
				&:first-child {
					position:sticky;
					left:0;
					z-index: 1;
				}
			}
		}
		td {
			&.modenato {
				color:var(--cc-green-A);
			}
			:is(.valid,.in_valid) {
				display:inline-flex;
				justify-content: center;
				align-items:center;
				width:.32rem;
				height:.32rem;
				position:relative;
				@media (width <= 767px) {
					width:.20rem;
					height:.20rem;
				}
			}
			.valid {
				border:2px solid;
				border-radius:50%;
			}
			.in_valid {
				transform:rotate(45deg);
				&::before,&::after {
					content:"";
					position:absolute;
				}
				&::before {
					border-bottom:2px solid;
					width:100%;
				}
				&::after {
					border-right:2px solid;
					height:100%;
				}
			}
		}
		.note {
			margin-top:.12rem;
			font-size:.13rem;
			font-weight:700;
			line-height:1;
			letter-spacing: .08em;
			@media (width > 767px) {
				width:fit-content;
				margin-left:auto;
			}
			@media (width <= 767px) {
				margin-top:-.32rem;
				font-size:.11rem;
				position:absolute;
				left:.40rem;
			}
		}
	}
	.scroll-hint-icon-wrap {
		z-index:10;
	}
}
.merit-point {
	display:grid;
	@media (width > 767px) {
		margin-block:.08rem -.32rem;
		margin-inline:auto;
		width:10.40rem;
	}
	@media (width <= 767px) {
		margin-block:.24rem -.24rem;
		padding-inline:.60rem;
	}

	.item {
		display:grid;
		@media (width > 767px) {
			grid-template-rows:auto auto;
			grid-template-columns:.96rem 1fr;
			gap:.08rem .40rem;
			padding:.36rem .40rem .32rem;
		}
		@media (width <= 767px) {
			padding-block:.24rem;
		}
		&:not(:first-child) {
			border-top:1px solid var(--cc-gray-B);
		}

		> img {
			@media (width > 767px) {
				grid-row:1/-1;
				margin-block:auto;
			}
			@media (width <= 767px) {
				margin-bottom:.16rem;
				margin-inline:auto;
				width:.80rem;
			}
		}
		.heading {
			margin-bottom:.08rem;
			font-weight:700;
			font-size:.24rem;
			line-height:1.8;
			letter-spacing: .1em;
			@media (width > 767px) {
				margin-top:auto;
			}
			@media (width <= 767px) {
				font-size:.20rem;
				line-height:1.6;
				text-align: center;
			}
		}
		.desc {
			font-weight:700;
			font-size:.16rem;
			line-height:2.14;
			letter-spacing: .09em;
			text-align: justify;
			@media (width > 767px) {
				margin-bottom:auto;
			}
			@media (width <= 767px) {
				font-size:.14rem;
				line-height:1.8;
				letter-spacing: .14em;
			}

			.note {
				font-size:.13rem;
				letter-spacing: .08em;
				@media (width > 767px) {
					margin-left:1em;
				}
				@media (width <= 767px) {
					display:block;
					margin-top:.08rem;
					font-size:.11rem;
				}
			}
		}
	}
}



/* .Support
============================================================================= */
.quality-support {
	padding-bottom:1.20rem;
	position:relative;
	background-color:var(--cc-gray-A);
	@media (width <= 767px) {
		padding-bottom:.64rem;
	}
}

.quality-support-contents {
	display:grid;
	gap:.48rem;
		
	@media (width > 767px) {
		margin-inline:auto;
		width:12.00rem;
	}
	@media (width <= 767px) {
		padding-inline:.20rem;
	}

	> .item {
		background-color:#fff;

		@media (width <= 767px) {
			position:relative;
		}
	}
	
	.main {
		display:grid;
		align-items: flex-start;
		padding:.80rem .80rem .72rem;

		@media (width > 767px) {
			grid-template-rows:auto 1fr;
			grid-template-columns:1.12rem 1fr auto;
			column-gap:.40rem;
		}
		@media (width <= 767px) {
			padding:.64rem .40rem .40rem;

			&.-sp_pbs {
				padding-top:.80rem;
			}
		}
		.number {
			display:flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap:.06rem;
			border-radius:50%;
			padding-top:.08rem;
			border:1px solid;
			height:auto;
			aspect-ratio: 1/1;
			font-size:.50rem;
			line-height:1;
			text-align: center;
			color:var(--cc-green-A);
	
			@media (width > 767px) {
				grid-row:1/-1;
				grid-column:1/2;
			}
			@media (width <= 767px) {
				gap:.04rem;
				padding-top:.04rem;
				width:.80rem;
				font-size:.36rem;
				position:absolute;
				top:.28rem;
				right:.12rem;
			}
	
			> small {
				font-size:.14rem;
				letter-spacing: .03em;
				@media (width <= 767px) {
					font-size:.10rem;
				}
			}
		}
	
		.heading {
			margin-bottom:.20rem;
			border-bottom:1px solid var(--cc-gray-A);
			padding-bottom:.16rem;
			font-size:.28rem;
			font-weight:700;
			letter-spacing: .1em;
			line-height:1.7;
			position:relative;
	
			@media (width <= 767px) {
				font-size:.20rem;
				line-height:1.8;
			}
			&::after {
				content:"";
				display:block;
				position:absolute;
				border-bottom:1px solid var(--cc-green-A);
				width:.80rem;
				position:absolute;
				bottom:-1px;
				left:0;
			}
	
	
			@media (width > 767px) {
				grid-row:1/2;
				grid-column:2/3;
			}
		}
	
		.desc {
			font-size:.16rem;
			font-weight:700;
			letter-spacing: .14em;
			line-height:2.14;
			text-align: justify;
	
			@media (width > 767px) {
				grid-row:2/3;
				grid-column:2/3;
			}
			@media (width <= 767px) {
				font-size:.14rem;
				letter-spacing: .08em;
				line-height:2;
			}
	
			> .note {
				display:block;
	
				@media (width <= 767px) {
					font-size:.12rem;
					letter-spacing: .08em;
				}
			}
		}
	
		.img {
	
			@media (width > 767px) {
				grid-row:1/-1;
				grid-column:3/4;
				margin-left:.08rem;
				width:2.00rem;
			}
			@media (width <= 767px) {
				margin-top:.24rem;
				margin-left:auto;
				width:1.60rem;
			}
		}

		.detail_open {
			display:flex;
			align-items:center;
			justify-content: center;
			margin:.32rem -.20rem -.16rem;
			color:#fff;
			height:.46rem;
			font-size:.15rem;
			letter-spacing: .1em;
			font-weight:700;
			background-color:var(--cc-green-A);
			position:relative;

			&[aria-expanded="true"] {
				&::after {
					transform:scaleY(-1);
				}
			}

			&::after {
				content:"";
				margin-block:auto;
				width:.12rem;
				height:.09rem;
				background-color:#fff;
				position:absolute;
				inset-block:0;
				right:.16rem;
				clip-path:polygon(0 0, 100% 0, 50% 100%);
				transition-duration:.5s;
				transition-property: transform;
			}
		}
	}

	.detail {
		
		@media (width > 767px) {
			position:relative;
			border-top:1px solid var(--cc-green-A);

			&::after {
				content:"";
				margin-inline:auto;
				width:.20rem;
				height:.16rem;
				background-color:var(--cc-green-A);
				position:absolute;
				inset-inline:0;
				top:-1px;
				clip-path:polygon(0 0, 100% 0, 50% 100%);
			}
		}
		.detail_inner {
			display:grid;
			padding:.60rem .80rem .80rem;
	
			@media (width > 767px) {
				grid-template-columns:1fr 1fr;
				gap:.40rem;
			}
			@media (width <= 767px) {
				padding:0 .20rem .48rem;
				gap:.24rem;
			}
		}
		.detail_item {
			padding:.40rem;
			background-color:var(--cc-gray-A);

			@media (width <= 767px) {
				padding:.32rem .24rem;
			}
		}
		.close {
			display:flex;
			align-items:center;
			margin-top:.08rem;
			gap:.08rem;
			margin-inline:auto;
			border-bottom:1px solid;
			padding-bottom:.08rem;
			width:fit-content;
			font-size:.14rem;
			font-weight:700;
			letter-spacing: .1em;
			line-height:1;
			color:var(--cc-green-A);
			position:relative;

			> i {
				display:flex;
				justify-content: center;
				align-items: center;
				width:.12rem;
				height:.12rem;
				position:relative;
				transform:rotate(45deg);

				&::before,&::after {
					content:"";
					display:block;
					background-color: var(--cc-green-A);
					position:absolute;
				}
				&::before {
					width:100%;
					height:1px;
				}
				&::after {
					width:1px;
					height:100%;
				}
			}
		}
		.heading {
			margin-bottom:.12rem;
			font-size:.24rem;
			font-weight:700;
			letter-spacing: .1em;
			line-height:1.8;
			color:var(--cc-green-A);
			position:relative;
	
			@media (width <= 767px) {
				font-size:.18rem;
				line-height:1.6;
			}
		}
		.desc {
			font-size:.16rem;
			font-weight:700;
			letter-spacing: .14em;
			line-height:2.14;
			text-align: justify;
	
			@media (width > 767px) {
			}
			@media (width <= 767px) {
				font-size:.14rem;
				letter-spacing: .14em;
				line-height:1.8;
			}
		}
	}
}