@charset "UTF-8";

:root {
	--prod-color-gray: #6f6f6f;
	--prod-color-brown: #624a3c;
	--prod-color-copper: #a57d65;
	--prod-color-aqua: #a8caf4;
	--prod-color-pink: #f4a8a8;
	--margin-xlarge: 8rem;
	--margin-large: 6rem;
	--margin-medium: 4rem;
	--margin-small: 2rem;
	--margin-xsmall: 1rem;
}

/* MP4動画 */
.video {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
}

/* Youtube 動画 */
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* ====================================
	製品共通：カラー設定
 ==================================== */

/* 製品カラーアイコン */
.icon-color {
	display: inline-block;
	inline-size: .8em;
	block-size: .8em;
	border: 1px solid #000;
	border-radius: 50%;
}

.icon-color.black {
	background-color: #000;
}

.icon-color.charcoal {
	background-color: var(--charcoal-gray);
}

.icon-color.steel {
	background-color: var(--steel-gray);
}

.icon-color.red {
	background-color: var(--sharp-red);
}

.icon-color.brown {
	background-color: var(--prod-color-brown);
}

.icon-color.copper {
	background-color: var(--prod-color-copper);
}

.icon-color.aqua {
	background-color: var(--prod-color-aqua);
}

.icon-color.pink {
	background-color: var(--prod-color-pink);
}

.icon-color.white {
	background-color: #fff;
}

/* 注釈 */
sup {
	color: var(--cyan);
}

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

.mts {
	margin-top: var(--margin-small);
}

.mtm {
	margin-top: var(--margin-medium)
}

.mtl {
	margin-top: var(--margin-large);
}

.mt1em {
	margin-top: 1em;
}

main[data-footer-type] {
	padding-bottom: 8rem;
}

/* テキスト・アローつき */
.has-arrow-left {
	inline-size: fit-content;
	font-weight: 400;
	padding-left: 1em;
	background: url('/assets/common/images/chevron-right-solid.svg') no-repeat left 0 top .4em/auto .8em;
}

a.has-arrow-left {
	display: inline-block;
}

/* ボタン・アローつき */
.btn-has-arrow-left {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-column-gap: .8em;
	inline-size: fit-content;
	block-size: fit-content;
	align-items: center;
	font-weight: 400;
	border: 1px solid #000;
	border-radius: 5px;
	padding: .5em 1em;
}

.btn-has-arrow-left::after {
	content: '';
}

.btn-has-arrow-left svg {
	inline-size: 0.6em;
	block-size: 1em;
}

/* フレックスコンテナ */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-item {
	inline-size: 100%;
}

/* サポート */
#globalSupportFooter {
	padding-block: 4rem;
	background-color: var(--white-gray);
}

.global-support-title {
	font-size: 2.4rem;
	font-weight: 700;
	margin-bottom: 1.2em;
	text-align: center;
}

.list-global-support>li:not(:first-child) {
	margin-top: 1.4rem;
}

.list-global-support>li>a {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: .8em;
	inline-size: 100%;
	block-size: 100%;
	font-size: 2rem;
	padding: .6em 1em;
	background-color: #fff;
	border: 1px solid #959595;
}

.list-global-support>li>a img {
	inline-size: 35px;
}

/* ==========================================
	ホバー、マウスポインタがサポートされている環境
=========================================== */
@media (hover:hover) and (pointer: fine) {

	a.hover-parent.hovering .btn-has-arrow-left.hover-trigger {
		text-decoration: none;
	}

	a.has-arrow-left:hover {
		text-underline-offset: 3px;
	}

	/* グローバルサポート */
	.list-global-support a:hover {
		text-decoration: none;
	}
}

/* ====================================
	スマートフォン専用スタイル（～768px）
===================================== */
@media screen and (width <768px) {


	/* フッターラインアップ */
	#footLineup {
		margin-top: 4rem;
	}

	.foot-lineup-title-container {
		display: flex;
		align-items: baseline;
		margin-bottom: 2rem;
		padding-bottom: .5em;
	}

	.foot-lineup-title-container .foot-lineup-title {
		padding-bottom: .2em;
		font-size: 1.8rem;
		font-weight: 300;
	}

	.foot-lineup-title-container .btn-lineup {
		margin-left: 1.5em;
		font-size: 1.4rem;
	}

	.footer-lineup-container .swiper-slide {
		padding: 0 2%;
	}

	.footer-lineup-container .img {
		padding: 0 10%;
	}

	.footer-lineup-container .prod-name {
		font-size: 1.4rem;
	}

	.footer-lineup-container .icon-new {
		margin-left: .4em;
		font-size: 1.2rem;
	}

	.footer-lineup-container .text {
		margin-top: .5em;
		font-size: 1.2rem;
	}
}

/* ====================================
	TAB、PC、印刷専用スタイル（768px～）
===================================== */
@media print,
screen and (width >=768px) {

	:root {
		--margin-xlarge: 10rem;
		--margin-large: 8rem;
		--margin-medium: 6rem;
		--margin-small: 4rem;
		--margin-xsmall: 2rem;
	}

	main[data-footer-type] {
		padding-bottom: 15rem;
	}

	/* サポート */
	#globalSupportFooter {
		padding-block: 6rem;
	}

	.global-support-title {
		font-size: 3.2rem;
	}

	.list-global-support {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-column-gap: 2%;
	}

	.list-global-support>li:not(:first-child) {
		margin-top: 0;
	}
}

/* ====================================
	タブレット専用スタイル（768px～1024px）
===================================== */
@media screen and (768px <=width < 1024px) {

	/* サポート */
	.list-global-support>li>a {
		font-size: 1.6rem;
	}
}

/* ====================================
	PC専用スタイル（1024px～）
===================================== */
@media print,
screen and (1024px <=width) {}