@charset "utf-8";

/* noto-sans-jp-regular - japanese */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/noto-sans-jp-v56-japanese-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-jp-700 - japanese */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/noto-sans-jp-v56-japanese-700.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-jp-900 - japanese */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 900;
	src: url('../fonts/noto-sans-jp-v56-japanese-900.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
	font-size: 62.5%;
}

body {
	font-family: 'Noto Sans JP', sans-serif, メイリオ, Meiryo, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, ＭＳ\ Ｐゴシック, Verdana, sans-serif;
	line-height: 1.6;
	font-size: clamp(1.4rem, calc(1.4rem + (100vw - 375px) * 0.005), 1.6rem);
	color: #333;
	overflow-x: hidden;
}

ul {
	list-style: none
}

p {
	padding: 0 0 1em
}

h2 {
	font-size: clamp(2.4rem, calc(2.4rem + (100vw - 375px) * 0.03), 3.6rem);
}

h3 {
	font-size: clamp(1.5rem, calc(1.5rem + (100vw - 375px) * 0.0125), 2rem);
}

.sp {
	display: none;
}

.pc {
	display: block;
}

a:link {
	color: #fff;
}

/* ==================================================
   共通
================================================== */

.inner {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
}

.box {
	box-sizing: border-box;
}

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

.singleProduct {
	margin-bottom: 70px;
}

/* パンくず */
.singleProduct #pankuzu {
	margin: 20px auto 0;
}

.singleProduct #pankuzu a {
	color: #0086D6;
}

/* 共通設定-pタグが2つ以上続く場合の余白調整 */
.modalDescription p {
	margin: 0 0 1em;
	padding: 0;
}

.modalDescription p:last-child {
	margin-bottom: 0;
}

.pageProduct #pankuzu a {
	color: #0086D6;
}

/*----------------------------- ここからdetail */

/* ==================================================
   商品詳細
================================================== */

.detail {
	width: 100%;
	padding: 70px 4%;
	background: #fff;
	box-sizing: border-box;
}

.detailInfo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"meta images"
		"title images"
		"model images"
		"description images"
		"price images"
		"features images"
		"contact images";
	gap: 0 4%;
	align-items: start;
}


/* ==================================================
   メーカー・シリーズ
================================================== */

.meta {
	grid-area: meta;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}

.maker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 160px;
	height: 50px;
	padding: 0 20px;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-sizing: border-box;
	font-weight: 700;
	color: #0260d2;
	text-decoration: none;
	font-size: clamp(2rem,
			calc(2rem + (100vw - 375px) * 0.01272),
			2.5rem);
}

.maker img {
	width: 100%;
	height: auto;
	max-height: 26px;
}

.series {
	color: #0260d2;
	/* font-size: clamp(1.2rem,
			calc(1.2rem + (100vw - 375px) * 0.00509),
			1.4rem); */
	font-size: 1.4rem;
}


/* ==================================================
   商品名
================================================== */

.itemName {
	grid-area: title;
	margin-bottom: .67em;
	font-size: clamp(2.4rem, 7vw, 3.6rem);
	line-height: 1;
	font-weight: 700;
	color: #333;
}


/* ==================================================
   型番
================================================== */

.model {
	grid-area: model;
	color: #555;
	margin-bottom: 2em;
	line-height: 1;
	font-size: 1.6rem;
}


/* ==================================================
   商品説明
================================================== */
.description {
	grid-area: description;
	position: relative;
	border-bottom: 2px solid #c9c9c9;
	cursor: pointer;
	font-size: 14px;
}

.description p {
	margin-bottom: 2em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	padding: 0 !important;
}

/* 続きを読む */
.description span {
	position: absolute;
	right: 0.7em;
	bottom: 2em;
	color: #0260d2;
	text-decoration: underline;
	background: #fff;
	padding-left: 0.5em;
	font-size: 1em;
}

.description span::before {
	content: "...";
	color: #333 !important;
	margin-right: 0.1em;
	text-decoration: none;
	display: inline-block;
}

.description.is-open span::before {
	content: none;
}

/* 開いた状態 */
.description.is-open p {
	display: block;
}

.description.is-open span {
	bottom: 0.6em;
}

/* ==================================================
   商品画像
================================================== */

.detailImages {
	grid-area: images;
}

.mainImage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.mainImage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* 矢印 */

.arrow {
	position: absolute;
	top: 50%;
	width: 38px;
	height: 58px;
	transform: translateY(-50%);
	border: 0;
	background: rgba(0, 0, 0, 0.35);
	color: #ffffffea;
	font-size: 38px;
	line-height: 1;
	cursor: pointer;
	border: 1px solid #ffffff7a;
	padding-bottom: 5px;
}

.arrowPrev {
	left: 0;
	border-radius: 0 6px 6px 0;
}

.arrowNext {
	right: 0;
	border-radius: 6px 0 0 6px;
}


/* サムネイル */

.thumbnails {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 5px;
	margin-top: 30px;
}

.thumbnail {
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 3px solid transparent;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
}

.thumbnail.isActive {
	border-color: #0088d6;
}

.thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==================================================
   価格
================================================== */

.price {
	grid-area: price;
	padding: 1.57em 0;
	box-sizing: border-box;
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.priceLabel {
	line-height: 1;
	margin: 0 0 5px;
	font-size: clamp(1.2rem,
			calc(1.2rem + (100vw - 375px) * 0.00509),
			1.4rem);
	font-weight: 700;
	width: fit-content;
}

.priceValue {
	line-height: 1.2;
	font-weight: 700;
	font-size: clamp(2.6rem,
			calc(2.6rem + (100vw - 375px) * 0.03562),
			4rem);
	width: fit-content;
	/* デフォルトCSSの打ち消し */
	/* background: linear-gradient(0deg, transparent, transparent 36%, #fff100 0%, #fff100 47%, transparent 46%, transparent); */
	/* background: linear-gradient(0deg, transparent, transparent 36%, #ff2e2e 0%, #ff2e2e 40%, transparent 42%, transparent); */
	position: relative;
}

.priceValue span {
	margin-left: 3px;
	font-size: clamp(2rem,
			calc(2rem + (100vw - 375px) * 0.01018),
			2.4rem);
}

.priceValue::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 3px;
	background: #e70000;
	/* background: rgb(231 0 0 / 60%); */
	z-index: 2;
	pointer-events: none;
}

.specialOffer {
	position: relative;
	padding: 0.8em;
	background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px, #ffe4b1 3px, #ffe4b1 8px);
	background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px, #ffe4b1 3px, #ffe4b1 8px);
	border-radius: 5px;
	font-weight: 700;
	width: fit-content;
	color: #ea396a;
	/* font-size: clamp(1.5rem,
			calc(1.5rem + (100vw - 375px) * 0.01272),
			2rem); */
	font-size: clamp(1.4rem, calc(1.1rem + (50vw - 375px) * 0.01272), 2rem);
	line-height: 1.1;
}

.specialOffer::before {
	/* position: absolute;
	content: '';
	top: 50%;
	left: -30px;
	border: 15px solid transparent;
	border-top: 15px solid #ffebbe;
	width: 0;
	height: 0; */
	position: absolute;
	content: '';
	top: 50%;
	left: 0;
	border-style: solid;
	border-width: 8px 16px 8px 0;
	border-color: transparent #ffebbe transparent transparent;
	translate: -100% -50%;
	transform-origin: right;
}


/* ==================================================
   商品特徴
================================================== */

.detailFeatures {
	grid-area: features;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2%;
	margin-bottom: 35px;
	width: 100%;
}

.featureItem {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 115px;
	border: 1px solid #0260d2;
	border-radius: 10px;
	text-align: center;
	background: #f7fcff;
	color: #0260d2;
	font-weight: bold;
	font-size: clamp(0.9rem,
			calc(0.9rem + (50vw - 375px) * 0.00763),
			1.2rem);
	padding: 8px 1px;
}

.featureIcon {
	width: 58px;
	height: 58px;
	margin-bottom: 5px;
}

.featureIcon img {
	width: 60px;
	aspect-ratio: 80 / 80;
	max-width: 80px;
	height: auto;
	max-height: 80px;
	object-fit: contain;
}

.feature p {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 700;
	color: #0260d2;
}


/* ==================================================
   電話CTA
================================================== */

.contact {
	grid-area: contact;
	text-align: center;
	width: 100%;
	position: relative;
}

.contact::after {
	position: absolute;
	top: 7px;
	right: 12px;
	content: "";
	background: url("../images/singleproducts/img_syurikun05.png") no-repeat center / contain;
	width: 58px;
	height: auto;
	aspect-ratio: 58 / 78;
}

.contactLabel {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin-bottom: -6px;
	padding: .15em 1em;
	border: 1px solid #ea396a;
	border-radius: 20px;
	background: #fff;
	font-weight: 700;
	color: #ea396a;
}

.contact .tel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 80px;
	border-radius: 45px;
	background: #ea396a;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	box-shadow: 0 5px 0 #f8a4bc;
	box-sizing: border-box;
	margin-top: -10px;
	font-size: clamp(2.4rem,
			calc(2.4rem + (100vw - 375px) * 0.02545),
			3.4rem);
	padding-top: 7px;
}

.contact .tel::before {
	content: "\f095";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 8px;
	font-size: 0.8em;
}

.contactNote {
	margin: 12px 0 0;
	color: #ea396a;
	font-size: clamp(1.2rem,
			calc(1.2rem + (100vw - 375px) * 0.00509),
			1.4rem);
}

.contact .btn_tel {
	width: 45%;
	height: auto;
	max-width: 250px;
}

.contact .btn_tel img.svgtel {
	filter: invert(97%) sepia(4%) saturate(317%) hue-rotate(224deg) brightness(120%) contrast(100%);
}

@supports (-webkit-touch-callout: none) {
	.contact .btn_tel img.svgtel {
		filter: invert(97%) sepia(4%) saturate(260%) hue-rotate(224deg) brightness(120%) contrast(100%);
	}
}


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

	.singleProduct {
		margin-bottom: 40px;
	}

	.sp {
		display: block;
	}

	.pc {
		display: none;
	}

	.singleProduct #pankuzu {
		margin: 14px 4% 0;
	}


	.detail {
		padding: 25px 4% 30px;
	}

	.detailInfo {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.meta {
		gap: 8px;
		margin-bottom: 12px;
	}

	.maker {
		min-width: auto;
		height: 35px;
		padding: 0 15px;
	}

	.maker img {
		max-width: 80px;
		max-height: 16px;
	}

	.description {
		font-size: 12px;
	}

	.thumbnails {
		grid-template-columns: repeat(6, 1fr);
		gap: 4px;
		margin-top: 10px;
	}

	/* .mainImage {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.mainImage::-webkit-scrollbar {
		display: none;
	} */


	.arrow {
		width: 32px;
		height: 48px;
		font-size: 30px;
	}

	.price {
		padding: 20px 0;
	}

	.featureItem {
		min-height: 100px;
	}

	.contact .tel {
		min-height: 65px;
	}

	.contact::after {
		width: 50px;
		right: 10px;
	}

	.priceValue::after {
		height: 2px;
	}

	.singleProduct #pankuzu a {
		color: #0086D6;
	}

}


@media screen and (max-width: 540px) {
	.description {
		border-bottom: none;
	}

	.description p {
		-webkit-line-clamp: 3;
	}

	.description span {
		right: 0;

	}

	.description.is-open a {
		bottom: 0.5em;
	}

}

/*----------------------------- ここまでdetail */

/*----------------------------- ここからfeatures、spec、comment*/
/* ==================================================
   特長
================================================== */

.features {
	padding: 95px 4% 45px;
	background: #e4f5ff;
}

.sectionHead {
	margin-bottom: 30px;
	text-align: center;
}

.eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 20px;
	border-radius: 20px;
	background: #0260d2;
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
}

.sectionHead h2 {
	margin: 0 0 40px;
	line-height: 1.2;
}

.sectionHead p {
	margin: 0;
	padding: 0;
}

.featureList {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
}

.featureCard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	height: 100%;
	padding: 15px 10px;
	border: 2px solid #f1f1f100;
	border-radius: 6px;
	background: #fff;
	color: #333;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	box-shadow: 0 0 4px rgba(0, 0, 0, .12);
	transition: border-color .2s, box-shadow .2s;
	touch-action: pan-y;
	/* 縦方向の操作はスクロールとして判断 */
}

@media (hover: hover) and (pointer: fine) {
	.featureCard:hover {
		border-color: #0260d2;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
		background: #f7fcff;
	}
}

/* SPでは押している間だけ反応 */
@media (hover: none) {
	.featureCard:active {
		border-color: #0260d2;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
		background: #f7fcff;
	}
}

/* .featureCard:focus:not(:focus-visible),
.modalClose:focus:not(:focus-visible) {
	outline: none;
} */

.featureIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.features .featureIcon img {
	width: 80px;
}

.featureTitle {
	display: block;
	margin-bottom: 1em;
	color: #0260d2;
	font-weight: 700;
	line-height: 1.2;
	font-size: clamp(1.4rem,
			calc(1.4rem + (100vw - 375px) * 0.00509),
			1.6rem);
}

.featureText {
	display: block;
	color: #999;
	font-size: clamp(1.1rem,
			calc(1.1rem + (100vw - 375px) * 0.00509),
			1.3rem);
	line-height: 1.6;
	font-weight: 400;
}

.featureHelp {
	position: absolute;
	top: 5px;
	right: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border: 1px solid #0260d2;
	border-radius: 50%;
	color: #0260d2;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}


/* ==================================================
   機能一覧
================================================== */

.function {
	margin-top: 40px;
}

.function h3 {
	margin: 0 0 1em;
	padding: 0 0 0 1em;
	border-bottom: 2px solid #c9c9c9;
	position: relative;
	background: linear-gradient(to bottom,
			#0260d2 calc(100% - 5px),
			#e4f5ff calc(100% - 5px)) left top / 10px 100% no-repeat;
	line-height: 2;
}

.functionList {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
}

.functionItem {
	padding: 6px;
	border-radius: 3px;
	background: #0260d2;
	color: #fff;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* ==================================================
   商品スペック
================================================== */

.spec {
	padding: 95px 4% 70px;
	background: #fff;
}

.specList {
	margin: 0;
	border-top: 1px solid #ddd;
}

.specItem {
	display: grid;
	grid-template-columns: 15% 35% 15% 35%;
	margin: 0;
	border-bottom: 1px solid #ddd;
}

.specItem dt,
.specItem dd {
	padding: 15px;
	box-sizing: border-box;
	line-height: 1.6;
	font-size: clamp(1.2rem, calc(1.2rem + (100vw - 375px) * 0.01018), 1.6rem);
}

/* 2つ目のdtが存在しない場合 */
.specItem:not(:has(dt:nth-of-type(2))) {
	border-bottom: none;
}

/* 1セットだけのdt・ddに下線を付ける */
.specItem:not(:has(dt:nth-of-type(2))) dt,
.specItem:not(:has(dt:nth-of-type(2))) dd {
	border-bottom: 1px solid #ddd;
}

.specItem dt {
	background: #f6f6f6;
}

.specItem dd {
	background: #fff;
}


/* ==================================================
   スタッフコメント
================================================== */

.comment {
	padding: 60px 4%;
	background: #0260d2;
	color: #fff;
}

.comment .sectionHead {
	margin-bottom: 30px;
}

.comment .sectionHead h2 {
	color: #fff;
}

.commentBox {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 20px;
	/* align-items: flex-start; */
	align-items: center;
	margin: 0 auto;
}

.commentImage {
	width: 100%;
	height: auto;
}

.commentImage img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
}

.commentStaff {
	font-weight: 600;
	padding-top: 0.5em;
	font-size: clamp(1rem, 1vw, 1.2rem);
	text-align: center;
}

.commentText p {
	margin: 0 0 1.5em;
	padding: 0;
	line-height: 1.8;
}

.commentText p:last-child {
	margin-bottom: 0;
}

.comment .eyebrow {
	background: #fff;
	color: #0260d2;
}


/* ==================================================
   モーダル
================================================== */

.modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: none;
	width: 100%;
	height: 100%;
}

.modal.isOpen {
	display: block;
}

.modalOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .65);
}

.modalBox {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	grid-template-columns: 1fr 2fr;
	width: calc(100% - 40px);
	max-width: 1040px;
	max-height: 90vh;
	transform: translate(-50%, -50%);
	overflow: auto;
	border-radius: 10px;
	background: #fff;
	box-sizing: border-box;
	padding: 3% 4%;
	gap: 3%;
}

/* モーダル内イメージがない時の表示 */
.modalBox.noImage {
	display: flex;
	align-items: center;
	justify-content: center;
}

.modalBox.noImage .modalText {
	width: 100%;
	max-width: 800px;
}

.modalClose {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.modalImage {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f6f6f6;
}

.modalImage img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: contain;
}

.modalText {
	padding: 1.5em 0;
}

.modalText h3 {
	margin: 0 0 20px;
	color: #333;
	line-height: 1.5;
}

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

	.features,
	.spec,
	.comment {
		padding: 40px 4%;
	}

	.sectionHead {
		margin-bottom: 25px;
	}

	.eyebrow {
		margin-bottom: 15px;
		padding: 3px 16px;
	}

	.sectionHead h2 {
		margin-bottom: 25px;
	}

	.features .featureIcon img {
		width: 60px;
	}

	.featureList {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.featureCard {
		padding: 12px 8px;
	}


	.function {
		margin-top: 25px;
	}

	.functionList {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5px 7px;
	}

	.functionItem {
		padding: 6px 5px;
		font-size: 12px;
	}

	.specItem {
		grid-template-columns: 1fr 2fr;
		border-bottom: none;
	}

	.specItem dt,
	.specItem dd {
		padding: 8px 10px;
		border-bottom: 1px solid #ddd;
	}

	.commentText p {
		line-height: 1.6;
	}

	.commentBox {
		grid-template-columns: 80px 1fr;
		gap: 15px;
		align-items: flex-start;
	}

	.modalBox {
		grid-template-columns: 1fr;
		width: 90%;
		max-height: 85vh;
		padding: 4% 5%;
		gap: 0;
	}

	.modalImage img {
		max-height: 300px;
	}

	.modalText h3 {
		margin-bottom: 12px;
		font-size: 18px;
	}
}


@media screen and (max-width: 540px) {
	.eyebrow {
		font-size: 11px;
	}
}

/*----------------------------- ここまでfeatures、spec、comment*/

/*----------------------------- ここからrecommend、setProductf、formerProduct*/

/* ==================================================
   こんな方におすすめ
================================================== */

.recommend {
	padding: 70px 4%;
	background: #fff;
}

.recommendList {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5%;
}

.recommendCard {
	position: relative;
	padding: 1.5em 1em;
	border: 1px solid #0260d2;
	border-radius: 6px;
	background: #f7fcff;
	box-sizing: border-box;
	box-shadow: 0 0 4px rgba(0, 0, 0, .12);
}

.recommendCard::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 0;
	height: 0;
	border-top: 38px solid #0260d2;
	border-right: 38px solid transparent;
	border-radius: 4px 0 0 0;
}

.recommendTitle {
	margin-bottom: 1.5em;
	color: #0260d2;
	font-weight: 700;
	text-align: center;
	font-size: clamp(1.5rem,
			calc(1.5rem + (100vw - 375px) * 0.01272),
			2rem);
	line-height: 1.2;
}

.recommendItems li {
	position: relative;
	margin-bottom: 5px;
	padding-left: 1.2em;
	line-height: 1.5;
	font-weight: 600;
	font-size: clamp(1.15rem,
			calc(1.15rem + (100vw - 375px) * 0.00636),
			1.4rem);
}

.recommendItems li:last-child {
	margin-bottom: 0;
}

.recommendItems li::before {
	position: absolute;
	left: 0;
	top: 0;
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #45b152;
}


/* ==================================================
   人気のセット商品
================================================== */

.setProduct {
	padding: 70px 4%;
	background: #fff7e4;
}

.setCard {
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
}

.setCard+.setCard {
	margin-top: 1em;
}

.setProduct .eyebrow {
	background: #eaa90c;
}

.setTitle {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.2;
	padding: 1.25em;
	background: #daeafe;
	color: #0260d2;
	font-weight: 700;
	font-size: clamp(1.7rem,
			calc(1.7rem + (100vw - 375px) * 0.01781),
			2.4rem);
	cursor: pointer;
}

.setPlus {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #0260d2;
	color: #fff;
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
}

.setContent {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 3%;
	padding: 1.9em 1.9em 0em;
	display: none;
}

.setCard.isOpen .setContent {
	display: grid;
}

.setItems {
	display: flex;
	flex-direction: column;
	/* gap: 12px; */
}

.setItemTitle {
	padding-left: 0.5em;
	border-left: 5px solid #0260d2;
	font-weight: 700;
	line-height: 1.2;
	font-size: clamp(1.5rem,
			calc(1.5rem + (100vw - 375px) * 0.00763),
			1.8rem);
	margin-bottom: 1.6em;
}

.setItem p {
	margin: 0;
	padding: 0 0 2.8em;
	color: #666;
	font-size: clamp(1.2rem,
			calc(1.2rem + (100vw - 375px) * 0.00509),
			1.4rem);
}

.setImage {
	display: flex;
	align-items: center;
	justify-content: center;
}

.setImage img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}


/* ==================================================
   旧商品・型番
================================================== */

.formerProduct .sectionHead {
	margin-bottom: 58px;
}

.formerProduct {
	padding: 70px 4%;
	background: #e4f5ff;
}

.formerList {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* 1件の場合に真ん中寄せに */
.formerList:has(.formerCard:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: calc((100% - 20px) * 2 / 3 + 20px);
	margin-right: auto;
	margin-left: auto;
}

.formerList:has(.formerCard:only-child) {
	grid-template-columns: minmax(0, 1fr);
	max-width: calc((100% - 20px) / 3);
	margin-right: auto;
	margin-left: auto;
}

.formerCard {
	border: 1px solid #0260d2;
	border-radius: 6px;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.formerHeadBox {
	padding: 15px 20px;
	background: linear-gradient(135deg, #0260d2, #3a9ce0);
	color: #fff;
	min-height: 61px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 61px;
	border-radius: 4px 4px 0 0;
}

.formerYear {
	display: inline-block;
	width: fit-content;
	margin-bottom: 3px;
	padding: 1px 5px;
	background: #e4f5ff;
	color: #0260d2;
	font-weight: 700;
	font-size: clamp(1.1rem,
			calc(1.1rem + (100vw - 375px) * 0.00254),
			1.2rem);
}

.formerName {
	font-weight: 700;
	font-size: clamp(1.5rem,
			calc(1.5rem + (100vw - 375px) * 0.01272),
			2rem);
}

.formerBody {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px;
}

.formerModels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 7px;
}

.formerModels li {
	padding: 3px 5px;
	border: 1px solid #0260d2;
	background: #f7fcff;
	color: #0260d2;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	font-size: clamp(1rem,
			calc(1rem + (50vw - 375px) * 0.01527),
			1.6rem);
}

.formerBody p {
	/* margin: auto 0 0; */
	padding: 20px 0 0;
	font-size: clamp(1.1rem,
			calc(1.1rem + (100vw - 375px) * 0.00763),
			1.4rem);
	line-height: 1.3;
}


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

	.recommend,
	.setProduct,
	.formerProduct {
		padding: 40px 4%;
	}

	.recommendList {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.recommendCard {
		display: grid;
		grid-template-columns: 38% 1fr;
		align-items: center;
		padding: 1.45em 0.8em;
		gap: 10px;
	}

	.recommendTitle {
		margin: 0;
		text-align: left;
	}

	.recommendCard::before {
		border-top: 25px solid #0260d2;
		border-right: 25px solid transparent;
		border-radius: 3px 0 0 0;
	}

	.setContent {
		grid-template-columns: 1fr;
		padding: 20px 10px 0 15px;
		height: fit-content;
		margin-bottom: 15px;
	}

	.setImage {
		grid-row: 1;
		margin-bottom: 20px;
	}

	.setItems {
		grid-row: 2;
		/* gap: 15px; */
	}

	.setImage img {
		width: 80%;
		max-width: 300px;
	}

	.setItemTitle {
		margin-bottom: 1em;
	}

	.setItem p {
		padding: 0 0 1.7em;
	}

	.setPlus {
		width: 15px;
		height: 15px;
		font-size: 10.5px;
		line-height: 1.4;
	}

	.setTitle {
		padding: 20px 10px 20px 15px;
	}

	.formerProduct .sectionHead {
		margin-bottom: 25px;
	}

	.formerList {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* 1件の場合に真ん中寄せに */
	.formerList:has(.formerCard:nth-child(2):last-child),
	.formerList:has(.formerCard:only-child) {
		max-width: none;
	}

	.formerHeadBox {
		padding: 8px 10px;
		min-height: 47px;
		border-radius: 3px 3px 0 0;
	}

	.formerBody {
		padding: 10px;
	}

	.formerBody p {
		padding: 10px 0 0;
		margin: 0;
	}

	.formerModels {
		grid-template-columns: 1fr;
		gap: 4px;
	}

}

/*----------------------------- ここまでrecommend、setProduct、formerProduct*/

/*----------------------------- ここからflow、review、faq、related、column */

/* ==================================================
交換工事の流れ
================================================== */

.process {
	padding: 70px 4px;
	background: #f6f6f6;
}

.processList {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.processItem {
	position: relative;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
	padding: 10px 10px 18px;
}

.processItem:not(:last-child)::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -20px;
	content: "";
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-left: 20px solid #0260d2;
}

.processImage {
	aspect-ratio: 1.45 / 1;
	border-radius: 6px 6px 0 0;
}

.processImage img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.processTitle {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.4em;
	color: #0260d2;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
	font-size: clamp(1.5rem,
			calc(1.5rem + (100vw - 375px) * 0.00763),
			1.8rem);
}


.processBody {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-top: 10px;
}

.processBody p {
	margin: 0;
	padding: 15px 0 0;
	line-height: 1.4;
	font-size: clamp(1.2rem,
			calc(1.2rem + (100vw - 375px) * 0.00254),
			1.3rem);
}

/* ==================================================
   口コミ
================================================== */
.review {
	padding: 70px 0 50px;
	background: #fff;
	overflow: hidden;
}

.review .sectionHead {
	margin-bottom: 40px;
}

.reviewSlider {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	box-sizing: border-box;
}

.reviewTrack {
	width: 100%;
}

/* Slick */
.reviewTrack .slick-list {
	overflow: visible;
}

.reviewTrack .slick-track {
	display: flex;
	align-items: stretch;
}

.reviewTrack .slick-slide {
	height: auto;
	margin: 0 5px;
}

.reviewCard {
	position: relative;
	width: min(560px, 29.4118vw);
	min-height: 280px;
	margin: 0;
	padding: 2.5em 1.25em;
	border: 1px solid #0260d2;
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
	overflow: visible;
}

.reviewCard::before {
	position: absolute;
	top: -1.5vh;
	right: 5%;
	content: "";
	background: url("../images/singleproducts/ico_quote.png") no-repeat center / contain;
	width: 20%;
	max-width: 65px;
	height: auto;
	aspect-ratio: 65 / 45;
}

.reviewTitle {
	margin-bottom: 40px;
	font-weight: 700;
	line-height: 1.4;
	font-size: clamp(1.5rem,
			calc(1.5rem + (100vw - 375px) * 0.00763),
			1.8rem);
}

.reviewCard p {
	margin: 0 0 20px;
	padding: 0;
	line-height: 1.8;
}

.reviewSource {
	margin-top: auto;
	/* text-align: right; */
	text-align: left;
	font-size: clamp(1.2rem,
			calc(1.2rem + (100vw - 375px) * 0.00509),
			1.4rem);
	color: #828282;
}

.reviewSource a {
	color: #0260d2;
}

.reviewTrack .slick-slide {
	height: auto;
	margin: 0 10px;
	opacity: .35;
	transition: opacity .3s ease;
}

.reviewTrack .slick-slide.slick-center {
	opacity: 1;
}

.reviewArrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 60px;
	padding: 0;
	border: 0;
	background: #0260d2;
	color: #fff;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 24px;
	cursor: pointer;
	transform: translateY(-50%);
	border-radius: 5px;
}

.reviewPrev {
	left: 30vw;
}

.reviewNext {
	right: 30vw;
}

.slick-dots {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 25px 0 0;
	padding: 0;
	list-style: none;
	bottom: -36px;
}

.slick-dots li {
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
}

.slick-dots li button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ccc;
	font-size: 0;
	cursor: pointer;
}

.slick-dots li button::before {
	content: none;
}

.slick-dots li.slick-active button {
	background: #555;
}


/* ==================================================
よくある質問
================================================== */

.faqArea {
	padding: 70px 4%;
	background: #fff;
}

.faqList {
	max-width: 1040px;
	margin: 0 auto;
}

.faqList dl {
	background: #f6f6f6;
	padding: 1.6rem;
	border-radius: 8px;
}

.faqList dl+dl {
	margin-top: 1.6rem;
}

.faqList dt {
	color: #005fd2;
	font-weight: bold;
	line-height: 1.4em;
	padding: 0 4rem;
	position: relative;
	font-size: clamp(1.5rem,
			calc(1.5rem + (100vw - 375px) * 0.01272),
			2rem);
}

.faqList dt:hover {
	cursor: pointer;
}

.faqList dt::after {
	content: "\f078";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.2em;
	position: absolute;
	right: 1.6rem;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.faqList dt.isOpen:after {
	content: "\f077";
}

.faqList dd {
	line-height: 1.8;
	border-top: 1px solid #666;
	padding: .8rem 0 0 3.2rem;
	margin-top: .8rem;
	position: relative;
	display: none;
	font-size: clamp(1.2rem,
			calc(1.2rem + (100vw - 375px) * 0.00509),
			1.4rem);
}

.faqList dt::before {
	content: 'Q';
}

.faqList dd::before {
	content: 'A';
}

.faqList dt::before,
.faqList dd::before {
	font-size: 2.4rem;
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.faqList dd p:last-child {
	padding-bottom: 0;
}


/* ==================================================
関連商品
================================================== */

.related {
	padding: 70px 4%;
	background: #e4f5ff;
}

.relatedList {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

/* 1から3件の場合に真ん中寄せに */
.relatedList:has(.relatedCard:only-child) {
	grid-template-columns: minmax(0, 1fr);
	max-width: calc((100% - 30px) / 4);
	margin-right: auto;
	margin-left: auto;
}

.relatedList:has(.relatedCard:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: calc((100% - 30px) * 2 / 4 + 10px);
	margin-right: auto;
	margin-left: auto;
}

.relatedList:has(.relatedCard:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: calc((100% - 30px) * 3 / 4 + 20px);
	margin-right: auto;
	margin-left: auto;
}

.relatedCard {
	display: block;
	color: #333;
	text-decoration: none;
	background: #fff;
	padding: 4%;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
	border-radius: 5px;
}

.relatedImage {
	aspect-ratio: 1.25 / 1;
	overflow: hidden;
}

.relatedImage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .2s;
}

.relatedCard:hover .relatedImage img {
	transform: scale(1.03);
}

.relatedBody {
	margin-top: 5%;
}

/* メーカー・シリーズ */
.relatedMaker {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: clamp(0.8rem,
			calc(0.8rem + (100vw - 375px) * 0.00254),
			0.9rem);
	line-height: 1.3;
	color: #005fd2;
}

.relatedMaker img {
	display: block;
	width: 40% !important;
	max-width: 40%;
	height: auto;
	object-fit: contain !important;
	flex-shrink: 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 2%;
	max-width: 100px;
	height: 27px !important;
	aspect-ratio: auto !important;
}

.relatedMaker .series {
	min-width: 0;
	flex: 1;
	font-size: clamp(1rem,
			calc(1rem + (100vw - 375px) * 0.00254),
			1.2rem);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* 商品名 */
.relatedTitle {
	margin: 0;
	padding-top: 1rem;
	font-weight: 700;
	font-size: clamp(2rem,
			calc(2rem + (100vw - 375px) * 0.00508),
			2.4rem);
	line-height: 1.4;
	color: #333;
}

/* 型番 */
.relatedNumber {
	margin: 0;
	padding-top: 0.5rem;
	font-size: clamp(1rem,
			calc(1rem + (100vw - 375px) * 0.00254),
			1.2rem);
	line-height: 1.3;
	color: #333;
}

/* 価格 */
.relatedPrice {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid #ccc;
}

.relatedPrice span {
	display: block !important;
	margin: 0 !important;
	font-size: clamp(1.1rem,
			calc(1.1rem + (100vw - 375px) * 0.00254),
			1.3rem) !important;
	line-height: 1.3;
	color: #333 !important;
	font-weight: bold !important;
	background: none !important;
	text-align: left !important;
	padding: 0 !important;
	border: none !important;
}

.relatedPrice strong {
	display: block;
	margin: 0;
	font-size: clamp(1.8rem,
			calc(1.8rem + (100vw - 375px) * 0.00508),
			2.2rem);
	line-height: 1;
	color: #333;
	padding: 0.2em 0 0.5em;
}

/* 特長タグ */
.relatedTags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 1rem 0 0;
}

.relatedTags span {
	padding: 0.4em !important;
	border: 1px solid #005fd2 !important;
	background: #f7fcff !important;
	border-radius: 5px !important;
	font-size: clamp(0.9rem,
			calc(0.9rem + (100vw - 375px) * 0.00254),
			1.1rem) !important;
	line-height: 1.4 !important;
	color: #005fd2 !important;
	white-space: nowrap !important;
	font-weight: bold !important;
}

/* 紹介文 */
.relatedCard p,
.relatedDescription {
	margin: 0;
	padding: 0;
	font-size: clamp(1.1rem,
			calc(1.1rem + (100vw - 375px) * 0.00763),
			1.4rem);
	color: #333;
}

.relatedDescription {
	padding-top: 1rem;
}


/* ==================================================
関連コラム
================================================== */

.columnArea {
	padding: 70px 4% 0;
	background: #fff;
}

.columnList {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

/* 1から3件の場合に真ん中寄せに */
.columnList:has(.columnCard:only-child) {
	grid-template-columns: minmax(0, 1fr);
	max-width: calc((100% - 30px) / 4);
	margin-right: auto;
	margin-left: auto;
}

.columnList:has(.columnCard:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: calc((100% - 30px) * 2 / 4 + 10px);
	margin-right: auto;
	margin-left: auto;
}

.columnList:has(.columnCard:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: calc((100% - 30px) * 3 / 4 + 20px);
	margin-right: auto;
	margin-left: auto;
}

.columnCard {
	display: block;
	color: #333;
	text-decoration: none;
}

.columnImage {
	aspect-ratio: 1.25 / 1;
	overflow: hidden;
}

.columnImage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .2s;
}

.columnCard:hover .columnImage img {
	transform: scale(1.03);
}

.columnTag {
	display: inline-block;
	margin-top: 5px;
	padding: 1px 5px;
	border: 1px solid #0087D6;
	color: #0087D6;
	line-height: 1.4;
	font-weight: bold;
	background: #f7fcff;
	font-size: clamp(0.9rem,
			calc(0.9rem + (100vw - 375px) * 0.01272),
			1.4rem);
}

.columnTitle {
	margin-top: 4px;
	color: #0087D6;
	font-weight: 700;
	line-height: 1.4;
	font-size: clamp(1.2rem,
			calc(1.2rem + (100vw - 375px) * 0.01018),
			1.6rem);
}

@media screen and (max-width: 768px) {
	/* 交換工事の流れ */

	.process {
		padding: 40px 4%;
	}

	.processList {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.processItem {
		display: grid;
		grid-template-columns: 32% 1fr;
		align-items: stretch;
		padding: 15px;
		gap: 10px;
		grid-template-columns: clamp(110px, 32%, 170px) 1fr;
	}

	.processItem:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -14px;
		left: 50%;
		border-top: 14px solid #0260d2;
		border-right: 12.5px solid transparent;
		border-bottom: 0;
		border-left: 12.5px solid transparent;
		transform: translateX(-50%);
	}

	.processImage {
		height: 100%;
		aspect-ratio: auto;
		border-radius: 6px 0 0 6px;
	}

	.processTitle {
		text-align: left;
		display: block;
		min-height: 0;
	}

	.processBody {
		margin-top: 0;
	}


	/* 口コミ */
	.review {
		padding: 40px 0;
	}

	.review .sectionHead {
		margin-bottom: 40px;
	}

	.reviewTrack .slick-slide {
		margin: 0 5px;
	}

	.reviewCard {
		max-width: 460px;
		min-height: 280px;
		padding: 1.5em 1.1em;
	}

	.reviewCard::before {
		width: 14%;
		top: -1.8vh;
	}

	.reviewTitle {
		margin-bottom: 25px;
	}

	.reviewCard p {
		margin: 0 0 15px;
	}

	.reviewArrow {
		display: none;
	}

	.review .sectionHead p {
		padding: 0 4%;
	}

	/* FAQ */
	.faqArea {
		padding: 40px 4%;
		background: #fff;
	}

	.faqList dl {
		padding: 10px;
	}

	.faqList dl+dl {
		margin-top: .8rem;
	}

	.faqList dt {
		padding: 0 3.6rem;
	}

	.faqList dt::after {
		right: 0;
	}

	/* 関連商品 */

	.related {
		padding: 40px 4%;
	}

	.relatedList {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 10px;
	}

	.relatedList:has(.relatedCard:only-child) {
		max-width: none;
	}

	.relatedList:has(.relatedCard:nth-child(2):last-child),
	.relatedList:has(.relatedCard:nth-child(3):last-child) {
		max-width: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 10px;
	}

	.relatedMaker img {
		max-width: 80px;
		max-height: 16px;
	}

	.relatedNumber {
		padding-top: 0.2rem;
	}

	.relatedTitle {
		padding-top: 0.5rem;
	}

	/* 関連コラム */

	.columnArea {
		padding: 40px 4% 0;
	}

	.columnList,
	.columnList:has(.columnCard:nth-child(2):last-child),
	.columnList:has(.columnCard:nth-child(3):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 10px;
		max-width: none;
	}

	.columnList:has(.columnCard:only-child) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 50%;
		margin-inline: auto;
	}

	.columnList:has(.columnCard:nth-child(2):last-child),
	.columnList:has(.columnCard:nth-child(3):last-child),
	.columnList:has(.columnCard:only-child) {
		max-width: none;
	}
}

/*----------------------------- ここまでflow、review、faq、related、column */


/* style.cssのheader/footer上書き ここから*/

#footer {
	/* height: 600px;
	max-height: none;
	overflow: visible; */
	padding: 30px 0 40px 0;
	width: 100%;
	max-height: none;
	background: #000;
	position: relative;
	color: #FFF;
	overflow: visible;
}

#footer #footerArea {
	/* position: absolute; */

	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 1350px;
	margin: 0 auto;
}

#copyright {
	position: static;
}

#footer::before {
	background: #0087D6;
}

#footer #footerArea .footerIn ul li {
	background: url(../images/singleproducts/ico_arrow03.png) no-repeat 0 50%;
	background-size: 8px 9px;
	padding-left: 20px;
}

#spFooter ul li {
	background: #0087d6 url(../images/singleproducts/footer_ico01.png) 95% 50% no-repeat;
	background-size: 8px auto;
	border: #fff 1px solid;
	border-collapse: collapse;
	padding: 8px;
	font-size: 4vw;
	font-weight: bold;
}

header .containerFliud.bg_white {
	padding-top: 10px;
}

.header-pc .pt10 {
	padding-top: 10px !important;
}

#footTel {
	width: 100%;
}

#footTel .ga_SpTelFix .bg_tel_foot {
	width: 100%;
	background: url(../images/singleproducts/comm_foottel_cta.png) no-repeat 0 0;
	background-size: 100% auto;
	position: relative;
	/* margin: 0 auto; */
	aspect-ratio: 640 / 149;
}


#footTel .ga_SpTelFix .bg_tel_foot img.svgtel {
	position: absolute;
	width: 50%;
	left: 13%;
	top: 23%;
	height: auto;
	filter: invert(45%) sepia(100%) saturate(1396%) hue-rotate(313deg) brightness(99%) contrast(90%);
}

/* iOS Safari / のみ色を調整 */
@supports (-webkit-touch-callout: none) {
	#footTel .ga_SpTelFix .bg_tel_foot img.svgtel {
		filter: invert(50%) sepia(90%) saturate(700%) hue-rotate(300deg) brightness(80%) contrast(90%);
	}
}

.telOuter {
	max-width: 900px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	#footTel a {
		display: block;
		transition: .15s;
		-webkit-tap-highlight-color: transparent;
	}

	#footTel a img {
		display: block;
	}

	#footTel a:active {
		filter: brightness(.8);
	}

	.containerFliud .h1container {
		margin: 0;
	}


	.telOuter.tel {
		margin: 10vw 10px 0;
	}

}

/* style.cssのheader/footer上書き ここまで */


/* ========================================
   商品一覧ページ
======================================== */
.productTop {
	margin-bottom: 70px;
}

.pageProduct .block_service .head div {
	align-items: center;
}

.pageProduct .block_service ul.cont {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 20px 0;
}

.pageProduct .block_service ul.cont>li {
	display: flex;
}

.pageProduct .block_service .relatedCard {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.pageProduct .block_service .relatedImage {
	width: 100%;
}

.pageProduct .cateLink ul li {
	transition: background-color .2s;
	width: calc(100% / 8 - 0.4em);
}

.pageProduct .cateLink ul li:hover {
	background: #f4fbff;
}

.pageProduct .cateLink ul li.is-disabled div {
	height: 8.4375em;
	background: #fff;
	padding: .5em;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}


.pageProduct .block_service .head a {
	color: #005fd2 !important;
	font-weight: bold;
}

.pageProduct .conversion01 {
	margin-bottom: 0;
}

.pageProduct .cateLink li img {
	max-width: 60px;
}

.pageProduct .cateLink li span {
	line-height: 1.1;
	color: #0086D6;
}

.pageProduct .cateLink .flex> :last-child {
	margin-right: auto;
	margin-left: .5em;
}

/* 商品ページがないカテゴリ */
.pageProduct .cateLink ul li.is-disabled,
.pageProduct .cateLink ul li.is-disabled div {
	color: #aaa;
	cursor: default;
}

.pageProduct .cateLink ul li.is-disabled span {
	color: #aaa;
}

.pageProduct .cateLink ul li.is-disabled img {
	opacity: .35;
	filter: grayscale(1);
}

.pageProduct .cateLink li.is-disabled img[src*="ico_ecocute"],
.pageProduct .cateLink li.is-disabled img[src*="ico_stove"] {
	opacity: .65;
	filter: grayscale(1);
}

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

	.productTop {
		margin-bottom: 40px;
	}

	.pageProduct .cateLink ul li {
		width: calc(100% / 3 - .5em);
	}

	.pageProduct .block_service ul.cont {
		gap: 20px 0;
	}

	.pageProduct .block_service .cont li {
		width: calc(100% / 2 - .5em);
	}
}