@charset "UTF-8";
/*----------------------------------------------------------
更新日：2024年8月27日
=PC(960以上)
=PC & タブレット(960以下)
=スマホ(768px以下)
-------------------------------------------------------------*/

/*==================================================================
  Page common style
===================================================================*/
#title {
  margin: 0;
  padding: 1.5em 0;
  background: linear-gradient(
    to right,
    rgba(85, 195, 199, 1) 0%,
    rgba(6, 135, 162, 1) 100%
  );
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
}

.sec section + section {
  padding-top: 2em;
}
@media only screen and (max-width: 960px) {
}
@media only screen and (max-width: 768px) {
  #wrap {
    padding-top: 0;
  }
}

/*==================================================================
  #OWAS
  (/vp-ergono/owas)
===================================================================*/
#owas {
  padding-bottom: 5em;
}
#owas .evaluation .flex {
  justify-content: space-between;
}
#owas .evaluation .txt,
#owas .evaluation .pic {
  width: 48%;
}
#owas .evaluation .txt li {
  margin-bottom: 0;
}
#owas .feature .box {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}
#owas .feature .pic {
  text-align: center;
}
#owas .feature .pic.sp {
  display: none;
}
#owas .feature .pic.pc {
  flex-shrink: 0;
  width: 300px;
  margin-right: 2em;
}
#owas .feature .pic.ac img {
  width: 250px;
}
#owas .feature .pic.born img {
  width: 200px;
}
#owas .feature h3 {
  margin-bottom: 0.5em;
  font-size: 1.1em;
  font-weight: 500;
  color: #55c3c7;
}
#owas .owas-sheet ul {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 1em;
}
#owas .owas-sheet li {
  margin-bottom: 0;
}
#owas .owas-sheet li span {
  margin-right: 1em;
  padding: 0 1em;
  font-weight: 700;
}
#owas .owas-sheet li:nth-child(1) span {
  background-color: #38b6fc;
}
#owas .owas-sheet li:nth-child(2) span {
  background-color: #82e063;
}
#owas .owas-sheet li:nth-child(3) span {
  background-color: #ffaf50;
}
#owas .owas-sheet li:nth-child(4) span {
  background-color: #ff5555;
}
#owas .sheet-area {
  width: 80%;
  margin: 2em auto 0;
  padding: 1.5em 2em;
  border: 4px solid #55c3c7;
}
#owas .sheet-area .pic1 img {
  width: 90.4%;
}
#owas .sheet-area p {
  margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
  #owas {
    padding-bottom: 2em;
  }
  #owas .evaluation .flex {
    display: block;
  }
  #owas .evaluation .txt,
  #owas .evaluation .pic {
    width: auto;
  }
  #owas .evaluation .txt li {
    margin-bottom: 0;
  }
  #owas .feature .box {
    display: block;
  }
  #owas .feature .pic.sp {
    margin-bottom: 1em;
  }
  #owas .feature .pic img {
    width: 60% !important;
  }
  #owas .sheet-area {
    width: auto;
    margin: 2em auto 0;
    padding: 1.5em 1em;
  }
}

/*==================================================================
  #movie
  (/vp-ergono/movie)
===================================================================*/
#movie .inner:not(:last-of-type) {
  margin-bottom: 2em;
}
#movie .flex {
  flex-wrap: wrap;
  justify-content: space-between;
}
#movie .box {
  width: 50%;
  max-width: 460px;
  margin-bottom: 1.5em;
}
#movie .box h3 {
  font-size: 1.2em;
}

@media only screen and (max-width: 768px) {
  #movie .box {
    width: 100%;
    max-width: none;
  }
  #movie .box:not(:last-of-type) {
    margin-bottom: 2em;
  }
  #movie .box h3 {
    font-size: 1em;
  }
}

/*==================================================================
  #setup
  (/vp-ergono/setup)
===================================================================*/
.cUnderLine {
  background: linear-gradient(transparent 65%, #ffff66 0%);
}

#setup {
  margin-bottom: 3em;
}
.deteBox {
  display: flex;
  justify-content: space-between;
}
.deteBox div + div {
  margin-left: 1em;
}
.deteBox .pic {
  width: 46%;
}
table.baseT {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.baseT th,
.baseT td {
  padding: 0.5em;
  border: 1px solid #ccc;
  vertical-align: top;
  font-size: 1em;
}
.baseT th {
  background: #e5f9fd;
  font-weight: 500;
}
.baseT .sub {
  width: 0;
  background: #f6f6f6;
  white-space: nowrap;
}
.baseT td {
  vertical-align: middle;
}

.iconlist li {
  font-size: 1.25em;
  margin-bottom: 0.2em;
  padding-left: 1.7em;
  background: transparent url("../img/vp-ergono_2.1.0/setup/icon_check.png")
    no-repeat left 0.3em;
  background-size: 24px 24px;
}
.conditions {
  margin-bottom: 2em;
}
.conditions dl {
  display: flex;
  margin-bottom: 0.5em;
}
.conditions dt span {
  color: #15a1b2;
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1;
  padding: 0.4em 0.6em;
  background-color: #dcf1f4;
  display: inline-block;
}
.conditions dd {
  font-size: 1.15em;
  margin-left: 1.2em;
  padding-top: 0.5em;
}
.conditions dd p {
  font-size: 0.8em;
  line-height: 1.6;
  margin: 0.2em 0 0;
}

.exampleArea {
  border-radius: 6px;
  padding: 1em 3em 2em;
  background-color: #e3f8f1;
  margin-bottom: 2em;
}
.exampleArea .title {
  color: #1ccf75;
  font-size: 1.6em;
  text-align: center;
  margin: 0 0 0.6em;
}
.exampleArea .exBox {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 1em;
}
.exampleArea .exBox + .exBox {
  margin-top: 2em;
}
.exampleArea .exBox dl {
  margin: 0;
  width: 45%;
}
.exampleArea .exBox dt {
  position: relative;
}
.exampleArea .exBox dt:before {
  content: "";
  width: 14%;
  height: 17%;
  line-height: 1;
  position: absolute;
  top: 40%;
  right: -19%;
  background: url("../img/vp-ergono_2.1.0/setup/icon_arrow_ok.png") no-repeat
    50% 50%;
  background-size: 100% 100%;
}
.exampleArea .exBox dl:last-child dt:before {
  display: none;
}
.exampleArea.ngStyle {
  background-color: #fff1f4;
}
.exampleArea.ngStyle .title {
  color: #f32d5b;
}
.exampleArea.ngStyle .exBox dt:before {
  background: url("../img/vp-ergono_2.1.0/setup/icon_arrow_ng.png") no-repeat
    50% 50%;
  background-size: 100% 100%;
}
.exampleArea .exBox dd {
  margin: 0;
  padding-top: 0.2em;
}

.sideStyle {
  display: flex;
  justify-content: space-between;
}
.sideStyle .exampleArea {
  padding-bottom: 1em;
}
.sideStyle .exampleArea + .exampleArea {
  margin-left: 1em;
}
.sideStyle .fashionList {
  display: flex;
}
.sideStyle .fashionList li {
  /*	border: 1px solid #F95;*/
  max-width: 180px;
}
.sideStyle .fashionList li p {
  margin: 0;
}
.sideStyle .fashionList li + li {
  margin-left: 1.5em;
}

@media only screen and (max-width: 768px) {
  .deteBox {
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
  }
  .deteBox div + div {
    margin-left: 0;
  }
  .deteBox .pic {
    width: 90%;
    margin-top: 1em;
  }
  .baseT th,
  .baseT td {
    padding: 0.5em;
  }
  .baseT .sub {
    width: auto;
    white-space: normal;
  }
  .conditions dt span {
    font-size: 1.4em;
    padding: 0.4em 0.5em;
  }
  .conditions dd {
    font-size: 1.1em;
    margin-left: 0.8em;
    padding-top: 0.3em;
  }
  .iconlist li {
    font-size: 1.1em;
    margin-bottom: 0.2em;
    padding-left: 1.6em;
    background: transparent url("../img/vp-ergono_2.1.0/setup/icon_check.png")
      no-repeat left 0.3em;
    background-size: 22px 22px;
  }
  .exampleArea {
    border-radius: 6px;
    padding: 1em 1em;
    background-color: #e3f8f1;
    margin-bottom: 1.5em;
  }
  .exampleArea .title {
    font-size: 1.3em;
    line-height: 1.2;
  }
  .exampleArea .exBox + .exBox {
    margin-top: 1em;
    padding-top: 1.5em;
    border-top: 1px dotted #999;
  }
  .exampleArea .exBox {
    flex-direction: column;
  }
  .exampleArea .exBox dt:before {
    display: none;
  }
  .exampleArea .exBox dl {
    position: relative;
    width: 100%;
  }
  .exampleArea .exBox dl:first-child {
    margin-bottom: 3em;
  }
  .exampleArea .exBox dl:first-child:before {
    content: "";
    width: 34px;
    height: 34px;
    line-height: 1;
    position: absolute;
    bottom: -2.5em;
    right: calc(50% - 17px);
    background: url("../img/vp-ergono_2.1.0/setup/icon_arrow_ok.png") no-repeat
      50% 50%;
    background-size: 100% 100%;
    transform: rotate(90deg);
  }
  .exampleArea.ngStyle .exBox dl:first-child:before {
    background: url("../img/vp-ergono_2.1.0/setup/icon_arrow_ng.png") no-repeat
      50% 50%;
    background-size: 100% 100%;
  }
  .sideStyle {
    flex-direction: column;
  }
  .sideStyle .exampleArea + .exampleArea {
    margin-left: 0;
  }
  .sideStyle .fashionList {
    justify-content: center;
  }
  .sideStyle .fashionList li {
    width: 33%;
    max-width: none;
  }
}
@media only screen and (max-width: 560px) {
  .sideStyle .fashionList {
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 0;
  }
  .sideStyle .fashionList li {
    width: 45%;
  }
  .sideStyle .fashionList li + li {
    margin-left: 0;
    margin-bottom: 1em;
  }
  .sideStyle .okStyle .fashionList li {
    width: 80%;
    text-align: center;
  }
  .sideStyle .okStyle .fashionList li img {
    max-width: 180px;
  }
}

/*==================================================================
  Contact 
	(/vp-ergono/contact)
	(/vp-ergono/thanks)
===================================================================*/
#contact th {
  font-weight: 500;
}
#contact.thanks {
  min-height: 35vh;
}
#contact img.mail {
  height: 1em;
  vertical-align: middle;
}
#contact .required,
#contact .any {
  min-width: 60px;
}
#contact .cautionBox {
  margin-top: 2em;
}
#contact .input + .input {
  margin-top: 1em;
}
/* 画面サイズ 768px未満 */
@media only screen and (max-width: 768px) {
  #contact {
    margin-bottom: 0;
  }
  #contact .subNav li {
    width: calc(50% - 1em);
    margin: 0 0.25em;
  }
  #contact .subNav a {
    padding: 0.5em;
    font-size: 1em;
  }
  #contact .subNav .active a:before {
    border-width: 5px 5px 0;
  }
  #contact.thanks {
    min-height: 0;
    margin-bottom: 3em;
  }
}

/*==================================================================
  algorithm
	(/vp-ergono/algorithm)
===================================================================*/
#algo {
}
#algo .flex {
  text-align: center;
  align-items: flex-end;
  justify-content: space-between;
  /*	padding: 0 1.5em;*/
}
#algo .flex .box {
  width: 29%;
  line-height: 1.5em;
  position: relative;
  /*	border: 1px solid #CCC;*/
}
#algo .flex .box .txt {
  font-weight: 700;
}
#algo .flex .box.arrow:before {
  content: "";
  width: 31px;
  height: 27px;
  line-height: 1;
  position: absolute;
  top: 35%;
  right: -17%;
  background: url(../img/vp-ergono/algo/arrow_a.png) no-repeat 50% 50%;
  background-size: 31px 27px;
}
#algo .ergonoMethod .flex .box.arrow:before {
  background: url(../img/vp-ergono/algo/arrow_b.png) no-repeat 50% 50%;
}

#algo .owasAssignment {
  background-color: #f7f5f5;
  margin: 3em 0 2em;
  padding: 0 1.5em 1em;
}
#algo .owasAssignment .owastitle {
  text-align: center;
  position: relative;
  top: -1em;
  margin-bottom: 0;
}
#algo .owasAssignment .owastitle span {
  color: #fff;
  font-size: 0.9em;
  background-color: #999999;
  padding: 0.1em 1em;
  width: 260px;
  display: inline-block;
}

#algo .solutionTxt {
  color: #fff;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  padding: 0.7em 1em;
  margin-bottom: 3em;
  background-color: #00abbd;
  position: relative;
}
#algo .ergonoMethod {
  margin-bottom: 5em;
  position: relative;
  /*	background-color: #DEF;*/
}

#algo .customizeTxt {
  text-align: center;
  /*	background-color: #FEE;*/
}
#algo .customizeTxt .inner {
  color: #00abbd;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  /*	background-color: rgba(255,137,139,0.39);*/
}
#algo .customizeTxt .inner:before {
  content: "";
  position: absolute;
  bottom: 40%;
  left: -4em;
  width: 4em;
  height: 2px;
  background-color: #00abbd;
  -webkit-transform: translateY(-50%) rotate(65deg);
  transform: translateY(-50%) rotate(65deg);
}
#algo .customizeTxt .inner:after {
  content: "";
  position: absolute;
  bottom: 40%;
  right: -4em;
  width: 4em;
  height: 2px;
  background-color: #00abbd;
  -webkit-transform: translateY(-50%) rotate(115deg);
  transform: translateY(-50%) rotate(115deg);
}

#algo .solutionTxt:after,
#algo .ergonoMethod:after {
  content: "";
  width: 47px;
  height: 37px;
  margin-right: -23px;
  line-height: 1;
  position: absolute;
  bottom: -35%;
  right: 50%;
  background: url(../img/vp-ergono/algo/arrow_c.png) no-repeat 50% 50%;
  background-size: 47px 37px;
  z-index: -1;
}
#algo .ergonoMethod:after {
  bottom: -25%;
}
/* 画面サイズ 960px未満 PC縮小版*/
@media screen and (width < 960px) {
  #algo .solutionTxt:after {
    bottom: -38%;
  }
}

/* 画面サイズ 768px未満 */
@media only screen and (max-width: 768px) {
  #algo .flex {
    flex-direction: column;
  }
  #algo .flex .box {
    width: 100%;
    padding: 1.5em 1em 0.5em;
    margin-bottom: 25px;
  }
  #algo .flex .box:last-child {
    margin-bottom: 0;
  }
  #algo .flex .box.arrow:before {
    right: 50%;
    top: 100%;
    margin-right: -15px;
    transform: rotate(90deg);
  }
  #algo .owasAssignment {
    padding: 0 1em 1em;
  }
  #algo .owasAssignment .owastitle span {
    width: auto;
  }
  #algo .owasAssignment .flex .box:first-child {
    padding-top: 0.5em;
  }
  #algo .solutionTxt {
    margin-bottom: 1em;
  }
  #algo .solutionTxt:after {
    bottom: -1em;
  }
  #algo .ergonoMethod {
    margin-bottom: 3em;
  }
  #algo .ergonoMethod:after {
    bottom: -2em;
  }
  #algo .customizeTxt .inner {
    font-size: 1.4em;
    margin: 0 1em;
  }
  #algo .customizeTxt .inner:before {
    left: -3.2em;
    width: 5em;
    -webkit-transform: translateY(-50%) rotate(75deg);
    transform: translateY(-50%) rotate(75deg);
  }
  #algo .customizeTxt .inner:after {
    right: -3.2em;
    width: 5em;
    -webkit-transform: translateY(-50%) rotate(105deg);
    transform: translateY(-50%) rotate(105deg);
  }
}

/*==================================================================
  Policy ※英語版のみ
  (/en/privacy)
  (/en/privacy-gdpr)
===================================================================*/
#policy {
  margin: 2em 0;
}
#policy a:not(:hover) {
  border-bottom: 1px solid;
  color: #033d83;
}
#policy > ol > li {
  margin-bottom: 2em;
}
#policy ol ul,
#policy ol ol {
  padding-left: 1em;
}
#policy dt {
  margin-bottom: 0;
  font-weight: bold;
}
#policy dd {
  margin-left: 0;
}
#policy table {
  table-layout: fixed;
  width: 100%;
}
#policy th,
#policy td {
  padding: 1em;
  border: 1px solid #ccc;
  vertical-align: top;
  font-size: 0.875em;
}
#policy th {
  background: #eee;
}
/* 画面サイズ 768px未満 */
@media only screen and (max-width: 768px) {
  #policy {
    margin-bottom: 0;
  }
  #policy > ol {
    padding-left: 1em;
  }
  #policy th,
  #policy td {
    padding: 0.5em;
    font-size: 0.8em;
  }
}

/*==================================================================
  Agreement ※英語版のみ
  (/vp-ergono/agreement)
===================================================================*/
#agreement {
  margin: 8vh auto;
}
#agreement .topTxt {
  margin-bottom: 40px;
}
#agreement .topTxt p {
  margin-bottom: 1em;
}
#agreement .agList {
  padding-left: 1.5em;
}
#agreement .agList li {
  text-indent: 0;
  margin-bottom: 3em;
  list-style: outside decimal;
}
#agreement .agList li::marker {
  font-weight: 900;
}
#agreement .agList dt {
  font-weight: 700;
  margin-bottom: 1em;
}
#agreement .agList dd {
  margin-inline-start: 10px;
}
#agreement .agList dd p {
  margin-bottom: 1em;
}
#agreement .subhead {
  font-weight: 700;
  margin-bottom: 0.5em;
}
#agreement .innerList {
  list-style: disc;
  /*	margin-left: 1.5em;*/
  margin-bottom: 1.5em;
}
#agreement .innerList li {
  margin-bottom: 1.5em;
}
#agreement .bracketList {
  counter-reset: number;
  margin-left: 1.5em;
}
#agreement .bracketList li {
  list-style-type: none;
  counter-increment: cnt;
  position: relative;
}
/*英語ベースCSSで数値調整検討*/
#agreement .bracketList.numNormal li {
  margin-bottom: 1em;
}
#agreement .bracketList.alpha li {
  margin-bottom: 0.5em;
}
#agreement .bracketList.roman li {
  margin-bottom: 1em;
}
#agreement .bracketList li:before {
  counter-increment: number;
  content: "(" counter(number) ")";
  display: inline-block;
  margin-left: -3.5em;
  width: 3.2em;
  text-align: right;
  position: absolute;
  top: 0;
  left: 0;
}
#agreement .bracketList.roman li:before {
  content: "(" counter(number, lower-roman) ")";
}
#agreement .bracketList.alpha li:before {
  content: "(" counter(number, lower-alpha) ")";
}
#agreement .bracketList.asterisk li:before {
  content: "*";
  font-size: 1.4em;
}