@charset "utf-8";
/* CSS Document */

/* #contentAbout */
#contentAbout {
  overflow: hidden;
  width: 100%;
  clear: both;
}
#contentAbout .tl-page,
#contentAbout h2 {
  text-align: center;
  /*font-weight: 500;*/
  font-family: "I-OTF-UDゴ表示Pro M", sans-serif;
  font-size: 1.75em;
}
#contentAbout .tl-page span,
#contentAbout h2 span {
  display: inline-block;
  border-bottom: solid 4px;
  padding: 0 0 0.35em;
  margin: 0 0 0.3em;
}
#contentAbout .tl-page small,
#contentAbout h2 small {
  display: block;
  font-size: 0.572em;
}
#contentAbout .textAbout {
  padding: 0 13% 4% 0;
  line-height: 1.7;
}
#contentAbout .captionAbout {
  color: #000;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0 0 3% 65.6%;
  font-size: 0.875em;
  line-height: 1.7;
  display: block;
}
#contentAbout .textHow {
  font-size: 1.5em;
}
/* #main */
#main .tl-page {
  color: #d61c38;
  padding: 4.2% 0 3%;
}
#main p {
  color: #d61c38;
}
#main .imgMain {
  margin: -3.6% 0 0 19%;
  width: 57.686%;
  padding: 0 0 0 2.1%;
  height: auto;
  position: relative;
  height: 0;
  padding-bottom: 56.667%;
}
#main .imgMain img {
  width: 100%;
  height: auto;
}
#main img.imgMainProduct {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10.917% 0 0 30.541%;
  z-index: 1;
  width: 43.963%;
}
/* #feature */
#feature .wrapImgFeature {
  position: relative;
}
/* #amino */
#amino .captionAmino {
  color: #000;
  font-size: 0.75em;
  line-height: 1.5;
  position: absolute;
  top: 0;
  left: 0;
  margin: 18.8% 0 0 68.6%;
  text-indent: -1em;
  padding: 0 0 0 1em;
}
/* #contentAbout */
#contentAbout .inner {
  color: #d61c38;
}
/* #main */
#main .textMain01 {
  /*font-weight: 500;*/
  font-size: 1.5em;
  font-family: "I-OTF-UDゴ表示Pro M", sans-serif;
  text-align: center;
  position: relative;
  z-index: 1;
}
#main .btnBox {
  font-size: 0.584em;
  border: solid 1px;
  line-height: 1.713;
  display: inline-block;
  padding: 0 2.3% 0 2.2%;
  position: relative;
  vertical-align: top;
}
#main .btnBox:after {
  content: "\3009";
  position: absolute;
  top: 50%;
  right: 0;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#main .wrapIcon {
  position: relative;
  margin: 0 0 0;
}
#main .wrapIcon ul {
  font-size: 0.875em;
  line-height: 1.5;
}
#main .wrapIcon h3 {
  /*font-weight: 500;*/
  font-family: "I-OTF-UDゴ表示Pro M", sans-serif;
  position: absolute;
  top: 0;
  left: 0;
}
#main .wrapIcon p {
  color: #000;
}
#main .wrapIcon li {
  position: absolute;
  top: 0;
  left: 0;
  width: 32%;
  border-bottom: solid 1px;
  opacity: 0;
}
#main .boxAbout01 {
  margin: 9.7% 0 0 5.6%;
}
#main .iconAbout01 {
  width: 40%;
  height: auto;
  margin: 0 0 1.8% 28%;
}
#main .boxAbout01 h3 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 11% 0 0 0;
}
#main .boxAbout02 h3 {
  margin: 30.2% 0 0 0;
  left: auto;
  right: 0;
  text-align: right;
}
#main .boxAbout03 h3 {
  margin: 9.5% 0 0 0;
}
#main .boxAbout04 h3 {
  margin: 3% 0 0 63%;
  text-align: right;
}
#main .boxAbout02 {
  margin: 3.6% 0 0 62.7%;
}
#main .boxAbout02 p {
  padding-left: 9%;
  padding-right: 0;
}
#main .iconAbout02 {
  width: 17.2%;
  height: auto;
  margin: 18.2% 0 2.3% 39.7%;
}
#main .boxAbout03 {
  margin: 30.6% 0 0 5.6%;
}
#main .iconAbout03 {
  width: 18%;
  height: auto;
  margin: 0 0 4.9% 39.6%;
}
#main .boxAbout04 {
  margin: 32% 0 0 62.7%;
}
#main .boxAbout04 p {
  padding-left: 9.2%;
  padding-right: 0;
}
#main .iconAbout04 {
  width: 18.4%;
  height: auto;
  margin: 0 0 5.3% 39%;
}
/* #feature */
#feature {
  background: #fff2ca;
}
#feature h2 {
  color: #d61c38;
  padding: 5.1% 0 0;
}
#feature h2 span {
  border-bottom-style: dashed;
}
#feature .wrapImgFeature {
  position: relative;
  padding: 0 0 37.7%;
}
#feature .wrapImgFeature li {
  position: absolute;
  top: 0;
  left: 0;
  width: 26.204%;
  z-index: 1;
  opacity: 0;
}
#feature .imgFeature {
  display: block;
  width: 24.582%;
  margin: 0 auto;
  height: auto;
  padding: 5.4% 0 0 0.4%;
  position: relative;
  z-index: 1;
}
#feature .boxFeature01 {
  margin: 1.4% 0 0 5.5%;
}
#feature .boxFeature02 {
  margin: 1.4% 0 0 68.3%;
}
#feature .boxFeature03 {
  margin: 31.3% 0 0 19.6%;
}
#feature .boxFeature04 {
  margin: 31.3% 0 0 55%;
}
.lineFeature {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 2px;
}
.lineFeature span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../about/images/line_feature.png) repeat-x;
  opacity: 0;
}
.lineFeature01 {
  margin: 14.4% 0 0 30%;
  width: 25%;
}
.lineFeature02 {
  margin: 14.4% 0 0 56%;
}
.lineFeature03 {
  -ms-transform: rotate(-66deg);
  -webkit-transform: rotate(-66deg);
  transform: rotate(-66deg);
  margin: 21.2% 0 0 23%;
  -ms-transform-origin: 100% 0%;
  -webkit-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
}
.lineFeature04 {
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(66deg);
  margin: 21.2% 0 0 57.2%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* #amino */
#amino h2 {
  color: #d61c38;
  padding: 6.3% 0 0;
}
#amino h2 span {
  border-bottom-style: dashed;
}
#amino .imgAmino01 {
  width: 27.8%;
  height: auto;
  margin: 0 auto;
  display: block;
  padding: 0 2.1% 0 0;
}
#amino .imgAmino02 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 1.8% 0 0 63%;
}
#amino .wrapImgAmino {
  position: relative;
  margin: 3.9% 0 7.3%;
}
/* #howToUse */
#howToUse {
  background: #fff2ca;
}
#howToUse h2 {
  color: #d61c38;
  padding: 5.2% 0 0;
}
#howToUse h2 span {
  border-bottom-style: dashed;
}
#howToUse .textHow {
  text-align: center;
  padding: 3.5% 0 0;
  font-family: "I-OTF-UDゴ表示Pro M", sans-serif;
}
#howToUse .imgHow01 {
  width: 15.278%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 3.8% 0 0 29.7%;
}
#howToUse .imgHow02 {
  width: 15.278%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 3.7% 0 0 54.7%;
}
#howToUse .imgHow03 {
  width: 14.26%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 21.5% 0 0 18%;
  z-index: 1;
}
#howToUse .imgHow04 {
  width: 22.5%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 21.5% 0 0 34.4%;
  z-index: 1;
}
#howToUse .imgHow05 {
  width: 22.871%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 21.5% 0 0 59.7%;
  z-index: 1;
}
#howToUse .wrapImgHow {
  position: relative;
  padding: 0 0 35.5%;
}
/* #protein */
#protein h2 {
  padding: 6% 0 0;
}
#protein .inner h2 span {
  border-bottom-style: dashed;
}
#protein .wrapConversation {
  padding: 3.9% 0 0%;
}
#protein .wrapRemark {
  position: relative;
}
#protein .wrapRemark+.wrapRemark {
  margin-top: 4%;
}
#protein .iconProduct {
  position: absolute;
  top: 0;
  left: 0;
  width: 5.278%;
  display: block;
  margin: 0.1% 0 0 11.2%;
  opacity: 0;
  z-index: 1;
}
#protein .iconHuman {
  position: absolute;
  top: 0;
  right: 0;
  width: 9.167%;
  margin: 0 7.2% 0 0;
  opacity: 0;
  z-index: 1;
}
#protein .boxSerif {
  font-size: 1.125em;
  line-height: 1.334;
  background: #fff1ca;
  display: block;
  border-radius: 0.556em;
  width: 58.704%;
  position: relative;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 2.4% 3.4% 2.1%;
  letter-spacing: 0.03em;
}
#protein .innerSerif,
#protein .innerSerifR {
  display: block;
  opacity: 0;
}
#protein .boxSerif:before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  border-top: solid transparent 0.834em;
  border-bottom: solid transparent 0.834em;
  border-right: solid #fff1ca 2.445em;
  margin: 4.3% -1px 0 0;
}
#protein .cover {
  position: absolute;
  top: 0;
  left: -2.2em;
  height: 100%;
  right: -2.2em;
  background: #fff;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
#protein .wrapRemark:nth-child(even) .cover {
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}
#protein .wrapRemark:nth-child(even) .boxSerif:before {
  left: 100%;
  border-left: solid #fff1ca 2.445em;
  border-right: 0;
  right: auto;
}
#protein .wrapScrollX {
  display: block;
  margin: 2.8% 0 2.2% 17.2%;
  width: 65.536%;
}
#protein .caption {
  font-size: 10px;
  display: block;
  text-align: center;
  margin: 0 0 -1.2%;
}
#protein .table {
  width: 100%;
  font-size: 0.778em;
}
#protein th {
  text-align: left;
  width: 58.2%;
}
#protein td {
  text-align: right;
}
#protein th,
#protein td {

  padding: 3px 6px;
}
#protein .table,
#protein .table th,
#protein .table td {
  border: solid 1px;
}
#protein .remarkLink {
  width: 58.304%;
  margin: 1.2% auto 0;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  /* #contentAbout */
  #contentAbout .tl-page,
  #contentAbout h2 {
    font-size: 1.12em;
  }
  #contentAbout .tl-page span,
  #contentAbout h2 span {
    border-width: 0.143em;
  }
  #contentAbout .textAbout {
    font-size: 0.875em;
    /* padding: 3.8% 0% 5.8% 0; */
    box-sizing: border-box;
    line-height: 1.75;
  }
  #contentAbout .captionAbout {
    position: static;
    margin: 2% 0 0% 17%;
    font-size: 0.56em;
    -ms-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
  }
  /* #main */
  #main .tl-page {
    padding: 0;
  }
  #main .imgMain {
    margin: -3.6% auto -4.3%;
    width: 77.5%;
    display: block;
    padding: 0 0.4% 0 0;
    box-sizing: border-box;
    padding-bottom: 76.878%;
  }
  #main img.imgMainProduct {
    left: -2.6%;
  }
  #main .imgMain img:last-child {
    width: 110.658%;
    margin: -5%;
  }
  /* #feature */
  #feature .wrapImgFeature {
    margin: 3% 0 0;
  }
  /* #amino */
  #amino .captionAmino {
    font-size: 0.48em;
    position: static;
    margin: 2.8% 0 0 15.8%;
    display: block;
  }
  /* #main */
  #main .textMain01 {
    font-size: 0.8em;
    line-height: 1.5;
    padding: 5.5% 0 0;
  }
  #main .btnBox {
    font-size: 0.7em;
    display: block;
    width: 32.4%;
    margin: 3.8% auto 0;
    box-sizing: border-box;
  }
  #main .wrapIcon {
    padding-bottom: 11%;
  }
  #main .wrapIcon ul {
    font-size: 0.64em;
    padding: 0 4% 2%;
  }
  #main .wrapIcon h3 {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 5% 0 0;
  }
  #main .wrapIcon p {
    float: right;
    width: 51%;
    padding: 3.8% 0% 5.8% 0;
  }
  #main .wrapIcon li {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    -ms-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
  }
  #main .boxAbout01 {
    margin: 0;
  }
  #main .iconAbout01 {
    width: 40.145%;
    margin: 3% 0 0 -0.5%;
  }
  #main .boxAbout04 h3 {
    margin: 0;
  }
  #main .boxAbout02 {
    margin: 0;
  }
  #main .iconAbout02 {
    width: 17.247%;
    margin: 9% 0 7% 11%;
  }
  #main .boxAbout03 {
    margin: 0;
  }
  #main .iconAbout03 {
    width: 18.406%;
    margin: 4% 0 0 10.6%;
  }
  #main .boxAbout04 {
    margin: 0;
  }
  #main .iconAbout04 {
    width: 18.551%;
    margin: 7% 0 0 10.1%;
  }
  /* #feature */
  #feature h2 {
    font-size: 0.96em;
    padding: 10.7% 0 0;
  }
  #feature .wrapImgFeature {
    padding-bottom: 3.2%;
  }
  #feature .wrapImgFeature li {
    position: static;
    width: 92%;
    margin: 0 auto 8%;
    -ms-transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
  }
  #feature .imgFeature {
    width: 68.667%;
    padding: 2.3% 1.1% 0 0%;
    margin: 0 auto 5.1%;
    z-index: 2;
  }
  .lineFeature {
    display: none;
  }
  /* #amino */
  #amino {
    padding-top: 10.9%;
    padding-bottom: 11%;
  }
  #amino .inner {
    background: #fff2ca;
    width: 92%;
    border-radius: 0.44em;
    margin: 0 auto 0;
  }
  #amino h2 {
    font-size: 0.96em;
    line-height: 1.334;
    padding: 10% 0 0;
  }
  #amino .imgAmino01 {
    width: 72.754%;
    padding: 8.9% 3% 0 0;
  }
  #amino .imgAmino02 {
    position: static;
    width: 70.725%;
    margin: 1.3% auto 0;
  }
  #amino .wrapImgAmino {
    padding-bottom: 11%;
    margin-bottom: 0;
  }
  /* #howToUse */
  #howToUse {
    background: #fff;
  }
  #howToUse .inner {
    background: #fff2ca;
    width: 92%;
    border-radius: 0.44em;
    margin: 0 auto 0;
  }
  #howToUse h2 {
    padding: 10% 0 9.2%;
  }
  #howToUse h2 span {
    font-size: 0.858em;
  }
  #howToUse .textHow {
    font-size: 0.72em;
  }
  #howToUse .imgHow01 {
    width: 55.218%;
    margin: 19.8% 0 0 41.4%;
  }
  #howToUse .imgHow02 {
    width: 55.218%;
    margin: 89.7% 0 0 41.7%;
  }
  #howToUse .imgHow03 {
    width: 44.493%;
    margin: 8.6% 0 0 5.6%;
    -ms-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
  }
  #howToUse .imgHow04 {
    width: 44.493%;
    margin: 53.4% 0 0 5.6%;
    -ms-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
  }
  #howToUse .imgHow05 {
    width: 44.493%;
    margin: 118% 0 0 5.6%;
    -ms-transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
  }
  #howToUse .wrapImgHow {
    padding: 0 0 187.5%;
  }
  /* #protein */
  #protein h2 {
    padding: 13.4% 0 0;
    font-size: 0.96em;
  }
  #protein h2 small {
    font-size: 0.667em;
  }
  #protein .wrapConversation {
    padding: 8.4% 0 4.7%;
  }
  #protein .wrapRemark+.wrapRemark {
    margin-top: 8.4%;
  }
  #protein .iconProduct {
    margin: 0.2% 0 0 5.2%;
    width: 14.001%;
  }
  #protein .iconHuman {
    margin: -1.6% 2.6% 0 0;
    width: 15.7%;
  }
  #protein .boxSerif {
    margin: 0 0 0 25.3%;
    padding: 5% 4% 4.9% 6%;
    font-size: 0.64em;
    line-height: 1.438;
    width: 70.667%;
  }
  #protein .wrapRemark:nth-child(even) .boxSerif {
    margin-left: 3.3%;
  }
  #protein .boxSerif:before {
    margin: 7.4% -1px 0 0;
    font-size: 0.55em;
  }
  #protein .wrapScrollX {
    margin: 3.3% 0 0.7% 0.2%;
    /* overflow-x: scroll; */
    /* overflow-y: visible; */
    width: 100%;
  }
  #protein .wrapScrollX img {
    width: 125.055%;
    display: block;
  }
  #protein .caption {
    width: 96.5%;
    margin: 3.8% 0 1.4%;
    font-size: 0.563em;
    text-align: left;
    line-height: 1.5;
    letter-spacing: 0;
  }
  #protein .table {
    font-size: 0.625em;
    width: 96.5%;
  }
  #protein .table th,
  #protein .table td {
    padding: 0.24em 0.5em 0.2em;
  }
  #protein .remarkLink {
    width: 87.2%;
    margin: 5.3% auto 0%;
  }
}

@media print {
  #feature .wrapImgFeature li,
  #howToUse .imgHow03,
  #howToUse .imgHow04,
  #howToUse .imgHow05 {
    transform: scale(1) !important;
    opacity: 1 !important;
  }
  .lineFeature span,
  #amino .imgAmino02,
  .captionAmino {
    opacity: 1 !important;
  }
}