#health-1 {padding: 60px 0 0 0; background-repeat:no-repeat; background-position:bottom right; background-color:#e8ecee; background-size: auto 100%;}
#health-2 {padding: 60px 0; background-color: #fff;}
#health-2 .card.float {width:48%; float:left;}
#health-2 .card.float:first-of-type {margin-right:10px;}
#health-2 .card .card-body {padding: 10px 15px 0;}
#evaluate {background-color:#ddd;}
#evaluate .container {padding-top:50px;}
#health-food, #health-sport {background-repeat: no-repeat; background-position: bottom center; background-color: #f3f3f3; background-size: auto;}
#health-food-wrap { width: 100%; background-color: #f3f3f3;}

h4.titWithBar {text-align: center; position: relative; margin-bottom: 1.5em;}
h4.titWithBar::before {top: 0; bottom: 0;left: 0;}
h4.titWithBar::after {top: 0;bottom: 0;right: 0;}
h4.titWithBar::before, h4.titWithBar::after {content: '';display: inline-block;vertical-align: middle;width: calc(50% - 6em);height: 1px;background: #7e7e7e;position: absolute;margin: auto 0;}
h4.titWithBar span {display: inline-block;vertical-align: middle;padding: 0 .5em;}
.tableRWD {width:100%; line-height: 150%; margin-bottom: 50px; margin-top: 20px;}
#calc01 {background-position: calc(50%) bottom;
    background-repeat:no-repeat; background-image:url('../images/calc_2.png');
}

.tb_sty2_total td{ background: #fff; text-align: right !important; line-height: 2; padding: 1em; }
a.aa1 {display: inline-block;padding:.2em 2em;background: #8a416b; color: #fff;font-size: 14px;}

.features1 {padding-top: 60px; padding-bottom: 60px; background-color: #ececec;}
.features1 .link {opacity: 0; transform: translate(-10px, 40px); transition: all 0.3s; font-weight: 600; margin: 0;}
.features1 .svg11 path {fill: #7aba59;}
.features1 .svg21 path {fill: #e09128;}
.features1 .svg31 path {fill: #b56e39;}
.features1 .svg41 path {fill: #007b8a;}
.features1 .svg51 path {fill: #005077;}
.features1 .svg12 path,.features1 .svg22 path,.features1 .svg32 path, .features1 .svg42 path, .features1 .svg52 path {fill: #fff;}
.features1 .card {position: relative; height: 300px; background-color: transparent; border: none;}
.features1 .card h3 {transform: translate(0px, 50px); animation: animationFramesOut linear 0.6s; font-size:18px;}
.features1 .card:hover .link {opacity: 1; transform: translate(-10px, 10px); transition-delay: 0.6s;}
.features1 .card:hover h3 {animation: animationFrames linear 0.6s; animation-iteration-count: 1; transform-origin: 50% 50%; transform: translate(0px, 50px);}
.features1 .card:hover .svg11 {transform: skew(0deg, 10deg) scaleX(1) scaleY(0.9) rotate(-10deg);}
.features1 .card:hover .svg12 {transform: skew(0deg, 10deg) scaleX(1) scaleY(0.9) rotate(30deg);}
.features1 .card:hover .svg21 {transform: skew(-20deg, 10deg) scaleX(1) scaleY(0.9) rotate(-10deg);}
.features1 .card:hover .svg22 {transform: skew(-20deg, 10deg) scaleX(1) scaleY(0.9) rotate(20deg);}
.features1 .card:hover .svg31 {transform: skew(0deg, 10deg) scaleX(1) scaleY(0.9) rotate(-10deg);}
.features1 .card:hover .svg32 {transform: skew(0deg, 10deg) scaleX(1) scaleY(0.9) rotate(70deg);}
.features1 .card:hover .svg41 {transform: skew(0deg, 10deg) scaleX(1) scaleY(0.9) rotate(-10deg);}
.features1 .card:hover .svg42 {transform: skew(0deg, 10deg) scaleX(1) scaleY(0.9) rotate(30deg);}
.features1 .card:hover .svg51 {transform: skew(0deg, 10deg) scaleX(1) scaleY(0.9) rotate(-10deg);}
.features1 .card:hover .svg52 {transform: skew(0deg, 10deg) scaleX(1) scaleY(0.9) rotate(50deg);}
.features1 .card svg {position: absolute; top: -10px; left: 40px; transform: scale(0.9); transition: transform 800ms cubic-bezier(0.7, -0.5, 0.25, 1.5);}
.features1 .card .svg12, .features1 .card .svg22,.features1 .card .svg32,.features1 .card .svg42,.features1 .card .svg52 { z-index: 1; transform: scale(0.9) rotate(60deg);}
.features1 .card .svg11, .features1 .card .svg21,.features1 .card .svg31,.features1 .card .svg41,.features1 .card .svg51 { z-index: 2;}
.features1 .card div {z-index: 3;}
.features1 .card .card-img { position: absolute; right: 30px; top: 0px;}
.features1 .card-img { height: 150px; width: 150px; border-radius: 100%; display: flex; justify-content: center; align-items: center; box-shadow: 0px 0px 10px 0px rgba(150, 150, 150, 0.3);}
.features1 .link a { position: relative; margin: 0; font-weight: 600;}
.features1 .link a:after { position: absolute; content: "\f061"; font: normal normal normal 14px/1 FontAwesome; right: -30px; top: -1px; color: currentColor;}
.features1 .row {justify-content: center;}
#article01 dt {min-width:185px;padding-bottom:10px;font-size:18px;}

.features2 {padding-bottom: 30px;}

@keyframes animationFrames {
  0% {transform: translate(0px, 50px);}
  33% {transform: translate(0px, 50px); opacity: 1;}
  66% {transform: translate(0px, 0px); opacity: 0;}
  67% {transform: translate(0px, 90px); opacity: 0;}
  100% { transform: translate(0px, 50px); opacity: 1;}
}
@keyframes animationFramesOut {
  0% {transform: translate(0px, 50px); opacity: 1;}
  33% {transform: translate(0px, 50px); opacity: 1;}
  66% {transform: translate(0px, 90px); opacity: 0;}
  67% {transform: translate(0px, 0px); opacity: 0;}
  100% {transform: translate(0px, 50px); opacity: 1;}
}

@media (min-width: 992px) {
   #health-1 {margin-top:64px; height:800px;}
   #health-1 p {font-size:17px; line-height: 1.5;}
  .features1 .card {margin-bottom: 2rem;}
  .features1 .card svg {left: 30px;}
  .features1 .card:hover h4 {animation: none;}
  .features1 .link {opacity: 1; transform: translate(-10px, 10px);}
  .features1 h4 {animation: none;}
   #health-food { height: 580px;}
   #health-sport { height: 650px;}
}

@media (max-width: 991px) {
    #health-1 {margin-top: 53px; height:667px;}
}

@media (min-width: 768px) {
  .tableRWD th{ color: #fff;}
  .tableRWD th, .tableRWD td { padding:.3em;}
  .tableRWD td{ border-bottom: solid 1px #b4c9d5; }	
  .tb_sty2 th{ text-align: center; border-right: solid 1px #ddd4ec; padding: 1em 0; width: 3em; }
  .tb_sty2 td{ border: solid 1px #ddd4ec; text-align: center; background: #fff; }
  .tb_sty2 td:first-child{ text-align: left; background: #f7f7f7; font-weight: bold; }
  .tb_sty2 td.tb_sty2_td1{ padding: 0 1em;font-size: 14px; min-width: 150px; }
   #w_body {width:calc(35vw);max-width:480px !important;}
}

@media (max-width: 767px) {
  .tableRWD table, .tableRWD thead, .tableRWD tbody, .tableRWD th, .tableRWD td, .tableRWD tr { display: block; }
  .tableRWD thead tr { position: absolute; top: -9999px; left: -9999px; }
  .tableRWD td:before  { content: attr(data-title); } 	
  .tableRWD td { position: relative; white-space: normal; text-align:left;}
  .tableRWD td:before{ text-align:left; }
	
  .tb_sty2 tr:not(.tb_sty2_total){ overflow: hidden; border-bottom: 1px solid #9a9a9a;}
  .tb_sty2 td.tb_sty2_td1{ text-align: right; position: relative; width: calc(100vw - 200px); float:left; line-height:2}
  .tb_sty2 td.tb_sty2_td2{ text-align: center; position: relative; border-bottom: 0; line-height: 2; width:30px; float:left}
  .tb_sty2 td::before{ white-space: nowrap; text-align:left; width: 50%; height: 100%; max-height: 100%; display:block; position: absolute; top:0; left: 0; padding-left: 5%;  color:#fff; padding-top: .5em;  }
  .tb_sty2 td:first-child{ background: none; font-weight: bold; }
  .tb_sty2 td:first-child::before{ width: 0; }
  .tb_sty2_total{ margin-bottom: 5px; overflow: hidden; margin-top:5px; }
  #calc01 {background-image:none;}
  .features1 .card {max-width: 360px;}
  .features1 .card svg {left: 10px;}
  .features1 .card .card-title {font-size: 16px; margin-left:-35px;}
  .features2 .wrap100 {width:calc(80vw); margin-left:auto; margin-right:auto;}
   #pnew-title {padding-bottom:15px;}
   #article01 {text-align:center}
   #article01 dl {margin-left:0; margin-bottom:0; padding-bottom:30px; }
   #article01 dl:nth-child(1) {padding-bottom:0;}
   #article01 dt {font-size: 15px; line-height: 1; font-weight: normal;margin-left:0;}   
   #w_body {width:calc(80vw);max-width:480px !important;}
}

@media (min-width: 576px) {

}

@media (min-width: 576px) and (max-width: 767px) {
    #health-1 p {font-size:15px;}
}

@media (max-width: 575px) {
    #health-1 {background-size: 80%; font-size: 14px; background-color:#e6eaec; height:867px; }
    #health-1 .mb-4 {margin-left:-25px; margin-right:-25px;}
    #health-2 {padding: 50px 0 0;}
    p {font-size:15px;}
    a.aa1 {margin-top: 20px;}
    .features1 .card { margin-bottom: 0; transform: scale(0.8)}
    .features1 .card .card-title {font-size:22px;}
    #health-food, #health-sport {background-size:contain;}
    #health-food { height: calc(100vw * 0.86 + 30px);}
    #health-sport { height: calc(100vw * 1.03);}
}