@charset "UTF-8";
.ffOswald, .sectionTitle .subTitle, #productsLinkList .pcDfPa3 span { font-family: oswald, sans-serif; font-weight: 400; font-style: normal; }

@keyframes maskOut { from { width: 100%; }
  to { width: 0; } }
.contentWrap { overflow: hidden; font-size: 1rem; }
.contentWrap * { margin: 0; box-sizing: border-box; }
.contentWrap ul, .contentWrap ol { list-style: none; padding-left: 0; }
.contentWrap table { border-collapse: collapse; }
.contentWrap caption { padding: 1em 0; text-align: left; }
.contentWrap th { text-align: left; font-weight: normal; }
.contentWrap img { max-width: 100%; vertical-align: top; }
.contentWrap address, .contentWrap em { font-style: normal; }
.contentWrap a { color: inherit; }
.contentWrap hr { display: block; border: none; }
.contentWrap h1, .contentWrap h2, .contentWrap h3, .contentWrap h4, .contentWrap h5, .contentWrap h6 { font-size: 1em; }
.contentWrap .fwb { font-weight: bold; }
.contentWrap .fwn { font-weight: normal; }
.contentWrap .vat { vertical-align: top; }
.contentWrap .vat * { vertical-align: top; }
.contentWrap .vac { vertical-align: center; }
.contentWrap .vac * { vertical-align: center; }
.contentWrap .vas { vertical-align: super; }

.swiper-slide img { width: 100%; }

.plusHeader { background: #000; font-weight: bold; font-size: 0.9em; }
.plusHeader li a { color: #fff; }
.plusHeader li span { color: #fff; }

.contentWrap .articleTitle { background-color: #323f47; color: #fff; position: relative; }
.contentWrap .articleTitle > span { display: block; }
.contentWrap .articleTitle > span b { margin-bottom: .15em; display: block; }
.contentWrap .articleTitle > span b > span { font-size: 50%; }
.contentWrap .articleTitle:after { content: ''; display: block; width: 2px; background: #fff; position: absolute; left: 0; right: 0; margin: auto; }
.contentWrap .articleTitle .bgWrap { position: relative; background-color: #000; }
.contentWrap .articleTitle .bgWrap:before, .contentWrap .articleTitle .bgWrap:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; right: 0; top: 0; }
.contentWrap .articleTitle .bgWrap:before { background: #00adaf; animation: maskOut .6s .8s forwards; }
.contentWrap .articleTitle .bgWrap:after { background: #323f47; animation: maskOut 1.2s forwards; }
.contentWrap#horunavi .articleTitle .bgWrap { background: url("../img/horunavi/titleMV.png") center center no-repeat; background-size: cover; }
.contentWrap#kcross .articleTitle .bgWrap { background: url("../img/kcross/titleMV.png") center center no-repeat; background-size: cover; }
.contentWrap#keye .articleTitle .bgWrap { background: url("../img/keye/titleMV.png") center center no-repeat; background-size: cover; }
.contentWrap#kscan .articleTitle .bgWrap { background: url("../img/kscan/titleMV.png") center center no-repeat; background-size: cover; }
.contentWrap .sectionTitle { color: #00adaf; }
.contentWrap .sectionTitle .subTitle { display: block; color: #333; }
.contentWrap .sectionTitle[class*="animeBorder"] { position: relative; }
.contentWrap .sectionTitle[class*="animeBorder"]:after { content: ''; display: block; background: #fff; position: absolute; left: 0; right: 0; margin: auto; z-index: 2; }
.contentWrap .sectionTitle.animeBorderTopGreen:after { background: #00adaf; }
.contentWrap .bgGray { background-color: #323f47; color: #fff; }
.contentWrap .bgGray .sectionTitle .subTitle { color: #fff; }
.contentWrap .bgLightGreen { background-color: #e5f6f8; }
.contentWrap .footBtnWrap { padding-bottom: 4%; background: #323f47 url("../img/common/footBg.png") center top repeat-x; }
.contentWrap .panelLink { background: #00adaf; color: #fff; }
.contentWrap .panelLink .btn { display: block; padding-left: 1.5em !important; border: #fff solid 2px; line-height: 1; text-align: center; text-decoration: none; transition: .3s; }
.contentWrap .panelLink .btn:after { content: ''; display: inline-block; width: 21px; height: .75em; margin-left: .75em; background: url("../img/common/btnArrow.png") center center no-repeat; transition: .3s; }
.contentWrap .panelLink .btn:hover { padding-left: 0 !important; background-color: rgba(0, 0, 0, 0.2); }
.contentWrap .panelLink .btn:hover:after { margin-left: 3em; }
.contentWrap .catalogListWrap { width: 100%; width: calc(100% - 2em); max-width: 1200px; margin: 3em auto; overflow: hidden; transition: 1.6s; border: #323f47 solid 2px; position: relative; color: #323f47; }
.contentWrap .catalogListWrap h2 { position: absolute; left: 0; top: 0; }
.contentWrap .catalogListWrap ul { padding: 1em; justify-content: center; margin: auto; font-weight: bold; text-align: center; }
.contentWrap .catalogListWrap ul span { display: block; margin: 1em 0 1.5em; font-size: 12px; }
.contentWrap .catalogListWrap ul li { padding: 1em; display: flex; flex-direction: column; }
.contentWrap .catalogListWrap ul li > a img { box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.1); }
.contentWrap .catalogListWrap ul li > div { margin-top: auto; }
.contentWrap .catalogListWrap ul li > div img { width: 100px; }
.contentWrap .longBannerLink { margin-top: 3em; margin-bottom: 3em; }
.contentWrap .longBannerLink a { background: #00adaf; color: #fff; text-decoration: none; align-items: center; }
.contentWrap .longBannerLink a > div:last-child { letter-spacing: .8px; font-weight: bold; }
.contentWrap .longBannerLink a > div:last-child span[class*="Db"]:after { content: ''; display: inline-block; width: 15px; height: 15px; margin-left: 8px; background: url("../img/common/iconLink.png"); }

[class*="wave"] { display: block; width: 1.5em; height: 1.5em; position: relative; border-radius: 50%; }
[class*="wave"]:after { content: ''; display: block; width: 1.5em; height: 1.5em; position: absolute; left: 0; top: 0; border-radius: 50%; animation: waveAnimation 1s infinite; }

.waveRed { background-color: #d33b3b; }
.waveRed:after { background-color: #d33b3b; }

.waveYellow { background-color: #f3ce22; }
.waveYellow:after { background-color: #f3ce22; }

.waveWhite { background-color: #fff; }
.waveWhite:after { background-color: #fff; }

@keyframes waveAnimation { 0% { transform: scale(1, 1); opacity: 1; }
  100% { transform: scale(3, 3); opacity: 0; } }
[class*="maskOut"] { position: relative; }
[class*="maskOut"]:after { content: ''; display: block; width: 100%; height: 100%; transition: 1.2s; position: absolute; right: 0; bottom: 0; }
[class*="maskOut"].show:after { height: 0; }

.maskOutGray:after { background: #323f47; }

.maskOutWhite:after { background: #fff; }

#indexGreeting { background: #323f47; color: #fff; }

#roadmap { background: url("../img/index/roadMapBg.png") no-repeat center bottom/cover; }

.roadmapList li > div:before { content: ''; display: block; }

#eventNews ul { margin-bottom: 4em; }
#eventNews ul li { font-size: .9em; }
#eventNews ul li a { text-decoration: none; display: flex; align-items: center; }
#eventNews ul li a div { padding: 0 1.75em; }
#eventNews ul li a span { display: block; padding-left: 2em; }
#eventNews ul li a img { max-width: 35%; }
#eventNews ul li a small { font-size: 1em; margin-top: .5em; display: block; }
#eventNews ul li a small:before { content: '―――'; padding-right: 1em; letter-spacing: -1px; color: #999; }

#machineManagement h2 + p { margin-top: 1em; margin-bottom: 1.5em; font-size: 1em; font-weight: bold; }
#machineManagement video { width: 100%; background: #fff; }
#machineManagement .pcDfCo3 { padding: 3em 0; }
#machineManagement .pcDfCo3 h3 { margin-bottom: 1em; text-align: center; }
#machineManagement .pcDfCo3 h3 span { display: block; }

#totalSolution { margin-bottom: 80px; }
#totalSolution li { background-color: #e5f6f8; background-position: center center; background-size: cover; }
#totalSolution li > div > div { background-color: #323f47; }
#totalSolution li > div > div > b { display: block; }
#totalSolution li a.btn { display: block; padding-left: 1.5em !important; border: #fff solid 2px; line-height: 1; text-align: center; text-decoration: none; transition: .3s; margin-top: 1.5em; padding: .75em 0; width: 180px; }
#totalSolution li a.btn:after { content: ''; display: inline-block; width: 21px; height: .75em; margin-left: .75em; background: url("../img/common/btnArrow.png") center center no-repeat; transition: .3s; }
#totalSolution li a.btn:hover { padding-left: 0 !important; background-color: rgba(0, 0, 0, 0.2); }
#totalSolution li a.btn:hover:after { margin-left: 3em; }
#totalSolution li span.btn { display: block; text-align: center; background: #ccc; color: #333; margin-top: 2em; padding: .5em 0; width: 180px; }

#totalSolution01 { background-image: url("../img/horunavi/linksBg01.png"); }

#totalSolution02 { background-image: url("../img/horunavi/linksBg02.png"); }

#totalSolution03 { background-image: url("../img/horunavi/linksBg03.png"); }

#totalSolution04 { background-image: url("../img/horunavi/linksBg04.png"); }

#jobsite h2 + div { background: url("../img/horunavi/jobsiteBg01.jpg") no-repeat center/cover; }
#jobsite h2 + div a.btn { display: block; padding-left: 1.5em !important; border: #fff solid 2px; line-height: 1; text-align: center; text-decoration: none; transition: .3s; margin-top: 2em; padding: .75em 0; width: 180px; }
#jobsite h2 + div a.btn:after { content: ''; display: inline-block; width: 21px; height: .75em; margin-left: .75em; background: url("../img/common/btnArrow.png") center center no-repeat; transition: .3s; }
#jobsite h2 + div a.btn:hover { padding-left: 0 !important; background-color: rgba(0, 0, 0, 0.2); }
#jobsite h2 + div a.btn:hover:after { margin-left: 3em; }

#horunavi_pickup h2 + div { background: url("../img/horunavi/horunavi_pickup_Bg01.jpg") no-repeat center/cover; }
#horunavi_pickup h2 + div a.btn { display: block; padding-left: 1.5em !important; border: #fff solid 2px; line-height: 1; text-align: center; text-decoration: none; transition: .3s; margin-top: 2em; padding: .75em 0; width: 350px; }
#horunavi_pickup h2 + div a.btn:after { content: ''; display: inline-block; width: 21px; height: .75em; margin-left: .75em; background: url("../img/common/btnArrow.png") center center no-repeat; transition: .3s; }
#horunavi_pickup h2 + div a.btn:hover { padding-left: 0 !important; background-color: rgba(0, 0, 0, 0.2); }
#horunavi_pickup h2 + div a.btn:hover:after { margin-left: 3em; }

#animeWrap { width: 100%; position: relative; overflow: hidden; }