@charset "UTF-8";

/*--------------------------------------------
proteinPage
---------------------------------------------*/
.proteinPage .page-title{
  font-weight: 700;
}
.proteinPage .block img{
  width : 100%;
}
.proteinPage .block .about{
  background: #f5eaf4;
}
.proteinPage .block .about h3{
  font-weight: 700;
}
.proteinPage .block .about p{
  line-height: 1.6;
}
.proteinPage .block .about ul li{
  line-height: 1.625;
}
.proteinPage .block .term h3{
  border-bottom: 2px solid #802077;
  font-weight: 700;
}
.proteinPage .block h2 {
  border-bottom: 2px solid #802077;
  font-weight: 700;
}
.proteinPage .block .ttl{
  display : flex;
  align-items : center;
}
.proteinPage .block .ttl .num{
  background : #802077;
  border-radius : 50%;
  color : #fff;
  font-weight : 700;
  text-align: center;
}
.proteinPage .block .exchange a {
  display: block;
  margin: 0 auto;
  background: #802077;
  text-align: center;
  color: #fff;
  font-weight: 700;
  transition: opacity .3s ease-in;
}
.proteinPage .block .qa dt, .proteinPage .block .qa dd {
  display: flex;
  align-items: flex-start;
}
.proteinPage .block .qa dt {
  font-weight: 700;
}
.proteinPage .contact {
  background : #802077;
  text-align: center;
}
.proteinPage .contact h3 {
  font-weight: 700;
  color: #fff;
}
.proteinPage .contact a {
  display: block;
  font-weight: 700;
  color: #fff;
  transition: opacity .3s ease-in;
}
.proteinPage .contact a::before {
  display: inline-block;
  content: '';
  background-image: url(/ren1909/images/ui/icon/tel_w.svg);
  background-position: center left;
  background-repeat: no-repeat;
}
.proteinPage .contact p {
  color: #fff;
}

@media screen and (max-width: 768px){
  .proteinPage .page-title {
    padding : calc( 120 * 100vw / 750 ) 0;
    font-size : calc( 60 * 100vw / 750 );
    line-height: calc( 66 / 60 );
  }
  .proteinPage .block{
    margin-bottom: calc( 120 * 100vw / 750 );
  }
  .proteinPage .colLeft{
    margin-bottom: calc( 80 * 100vw / 750 );
  }
  .proteinPage .block .about{
    margin-bottom: calc( 100 * 100vw / 750 );
    border-radius: calc( 16 * 100vw / 750 );
    padding: calc( 40 * 100vw / 750 ) calc( 30 * 100vw / 750 );
  }
  .proteinPage .block .about h3{
    margin-bottom: calc( 50 * 100vw / 750 );
    font-size : calc( 30 * 100vw / 750 );
  }
  .proteinPage .block .about p {
    margin-bottom: calc( 30 * 100vw / 750 );
    font-size : calc( 30 * 100vw / 750 );
    line-height: calc( 40 / 30 );
  }
  .proteinPage .block .about ul li {
    font-size : calc( 30 * 100vw / 750 );
  }
  .proteinPage .block .term h3 {
    margin-bottom: calc( 40 * 100vw / 750 );
    padding-bottom: calc( 20 * 100vw / 750 );
    font-size: calc( 60 * 100vw / 750 );
  }
  .proteinPage .block .term p {
    font-size: calc( 30 * 100vw / 750 );
  }
  .proteinPage .block h2 {
    margin-bottom: calc( 40 * 100vw / 750 );
    padding-bottom: calc( 20 * 100vw / 750 );
    font-size: calc( 60 * 100vw / 750 );
  }
  .proteinPage .block .ttl .num{
    width : calc( 90 * 100vw / 750 );
    height : calc( 90 * 100vw / 750 );
    margin-right : calc( 18 * 100vw / 750 );
    font-size : calc( 63 * 100vw / 750 );
    line-height : calc( 90 * 100vw / 750 );
  }
  .proteinPage .block .ttl .inr {
    width: calc( 560 * 100vw / 750 );
    font-size: calc( 30 * 100vw / 750 );
    line-height: calc( 40 / 30 );
  }
  .proteinPage .block .txt{
    margin : calc( 30 * 100vw / 750 ) 0 calc( 40 * 100vw / 750 );
    padding-left: calc( 110 * 100vw / 750 );
    font-size : calc( 30 * 100vw / 750 );
    line-height : calc( 40 / 30 );
  }
  .proteinPage .block .img {
    margin: 0 0 calc( 65 * 100vw / 750 ) 0;
    text-align: center;
  }
  .proteinPage .block .img .img-check-in {
    width: calc( 596 * 100vw / 750 );
    margin-bottom: calc( 24 * 100vw / 750 );
  }
  .proteinPage .block .img .img-balance {
    width: calc( 468 * 100vw / 750 );
  }
  .proteinPage .block .img div {
    margin-left: auto;
    margin-right: auto;
  }
  .proteinPage .block .img div img {
    margin-top: 5px;
  }
  .proteinPage .block .exchange {
    margin-top: calc( 38 * 100vw / 750 );
  }
  .proteinPage .block .exchange a {
    border-radius: calc( 60 * 100vw / 750 );
    font-size: calc( 30 * 100vw / 750 );
    line-height: calc( 90 / 30 );
    width: calc( 450 * 100vw / 750 );
  }
  .proteinPage .block .qa {
    margin-bottom: calc( 75 * 100vw / 750 );
  }
  .proteinPage .block .qa dt {
    margin-bottom: calc( 27 * 100vw / 750 );
    font-size: calc( 30 * 100vw / 750 );
    line-height: calc( 40 / 30 );
  }
  .proteinPage .block .qa dt .num {
    margin-right: calc( 5 * 100vw / 1366 );
  }
  .proteinPage .block .qa dd {
    padding-left: calc( 64 * 100vw / 750 );
    font-size: calc( 30 * 100vw / 750 );
    line-height: calc( 40 / 30 );
  }
  .proteinPage .contact {
    margin: calc( 120 * 100vw / 750 ) 0 calc( 220 * 100vw / 750 );
    padding: calc( 40 * 100vw / 750 ) 0;
    border-radius: calc( 16 * 100vw / 750 );
  }
  .proteinPage .contact h3 {
    margin-bottom: calc( 60 * 100vw / 750 );
    border-radius: calc( 16 * 100vw / 750 );
    font-size: calc( 60 * 100vw / 750 );
  }
  .proteinPage .contact a {
    margin-bottom: calc( 40 * 100vw / 750 );
    font-size: calc( 60 * 100vw / 750 );
  }
  .proteinPage .contact a::before {
    width: calc( 44 * 100vw / 750 );
    height: calc( 44 * 100vw / 750 );
    margin-right: calc( 9 * 100vw / 750 );
    background-size: calc( 44 * 100vw / 750 );
  }
  .proteinPage .contact p {
    font-size: calc( 30 * 100vw / 750 );
    line-height: calc( 40 / 30 );
  }
}
@media print,screen and (min-width: 769px){
  .proteinPage .wrap{
    padding-left : calc( 193 * 100% / 1366 );
    padding-right : calc( 193 * 100% / 1366 );
  }
  .proteinPage .block{
    margin-bottom: calc( 80 * 100vw / 1366 );
  }
  .proteinPage .col{
    display : flex;
    justify-content : space-between;
  }
  .proteinPage .colLeft{
    width : calc( 338 * 100vw / 1366 );
  }
  .proteinPage .colRight{
    width : calc( 600 * 100vw / 1366 );
  }
  .proteinPage .page-title {
    padding : calc( 50 * 100vw / 1366 ) 0;
    font-size : calc( 34 * 100vw / 1366 );
  }
  .proteinPage .block .about{
    margin-bottom: calc( 69 * 100vw / 1366 );
    border-radius: calc( 4 * 100vw / 1366 );
    padding: calc( 20 * 100vw / 1366 ) calc( 30 * 100vw / 1366 );
  }
  .proteinPage .block .about h3{
    margin-bottom: calc( 27 * 100vw / 1366 );
    font-size : calc( 24 * 100vw / 1366 );
  }
  .proteinPage .block .about p {
    margin-bottom: calc( 12 * 100vw / 1366 );
    font-size : calc( 20 * 100vw / 1366 );
    line-height: calc( 32 / 20);
  }
  .proteinPage .block .about ul li {
    font-size : calc( 16 * 100vw / 1366 );
    line-height: calc( 26 / 16 );
  }
  .proteinPage .block .term h3 {
    margin-bottom: calc( 18 * 100vw / 1366 );
    padding-bottom: calc( 13 * 100vw / 1366 );
    font-size: calc( 24 * 100vw / 1366 );
  }
  .proteinPage .block .term p {
    font-size: calc( 16 * 100vw / 1366 );
    line-height: calc( 26 / 16 );
  }
  .proteinPage .block h2 {
    margin-bottom: calc( 20 * 100vw / 1366 );
    padding-bottom: calc( 13 * 100vw / 1366 );
    font-size: calc( 24 * 100vw / 1366 );
  }
  .proteinPage .block .ttl .num{
    font-size : calc( 42 * 100vw / 1366 );
    line-height : calc( 60 * 100vw / 1366 );
    width : calc( 60 * 100vw / 1366 );
    margin-right : calc( 18 * 100vw / 1366 );
  }
  .proteinPage .block .ttl .inr {
    font-size: calc( 21 * 100vw / 1366 );
    line-height: calc( 32 / 21 );
  }
  .proteinPage .block .txt{
    margin-top : calc( 14 * 100vw / 1366 );
    margin-bottom : calc( 42 * 100vw / 1366 );
    padding-left: calc( 80 * 100vw / 1366 );
    font-size : calc( 16 * 100vw / 1366 );
    line-height : calc( 26 / 16 );
  }
  .proteinPage .block .img {
    display: flex;
    gap: calc( 44 * 100vw / 1366 );
    margin: 0 0 calc( 60 * 100vw / 1366 ) calc(157 * 100vw / 1366);
  }
  .proteinPage .block .img .img-check-in {
    width: calc( 234 * 100vw / 1366 );
  }
  .proteinPage .block .img .img-balance {
    width: calc( 312 * 100vw / 1366 );
  }
  .proteinPage .block .img div img {
    margin-top: 5px;
  }
  .proteinPage .block .exchange {
    margin-top: calc( 20 * 100vw / 1366 );
  }
  .proteinPage .block .exchange a {
    border-radius: calc( 76 * 100vw / 1366 );
    font-size: calc( 24 * 100vw / 1366 );
    line-height: calc( 70 / 24 );
    width: calc( 450 * 100vw / 1366 );
  }
  .proteinPage .block .qa {
    margin-bottom: calc( 36 * 100vw / 1366 );
  }
  .proteinPage .block .qa dt {
    margin-bottom: calc( 16 * 100vw / 1366 );
    font-size: calc( 16 * 100vw / 1366 );
    line-height: calc( 30 / 16 );
  }
  .proteinPage .block .qa dt .num {
    margin-right: calc( 5 * 100vw / 1366 );
  }
  .proteinPage .block .qa dd {
    padding-left: calc( 72 * 100vw / 1366 );
    font-size: calc( 16 * 100vw / 1366 );
    line-height: calc( 30 / 16 );
  }
  .proteinPage .contact {
    margin-top: calc( 116 * 100vw / 1366 );
    padding: calc( 30 * 100vw / 1366 ) 0;
    border-radius: calc( 4 * 100vw / 1366 );
  }
  .proteinPage .contact h3 {
    margin-bottom: calc( 30 * 100vw / 1366 );
    font-size: calc( 24 * 100vw / 1366 );
  }
  .proteinPage .contact a {
    margin-bottom: calc( 20 * 100vw / 1366 );
    font-size: calc( 24 * 100vw / 1366 );
  }
  .proteinPage .contact a::before {
    width: calc( 20 * 100vw / 1366 );
    height: calc( 20 * 100vw / 1366 );
    margin-right: calc( 6 * 100vw / 1366 );
    background-size: calc( 20 * 100vw / 1366 );
  }
  .proteinPage .contact p {
    font-size: calc( 14 * 100vw / 1366 );
    line-height: calc( 26 / 14 );
  }
}