/**
 * @copyright 2018- Tom Communication Industrial Co., Ltd.
 * @since 2018/04/13
 * @version 20180413
 */
@charset "UTF-8";
@font-face{
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	src: local('Noto Sans CJK JP'),
		local('NotoSansCJKjp-Regular'),
		local('NotoSansJP-Regular'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
	}
/* @font-face{
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 300;
	src: local('Noto Sans CJK JP'),
		local('NotoSansCJKjp-Light'),
		local('NotoSansJP-Light'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format('opentype');
} */
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	src: local('Noto Sans CJK JP'),
		local('NotoSansCJKjp-Bold'),
		local('NotoSansJP-Bold'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format('opentype');
}
/* 固定ヘッダー対応 :target { animation: headerblank 0.1s; } */
@keyframes headerblank {
	0% { padding-top: 200px; margin-top: -200px; }
  100% { padding-top: 0; margin-top: 0; }
}

* { box-sizing: border-box; }
html {
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", sans-serif;
	margin: 0px;
	padding: 0px;
	color: #000;
	font-size: 62.5%;
	font-weight: 400;
}
a {	text-decoration: none; }
a, a:active, a:visited { color: #000; }

header.SectionTitle {
	display: inline-block;
	width: 100%;
	height: 40px;
	background-color: #DCDCDC;
	font-size: 2.2rem;
	font-feature-settings: "halt";
	line-height: 4rem;
	text-align: center;
}
#HEADER_BLANK {
	width: 100%;
	height: 200px;
}
article.Frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	width: 100%;
	min-width: 1200px;
	min-height: 0%;
	background-color: #FFF;
}
div.BlankFrame,
div.HiBlankFrame {
	width: 100%;
	height: 50px;
	background-color: #FFF;
}
div.HiBlankFrame { height: 80px; }
span.Anchor {
	position: relative;
	display: inline-block;
	top: -200px;
	width: 0px;
	height: 0px;
	visibility: hidden;
}

/* Swiper 		------------------------------ */
.swiper-container {
    width: 1200px;
    height: 380px;
}

/* CompanyInfo		------------------------------ */
div.Info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 300px;
	height: 65px;
}
div.Info > div {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
div.Info > div > p {
	display: inline-block;
	font-feature-settings: "halt";
}
div.Info > div > p.PhoneOpt {
	display: inline-block;
	padding: 10px 0px 10px 0px;
	height: 40px;
	font-size: 2rem;
}
div.Info > div > p.Phone {
	height: 40px;
	font-size: 3.8rem;
	font-weight: bold;
	line-height: 3.8rem;
}
div.Info > div > p.Zip,
div.Info > div > p.Addr {
	height: 20px;
	font-size: 1.3rem;
	line-height: 1.5rem;
}
div.Info.White > div > p { color: #FFF; }

/* TOPBUTTON		------------------------------ */
#TOPBUTTON {
	z-index: 90;
	position: fixed;
	visibility: hidden;
	width: 30px;
	height: 30px;
    bottom: 20px;
    left: calc(50% + 570px);
	opacity: 0;
}
#TOPBUTTON::before,
#TOPBUTTON::after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	margin: auto;
}
#TOPBUTTON::before {
	top: 0px;
	left: 0px;
	width: 30px;
	height: 30px;
	background-color: #E60012;
}
#TOPBUTTON::after {
	margin: -3px 0px 0px -8px;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	border-top: 4px solid #FFF;
	border-right: 4px solid #FFF;
	transform: rotate(-45deg);
}
#TOPBUTTON.fade-in {
	visibility: visible;
	opacity: 1;
    transition: opacity 2s;
}
#TOPBUTTON.fade-in:hover {
	cursor: pointer;
}

/* HEADER			------------------------------ */
#HEADER_F {
	z-index: 99;
	position: fixed;
	top: 0px;
}
#HEADER {
	display: flex;
	width: 1200px;
	height: 85px;
}
#HEADER_01 {
	display: inline-block;
	width: 320px;
}
#HEADER_ADDR {
	display: flex;
	justify-content: flex-end;
	padding: 10px 0px 15px 0px;
	width: 760px;
}
#HEADER_02 {
	display: inline-block;
	width: 120px;
}

/* MENU				------------------------------ */
#MENU_F {
	z-index: 98;
	position: fixed;
	top: 85px;
	background-color: #000;
}
#MENU {
	display: flex;
	width: 1200px;
	height: 50px;
}
#MENU > a {
	display: inline-box;
	flex-grow: 1;
	line-height: 5rem;
	text-align: center;
	font-size: 1.4rem;
	font-feature-settings: "halt";
	color: #FFF;
}
#MENU > a:hover { background-color: #666; }
#MENU > a.ForDealer{ background-color: #E60012; }
#MENU > a.ForDealer:hover { background-color: #EC6D45; }

/* BREADC			------------------------------ */
#BREADC_F {
	z-index: 97;
	position: fixed;
	top: 135px;
	background-color: rgba(255,255,255,0.9);
}
#BREADC {
	display: flex;
	width: 1200px;
	height: 65px;
}
#BREADC > div {
	height: 30px;
	line-height: 3rem;
	padding: 15px 5px 5px 5px;
}
#BREADC > div > a {
	position: relative;
	display: inline-block;
	font-size: 1.5rem;
	font-feature-settings: "halt";
	vertical-align: middle;
}
#BREADC > div > a.Arrow {
	padding: 0px 0px 0px 16px;
}
#BREADC > div > a.Arrow::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	margin: auto;
	top: 0px;
	bottom: 0px;
	left: 2px;
	width: 7px;
	height: 7px;
	border: 7px solid transparent;
	border-left: 7px solid #B6B6B6;
	vertical-align: middle;
}

/* BANNER		------------------------------ */
#BANNER_F,
#BANNER_F > header.SectionTitle {
	background-color: #EEE;
}
#BANNER {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around;
	padding: 20px 0px;
	width: 1200px;
	min-height: 140px;
}
#BANNER > a {
	display: inline-block;
	width: 350px;
	height: 100px;
	border: 1px solid #005AAA;
	background: #FFF;
}

/* FOOTER		------------------------------ */
#FOOTER_F {
	background-color: #000;
}
#FOOTER {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	padding: 20px 0px 20px 0px;
	width: 1200px;
	height: 190px;
}
#FOOTER_01 {
	display: inline-block;
	width: 380px;
	height: 80px;
}
#FOOTER_ADDR {
	padding: 0px 0px 0px 20px;
	width: 360px;
	height: 80px;
}
#FOOTER_LINK {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 460px;
	height: 80px;
}
#FOOTER_LINK > a { margin: 0px 5px 0px 5px; }
#FOOTER_LINK,
#FOOTER_LINK > a {
	font-size: 1.6rem;
	font-feature-settings: "halt";
	color: #FFF;
}
#FOOTER_COPY {
	display: flex;
	align-items: flex-end;
	padding-left: 30px;
	height: 70px;
	font-size: 1.3rem;
	font-feature-settings: "halt";
	color: #FFF;
}

#ACHIEVE > h1,
#SPEC > h1 {
	width: 100%;
	font-size: 3.2rem;
	font-feature-settings: "halt";
	line-height: 5rem;
	text-align: center;
}

/* ACHIEVE	------------------------------ */
#ACHIEVE_F { padding-bottom: 40px; }
#ACHIEVE {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 1200px;
	min-height: 0%;
}
#ACHIEVE > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	margin-top: 20px;
	width: 1100px;
}
#ACHIEVE > div > a { margin-bottom: 10px; }

/* SPEC		------------------------------ */
#SPEC_F { padding-bottom: 40px; }
#SPEC {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0px 30px;
	width: 1200px;
	min-height: 0%;
}
#SPEC > dl {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	width: 100%;
	font-size: 2rem;
	font-feature-settings: "halt";
	line-height: 3.8rem;
}
#SPEC > dl > dt,
#SPEC > dl > dd { background-color: #DCDCDC; }
#SPEC > dl > dt {
	padding: 0px 20px 0px 60px;
	margin-right: 5px;
	width: 240px;
}
#SPEC > dl > dd {
	padding: 0px 20px 0px 20px;
	width: 895px;
}
#SPEC > dl > dt:nth-child(4n-1),
#SPEC > dl > dd:nth-child(4n) { background-color: #EEE; }

/* HOME 		============================== */
/* SLIDE		------------------------------ */
#SLIDE_F { padding: 0px 0px 40px 0px; }
#SLIDE {
	display: flex;
	align-items: center;
	width: 1200px;
	height: 380px;
}

/* NEWS		------------------------------ */
#NEWSMINI {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 100px;
	width: 1200px;
	min-height: 0%;
}
#NEWSMINI > dl {
	display: flex;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: stretch;
	width: 100%;
	min-height: 0%;
	font-size: 1.8rem;
	font-feature-settings: "halt";
	line-height: 2.8rem;
}
#NEWSMINI > dl > dt {
	display: flex;
	justify-content: center;
	padding: 4px 0px;
	width: 120px;
}
#NEWSMINI > dl > dd {
	padding: 4px 10px;
	width: 730px;
}
#NEWSMINI > dl > dt > span {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 4px;
	width: 100%;
	height: 22px;
	border: 2px solid #DCDCDC;
	font-size: 1.6rem;
	line-height: 1.8rem;
}
#NEWSMINI > dl > dt > span.NewItem { background-color: #DCDCDC; }
#NEWSMINI > dl > dt > span.Event { border-color: #E60012; }
#NEWSMINI > div {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 30px 0px;
	width: 100%;
	min-height: 0%;
}
#NEWSMINI > div > a {
	display: inline-block;
	width: 200px;
	height: 40px;
	background-color: #DCDCDC;
	font-size: 2.2rem;
	font-feature-settings: "halt";
	line-height: 3.8rem;
	text-align: center;
}
#NEWSMINI > div > a.Blank { background-color: transparent; }

/* APPEAL		------------------------------ */
#APPEAL_F { background-color: #DCDCDC; }
#APPEAL {
	display: flex;
	flex-direction: column;
	width: 1200px;
	height: 545px;
	background-image: url("../img/home/top_appeal01.jpg");
}
#APPEAL > h1 {
	padding: 30px 0px 30px 0px;
	width: 100%;
	height: 120px;
	font-size: 5.6rem;
	font-feature-settings: "halt";
	line-height: 6rem;
	text-align: center;
}
#APPEAL > p {
	width: 100%;
	height: 80px;
	font-size: 2.2rem;
	font-feature-settings: "halt";
	line-height: 4rem;
	text-align: center;
}
#APPEAL > ul {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: 450px;
	width: 750px;
	height: 300px;
}
#APPEAL > ul > li {
	font-size: 2.8rem;
	font-feature-settings: "halt";
	line-height: 5rem;
}
#APPEAL > ul > li::before {
	content: "□";
	color: #FFF;
	margin-right: 10px;
}

/* PRODUCT		------------------------------ */
#PRODUCT {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 100px;
	width: 1200px;
	min-height: 0%;
}
#PRODUCT > h1 {
	display: inline-block;
	width: 100%;
	height: 35px;
	font-size: 3rem;
	font-feature-settings: "halt";
	line-height: 3.5rem;
}
#PRODUCT > div {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
#PRODUCT > div.Unit { padding: 0px 0px 60px 0px; }
#PRODUCT > div.Service { padding: 40px 0px 60px 0px; }
#PRODUCT > div.Unit > div { width: 280px; }
#PRODUCT > div.Service > div { width: 240px; }
#PRODUCT > div.Unit > div > a,
#PRODUCT > div.Service > div > a {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#PRODUCT > div > div > a > img,
#PRODUCT > div > div > a > span { display: inline-block; }
#PRODUCT > div > div > a > img { margin-bottom: 10px; }
#PRODUCT > div > div > a > span {
	font-size: 2rem;
	font-feature-settings: "halt";
	line-height: 2.2rem;
}

/* ACHIEVE(Override)	------------------------------ */
#ACHIEVE { margin-top: 40px; }

/* CATALOG			------------------------------ */
#CATALOG_F {
	padding: 30px 0px;
	background-color: #DCDCDC;
}
#CATALOG_F > header.SectionTitle {
	background-color: #FFF;
}
#CATALOG {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-between;
	width: 1040px;
	min-height: 0%;
}
#CATALOG > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 50px;
	width: 240px;
}
#CATALOG > a > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 5px;
	width: 100%;
	height: 75px;
}
#CATALOG > a > div > p {
	font-size: 2rem;
	font-feature-settings: "halt";
	line-height: 2.2rem;
	text-align: center;
}
#CATALOG > a > div > span {
	font-size: 1.6rem;
	font-feature-settings: "halt";
	line-height: 2rem;
	text-align: center;
}
#CATALOG > a > span {
	display: block;
	width: 200px;
	background-color: #E60012;
	font-size: 2.2rem;
	font-feature-settings: "halt";
	line-height: 3.5rem;
	text-align: center;
	color: #FFF;
}

/* BMENU		------------------------------ */
#BMENU_F { padding: 50px 0px 50px 0px; }
#BMENU {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	width: 1000px;
	height: 180px;
}
#BMENU > a,
#BMENU > div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 260px;
	height: 70px;
}
#BMENU > a {
	border: 5px solid #DCDCDC;
	font-size: 2.2rem;
	font-feature-settings: "halt";
}