@charset "UTF-8";



  * {
    box-sizing: border-box;
  }
  body {
    font-family:'Avenir','Helvetica, Neue','Helvetica','Arial';
  }
  
  ul {
    padding-inline-start: 0px !important;
  }
  
  /* モーダルCSS */
  .modalArea {
    display: none;
    position: fixed;
    z-index: 10; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  .modalBg {
    width: 100%;
    height: 100%;
    background-color: rgba(30,30,30,0.9);
  }
  
  .modalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 80%;
    height: 80%;
    max-width: 1200px;
    max-height: 740px;
   padding: 20px 20px;
  /*  background-color: #fff;*/
    /* background: rgba(30,30,30,0.9);*/
  }

  .modalContents {
    
    height: 100%;
    width: 100%;
  }
  
  iframe {
    width: 100%;
    height: 100%;
 
  }
  
  .closeModal {
    position: absolute;
    top: 0rem;
    right: 1.5rem;
    min-width: 32px;
    min-height: 32px;
    text-align: right;
    font-size: 30px;
    padding-right: 2px;
    cursor: pointer;
    line-height: 0.6em;
    color: white;
  }

  .btn_video {
      width: 177px;
      height: 45px;
      vertical-align: middle;
      border-radius: 10px;
      border-color: white;
      background-color: #F7909A;
      color: white;
       outline: none; 
       margin-left: 10px;
       border-color:rgba(247, 144, 154, 0.42);
       font-weight: bold;

  }

  .btn_link {
   
    height: 45px;
    vertical-align: middle;
    border-radius: 10px;
   
    background-color: #F7909A;
    color: white;
     outline: none; 
   
     border-color:rgba(247, 144, 154, 0.42);
     font-weight: bold;

}

.app-link {
  text-align: center;
  padding-top: 0 !important;
}

.app-link p {
  margin-top: 10px;
  color: #F7909A;
}

.pink {
  color: #F7909A;
}

.btn_link a {
  color: #fff !important;
}

.tac {
  text-align: center;
}

.fwb {
  font-weight: bold;
  margin-bottom: 0!important;
}

.btn-banner{
  color: #fff;
  border: 2px solid #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fbd499));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fbd499 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fbd499 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  vertical-align: middle;
  border-radius: 10px;

  
}


.btn-banner a {
  color: #fff !important;
  font-weight: bold;
  font-size: 2rem;
}

.fixed {
  position: fixed;
  top: 0;
  right: 0;
  width: 30%;
  z-index: 10;
}

.box-point {
  position: relative;
 margin: 4em 0 0 0;
  padding: 0.5em 1em;
  border: solid 3px #fa709a;
  background-color: #fff;

}
.box-point .box-title {
  position: absolute;
  display: inline-block;
  top: -27px;
  left: -3px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  background: #fa709a;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}
.box-point p {
  margin: 0; 
  padding: 0;
  color: #F7909A;
}

.box-point img {
  width: 200px;
}


.btn-copy {
  font-size: 1.5rem;
  font-weight: bold;
  color: #F7909A;
  position: relative;

  margin-bottom: .2em;

  text-align: center;
}

.btn-copy:before {
  margin-right: 1rem;

  content: '＼';
}

.btn-copy:after {
  margin-left: 1rem;

  content: '／';
}

.sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 500px;
}

  /* BMI */

  .header_bmi {
    background: #fff;
  }

  .h2_bmi {
    color:  #F7909A;
    position: relative;
    display: inline-block;
    margin: 10px 0;
    font-family: "Kosugi Maru", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    padding: 0 0;
    border-top: solid 1px #F7909A;
    border-bottom: solid 1px #F7909A;
   
  }

  .h3_bmi {
   /* color:  #F7909A;*/
    position: relative;
    display: inline-block;
    margin: 10px 0;
    font-family: "Kosugi Maru", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    color: #56C1FF;
    margin-left: 25px;
    
   
  }

  .h3_bmi_n {
    /* color:  #F7909A;*/
     position: relative;
     display: inline-block;
     margin: 10px 0;
     font-family: "Kosugi Maru", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
     color: #F7909A;
     margin-left: 25px;
     
    
   }

  .h3_bmi_high {
    position: relative;
    display: inline-block;
    margin: 10px 0;
    font-family: "Kosugi Maru", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    color: #FF644E;
    margin-left: 25px;
  }

  .logo_bmi {
    display: flex;
    justify-content: center; /* 子要素を中央揃え */
    position: relative;
  }

  .content_bmi {
    padding-left:70px;
    padding-top: 20px;
    padding-bottom: 10px;
    /*width: 50%;*/
    float: left;
  }

  .list_bmi li {
    margin: 0 0 6px;
    font-size: 1.4rem;
  }

  .inner_bmi {
    padding-left:35px;
    padding-top: 20px;
  }
  
@media only screen and (min-width:768px) {

.inner_bottom {
    padding-bottom: 120px;
  }


}

  
  .bmi {
    font-size: 1.8rem;
    font-weight: bold;
    color: #696969;
    
   
  }

  table {
   
    margin-bottom: 30px;
    border-collapse: collapse;
    background-color: #3f3f3f;
   /* font-weight: bold;*/
}


th {
  
  border-bottom:solid 1px #ffbec3;
    padding: 0.5em;
    width: 130px;
    text-align: center;
}

.item_name {
    background-color:  #F7909A;

}

table th {
    color: white;
}

td {
  border-top: solid 1px #707070;
  border-bottom:solid 1px #707070;
    padding: 0.5em;
    width: 130px;
    text-align: center;
}

.low_weight {
  color: #A3DFFF;
}

.normal_weight {
  color: #61D836;
}

.fat1 {
  
  color: #FAE232;
}

.fat2 {
  color: #F8BA00;
  
}

.fat3 {
  color: #FF9300;
}

.fat4 {
  color: #FF644E;
}

.box {
  padding: 0.5em 1em;
  margin: 0 2em 2em 0;
  border: double 3px #FA8072;
  background-color: #fff;
  width: 450px;
  /*text-align: center;*/
}

.bmi_section .home-section {
  
  background-repeat: repeat;
  background-position: unset;
  
  background-size: unset;
 
}


i {
  font-size: 0.9em;
}

.box {
  text-align: center;
}

.box p {
  margin: 0 0 0;
}

.low li {
  list-style-type: none; /*点を非表示*/
    position: relative; /*基準位置*/
    text-indent: -.7em;
    padding-inline-start: 20px;
}

.low li:before {
  content: "• ";
   
  color: #1ec4e6; /*点の色*/
  }

  .high li {
    list-style-type: none; /*点を非表示*/
      position: relative; /*基準位置*/
      text-indent: -.7em;
      padding-inline-start: 20px;
  }

.high li:before {
  content: "• ";
  color: #FF644E;
}

.back_btn {
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  color: #F7909A;
  margin-left: 40px;
  padding-top: 13px;
}

a:hover {
  color: #F7909A;
}

.bmi_img {
 display: block;
  margin-left: auto;
  margin-right: auto;
}

.bmi_header {
  display: inline-block;
}

  @media only screen and (max-width: 767px) {
     .btn_video {
       margin-left: 3px;
      margin-bottom: 30px;
    }


    .modalWrapper { 
   
    width: 90%;
    height: 35%;
    padding: 5px 10px;
   
  }

  .modalContents {
    height: 100%;
    width: 100%;
  }
  
    iframe {
      width: 100%;
      height: 100%;
     
    }

    .closeModal {
    
    right: 0rem;
     top: 0rem;
    ;
  }


  
  

 .content_bmi {
  
    padding-left:20px;
    padding-right: 20px;
      
  }

.content_bmi div {
    padding-top: 20px;
    padding-bottom: 10px;
}

  p {
    font-size: 1.5rem;
  }

  ul {
    padding-left: 0;
  }

  .low li {
    font-size: 1.4rem;
  }

  .high li {
    font-size: 1.4rem;
  }

  .bmi {
    font-size: 1.3rem;
  }

  .inner_bmi {
    padding-left:5px;
    padding-right: 5px;

  }

  .h3_bmi {
    margin-left: 0;
  }

  .h3_bmi_high {
    margin-left: 0;
  }

  .box {
    width: 80%;
    padding: 0.5em 0.5em;
    /*text-align: center;*/
  }

  h2 {
    font-size: 25px;
  }

  .back_btn {
    font-size: 15px;
    padding-top: 25px;
    position: absolute;
    left: 0; /* 右寄せ */
    margin-left: 10px;
  }



  }


  @media only screen and (max-width: 343px) {

    .bmi {
      font-size: 1.1rem;
    }

    p {
      font-size: 1.3rem;
    }

   .low li {
      font-size: 1.3rem;
    }

    .high li {
      font-size: 1.3rem;
    }
  

  }


  @media only screen and (min-width: 768px) {

    .content_bmi {
      
      width: 50%;
    }
  }

  /*健康記事*/

  #article h2 {
    font-size: 2.8rem;
    font-family: "Kosugi Maru", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    color: #F7909A;
    text-align: center;
  }

  .artical_list {
    width: 100%;
  }

  .article_list h3 {
    margin-top: 0;
   
    color: #fff;
   
  }

  .article_list li {
    list-style-type: none; /*点を非表示*/
    width: 45%;
    margin:2em 1em;
    position: relative;
    padding: 0.25em 1em;
    border: solid 2px #F7909A;
    border-radius: 5px;
    background:linear-gradient(180deg,#F7909A 0%,#F7909A 23%,#fff 23%,#fff 100%);
    display: inline-block;
  }

  
  .article_list li  div {
   
    display: table-cell;
    vertical-align: top;
    font-size: 1.6rem;
    padding-top: 10px;
    padding-bottom: 10px;
   
  }

  .txt {
    padding-left: 10px;
  }

  .txt p {
    font-weight: bold;
    margin-bottom: 5px!important;
  }

  
  


  .article_pic {
    width: 30%;
    display: table-cell;
    vertical-align: top;
    padding-left: 3px;
    
  }


  .icon_area a{
    position: absolute;
    display: inline-block;
    right: 10px;
    bottom: 10px;
    color: #F7909A;
    text-decoration:underline;/*下線を引く*/
    text-decoration-color:#F7909A;/*下線を赤色*/

  }

  .dot:after {
    top: -12px;
    left: -12px;
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid 2px #F7909A;
    border-radius: 50%;
  }

  .dot:before {
    bottom: -12px;
    right: -12px;
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid 2px #F7909A;
    border-radius: 50%;
  }

  @media only screen and (max-width:767px) {

    .article_list li {
      width: 100%;
      margin:2em 0em;
    }

    .dot {
        margin:2em 0em;
    }
   
    .article_list li  div {
      padding-top: 0;
     
     
    }
  

    .txt_content {
      font-size: 1rem;
      
    }

    .icon_area a{
     font-size: 16px;
  
    }

    .article_img  {
      padding-top: 5px;
    }

    




  }

  
  

  .content_list2 li {
    list-style-type: none; /*点を非表示*/
      position: relative; /*基準位置*/
      text-indent: -.7em;
      text-align: left;
      padding-inline-start: 20px;
  }

  .content_list2 li:before {
    content: "• ";
    color: #F7909A;
    
    }
  
  


  .content_list li {
    list-style-type: none; /*点を非表示*/
      position: relative; /*基準位置*/
      text-indent: -.7em;
      text-align: left;
      padding-inline-start: 20px;
  }
  
  .content_list li:before {
    content: "• ";
    color: #F7909A;
    
    }

  .h3_pms {
    color: #F7909A;
    border-bottom: dashed 2px #F7909A;
    display: inline-block;
    margin-bottom: 30px;
    
  }

  .box_pms {
    background: #FDF5E6;
    border: solid 3px #F7909A;/*線色*/
    padding: 1em;/*文字周りの余白*/
    border-radius: 0.5em;/*角丸*/
    text-align: center;
    width: 46%;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-top: 15px;
   
  }

  .box_food {
    background: #FDF5E6;
    border: solid 3px #F7909A;/*線色*/
    padding: 1em;/*文字周りの余白*/
    border-radius: 0.5em;/*角丸*/
    text-align: center;
    width: 46%;
    display: inline-block;
    margin-right: 50%;
    margin-left: 20%;
    margin-bottom: 30px;
    margin-top: 15px;
   
  }



  h4 {
    color: #F7909A;
    font-weight: bold;
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    background: #FFE4E1;/*背景色*/
    
    border-left: solid 5px #F7909A/*#ffa07a;左線*/
   
  }

  dl {
    margin-left: 15px;
  }

  dt {
    
    display: inline-block;
    position: relative;
    padding: 0.25em 0;
    margin-bottom: 15px;
    color: #F7909A;
  }

  dt:after {
    content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
  background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
  }

  dd {
    margin-bottom: 30px;
  }

  .pms p {
    margin-bottom: 30px;
    margin-top: 15px;
  }

  @media only screen and (max-width:767px) {

    .box_pms {
      display: block;
      width: 90%;
      margin-bottom: 30px;
      margin-left: auto;
      margin-right: auto;
    }

    .box_food {
      display: block;
      width: 90%;
      margin-bottom: 30px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  .wrapper {
    margin: 0 auto;
    display: inline-block;
  }

  .column_small {
    width: 35%;
   float: right;
   /* border-left: dashed 1px #F7909A;
    background: #ffe4e1;*/
    padding-right: 70px;
    text-align: center;
  }

  .column_small .article_pic {
    width: 35%;
  }

  .column_small h3 {
    position: relative;
    display: inline-block;
    padding: 0 55px;
    color: #F7909A;
    border-left: none;

  }

  .column_small h3:before {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: #F7909A;
    left: 0;
  }

  .column_small h3:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: #F7909A;
    right: 0;

  }

  
  a:hover {
    text-decoration:underline;
    }
  
  /*
  .content_right h3:before {
    left:0;
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 2px;
    border-top: solid 1px #F7909A;
    border-bottom: solid 1px #F7909A;
  }
  .content_right h3:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 2px;
    border-top: solid 1px #F7909A;
    border-bottom: solid 1px #F7909A;
    right: 0;
  }
  */

  .column_small ul {
    list-style: none;
    padding-left: 0;
    
  }

  /*.article_top {
    border-top: dashed 1px #F7909A;
    
  }
  */

  .column_small li {
    list-style-type: none; /*点を非表示*/
    background: #fff;
    margin-bottom: 0.1em;
    position: relative;
   /* padding: 0.25em 1em; */
    /*border-bottom: dashed 1px #F7909A;*/
    text-align: left;
   
    
   
    display: inline-block;
  }

  .column_small li div {
    display: table-cell;
    vertical-align: top;
    font-size: 1.2rem;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .wrapper div {
      padding-top: 20px;
      padding-bottom: 10px;
  }

  @media only screen and (max-width:767px) {
    .column_small {
      float: none;
      width: auto;
      padding-left: 20px;
      padding-right: 20px;
      display: block;
      
    }

    .column_small li div {
      font-size: 16px;
    }

   /* .app-link {
      margin-bottom: 80px;
    }*/

    
  }

  .explain_box {
    position: relative;
    margin: 3em 1em;
    width: 90%;
    padding: 0.5em 1em;
    border: solid 3px #F7909A;
    background: #fff;
}
.explain_box .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #F7909A;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.explain_box p {
    margin: 0; 
    padding: 0;
}

.inner_bmi a {
    color: #F7909A;
}

#box .box_pms  {
    margin-left: 1em;
}

#box .box_pms p {
    color: #F7909A;
}