header#pages { height: 163px; }
@media screen and (min-width: 768px) { header#pages { height: 268px; } }
header#pages .inner.pages h2 { position: absolute; top: inherit; bottom: 33px; left: 0; color: #fff; text-align: left; font-size: 2.2rem; line-height: 112%; font-weight: 500; }
@media screen and (min-width: 768px) { header#pages .inner.pages h2 { top: inherit; bottom: 50px; font-size: 3rem; } }
header#pages .inner.pages h2::after { position: absolute; display: block; content: ''; width: 50px; height: 1px; background: #FFF; left: 0px; bottom: -10px; }
@media screen and (min-width: 768px) { header#pages .inner.pages h2::after { width: 80px; height: 3px; bottom: -15px; } }
header#pages .inner.pages p { position: absolute; bottom: 63px; left: 0; color: #fff; text-align: left; font-size: 1rem; line-height: 130%; font-family: 'Roboto', sans-serif; font-weight: 500; }
@media screen and (min-width: 768px) { header#pages .inner.pages p { font-size: 1.4rem; bottom: 93px; } }
header#pages .inner.pages p.en { text-transform: uppercase; }
header#pages .slider { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
header#pages .slider .slide1 { width: 100%; height: 163px; background: url("../images/page-download-main-pc.jpg") no-repeat center center; background-size: cover; }
@media screen and (min-width: 768px) { header#pages .slider .slide1 { width: 100%; height: 268px; background: url("../images/page-download-main-pc.jpg") no-repeat center center; background-size: cover; } }

section#downloadData { position: relative; }
section#downloadData .inner { width: 90%; margin: 0 auto; padding: 40px 0 50px 0; position: relative; }
section#downloadData .inner .en { font-family: 'Roboto', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 1.4rem; color: #6BC1B1; margin-bottom: 1em; }
section#downloadData .inner h3 { font-weight: 500; font-size: 2.6rem; margin-bottom: 3em; position: relative; }
section#downloadData .inner h3::after { display: block; position: absolute; content: ""; width: 80px; height: 2px; background: #6BC1B1; bottom: -20px; left: 50%; margin-left: -40px; }
section#downloadData .inner .box { width: 100%; margin: 0 auto; position: relative; z-index: 1; text-align: left; }
@media screen and (min-width: 768px) { section#downloadData .inner { width: 1200px; padding: 75px 0 85px 0; }
  section#downloadData .inner h3 { font-size: 3rem; }
  section#downloadData .inner .box { width: 900px; display: flex; justify-content: space-between; } }

.downloadSection .intro { font-size: 1.4rem; line-height: 1.6; }
.downloadSection p { font-size: 1.4rem; line-height: 1.6; margin: 0 0 2em 0; }
.downloadSection h4 { font-size: 2.1rem; font-weight: bold; padding: 0 0 0 20px; margin: 0.5em 0 0.3em 0; position: relative; }
.downloadSection h4:after { position: absolute; display: block; content: ""; background: #6BC1B1; width: 5px; height: 20px; top: 7px; left: 0px; }
.downloadSection h5 { font-size: 1.8rem; font-weight: bold; padding: 0 0 0 10px; margin: 2em 0 0.3em 0; position: relative; }
.downloadSection h5:after { position: absolute; display: block; content: ""; background: #444; width: 5px; height: 5px; top: 12px; left: 0px; }
.downloadSection .workBoxOther { font-size: 1.4rem; line-height: 1.6; margin: 0 0 8em 0; }
.downloadSection .workBoxOther p { margin: 0 0 1em 0; }
.downloadSection .workBoxOther strong { font-weight: bold; }
.downloadSection img { max-width: 320px; height: auto; }
.downloadSection .button { width: 100%; height: 63px; background: #6ac1b0; /* Old browsers */ background: -moz-linear-gradient(left, #6ac1b0 0%, #46c286 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #6ac1b0 0%, #46c286 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #6ac1b0 0%, #46c286 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ac1b0', endColorstr='#46c286',GradientType=1 ); /* IE6-9 */ font-size: 1.5rem; font-weight: 400; position: relative; display: table; transition: .2s; }
.downloadSection .button .buttonInner { display: table-cell; vertical-align: middle; text-align: center; }
.downloadSection .button small { font-size: 1rem; }
.downloadSection .button::after { display: block; position: absolute; content: ""; width: 19px; height: 45px; background: url("../../images/arrow.svg") no-repeat center right; background-size: cover; top: 9px; right: 10px; transition: .2s; }
.downloadSection a.contact { color: #FFF; text-decoration: none; }
@media screen and (min-width: 768px) { .downloadSection { width: 660px; }
  .downloadSection a.contact:hover .button { background: #44BA66; }
  .downloadSection a.contact:hover .button::after { right: 5px; } }

.sideBar { margin-top: 30px; border-radius: 5px; padding: 2em; background: #F9F9F9; }
.sideBar ul li { font-size: 1.4rem; line-height: 1.6; border-bottom: #CCC dotted 1px; margin-bottom: 1em; }
.sideBar ul li a { display: block; padding: 0.5em 0; text-decoration: none; color: #444; }
.sideBar ul li a:hover { color: #6BC1B1; }
@media screen and (min-width: 768px) { .sideBar { width: 200px; margin-top: 0px; } }