/* Home*/
.widthLimit, #home #visual > div > div, #home #visual h2, #home #visual h3 { width: 100%; max-width: 1000px; }

html, body { height: 100%; }

#home #visual { background: #2A508B url(../img/visual.png) no-repeat center; background-size: cover; width: 100%; background-size: cover; height: 700px; overflow: hidden; color: #FFF; text-align: center; position: fixed; top: 0; }
#home #visual > div { position: absolute; z-index: 99; width: 100%; height: 100%; top: 0px; }
#home #visual > div > div { margin: 140px auto 0 auto; }
#home #visual > div > div img { width: 25%; -webkit-box-reflect: below 4px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.4, transparent), to(rgba(0, 0, 0, 0.2))); }
#home #visual h2 { padding-top: 40px; line-height: 180%; font-size: 150%; letter-spacing: 0px; margin: 0 auto; font-family: 'Orbitron', sans-serif; font-weight: bold; position: relative; z-index: 100; }
#home #visual h2 img { width: 100%; margin-bottom: 25px; }
#home #visual h3 { line-height: 180%; font-size: 1.0vw; margin: 0 auto; font-size: 100%; position: relative; z-index: 100; font-weight: normal; width: 94%; }
#home #visual a { display: inline-block; padding: 15px 40px; color: #2A508B; font-size: 120%; margin: 40px auto 0 auto; text-decoration: none; border-radius: 50px; background: #FFF; font-weight: bold; }
#home #visual p { font-size: 90%; padding-top: 15px; }
#home #visual canvas#deploy { position: absolute; z-index: 1000; left: 0; }
#home #feature { background: #FFF; padding: 60px 0; position: relative; z-index: 1000; margin-top: 700px; }
#home #feature ul { width: 96%; margin: 0 auto; max-width: 1280px; }
#home #feature ul li { width: 22%; margin-right: 2%; float: left; height: 300px; line-height: 160%; margin-bottom: 2%; color: #333; box-sizing: border-box; padding: 2%; border-radius: 4px; background: #F7F7F7; font-size: 90%; }
#home #feature ul li img { display: block; margin: 0 auto; height: 8vw; max-height: 100px; }
#home #feature ul li h3 { font-size: 120%; padding-bottom: 10px; color: #405074; }
@media only screen and (min-width: 1001px) { #home #feature ul li:nth-child(4n) { margin-right: 0; }
  #home #feature ul li:first-child, #home #feature ul li:nth-child(4n+1) { margin-left: 3%; } }
@media only screen and (max-width: 1000px) and (min-width: 641px) { #home #feature ul li { width: 30%; }
  #home #feature ul li img { display: block; margin: 0 auto; height: 11vw; }
  #home #feature ul li:nth-child(3n) { margin-right: 0; }
  #home #feature ul li:first-child, #home #feature ul li:nth-child(3n+1) { margin-left: 3%; } }
@media only screen and (max-width: 640px) { #home #feature ul li { width: 46%; margin-right: 2%; padding-top: 20px; }
  #home #feature ul li img { display: block; margin: 0 auto; height: 18vw; }
  #home #feature ul li:nth-child(2n) { margin-right: 0; }
  #home #feature ul li:first-child, #home #feature ul li:nth-child(2n+1) { margin-left: 3%; } }
#home #feature :before { content: ""; position: absolute; top: -50px; left: 50%; margin-left: -25px; border: 25px solid transparent; border-bottom: 25px solid #FFF; }
#home #about { text-align: center; padding: 100px 0; position: relative; z-index: 1000; background: #2A508B url(../img/visual.png) no-repeat center; background-size: cover; background-attachment: fixed; }
#home #about h2 { color: #FFF; }
#home #about h3 { font-size: 105%; font-weight: normal; color: #FFF; }
@media only screen and (max-width: 640px) { #home #about h2 { font-size: 120%; }
  #home #about h3 { text-align: left; width: 90%; margin: 0 auto; }
  #home #about h3 br { display: none; } }
#home #about img { margin: 30px 0px; max-width: 895px; width: 96%; }
#home #faq { padding: 80px 0; position: relative; z-index: 1000; background: #EEF1F5; }
#home #faq dl { width: 96%; max-width: 1200px; margin: 0px auto 20px auto; }
#home #faq dl dt { font-size: 110%; color: #405074; padding: 15px; position: relative; font-weight: bold; background: url(../img/icon_plus.svg) right 15px center #FFF no-repeat; background-size: 20px 20px; border-radius: 4px; padding-right: 50px; line-height: 140%; }
#home #faq dl dd { background: #D4DBE5; color: #2D3953; padding: 15px 15px 15px 15px; display: none; line-height: 140%; }
#home #faq dl.open { border-radius: 4px; overflow: hidden; }
#home #faq dl.open dt { background: url(../img/icon_min.svg) right 15px center #FFF no-repeat; background-size: 20px 20px; border-radius: 4px; border-radius: 0px; }
#home #faq dl.open dd { display: block; }
#home #faq img { margin: 30px 0px; }
#home #partners { border-top: 1px solid #EEE; padding: 80px 0; position: relative; z-index: 1000; background: url(../img/plus.png) #FFF; }
#home #partners h3 { font-size: 105%; font-weight: normal; color: #EEE; }
#home #partners ul { width: 96%; margin: 0 auto; max-width: 1280px; border-radius: 5px; }
#home #partners ul li { width: 20%; float: left; line-height: 160%; margin-bottom: 2%; color: #333; box-sizing: border-box; padding: 2%; border-radius: 4px; font-size: 90%; }
#home #partners ul li img { display: block; margin: 0 auto; width: 100%; }
#home #partners ul li h3 { font-size: 120%; padding-bottom: 10px; color: #405074; }
@media only screen and (max-width: 1000px) and (min-width: 641px) { #home #partners ul li { width: 30%; }
  #home #partners ul li img { display: block; margin: 0 auto; width: 80%; }
  #home #partners ul li:nth-child(3n) { margin-right: 0; }
  #home #partners ul li:first-child, #home #partners ul li:nth-child(3n+1) { margin-left: 3%; } }
@media only screen and (max-width: 640px) { #home #partners ul li { width: 30%; }
  #home #partners ul li img { display: block; margin: 0 auto; width: 80%; }
  #home #partners ul li:nth-child(3n) { margin-right: 0; }
  #home #partners ul li:first-child, #home #partners ul li:nth-child(3n+1) { margin-left: 3%; } }

#home #sevicer { padding: 80px 0; position: relative; z-index: 1000; background: #2A508B url(../img/visual.png) no-repeat center; background-size: cover; background-attachment: fixed; }
#home #sevicer h2, #home #sevicer h2 span { color: #FFF; }
#home #sevicer ul { width: 96%; margin: 0 auto; max-width: 1280px; }
#home #sevicer ul li { width: 22%; margin-right: 2%; float: left; line-height: 160%; margin-bottom: 2%; box-sizing: border-box; font-size: 90%; color: #FFF; position: relative; }
#home #sevicer ul li a { color: #FFF; text-decoration: none; }
#home #sevicer ul li div { font-size: 120%; color: #FFF; background: #000; height: 130px; width: 100%; border-radius: 3px; margin-bottom: 8px; filter: brightness(50%); transition: 500ms; }
#home #sevicer ul li h3 { position: absolute; left: 0; top: 0; display: table; width: 100%; text-align: center; height: 130px; pointer-events: none; }
#home #sevicer ul li h3 span { display: table-cell; vertical-align: middle; height: 100%; font-weight: normal; }
#home #sevicer ul li:nth-child(4n) { margin-right: 0; }
#home #sevicer ul li:first-child, #home #sevicer ul li:nth-child(4n+1) { margin-left: 27%; }
#home #sevicer ul li.web div { background: url(../img/rhems_design.jpg) no-repeat center; background-size: cover; }
#home #sevicer ul li.server div { background: url(../img/rhems_ope.jpg) no-repeat center; background-size: cover; }
#home #sevicer ul li.consulting div { background: url(../img/rhems-consul.jpg) no-repeat center; background-size: cover; }
#home #sevicer ul li.operation div { background: url(../img/rhems_japan.jpg) no-repeat center; background-size: cover; }
#home #sevicer ul li div:hover { filter: brightness(100%); }
@media only screen and (max-width: 1000px) and (min-width: 641px) { #home #sevicer ul li { width: 46%; margin-right: 2%; padding-top: 20px; }
  #home #sevicer ul li img { display: block; margin: 0 auto; height: 18vw; }
  #home #sevicer ul li:nth-child(2n) { margin-right: 0; }
  #home #sevicer ul li:first-child, #home #sevicer ul li:nth-child(2n+1) { margin-left: 3%; } }
@media only screen and (max-width: 640px) { #home #sevicer ul li { width: 100%; margin-right: 0%; float: none; }
  #home #sevicer ul li:first-child, #home #sevicer ul li:nth-child(2n+1) { margin-left: 0%; } }

#home #contactArea { padding: 60px 0; background: #3E3E3E; position: relative; z-index: 1000; }
#home #contactArea div { width: 50%; margin: 0 auto; padding: 20px 0; font-size: 120%; border-radius: 5px; background: #A40002 url(../img/delta.svg) no-repeat right 20px center; transition: 500ms; }
#home #contactArea div a { color: #FFF; text-align: center; text-decoration: none; display: block; width: 100%; height: 100%; letter-spacing: 3px; }
#home #contactArea div:hover { background-color: #B11114; transition: 500ms; }
@media only screen and (max-width: 640px) { #home #contactArea div { width: 80%; } }
@media only screen and (max-width: 640px) { #home #about, #home #faq, #home #partners { padding: 60px 0; } }