@charset "UTF-8";

/* ===============================
	サイト内共通 style
=============================== */
sup {
	color: #00a0e9;
}

em {
	font-style: normal;
	font-weight: bold;
}

/* サポート */
#support {
	background: #f5f5f5;
}

#support ul.list-support li.info a {
	background-image: url(../images/sup-info.png);
}

#support ul.list-support li.qa a {
	background-image: url(../images/sup-qa.png);
}

#support ul.list-support li.manual a {
	background-image: url(../images/sup-manual.png);
}

#support ul.list-support li.mente a {
	background-image: url(../images/sup-mente.png);
}

#support ul.list-support li.option a {
	background-image: url(../images/sup-option.png);
}

#support ul.list-support li.catalog a {
	background-image: url(../images/sup-catalog.png);
}

#support ul.list-support li.navi a {
	background-image: url(../images/sup-navi.png);
}

#support ul.list-support li.pdf a {
	background-image: url(../images/sup-pdf.png);
}

#support ul.list-support li.size a {
	background-image: url(../images/sup-size.png);
}
#support ul.list-support li.faqbot a {
	background-image: url(../images/sup-faqbot.png);
}

/* ===============================
	common utility
=============================== */
ul.horizon {
	display: flex;
	flex-wrap: wrap;
}

ul.star { /* リスト（青字・※n） */
	padding-left: 2em;
}

ul.star li {
	text-indent: -2em;
}

ul.star li span {
	color: #00a0e9;
	margin-right: 0.5em;
}

ul.kome { /* リスト（黒字・※） */
	padding-left: 1.5em;
}

ul.kome li {
	text-indent: -1.5em;
}

ul.kome li:BEFORE {
	content: "\203b";
	margin-right: 0.5em;
}

ul.disc { /* リスト（●） */
	padding-left: 1.5em;
}

ul.disc li {
	text-indent: -1.5em;
}

ul.disc li:BEFORE {
	content: "\25cf";
	margin-right: 0.5em;
}

ul.single { /* リスト（黒字・1文字） */
	padding-left: 1.5em;
}

ul.single li {
	text-indent: -1.5em;
	word-break: break-all;
}

ul.single li span {
	margin-right: 0.5em;
}

.caption {
	font-size: 1.24rem;
	line-height: 1.4;
}

.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: 0.82em;
	line-height: 1.2;
}

.fxs {
	font-size: 0.77em;
	line-height: 1.2;
}

.fitImg img {
	width: 100%;
	height: auto;
}

.mt0 {
	margin-top: 0 !important;
}

.mt05em {
	margin-top: 0.5em;
}

.mt1em {
	margin-top: 1em;
}

.mt15em {
	margin-top: 1.5em;
}

.mt2em {
	margin-top: 2em;
}

.mt25em {
	margin-top: 2.5em;
}

.mt3em {
	margin-top: 3em;
}

/* ===============================
	PC / Tab Style
=============================== */
@media print , screen and (min-width: 481px) {
	/* サポート */
	#support {
		padding-bottom: 70px;
	}
	#support ul.list-support {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	#support ul.list-support li {
		width: 220px;
		height: 90px;
		margin-left: 25px;
		margin-top: 20px;
		background: #fff;
	}
	#support ul.list-support li:nth-child(-n+4) {
		margin-top: 0;
	}
	#support ul.list-support li:nth-child(4n-3) {
		margin-left: 0;
	}
	#support ul.list-support li a {
		display: block;
		width: 100%;
		height: 100%;
		padding-top: 64px;
		font-size: 1.6rem;
		line-height: 1;
		background-repeat: no-repeat;
		background-position: center 4px;
		background-size: 60px;
		text-decoration: none;
		text-align: center;
	}
	#support ul.list-support li.normal a {
		padding-top: 20px;
		font-size: 1.6rem;
		line-height: 1.6;
	}
	/* 共通 - Footer ラインアップ */
	#footLineup {
		padding-top: 50px;
		padding-bottom: 60px;
		background: #ebebeb;
	}
	#footLineup h3 {
		font-size: 2.2rem;
		padding-bottom: 1em;
	}
	#footLineup ul {
		display: flex;
		flex-wrap: wrap;
		font-weight: bold;
		color: #000;
		text-align: center;
	}
	#footLineup ul li a {
		display: block;
		margin: 1rem;
		text-decoration: none;
	}
	#footLineup .product-image {
		padding: 8% 20%;
		overflow: hidden;
	}
	#footLineup .product-image img {
		width: 200%;
		position: relative;
		left: -50%;
	}
	#footLineup .product-about {
		padding: 0.25em 0;
		border-top: solid 1px #999;
		border-bottom: solid 1px #999;
	}
	#footLineup .product-about .new {
		display: inline-block;
		padding: 0.25em 0.5em;
		margin-left: 0.5em;
	    font-size: 1.2rem;
		line-height: 1;
		background: #e50014;
		color: #fff;
		text-align: left;
	    font-weight: normal;
	}
	#footLineup .product-name {
		margin-top: 0.6em;
		padding: 0.4em 0;
		font-size: 1.7rem;
		line-height: 1;
		background: #fff;
		color: #000;
	}
	#footLineup a:hover .product-name {
		background: #000;
		color: #fff;
	}
	#footLineup .link-lineup-all {
		width: 400px;
		margin: 4rem auto 0;
	}
	#footLineup .link-lineup-all a {
		display: block;
		width: 100%;
		padding: 0.8em 0;
		font-size: 1.6rem;
		line-height: 1;
		font-weight: bold;
		background: #fff;
		color: #000;
		text-decoration: none;
		text-align: center;
	}
	#footLineup .link-lineup-all a:hover {
		background: #000;
		color: #fff;
	}
	/* カルーセル設定 */
	#footLineup .footer-slick-lineup {
		padding: 0 14px;
	}
	#footLineup .slick-slide {
		width: calc(932px / 5);
	}
	#footLineup .slick-prev, #footLineup .slick-next {
		font-size: 0;
		line-height: 0;
		position: absolute;
		top: 50%;
		display: block;
		width: 12px;
		height: 42px;
		padding: 0;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		cursor: pointer;
		color: transparent;
		border: none;
		outline: none;
		background: transparent;
	}
	#footLineup .slick-prev {
		left: 0;
		background: url(../images/slick-controls.png) no-repeat left top;
	}
	#footLineup .slick-next {
		right: 0;
		background: url(../images/slick-controls.png) no-repeat right top;
	}
	#footLineup .slick-prev:hover, #footLineup .slick-next:hover
		{
		opacity: 0.6
	}
	/* 共通 - Footer 関連コンテンツ */
	#footSpecialLinks {
		min-width: 980px;
		padding: 50px 0;
		background: #ebebeb;
		-moz-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
		-webkit-box-shadow: 0 8px -5px 8px rgba(0, 0, 0, 0.35) inset;
		-o-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
		-ms-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
		box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
	}
	#footSpecialLinks h3 {
		font-size: 2.2rem;
		padding-bottom: 1em;
	}
	#footSpecialLinks a {
		display: block;
		margin: 1rem;
		color: #0c4c89;
		text-decoration: none;
	}
	#footSpecialLinks .special-name {
		margin-top: 0.5em;
	}
	#footSpecialLinks .text {
		margin-top: 0.5em;
		font-size: 1.2rem;
		color: #000;
	}
	/* カルーセル設定 */
	#footSpecialLinks .footer-slick-special {
		padding: 0 14px;
	}
	#footSpecialLinks .slick-slide {
		width: calc(932px / 4);
	}
	#footSpecialLinks .slick-prev, #footSpecialLinks .slick-next {
		font-size: 0;
		line-height: 0;
		position: absolute;
		top: 50%;
		display: block;
		width: 12px;
		height: 42px;
		padding: 0;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		cursor: pointer;
		color: transparent;
		border: none;
		outline: none;
		background: transparent;
	}
	#footSpecialLinks .slick-prev {
		left: 0;
		background: url(../images/slick-controls.png) no-repeat left top;
	}
	#footSpecialLinks .slick-next {
		right: 0;
		background: url(../images/slick-controls.png) no-repeat right top;
	}
	#footSpecialLinks .slick-prev:hover, #footSpecialLinks .slick-next:hover
		{
		opacity: 0.6
	}
	/* 絞り込み検索バナー */
	.link-select {
		width: 360px;
		margin: 4rem auto 0;
	}
}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 480px) {
	/* サポート */
	#support ul.list-support {
		width: 100%;
	}
	#support ul.list-support li {
		height: 5rem;
		margin-top: 2rem;
		background: #fff;
	}
	#support ul.list-support li:first-child {
		margin-top: 0;
	}
	#support ul.list-support li a {
		display: block;
		width: 100%;
		height: 100%;
		padding-top: 1.2em;
		padding-left: 6rem;
		font-size: 1.4rem;
		line-height: 1;
		background-repeat: no-repeat;
		background-position: 0.5em center;
		background-size: 4rem;
		text-decoration: none;
	}
	#support ul.list-support li.normal a {
		padding-left: 1.5rem;
	}
	/* 共通 - Footer ラインアップ */
	#footLineup {
		padding-top: 2em;
		padding-bottom: 3em;
		background: #ebebeb;
	}
	#footLineup h3 {
		font-size: 2.2rem;
		padding-bottom: 1.5em;
		text-align: center;
	}
	#footLineup ul {
		display: flex;
		flex-wrap: wrap;
		font-weight: bold;
		color: #000;
		text-align: center;
	}
	#footLineup ul li a {
		display: block;
		margin: 0.5rem;
		text-decoration: none;
	}
	#footLineup .product-image {
		padding: 8% 20%;
		overflow: hidden;
	}
	#footLineup .product-image img {
		width: 200%;
		position: relative;
		left: -50%;
	}
	#footLineup .product-about {
		padding: 0.25em 0;
		font-size: 1.2rem;
		border-top: solid 1px #999;
		border-bottom: solid 1px #999;
	}
	#footLineup .product-about .new {
		display: inline-block;
		padding: 0.25em 0.5em;
		margin-left: 0.5em;
	    font-size: 1.2rem;
		line-height: 1;
		background: #e50014;
		color: #fff;
		text-align: left;
	    font-weight: normal;
	}
	#footLineup .product-name {
		margin-top: 0.6em;
		padding: 0.4em 0;
		line-height: 1;
		background: #fff;
		color: #000;
	}
	#footLineup a:hover .product-name {
		background: #000;
		color: #fff;
	}
	#footLineup .link-lineup-all {
		margin-top: 2rem;
	}
	#footLineup .link-lineup-all a {
		display: block;
		width: 100%;
		padding: 0.8em 0;
		font-size: 1.6rem;
		line-height: 1;
		font-weight: bold;
		background: #fff;
		color: #000;
		text-decoration: none;
		text-align: center;
	}
	#footLineup .link-lineup-all a:hover {
		background: #000;
		color: #fff;
	}
	/* カルーセル設定 */
	#footLineup .slick-prev, #footLineup .slick-next {
		font-size: 0;
		line-height: 0;
		position: absolute;
		top: 50%;
		display: block;
		width: 12px;
		height: 42px;
		padding: 0;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		cursor: pointer;
		color: transparent;
		border: none;
		outline: none;
		background: transparent;
	}
	#footLineup .slick-prev {
		left: -1rem;
		background: url(../images/slick-controls.png) no-repeat left top;
	}
	#footLineup .slick-next {
		right: -1rem;
		background: url(../images/slick-controls.png) no-repeat right top;
	}
	#footLineup .slick-prev:hover, #footLineup .slick-next:hover
		{
		opacity: 0.6
	}
	/* 共通 - Footer 関連コンテンツ */
	#footSpecialLinks {
		padding-top: 50px;
		padding-bottom: 50px;
		background: #ebebeb;
		-moz-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
		-webkit-box-shadow: 0 8px -5px 8px rgba(0, 0, 0, 0.35) inset;
		-o-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
		-ms-box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
		box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.35) inset;
	}
	#footSpecialLinks h3 {
		font-size: 2.2rem;
		padding-bottom: 1.5em;
		text-align: center;
	}
	#footSpecialLinks a {
		display: block;
		margin: 1rem;
		color: #0c4c89;
		text-decoration: none;
	}
	#footSpecialLinks .special-name {
		margin-top: 0.5em;
	}
	#footSpecialLinks .text {
		margin-top: 0.5em;
		font-size: 1.2rem;
		color: #000;
	}
	/* カルーセル設定 */
	#footSpecialLinks .slick-prev, #footSpecialLinks .slick-next {
		font-size: 0;
		line-height: 0;
		position: absolute;
		top: 50%;
		display: block;
		width: 12px;
		height: 42px;
		padding: 0;
		-webkit-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
		transform: translate(0, -50%);
		cursor: pointer;
		color: transparent;
		border: none;
		outline: none;
		background: transparent;
	}
	#footSpecialLinks .slick-prev {
		left: -1rem;
		background: url(../images/slick-controls.png) no-repeat left top;
	}
	#footSpecialLinks .slick-next {
		right: -1rem;
		background: url(../images/slick-controls.png) no-repeat right top;
	}
	#footSpecialLinks .slick-prev:hover, #footSpecialLinks .slick-next:hover
		{
		opacity: 0.6
	}
	/* 絞り込み検索バナー */
	.link-select {
		margin-top: 2rem;
		text-align: center;
	}
	.link-select img {
		width: 100%;
	}
}

/* ===============================
	screen setting
=============================== */
@media screen {
	/* Loading */
	#pageLoad {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		position: fixed;
		z-index: 9999;
	}
	#pageLoad.loading {
		background-image: url(../images/pageloading.gif);
		background-position: center center;
		background-repeat: no-repeat;
	}
	/* pageTop */
	a#pageTop {
		width: 50px;
		height: 50px;
		background-image: url(../images/pagetop.png);
		background-repeat: no-repeat;
		overflow: hidden;
		text-indent: 100%;
		white-space: nowrap;
		text-decoration: none;
		position: fixed;
		bottom: 20px;
		right: 0;
		display: none;
	}
	a#pageTop:hover {
		background-position: 0 bottom;
	}
	.fix {
		position: fixed !important;
	}
}

/* ===============================
	print setting
=============================== */
@media print {
	a#pageTop {
		display: none !important;
	}
	.printNewPage {
		page-break-before: always;
	}
}