@charset "UTF-8";

/* =========================
   共通スタイル
========================= */

/* =========================
   共通スタイル PC用
========================= */
@media (min-width: 1024px) {
}

/* =========================
   Main View 共通+SP用
========================= */

/* 矢印ボタンの色 */
.swiper-button-next,
.swiper-button-prev {
  color: #333;
}


.main-view {
	width: 100%;
	box-sizing: border-box;
}
.main-view > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
/*	 デフォルトカラー */
.main-view_color-default {
	color: #4d4d4d;
}

.main-view__item {
	display: flex;
	flex-direction: column;
	position: relative;
}
.main-view__logo {
	display: block;
	max-width: 200px;
	padding-left: 8px;
	margin-bottom: 8px;
}
.main-view__catch {
	font-size: 26px;
	font-weight: 350;
}

/* スライダー */
.main-view__slider {
	width: 100%;
	position: relative;
}
#main-view.main-view .main-view__item .main-view__pagination.swiper-pagination {
	bottom: -16px;
}
.main-view__pagination .swiper-pagination-bullet {
	width: 9.9px;
	height: 9.9px;
	background: #e6e6e6;
	opacity: 0.5;
}
.main-view__pagination .swiper-pagination-bullet-active {
	opacity: 1;
	background: #7f7f7f;
}

/* 情報テキスト */
.main-view__info {
	padding: 55px 8px 32px;
}
.main-view__catch {
	font-size: 26px;
	line-height: 40px;
	margin-bottom: 16px;
}
.main-view__text {
	font-size: 14px;
	line-height: normal;
	white-space: normal;
	text-align: left;
}

/* =========================
   Main View PC用
========================= */
@media (min-width: 1024px) {

	.main-view {
		max-width: 1200px;
		margin: 0 auto;
	}
	.main-view__item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.main-view__logo {
		max-width: 300px;
		margin-bottom: 23.5px;
		padding-left: 0px;
	}
	.main-view__catch {
		font-size: 45px;
		font-weight: 700;
		line-height: 60px;
		letter-spacing: 0px;
	}
	.main-view__text {
		font-size: 16px;
		line-height: 35px;
		text-align: center;
	}

	.main-view__slider {
		max-width: 880px;
	}
	.main-view__slide img {
		width: 100%;
		height: auto;
	}
	#main-view.main-view .main-view__item .main-view__pagination.swiper-pagination {
		bottom: -16px;
		text-align: right;
		max-width: 1200px;
	}
}

/* =========================
   Page Nav 共通+SP用
========================= */
.page-nav {
	background-color: #f2f2f2;
	padding: 24px 8px;
}
.page-nav  > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo"	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
.page-nav__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.page-nav__link {
	display: block;
	background-color: #fff;
	padding: 13px 0px;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	line-height: 22px;
	text-align: center;
	position: relative;
}
.page-nav__sub-text {
	display: block;
	color: #333;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

.page-nav__link::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	background-image: url("https://perfect-floors.jp/erecta/ere_images/anchor_btn.png");
	background-repeat: no-repeat;
}

/* =========================
   Page Nav PC用
========================= */

@media (min-width: 1024px) {
	.page-nav {
		padding: 42px 0;
	}
	.page-nav__list {
		max-width: 1200px;
		margin: 0 auto;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
	}
	.page-nav__link {
		padding: 18px 0px;
		font-size: 20px;
		line-height: 32px;
	}
	.page-nav__link::after {
		right: 45px;
	}
	.page-nav__sub-text {
		font-size: 14px;
		font-weight: 400;
		line-height: 18px;
	}
}

/* =========================
   Popular Products 共通+SP用
========================= */
.popular-products {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 8px;
}
.popular-products  > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
.popular-products__heading {
	font-size: 18px;
	font-weight: 800;
	line-height: 22px;
	color: #4d4d4d;
	margin-bottom: 16px;
}

.popular-products__swiper {
  overflow: visible;
}
.swiper-wrapper {
  display: flex;
}
.swiper-slide.popular-products__item {
  width: 144px !important;
  flex-shrink: 0;
}

.popular-products__thumbnal {
	border: 1px solid #e6e6e6;
}
.popular-products__name {
	font-size: 11px;
	font-weight: 300;
	line-height: 14px;
	color: #333;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 4px;
}
.popular-products__price {
	font-size: 12px;
	font-weight: 800;
	line-height: 16px;
	color: #080808;
	margin-bottom: 4px;
}
/* 価格表示要素の前に「¥」記号を挿入する */
.popular-products__price::before {
    content: "¥"; /* 挿入する文字 */
    /* 価格（数字）の直前に来るように、わずかにスペースを調整することも可能 */
    /* margin-right: 0.1em; */ 
}
.popular-products__specs {
	display: flex;
	gap: 4px;
}
.popular-products__spec {
	font-size: 10px;
	font-weight: 400;
	line-height: 12px;
	color: #333;
	padding: 5px 4px;
	background-color: #f2f2f2;
}

/* =========================
   Popular Products PC用
========================= */
@media (min-width: 1024px) {
	.popular-products__heading {
		font-size: 20px;
		font-weight: 600;
		line-height: 32px;
		color: #333;
		margin-bottom: 8px;
	}
	.popular-products__swiper {
  	overflow: hidden;
		max-width: 1200px;
	}
	.swiper-slide.popular-products__item {
    width: 168px;
  }
	.popular-products__list {
		scrollbar-width: thin;
	}
	.popular-products__item {
		width: 168px;
	}
	.popular-products__link{
		-webkit-user-drag: none;
		user-select: none;

	}
	.popular-products__thumbnal {
		margin-bottom: 11px;
    -webkit-user-drag: none;
    user-select: none;
	}

	.popular-products__name {
		font-size: 13px;
		font-weight: 300;
		line-height: 16px;
	}
	.popular-products__price {
		font-size: 14px;
		font-weight: 800;
		line-height: 18px;
	}
	.popular-products__spec {
		font-size: 12px;
		line-height: 14px;
		padding: 6px 5px;
	}
}

/* =========================
   Series Selector 共通+SP用
========================= */

.series-selector {
	background-color: #f2f2f2;
	padding: 40px 8px;
}
.series-selector  > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
.series-selector__heading {
	font-size: 18px;
	font-weight: bold;
	line-height: 22px;
	color: #4d4d4d;
	margin-bottom: 16px;
	text-align: center;
}

.series-selector__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.series-selector__item {
	background-color: #fff;
	position: relative;
	height: 230px;
	text-align: center;
}
.series-selector__item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 37px;
	height: 27px;
	background-image: url("https://perfect-floors.jp/erecta/ere_images/anchor_btn.png");
	background-repeat: no-repeat;
}
.series-selector__thumbnal {
	margin-bottom: 17px;
}
.series-selector__text {
	font-size: 11px;
	font-weight: 400;
	line-height: 14px;
	color: #949494;
	margin-bottom: 10px;
}
.series-selector__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	color: #555;
}
.series-selector__sub-name {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #333;
}

/* =========================
   Series Selector PC用
========================= */
@media (min-width: 1024px) {

	.series-selector {
		padding: 48px 0;
	}
	.series-selector__heading {
		font-size: 28px;
		font-weight: 600;
		line-height: 42px;
		color: #4d4d4d;
		margin-bottom: 20px;
	}
	.series-selector__list {
		max-width: 820px;
		margin: 0 auto;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px 40px;
	}
}

/* =========================
  Series 共通+SP用
========================= */
.series {
	padding: 32px 0 16px;
}
.series  > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
.series-header {
	padding: 32px 0;
	text-align: center;
}
.seris-header__logo {
	max-width: 260px;
	margin-bottom: 10px;
}
.series-header__description {
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
	color: #7f7f7f;
}

/* カタログ */
.series__catalog-link {
	display: block;
	padding: 0 7.5px 16px;
}

.series__list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	padding: 8px 0 24px;
}
.series__item {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 16px 34px;
	height: 200px;
}
.series_basic {
	background: url("https://perfect-floors.jp/erecta/ere_images/seriesbgimg_b01.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.series_order {
	background: url("https://perfect-floors.jp/erecta/ere_images/seriesbgimg_b02.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.siries_vintage {
	background: url("https://perfect-floors.jp/erecta/ere_images/seriesbgimg_b03.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.series_super-wire {
	background: url(https://perfect-floors.jp/erecta/ere_images/seriesbgimg_s01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.series_super-sorid {
	background: url(https://perfect-floors.jp/erecta/ere_images/seriesbgimg_s02.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.series_super-parts {
	background: url(https://perfect-floors.jp/erecta/ere_images/seriesbgimg_s03.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.series_first {
	background: url(https://perfect-floors.jp/erecta/ere_images/seriesbgimg_f01.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.series_first-parts {
	background: url(https://perfect-floors.jp/erecta/ere_images/seriesbgimg_f02.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.series_metro-q {
	background: url(https://vegasiku.com/perfect-space/lp/erectanew/metro_q.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.series_metro-4 {
	background: url(https://vegasiku.com/perfect-space/lp/erectanew/metro_4.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.series_metro-i {
	background: url(https://vegasiku.com/perfect-space/lp/erectanew/metro_i.png);
	background-repeat: no-repeat;
	background-size: cover;
}

.series__name {
	font-size: 20px;
	font-weight: 800;
	line-height: 28px;
	color: #fff;
	margin-bottom: 4px;
}
.series__text {
	font-size: 13px;
	font-weight: 500;
	line-height: 22px;
	color: #fff;
	margin-bottom: 18px;
}
.series__link {
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: #fff;
	max-width: 140px;
	padding: 12px 21px 13px 10px;
	border: 2px solid #fff;
	background-color: rgba(0, 0, 0, 0.1);
	position: relative;
}
.series__item .series__link,
.series__link:visited,
.series__item .series__link :link {
	color: #fff!important;
}
.series__link::before,
.series__link::after {
	content: "";
	position: absolute;
	top: calc(50% - 0.5px);
	right: 12px;
	width: 8px;
	height: 1.6px;
	border-radius: 9999px;
	background-color: #fff;
	transform-origin: calc(100% - 0.5px) 50%;
}
.series__link::before {
	transform: rotate(45deg);
}
.series__link::after {
	transform: rotate(-45deg);
}
.series__link:hover{
	color: #4D4D4D;
	background-color: #fff;
}
.series__link:hover::before,
.series__link:hover::after{
	background-color: #4D4D4D;
}
/* =========================
  Series PC用
========================= */
@media (min-width: 1024px) {
	.series {
		padding: 60px 0px;
	}
	.series-header {
		padding: 20px 0px;
	}
	.seris-header__logo {
		max-width: 100%;
	}
	.series-header__description {
		font-size: 18px;
		line-height: 22px;
		white-space: normal;
		padding: 0px;
		margin-bottom: 30px;
	}

	.series__catalog-link {
		max-width: 490px;
		margin: 0 auto 50px;
		border: 1px solid #ccc;
		padding: 4px;
	}
	.series__catalog-text {
		font-size: 11px;
		font-weight: 350;
		text-align: center;
	}

	.series__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
	.series__list_columns-2 {
		grid-template-columns: repeat(2, 1fr);
		max-width: 960px;
		margin: 0 auto;
	}
	.series__item {
		padding: 0 20px 31px;
		height: auto;
		aspect-ratio: 440 / 370;
		background-size: contain;
		background-position: center;
	}
	.series__name {
		font-size: 32px;
		line-height: 52px;
		margin-bottom: 8px;
	}
	.series__text {
		font-size: 15px;
		font-weight: 400;
		line-height: 20px;
		margin-bottom: 34px;
	}
}

/* =========================
  Series Lineup 共通+SP用
========================= */
.series-lineup  > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
.series-lineup-header {
	padding: 40px 0 32px;
	text-align: center;
}
.seris-lineup-header__logo {
	max-height: 32px;
	margin-bottom: 8px;
}
.series-lineup-header__description {
	font-size: 14px;
	font-weight: 300;
	line-height: 18px;
	color: #777;
}

.series-lineup__product {
	padding: 0 0 32px;
}
.series-lineup__product-image{
		width: 100%;
	}
.series-lineup__item {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 23px;
	padding: 16px 8px;
}
.series-lineup__bnr {
	gap: 8px;
	padding: 8px 8px 16px;
}
.series-lineup__img {
	margin-bottom: 8px;
}
.series-lineup__perice {
	font-size: 20px;
	font-weight: 800;
	line-height: 22px;
	color: #949494;
	text-align: center;
	margin-bottom: 8px;
}
.series-lineup__margin-b-none {
	margin-bottom: 0px;
}
.series-lineup__en {
	font-size: 14px;
	font-weight: 800;
	line-height: 18px;
	margin-left: 4px;
}
.series-lineup__description {
	font-size: 10px;
	font-weight: 400;
	line-height: 12px;
	text-align: left;
	color: #4d4d4d;
	max-width: 152px;
	margin: 8px auto;
}
.series-lineup__category {
	background-color: #e6e6e6;
	margin: 0 auto;
	padding: 10px;
	border-radius: 5px;
	max-width: 140px;
	font-size: 13px;
	font-weight: 600;
	line-height: 16px;
	color: #4d4d4d;
	text-align: center;
	/* position: relative; */
}
.series-lineup__category-text{
	display: inline-block;
	position: relative;
}
.series-lineup__category-text::before,
.series-lineup__category-text::after {
	content: "";
	position: absolute;
	top: calc(50% - 0.5px);
	right: -12px;
	width: 8px;
	height: 1.6px;
	border-radius: 9999px;
	background-color: #4d4d4d;
	transform-origin: calc(100% - 0.5px) 50%;
}
.series-lineup__category-text::before {
	transform: rotate(45deg);
}
.series-lineup__category-text::after {
	transform: rotate(-45deg);
}
/* .series-lineup__category-layout {
	padding: 10px 20px 10px 9px;
	max-width: 130px;
} */
/* .series-lineup__category-layout::before,
.series-lineup__category-layout::after {
	right: 6px;
} */

.series-lineup__link-btn {
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	text-align: center;
	color: #333;
	display: block;
	width: 224px;
	border: 1px solid #b3b3b3;
	padding: 3px 0px;
	margin: 0 auto;
}

/* Series Lineup 共通パーツ */
.series-lineup__heading {
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
	color: #333;
	margin-bottom: 16px;
}

/* Size */
.series-lineup__size {
	padding: 0px 8px 16px;
}
.series-lineup__size-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.series-lineup__size-link {
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0px;
	text-align: center;
	color: #333;
	display: block;
	border: 1px solid #333;
	width: 112px;
	padding: 8.5px 0px;
	position: relative;
}
.series-lineup__size-link::before,
.series-lineup__size-link::after {
	content: "";
	position: absolute;
	top: calc(50% - 0.5px);
	right: 11px;
	width: 8px;
	height: 1.6px;
	border-radius: 9999px;
	background-color: #4d4d4d;
	transform-origin: calc(100% - 0.5px) 50%;
}
.series-lineup__size-link::before {
	transform: rotate(45deg);
}
.series-lineup__size-link::after {
	transform: rotate(-45deg);
}

/* Option Parts */
.series-lineup__option {
	padding: 16px 8px 28px;
}
.series-lineup__option-display {
	position: relative;
	max-height: 272px;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.series-lineup__option-display.isOpen {
  max-height: 2000px; /* 大きめの値にする */
}
.series-lineup__option-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
.series-lineup__option-link {
	display: flex;
	align-items: center;
}
.series-lineup__option-img {
	max-width: 60px;
}
.series-lineup__option-name {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: #333;
	margin-left: 4px;
}

.series-lineup__fade {
	content: "";
	position: absolute;
	bottom: 8px;
	left: 0;
	width: 100%;
	height: 64px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
	pointer-events: none;
}
.series-lineup__more-btn {
	padding: 8px 16px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #7F7F7F !important;
	border: 1px solid #7F7F7F !important;
	border-radius: 19px !important;
	background: #fff !important;
	cursor: pointer !important;
	position: absolute !important;
	bottom: 5px !important;
	left: calc(50% - 0.5px) !important;
	transform: translateX(-50%) !important;
	z-index: 1;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25) !important;
}
.series-lineup__more-btn.isOpen {
	position: relative;
	left: 50%;
	margin-top: 20px;
	margin-bottom: 10px;
}

.series-lineup__note {
	font-size: 11px;
	font-weight: 400;
	line-height: 14px;
	text-align: right;
	color: #333;
	margin-top: 15px;
}
.color_pink {
	font-size: 11px;
	color: #ffc2c2;
}

/* =========================
  Series Lineup PC用
========================= */
@media (min-width: 1024px) {
	.series-lineup-header {
		padding: 40px 0 50px;
	}
	.seris-lineup-header__logo {
		max-height: 100%;
		margin-bottom: 13px;
	}
	.series-lineup-header__description {
		font-weight: 400;
		line-height: 14px;
		color: #7f7f7f;
		white-space: normal;
	}

	.series-lineup__product {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		max-width: 1200px;
		margin: 0 auto;
	}
	.product--item-1{
		grid-template-columns: repeat(2, auto);
		max-width: 900px;
	}
	.series-lineup__item {
		padding: 0px;
	}
	.series-lineup_colums-3{
		grid-template-columns: repeat(3, 1fr);
	}
	.series-lineup_colums-1{
		grid-template-columns: repeat(1, 1fr);
		gap: 8px;
		max-width: 600px;
		margin: 0 auto;
	}
	.series-lineup__bnr {
		gap: 8px;
	}
	.series-lineup__img {
		margin-bottom: 10px;
	}
	.series-lineup__perice {
		margin-bottom: 10px;
	}
  .description--width{
		max-width: 100%;
	}
	.series-lineup__category {
		padding: 10px;
		max-width: 140px;
	}
	.series-lineup__category-text::before,
	.series-lineup__category-text::after {
		right: -12px;
	}
	.series-lineup__category-layout {
		padding: 10px 18px 10px 8px;
		max-width: 133px;
	}
	.series-lineup__link-btn {
		margin: 12px auto 0;
	}

	/* Series Lineup 共通パーツ */
	.series-lineup__heading {
		font-size: 20px;
		line-height: 32px;
		text-align: center;
		margin-bottom: 10px;
	}

	/* Size */
	.series-lineup__size-list {
		grid-template-columns: repeat(5, auto);
		padding: 10px 0px;
		max-width: 1200px;
		margin: 0 auto;
		justify-content: center;
	}
	.series-lineup__size-link {
		font-size: 17px;
		line-height: 22px;
		white-space: nowrap;
		width: 126px;
		padding: 10px 0px;
	}
	.series-lineup__size-link::before,
	.series-lineup__size-link::after {
		right: 12px;
	}

	/* Option Parts */
	.series-lineup__option {
		padding: 16px 8px 28px;
	}
	.series-lineup__option-display {
		max-height: fit-content;
		max-width: 900px;
		padding: 10px 0px;
		margin: 0 auto;
	}
	.series-lineup__option-list {
		grid-template-columns: repeat(5, 1fr);
		gap: 12px;
	}

	.series-lineup__fade {
		display: none;
	}
	.series-lineup__more-btn {
		display: none;
	}
	.series-lineup__note {
		max-width: 1200px;
		margin: 9px auto;
	}
}

/* =========================
  Story 共通+SP用
========================= */
.story {
	background-color: #000;
	padding: 64px 0px 20px;
}
.story > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
.story__heading {
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	text-align: center;
	color: #fff;
	margin-bottom: 40px;
}
.story-content {
	padding: 32px 8px 0px;
}
.story-content__heading {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	color: #fff;
	border-bottom: 2px solid #fff;
	padding-bottom: 4px;
	margin-bottom: 24px;
}
.story-content__text {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	text-align: left;
	color: #fff;
	margin-bottom: 16px;
}
.story-content__list {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin-top: 32px;
	scrollbar-width: none;
}
.story-content__item {
	flex: 0 0 auto;
	width: 235px;
	scroll-snap-align: start;
}
.story-content__caption {
	font-size: 10px;
	font-weight: 400;
	line-height: 16px;
	text-align: left;
	color: #fff;
}
.story-content__img-single {
	margin-top: 32px;
}

.story-content__topik {
	padding: 6px;
	border: 1px solid #b3b3b3;
	margin-top: 32px;
}
.story-content__topik-headimg {
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	margin: 16px 0px;
}
.story-content__topik-text {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color: #fff;
	margin-bottom: 16px;
}

.story-catch {
	padding: 56px 8px 40px;
}
.story-catch__heading {
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	margin-bottom: 16px;
}
.story-catch__text {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color: #fff;
	margin-bottom: 16px;
}

/* =========================
  Story  PC用
========================= */
@media (min-width: 1024px) {
	.story {
		padding: 120px 0px 80px;
		margin-top: 68px;
		margin-bottom: 80px;
	}
	.story__wrapper {
		max-width: 1200px;
		margin: 0 auto;
	}

	.story__heading {
		font-size: 36px;
		font-weight: 700;
		line-height: 57px;
		letter-spacing: 3%;
		margin-bottom: 40px;
	}
	.story-content {
		padding: 60px 0px;
	}
	.story-content__heading {
		font-size: 24px;
		font-weight: 800;
		line-height: 27px;
		text-align: left;
		letter-spacing: 2%;
		padding-bottom: 20px;
		margin-bottom: 50px;
	}
	.story-content__text {
		font-size: 16px;
		line-height: 35px;
		margin-bottom: 0px;
	}
	.story-content__list {
		gap: 20px;
		margin-top: 60px;
	}
	.story-content__item {
		width: 388px;
	}
	.story-content__caption {
		font-size: 14px;
		line-height: 18px;
	}
	.story-content__img-single {
		margin-top: 52px;
	}

	.story-content__topik {
		padding: 0px;
		border: none;
		margin-top: 60px;
	}
	.story-content_flex-reverse {
		display: flex;
		flex-flow: row-reverse;
		align-items: center;
		gap: 25px;
		justify-content: left;
		margin-bottom: 36px;
	}
	.story-content_text-wrap {
    max-width: 575px;
    text-align: left;
	}
	.story-content_flex {
		display: flex;
		align-items: center;
		gap: 74px;
		justify-content: left;
	}
	.story-content__topik-headimg {
		font-size: 24px;
		font-weight: 800;
		line-height: 27px;
		text-align: left;
		padding-bottom: 20px;
		margin-bottom: 50px;
	}
	.story-content__topik-text {
		font-size: 16px;
		line-height: 35px;
		color: #fff;
	}

	.story-catch {
		padding: 20px 8px;
	}
	.story-catch__heading {
		font-size: 36px;
		line-height: 56px;
		margin-bottom: 48px;
	}
	.story-catch__text {
		font-size: 16px;
		line-height: 35px;
		text-align: center;
	}
	.story-catch__text:nth-of-type(1){
		margin-bottom: 0px;
	}
}

/* =========================
  User Voice 共通+SP用
========================= */
.user-voice {
	padding: 20px;
}
.user-voice > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
.user-voice > * {
	font-style: normal; 
}
.user-voice__heading {
	max-width: 120px;
	margin: 0 0 auto;
}
.user-voice__wrap {
	background-color: #f5f5f5;
	padding: 30px 8px;
}
.user-voice__text {
	font-size: 18px;
	font-weight: 800;
	line-height: 22px;
	color: #666;
	text-align: center;
	margin-bottom: 15px;
}

.user-voice__list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 18px;
}
.user-voice__item--bubble {
	position: relative;
	display: inline-block;
	margin-bottom: 18px;
	padding: 24px 16px;
	border: 3px solid #4d4d4d;
	background-color: #ffffff;
}
.user-voice__item--bubble::before {
	content: "";
	position: absolute;
	bottom: 0;
	border-style: solid;
	border-color: #4d4d4d transparent transparent;
}
.user-voice__item--bubble::after {
	content: "";
	position: absolute;
	bottom: 1px;
	border-style: solid;
	border-color: #ffffff transparent transparent;
}
.item--bubble-left::before {
	left: 50px;
	border-width: 18px 0 0 16px;
	translate: -50% 100%;
}
.item--bubble-left::after {
	left: 50px;
	border-width: 10.1px 0 0 9px;
	translate: calc(-50% + 0.5px) 100%;
}

.item--bubble-rigth::before {
	border-width: 18px 16px 0 0;
	right: 50px;
	translate: 50% 100%;
}
.item--bubble-rigth::after {
	border-width: 10.1px 9px 0 0;
	translate: calc(50% - 0.5px) 100%;
	right: 50px;
}

.user-voice__comment {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color: #333;
	margin-bottom: 8px;
}
.comment--mb-0{
	margin-bottom: 0px;
}
.user-voice__product {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: #333;
	margin-bottom: 8px;
}
.user-voice__meta {
	display: flex;
}
.user-voice__image {
	max-width: 139px;
}
.user-voice__profile {
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: #000;
	text-align: right;
	width: 100%;
}
.fade-in {
  opacity: 0;
  transition: opacity 2s ease;
}
.fade-in.show {
  opacity: 1;
}


/* =========================
  User Voice  PC用
========================= */
@media (min-width: 1024px) {
	.user-voice {
		padding: 0px;
		max-width: 1000px;
		margin: 0 auto;
	}
	.user-voice__heading {
		max-width: 242px;
		margin: 0 auto;
	}
	.user-voice__wrap {
		padding: 60px 20px;
	}
	.user-voice__text {
		font-size: 32px;
		font-weight: 700;
		line-height: 32px;
		letter-spacing: 3%;
		white-space: nomal;
		margin-bottom: 50px;
	}

	.user-voice__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
		grid-gap: 20px;
	}
	.user-voice__item:nth-child(1) {
		grid-area: 1 / 1 / 2 / 2;
	}
	.user-voice__item:nth-child(2) {
		grid-area: 2 / 1 / 3 / 2;
	}
	.user-voice__item:nth-child(3) {
		grid-area: 3 / 1 / 4 / 2;
	}
	.user-voice__item:nth-child(4) {
		grid-area: 1 / 2 / 2 / 3;
		margin-bottom: 3px;
	}
	.user-voice__item:nth-child(5) {
		grid-area: 2 / 2 / 4 / 3;
		margin-top: 10px;
		margin-bottom: 3px;
	}

	.item--bubble-left::before {
		left: 200px;
	}
	.item--bubble-left::after {
		left: 200px;
	}

	.item--bubble-rigth::before {
		right: 200px;
	}
	.item--bubble-rigth::after {
		right: 200px;
	}

	.user-voice__comment {
		font-size: 16px;
		line-height: 28px;
		margin-bottom: 20px;
	}
	.user-voice__product {
		font-size: 14px;
		line-height: 18px;
		margin-bottom: 20px;
	}
	.user-voice__profile {
		font-size: 16px;
	}
}

/* =========================
  FAQ 共通+SP用
========================= */
.faq {
	padding-inline: 8px;
	padding-block: 16px;
}
.faq > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
.faq__container {
	width: min(100%, 1000px);
	margin-inline: auto;
}
.faq__ttl {
	font-weight: bold;
	line-height: 1.5;
	font-size: 17px;
	color: #333;
	border-left: 10px solid #cccccc;
	padding-left: 10px;
}
.faq__list {
	display: grid;
	row-gap: 18px;
	margin-top: 16px;
}
.faq__item {
	cursor: pointer;
}
.faq__q {
	--iconSize: 10px;
	background-color: #f2f2f2;
	display: grid;
	grid-template-columns: auto 1fr var(--iconSize);
	align-items: center;
	column-gap: 4px;
	font-size: 13px;
	color: #333;
	font-weight: 600;
	padding-block: 7px;
	padding-left: 7px;
	padding-right: 14px;
}
.faq__q::before {
	content: "Q.";
	color: #333;
	font-size: 14px;
	line-height: 1.5;
}
.faq__q::after {
	position: relative;
	content: "";
	bottom: 2px;
	rotate: 225deg;
	aspect-ratio: 1;
	border-top: 2px solid #4d4d4d;
	border-left: 2px solid #4d4d4d;
	transition: all 0.3s ease;
	transition-property: rotate, top, bottom;
	transform-origin: center;
}
.faq__item.isActive .faq__q::after {
	rotate: 45deg;
	bottom: -2px;
}
.faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: all 0.3s ease;
	transition-property: grid-template-rows;
}
.faq__item.isActive .faq__answer {
	grid-template-rows: 1fr;
}
.faq__answer--inner {
	overflow: hidden;
}
.faq__answer--box {
	padding-block: 16px;
	padding-inline: 24px;
	border: 4px solid #f2f2f2;
	border-top: none;
}
.faq__answer--box > * {
	line-height: 1.5;
	font-size: 13px;
}
.faq__answer--box > * + * {
	margin-top: 20px;
}
.faq__answer--box--item {
	text-indent: -1em;
	padding-left: 1em;
}
.faq__answer--box--item::before {
	content: "・";
}
.faq__answer--box--link:link,
.faq__answer--box--link:visited  {
	color: #0088ff;
}
.faq__answer--box--taR {
	text-align: right;
}
.faq__answer--box--mail:link {
	text-decoration: underline;
	color: #000000;
}
.faq__another {
	text-align: right;
	margin-top: 20px;
}
.faq__another--link:link {
	font-size: 14px;
	letter-spacing: 0.5px;
}

/* =========================
  FAQ  PC用
========================= */
@media screen and (min-width: 1024px) {
	.faq {
		padding-block: 20px;
		margin-top: 60px;
	}
	.faq__ttl {
		font-size: 18px;
	}
	.faq__list {
		row-gap: 16px;
		margin-top: 20px;
	}
	.faq__q {
		line-height: 1.25;
		font-size: 16px;
		padding-inline: 20px;
		padding-block: 4px;
	}
	.faq__q::before {
		font-size: 16px;
		line-height: 2;
	}
	.faq__answer--box {
		border: none;
		padding-inline: 50px;
		padding-block: 20px;
	}
	.faq__answer--box > * {
		line-height: 1.75;
		font-size: 16px;
	}
}


/* =========================
  RELATED 共通+SP用
========================= */
.related {
	--padding-block: 16px;
	padding-inline: 8px;
	padding-block: var(--padding-block);
	overflow: hidden;
}
.related > * {
	font-family: "Noto Sans JP",
	"Inter",
	"Meiryo UI",
	"メイリオ",
	"Meiryo",
	"Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ ProN",
	"Yu Gothic UI",
	"游ゴシック体", 
  sans-serif;
}
.related__container {
	width: min(100%, 1400px);
	margin-inline: auto;
}

.related__ttl {
	font-weight: bold;
	line-height: 1.5;
	font-size: 18px;
}

.related__list {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	display: grid;
	grid-template-columns: repeat(3, 211px);
	column-gap: 10px;
	margin-top: 20px;
	padding-bottom: 5px;
	margin-right: calc(50% - 50vw);
}

.related__item {
	scroll-snap-align: start;
}

.related__item--img {
	aspect-ratio: 211/143;
	max-height: 143px;
	width: 100%;
}

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

.related__item--ttl {
	font-weight: bold;
	line-height: 1.3;
	font-size: 10px;
	letter-spacing: 0.5px;
	margin-top: 5px;
}

/* =========================
  RELATED PC用
========================= */
@media screen and (min-width: 1024px) {
	.related {
		padding: 20px;
		margin-top: 60px;
	}

	.related__ttl {
		font-size: 32px;
	}

	.related__list {
		overflow-x: visible;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 20px;
		margin-top: 32px;
		margin-right: auto;
	}

	.related__item--img {
		aspect-ratio: 453/307;
		max-height: 307px;
	}

	.related__item--ttl {
		font-size: 20px;
		letter-spacing: 1px;
		margin-top: 10px;
	}
}