@charset "UTF-8";
.sp {
  display: none;
}

/* 外枠 */
div#wrap-container {
  width: 100%;
  padding: 0;
}

div#container {
  width: 100%;
  height: 100%;
  font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック", sans-serif;
  position: relative;
  overflow: hidden;
}

/* タイトル
------------------------------------*/
#container h1 {
  width: 980px;
  font-size: 1.7em;
  line-height: 1.2;
  margin: 0 auto 20px;
  padding-bottom: 0;
  border-bottom: 1px solid #cccccc;
}

/* タイトルバナー */
.title-banner {
  width: 100%;
  background-color: #9ce5ef;
  margin: 0 auto;
}

.title-banner-inner {
  position: relative;
  height: 400px;
}

.title-banner-inner img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2000px;
  height: 400px;
  margin-top: -200px;
  margin-left: -1022px;
}

/* 共通 */
.ergo-wrapper {
  width: 980px;
  margin: 0 auto;
}

/* エルゴノミクス（人間工学）とは */
#what-ergo {
  background-color: #eff8fa;
}

.what-ergo-inner {
  padding: 52px 0;
}

.what-ergo-inner h3 {
  font-size: 1.6em;
  text-align: center;
}

.what-ergo-inner p {
  width: 97.8%;
  font-size: 1.0666em;
  line-height: 2.1;
  margin: 22px auto 0;
}

/* パソコン作業で疲れていませんか？ */
#work-improvement {
  margin: 80px auto 0;
}

#work-improvement h3 {
  font-size: 1.8666em;
  text-align: center;
}

.work-improvement-img {
  width: 100%;
  margin: 30px auto 0;
}

.work-improvement-img img {
  width: 100%;
}

/* 疲れの症状・原因を知る */
#know-cause {
  background-color: #eff8fa;
  margin: 90px auto 0;
  padding: 55px 0;
}

#know-cause h3 {
  font-size: 1.8em;
  text-align: center;
}

#know-cause .banner-area-inner {
  display: flex;
  justify-content: space-between;
  width: 87%;
  margin: 2.9% auto 0;
}

.banner-item {
  width: 48.6%;
}

.banner-item a {
  display: block;
  width: 100%;
  background-color: #ffffff;
  padding: 3%;
  border: 1px solid #1b4da2;
  box-sizing: border-box;
  border-radius: 8px;
  opacity: 1;
  transition: 0.2s;
}

.banner-item a:hover {
  opacity: 0.6;
  transition: 0.2s;
}

.banner-item a:hover img {
  opacity: 1 !important;
}

.banner-item a img {
  display: inline-block;
  width: 43.6%;
  vertical-align: middle;
}

.banner-item a p {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 0 0 5%;
  color: #1745a5;
}

/* 製品ラインナップ */
#ergo-lineup {
  background-color: #d1f0f5;
  padding: 90px 0 120px;
}

#ergo-lineup h3 {
  font-size: 1.8666em;
  text-align: center;
}

.ergo-lineup-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 33px auto 0;
}

.ergo-lineup-item {
  width: 32.143%;
  text-align: center;
  margin: 0 0 5.3%;
}

.ergo-lineup-item a {
  display: block;
  width: 100%;
  font-weight: bold;
}

.ergo-lineup-item a img {
  width: 100%;
}

.ergo-lineup-item a p {
  font-size: 1.2em;
  margin: 3% auto 0;
  color: #1745a5;
}

/* 一緒に使えば、デスクワークをさらに改善！ */
#with-item-lineup {
  background-color: #ffffff;
  margin: 95px auto 0;
  padding: 50px 0 0;
  border-radius: 15px;
}

#with-item-lineup h4 {
  font-size: 1.9333em;
  text-align: center;
}

.with-item-lineup-inner {
  display: flex;
  flex-wrap: wrap;
  width: 93%;
  margin: 40px auto 0;
}

.with-item-block {
  display: inline-block;
  width: 23%;
  text-align: center;
  margin-bottom: 5.5%;
  margin-right: 2.6%;
}

.with-item-block img {
  width: 100%;
}

.with-item-block .product-name {
  font-size: 1.0666em;
  font-weight: bold;
  line-height: 1.3;
  margin: 7% auto 0;
}

.with-item-block .product-cap {
  width: 101%;
  font-size: .93333em;
  line-height: 1.6;
  text-align: left;
  margin: 2.1% auto 0;
  color: #333333;
}

.with-item-block:nth-child(4n) {
  margin-right: 0;
}

/* コンテンツ幅の設定 */
.indent_area {
  background-color: #e9fdfe;
  margin: 0 auto;
  padding: 4em 1em;
}

.indent_area_y {
  background-color: #818385;
  margin: 0 auto;
  padding: 3.5em 4em;
  color: #ffffff;
  box-sizing: border-box;
}

.indent_area_w {
  background-color: #b4f3f2;
  margin: 0 auto;
  padding: 3.5em 4em;
  box-sizing: border-box;
}

.indent_area_inner {
  width: 980px;
  margin: 0 auto;
}