@charset "UTF-8";

/* ===============================
	ユーティリティ
=============================== */
.bold {
	font-weight: 700;
}

.tc {
	text-align: center !important;
}

.tl {
	text-align: left !important;
}

.tr {
	text-align: right !important;
}

.red {
	color: red !important;
}

.blue {
	color: #00a0e9 !important;
}

.fs {
	font-size: .75em;
	line-height: 1.2;
}

.ma {
	margin-left: auto;
	margin-right: auto;
}

.mt05em {
	margin-top: .5em;
}

.mt1em {
	margin-top: 1em;
}

.mt2em {
	margin-top: 2em;
}

.mt3em {
	margin-top: 3em;
}

/* Youtube 動画 */
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* ====================================
	製品共通：カラー設定
 ==================================== */
/* 注釈カラー */
sup {
	color: #00a0e9;
}

/* アロータイトル・左 */
.has-arrow-left {
	padding: 0 0 0 1em;
	background-image: url(/products/common/images/chevron-right-solid.svg);
	background-repeat: no-repeat;
	background-position: left 0 top .4em;
	background-size: auto .8em;
}

/* 製品カラーアイコン */
.prod-colors .pcolor {
	display: inline-block;
	width: 1.2rem;
	height: 1.2rem;
	margin-right: 0.5rem;
	background: #fff;
	border: solid 1px #a2a2a2;
	border-radius: 50%;
}

.prod-colors .pcolor.black {
	background: #000;
}

.prod-colors .pcolor.red {
	background: #e6000d;
}

.prod-colors .pcolor.grey {
	background: #6f6f6f;
}

.prod-colors .pcolor.brown {
	background: #624a3c;
}

.prod-colors .pcolor.aqua {
	background: #a8caf4;
}

.prod-colors .pcolor.pink {
	background: #f4a8a8;
}

/* サポート */
#globalSupportFooter {
	background: #f5f5f5;
}

#globalSupportFooter a {
	color: #434343;
}

#globalSupportFooter ul.list-support li {
	background: #fff;
}

/* サポートアイコン */
#globalSupportFooter ul.list-support li a {
	background-repeat: no-repeat;
	background-position: left center;
}

#globalSupportFooter ul.list-support li.i-support a {
	background-image: url(/products/common/images/icon-support.svg);
}

#globalSupportFooter ul.list-support li.i-faq a {
	background-image: url(/products/common/images/icon-faq.svg);
}

#globalSupportFooter ul.list-support li.i-manual a {
	background-image: url(/products/common/images/icon-manual.svg);
}

#globalSupportFooter ul.list-support li.i-size a {
	background-image: url(/products/common/images/icon-size.svg);
}

#globalSupportFooter ul.list-support li.i-care a {
	background-image: url(/products/common/images/icon-care.svg);
}

#globalSupportFooter ul.list-support li.i-option a {
	background-image: url(/products/common/images/icon-option.svg);
}

#globalSupportFooter ul.list-support li.i-catalog a {
	background-image: url(/products/common/images/icon-catalog.svg);
}

#globalSupportFooter ul.list-support li.i-trouble a {
	background-image: url(/products/common/images/icon-trouble.svg);
}

#globalSupportFooter ul.list-support li.i-faqbot a {
	background-image: url(/products/common/images/icon-faqbot.svg);
}

#globalSupportFooter ul.list-support li.i-line-chat a {
	background-image: url(/products/common/images/icon-line-chat.svg);
}

#globalSupportFooter ul.list-support li.i-info a {
	background-image: url(/products/common/images/icon-info.svg);
}
#globalSupportFooter ul.list-support li.i-soft a {
	background-image: url(/products/common/images/icon-soft.svg);
}
#globalSupportFooter ul.list-support li.i-store_1 a {
	background-image: url(/products/common/images/icon-store_1.svg);
}
#globalSupportFooter ul.list-support li.i-connect a {
	background-image: url(/products/common/images/icon-connect.svg);
}
#globalSupportFooter ul.list-support li.i-chat a {
	background-image: url(/products/common/images/icon-chat.svg);
}

/* フッターラインアップ */
.foot-lineup-title-container {
	border-bottom: solid 1px #a0a0a0;
}

.foot-lineup-title-container .btn-lineup {
	text-decoration: none;
}

.foot-lineup-title-container .fa-angle-right {
	margin-right: .5em;
}

.footer-lineup-outer {
	position: relative;
}

.footer-lineup-container {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1
}

.footer-lineup-container a {
	text-decoration: none;
}

.footer-lineup-container .prod-name {
	font-weight: 700;
}

.footer-lineup-container .name {
	display: inline-block;
	padding: 0 0 0 1em;
	background-image: url(/products/common/images/chevron-right-solid.svg);
	background-repeat: no-repeat;
	background-position: left 0 top .35em;
	background-size: auto .8em;
}

.footer-lineup-container .icon-new {
	color: #e6000d;
	line-height: 1;
}

.footer-lineup-button-next,
.footer-lineup-button-prev {
	position: absolute;
	top: 50%;
	width: 5%;
	height: 120px;
	margin-top: -60px;
	z-index: 2;
	cursor: pointer;
	background-color: #D9D9D9;
	background-size: 60% auto;
	background-position: center;
	background-repeat: no-repeat;
}

.footer-lineup-button-prev {
	background-image: url(/products/common/images/arrow-prev-w.svg);
	left: 0;
	right: auto
}

.footer-lineup-button-next {
	background-image: url(/products/common/images/arrow-next-w.svg);
	right: 0;
	left: auto
}

/* カルーセル破棄時スタイル */
.footer-lineup-outer.destroy {
	display: flex;
}

.footer-lineup-outer.destroy {
	padding: 0 0;
}

.footer-lineup-outer.destroy .footer-lineup-button-next,
.footer-lineup-outer.destroy .footer-lineup-button-prev {
	display: none;
}

/* 一覧を見るボタン */
ul.list-btn-show-list {
	display: flex;
	margin-left: 1.5em;
}

ul.list-btn-show-list li {
	display: flex;
	align-items: center;
}

.btn-show-list {
	display: inline-block;
	padding: .25em 1em .25em .75em;
	font-size: 1.3rem;
	background: #fff;
	color: #535353;
	border: solid 1px #535353;
	border-radius: .5rem;
	/* position: relative; */
}

.btn-show-list svg {
	position: relative;
	top: -.1em;
}

.btn-show-list:hover {
	background: #535353;
	color: #fff;
	text-decoration: none;
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {

	main[data-footer-type] {
		padding-bottom: 2.6rem;
	}

	/* フッターラインアップ */
	#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;
	}

	.footer-lineup-outer.destroy .swiper-slide {
		width: 33%;
	}

	/* サポート */
	#globalSupportFooter {
		padding: 3rem 0;
	}

	#globalSupportFooter .global-support-title {
		font-size: 1.8rem;
		margin-bottom: 2rem;
		font-weight: normal;
		text-align: center;
	}

	#globalSupportFooter ul.list-support.col4 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#globalSupportFooter ul.list-support li {
		display: flex;
		margin-top: 1.8rem;
		padding: 1rem;
		background: #fff;
	}

	#globalSupportFooter ul.list-support.col4 li {
		width: 48%;
	}

	#globalSupportFooter ul.list-support.col3 li:first-child,
	#globalSupportFooter ul.list-support.col4 li:nth-child(-n+2) {
		margin-top: 0;
	}

	#globalSupportFooter ul.list-support li a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 28px;
		font-size: 1.4rem;
		line-height: 1.2;
		text-decoration: none;
	}

	#globalSupportFooter ul.list-support li.icon a {
		padding-left: 3.6rem;
		background-size: 28px auto;
	}

	/* サポートリスト・テキスト */
	#globalSupportFooter ul.list-support-text {
		margin-top: 2rem;
	}

	#globalSupportFooter ul.list-support-text li {
		margin-top: .5em;
	}

	#globalSupportFooter ul.list-support-text li:first-child {
		margin-top: 0;
	}

	#globalSupportFooter ul.list-support-text li a {
		display: block;
		padding: 0 0 0 1em;
		position: relative;
	}

	#globalSupportFooter ul.list-support-text li a::before {
		content: '';
		display: inline-block;
		width: .9em;
		height: .9em;
		background: url(/products/common/images/chevron-right-solid.svg) no-repeat center center;
		background-size: auto 100%;
		position: absolute;
		top: .35em;
		left: 0;
	}
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 768px) {

	main[data-footer-type] {
		padding-bottom: 2.6rem;
	}

	/* フッターラインアップ */
	#footLineup {
		margin-top: 14rem;
		padding-top: 0rem;
	}

	.foot-lineup-title-container {
		display: flex;
		align-items: baseline;
		margin-bottom: 3rem;
		padding-bottom: .8rem;
	}

	.foot-lineup-title-container .foot-lineup-title {
		font-size: 2rem;
		font-weight: 300;
	}

	.footer-lineup-container .swiper-slide {
		padding: 0 2%;
	}

	.footer-lineup-outer {
		padding: 0 30px;
	}

	.footer-lineup-container .swiper-slide {
		padding: 0 2%;
	}

	.footer-lineup-button-next,
	.footer-lineup-button-prev {
		position: absolute;
		top: 0;
		width: 30px;
		height: 100%;
		margin-top: 0;
		background-color: #d9d9d9;
	}

	.footer-lineup-container .img {
		padding: 0 12%;
	}

	.footer-lineup-container .prod-name {
		font-size: 1.8rem;
	}

	.footer-lineup-container .icon-new {
		margin-left: .4em;
		font-size: 1.4rem;
		position: relative;
		top: -.1em;
	}

	.footer-lineup-container .text {
		margin-top: .5em;
		font-size: 1.4rem;
	}

	/* サポート */
	#globalSupportFooter {
		padding-top: 3rem;
		padding-bottom: 4rem;
	}

	#globalSupportFooter .global-support-title {
		font-size: 2.2rem;
		margin-bottom: 3rem;
		font-weight: normal;
		text-align: center;
	}

	#globalSupportFooter ul.list-support {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	#globalSupportFooter ul.list-support li {
		display: flex;
		padding: .8em 1em;
		margin-top: 3rem;
		margin-left: 1.65%;
	}

	#globalSupportFooter ul.list-support.col3 li {
		width: 32.22%;
	}

	#globalSupportFooter ul.list-support.col4 li {
		width: 23.75%;
	}

	#globalSupportFooter ul.list-support.col3 li:nth-child(-n+3),
	#globalSupportFooter ul.list-support.col4 li:nth-child(-n+4) {
		margin-top: 0;
	}

	#globalSupportFooter ul.list-support.col3 li:nth-child(3n-2),
	#globalSupportFooter ul.list-support.col4 li:nth-child(4n-3) {
		margin-left: 0;
	}

	#globalSupportFooter ul.list-support li a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 40px;
		font-size: 1.6rem;
		line-height: 1.2;
		text-decoration: none;
	}

	#globalSupportFooter ul.list-support li.icon a {
		padding-left: 50px;
		background-size: 40px auto;
	}

	/* サポートリスト・テキスト */
	#globalSupportFooter ul.list-support-text {
		margin-top: 2rem;
	}

	#globalSupportFooter ul.list-support-text li {
		margin-top: .5em;
	}

	#globalSupportFooter ul.list-support-text li:first-child {
		margin-top: 0;
	}

	#globalSupportFooter ul.list-support-text li a {
		display: block;
		padding: 0 0 0 1em;
		position: relative;
	}

	#globalSupportFooter ul.list-support-text li a::before {
		content: '';
		display: inline-block;
		width: .9em;
		height: .9em;
		background: url(/products/common/images/chevron-right-solid.svg) no-repeat center center;
		background-size: auto 100%;
		position: absolute;
		top: .35em;
		left: 0;
	}
}

/* ====================================
	タブレット、印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 768px) and (max-width: 1079px) {
	.footer-lineup-outer.destroy .swiper-slide {
		width: 25%;
	}
}

/* ====================================
	PC専用スタイル
===================================== */
@media only screen and (min-width: 1080px) {
	.footer-lineup-outer.destroy .swiper-slide {
		width: 20%;
	}
}

/* ====================================
	スクリーン専用スタイル
===================================== */
@media screen {
	[data-check="checking"] {
		background: #ffccd5 !important;
	}
}