@charset "UTF-8";



/*--------------
5日間プログラム
--------------*/
.fivedays_program{
  margin:0 auto 100px auto;
  width:190%;
}
.fivedays_program img{
  width:100%;
}
.fivedays_program h2{
  font-size:1.7rem;
  background-color: #40c496;
  padding:15px;
  color:white;
  text-align: center;
  margin-bottom:20px;
}
@media (max-width: 767px){
  .fivedays_program h2{
    font-size:1.1rem;
  }
  
}


/*-----------------
動画キャププション
------------------*/
.member_caption{
  line-height: 1.5;
  font-size:0.9rem;
  margin-bottom:20px;
}


/*-------------------
memberページ動画全体 タイトル
--------------------*/
.member_movie_title{
  display:flex;
  font-size:1.5rem;
  padding:10px;
  align-items: center;
/*  border:solid 1px;*/
  border-radius: 5px;
  margin-bottom:20px;
/*    color:white;*/
}
@media (max-width: 767px){
  .member_movie_title{
    padding:10px 5px;
  }
}
.textsize_2rem {
  font-size: 2rem !important;
}
.member_movie_title_img{
  width:175px;
  position:relative;
}
@media (max-width: 767px){
  .member_movie_title_img{
    width:125px;
  }
}
.width100px{
  width: 100px;
}
.member_movie_title_img img{
  position: absolute;
  left:0;
}
.position_top-10{top:-10px;}
.position_top-20{top:-20px;}
.position_top-30{top:-30px;}
.position_top-40{top:-40px;}
.position_top-50{top:-50px;}
.position_top-60{top:-60px;}
.position_top-70{top:-70px;}
@media (max-width: 767px){
  .position_top-10{top:-10px;}
  .position_top-20{top:-15px;}
  .position_top-30{top:-30px;}
  .position_top-40{top:-40px;}
  .position_top-50{top:-35px;}
  .position_top-60{top:-50px;}
  .position_top-70{top:-70px;}
  
}
.overwidth{
  width: 160px;
}
.member_movie_title h2{
  margin-left:10px;
  font-size: 1.2rem;
}
@media (max-width: 767px){
  .member_movie_title h2{
   font-size: 1.1rem;
  }
}

/*------------------
バナー
--------------------*/
.member_info_baner{
  max-width:600px;
  margin:0 auto;
}

/*----------------------
購入はこちら
-------------------------*/
/* ここから下がボタンのCSS　*/
.btn-surround {
  display: inline-block;
  text-decoration: none;
  color: #FFF;
  font-weight: 700;
  font-size:1.3rem;
  background-color: #f8b62d;
  text-align: center;
  width: inherit;
  min-width: 250px;
  padding: 20px 16px;
  position: relative;
  opacity: 1 !important;
  transition: all 0.3s;
  margin:70px auto 100px auto;
  display:block;
  max-width:300px;
}
.btn-surround:before,
.btn-surround:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #f8b62d;
  top: 0;
  pointer-events: none;
}
.btn-surround:before {
  left: 0;
  width: 0;
  height: 2px;
}
.btn-surround:after {
  right: 0;
  width: 2px;
  height: 0;
}
.btn-surround:hover {
  background-color: #FFF;
  color: #f8b62d;
}
.btn-surround:hover:before {
  width: 100%;
  transition: width 0.2s 0.2s;
}
.btn-surround:hover:after {
  height: 100%;
  transition: height 0.1s 0.4s;
}
.btn-surround:hover span:before {
  width: 100%;
  transition: width 0.2s 0.5s;
}
.btn-surround:hover span:after {
  height: 100%;
  transition: height 0.1s 0.7s;
}
.btn-surround span:before,
.btn-surround span:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #f8b62d;
  bottom: 0;
  pointer-events: none;
}
.btn-surround span:before {
  right: 0;
  width: 0;
  height: 2px;
}
.btn-surround span:after {
  left: 0;
  width: 2px;
  height: 0;
}

/*------------------------
提供メンバー
---------------------------*/
.collaborator{
  display:flex;
  justify-content: space-between;
  padding:15px;
/*  background-color: #f39800;*/
  flex-wrap: wrap;
}
.collaborator img{
  display: block;
  width:32%;
}
@media (max-width: 400px){
  
  .collaborator{

    justify-content: center;
    padding:0px;
  }
  .collaborator img{
    display: block;
    width:100%;
    padding:20px;
  }
}
/*------------------------
memberinfo
---------------------------*/

/*タイトル*/
.member_info_text h2{
font-size: 2rem;
  margin-bottom:20px;
  background-color:#40c496;
  padding:20px;
  color:white;
}
@media (max-width: 767px){
  .member_info_text h2{
    font-size: 1.1rem;
  }
}

/*サブタイトル*/
.member_info_text p:nth-of-type(-n+2){
  font-size:1.5rem;
  margin-bottom:15px;
  color:#40c496;
  font-weight: 600;
  padding: 0 20px;
}
@media (max-width: 767px){
  .member_info_text p:nth-of-type(-n+2){
    font-size: 1.1rem;
  }
}
/*本文*/
.member_info_text p:nth-of-type(3){
  line-height: 1.5;
  padding: 0 20px;
  margin-bottom:20px;
}
@media (max-width: 767px){
  .member_info_text p:nth-of-type(3){
    font-size: 0.9rem;
  }
}

.member_info_text p:nth-of-type(4){
  margin-bottom:50px;
}
.member_info_text img{
  width:100%;
  margin:20px auto 5px auto;
  border:solid 3px #40c496;
  
}
/*---------------------
プラスメニュー
-----------------------*/
.puls_memu{
  display:flex;
  width:100%;
  justify-content: space-between;
}
@media (max-width: 767px){
  .puls_memu{
    flex-direction: column;
  }
}
.puls_memu img{
  display: block;
  margin-bottom:10px;
}
.puls_memu_child{
  width:32%;
  min-width: 0;
}
@media (max-width: 767px){
  .puls_memu_child{
    width:100%;
  }
}


/*ようこそパーフェクトミールへ*/
.member_title_mes{
  line-height: 2;
  font-weight: 700;
  font-size:20px;
  color:#272727;
  max-width:600px;
  margin:30px auto 100px;
  text-align: center;
}
@media (max-width: 767px){
  .member_title_mes{
    line-height: 1.5;
    font-size:1rem;
    margin:0 auto 50px;
  }
}
/*↓まずはこちらを御覧ください↓*/
.attention{
  text-align: center;
  margin:0 auto 10px;
}

/*初心者の方おすすめ5日間のエクササイズ*/
.member_topmovie_coment{
  width:100%;
  
}
/*発売記念無料公開中動画*/
.rimited_movie_title{
  padding:15px;
  line-height: 1.4;
  font-size:1.2rem;
  text-align: center;
  background-color: #f8b62d;
  color:white;
  margin-bottom:20px;
  width:100%;
}

.member_topmovie_coment h2{
/*  margin-bottom:5px;*/
  font-size:20px;
  background-color: #40c496;
  padding:15px;
  color:white;
  text-align: center;
}
.member_topm_com_cont{
  display:flex;
}
@media (max-width: 767px){
  .member_topm_com_cont{
    flex-wrap: wrap;
  }
  
}
.member_topm_com_cont_child{
 width:100%;
  min-height:450px;
  position:relative;
}
@media (max-width: 500px){
  .member_topm_com_cont_child{
    min-height:350px;
  }
}
.member_ohno_logo{
  content:"";
  position:absolute;
  height:80px;
  padding:10px;
  background-color: rgba(255, 255, 255, 0.87);
  z-index: 100;
  bottom:20px;
  width:100%;
  background-image: url("../img/logo_ohno.png");
  background-size:80%;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (min-width:500px) and  (max-width: 767px){
  .member_ohno_logo{
    height:100px;
    background-size:60%;
  }
}



.member_ohno_imgtext{
  content:"";
  position:absolute;
  z-index: 100;
  top:20px;
  left:20px;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
  
  font-weight: 600;
  font-size:1.8rem;
  color:#ffffff;
  padding:15px 10px;
  background-color: #40c496;
letter-spacing:3px;
}
.member_ohno_imgtext span{
  font-size:16px;
  display: block;
  background-color: white;
  padding:5px;
  color:#40c496;
}
.pgright{
  left:initial;
  right:20px;
  font-size:1em;
  padding:10px ;
}

.ohno_comentimg{
  background-image: url("../img/ohno_comentimg.jpg");
  background-size: cover;
  background-position: top center;
}
.ohno_comentimge_effi{
  background-image: url("../img/ohno_comentimg_effi.jpg");
  background-size: cover;
  background-position: top center;
}


.member_topmovie_coment h3{
  padding:20px 20px 10px 20px;
    font-size:1.2rem;
}

.member_topmovie_coment p{
  padding:10px 20px;
  line-height: 1.53;
  font-size: 0.9rem
}



.member_top_movie_list{
 display:flex;
justify-content: space-between;
  flex-wrap: wrap;
}

/*画像全体*/
.member_top_movie{
  width:90%;
  margin-left:20px;
  position:relative;
  overflow: hidden;
/*  margin-bottom:50px;*/
}
.member_top_movie_mini{
  width:100%;
  margin-bottom:10px;
  position:relative;
  background-position:center;
  background-size:cover;
  overflow: hidden;
}
/*基本設定*/
.member_gif{
  width:100%;
  padding-top:66.8%;
  background-size:cover;
  background-position:center;
}
/*トップ画像*/
.member_gifA{background-image:url("../img/ohno_newdiet2.jpg");}
.member_top_movie:hover .member_gifA{background-image:url("../img/ohno_newdiet_.gif");}

/*エクササイズコンテンツ用画像-------------------------------*/
/*
.mem_gif_ohno1{background-image:url("../img/ohno_movie01.jpg");}
.mem_gif_ohno1:hover{
  background-image:url("../img/ohno_movie01.gif");}
*/

/*大野DOJYO----------------------------*/
.mem_gif_ohno0{background-image:url("../img/ohno_movie0.jpg");}

/*大野DOJYO----------------------------*/
.mem_gif_ohno1{background-image:url("../img/ohno_newdiet2.jpg");}
.mem_gif_ohno1:hover{
  background-image:url("../img/ohno_newdiet_.gif");}

.mem_gif_ohno2{background-image:url("../img/ohno_movie02.jpg");}
.mem_gif_ohno2:hover{
  background-image:url("../img/ohno_movie02.gif");}

.mem_gif_ohno3{background-image:url("../img/ohno_movie03.jpg");}
.mem_gif_ohno3:hover{
  background-image:url("../img/ohno_movie03.gif");}

.mem_gif_ohno4{background-image:url("../img/ohno_movie04.jpg");}
.mem_gif_ohno4:hover{
  background-image:url("../img/ohno_movie04.gif");}

.mem_gif_ohno5{background-image:url("../img/ohno_movie05.jpg");}
.mem_gif_ohno5:hover{
  background-image:url("../img/ohno_movie05.gif");}

.mem_gif_ohno6{background-image:url("../img/ohno_movie06.jpg");}
.mem_gif_ohno6:hover{
  background-image:url("../img/ohno_movie06.gif");}


/*スタイル----------------------------*/
.mem_gif_style1{background-image:url("../img/style_movie01.jpg");}
.mem_gif_style1:hover{
  background-image:url("../img/style_movie01.gif");}

.mem_gif_style2{background-image:url("../img/style_movie02.jpg");}
.mem_gif_style2:hover{
  background-image:url("../img/style_movie02.gif");}

.mem_gif_style3{background-image:url("../img/style_movie03.jpg");}
.mem_gif_style3:hover{
  background-image:url("../img/style_movie03.gif");}

.mem_gif_style4{background-image:url("../img/style_movie04.jpg");}
.mem_gif_style4:hover{
  background-image:url("../img/style_movie04.gif");}

.mem_gif_style5{background-image:url("../img/style_movie05.jpg");}
.mem_gif_style5:hover{
  background-image:url("../img/style_movie05.gif");}

.mem_gif_style6{background-image:url("../img/style_movie06.jpg");}
.mem_gif_style6:hover{
  background-image:url("../img/style_movie06.gif");}

/*チームワン----------------------------*/
.mem_gif_team_one1{background-image:url("../img/team_one_movie01.jpg");}
.mem_gif_team_one1:hover{
  background-image:url("../img/team_one_movie01.gif");}

.mem_gif_team_one2{background-image:url("../img/team_one_movie02.jpg");}
.mem_gif_team_one2:hover{
  background-image:url("../img/team_one_movie02.gif");}

.mem_gif_team_one3{background-image:url("../img/team_one_movie03.jpg");}
.mem_gif_team_one3:hover{
  background-image:url("../img/team_one_movie03.gif");}

.mem_gif_team_one4{background-image:url("../img/team_one_movie04.jpg");}
.mem_gif_team_one4:hover{
  background-image:url("../img/team_one_movie04.gif");}

/*JHCA----------------------------*/
.mem_pokkori{background-image:url("../img/pokkori.jpg");}
.mem_pokkori:hover{
  background-image:url("../img/pokkori.gif");}



@media (max-width: 767px){
  .member_top_movie{
    width:100%;
    overflow: hidden;
  }
}
.movie_text,.movie_text_hide{
  position: absolute;
  content:"";
  width:100%;
  z-index: 100;
  bottom:15px;
  transition: 0.5s;
}
.movie_text{
  background-color:rgba(255, 255, 255, 0.9);
}
.movie_text p{
  text-align: center;
  font-weight: 600;
  font-size: 1.rem;
}

.movie_text_hide{
  background-color:rgba(255, 255, 255, 0.9);
}
.movie_text_hide p{
  text-align: center;
  font-weight: 600;
  font-size: 1.rem;
  background-color:#40c496;
}



/*説明動画*/
.member_top_movie:hover .movie_text{
  left:100%;
  opacity:30;
  color:#000000;
}
.member_top_movie:hover .movie_text_hide{
  left:0;
  opacity:100;
  color:white;
}


/*左上のテキストMOVIE*/
.text_movie,.text_movie_mini{
  position: absolute;
  top:0px;
  left:0px;
  font-weight: 700;
  color:white;
  opacity:0.7;
}
.text_movie{ font-size:2.5rem !important;}
.text_movie_mini{
  font-size:1.5rem !important;

  left:0;
}
@media (max-width: 767px){
  .text_movie{ font-size:1.8rem !important;}
  .text_movie_mini{
    font-size:2rem !important;

  }
}



.movie_text{
  left:0;
}

/*開始位置 隠れている*/
.movie_text_hide{
  left:-100%;
  opacity:0;
}
/*ミニは汎用素材に変更*/
.movie_text_mini{
  position: absolute;
  content:"";
  width:100%;
  height:20%;
  z-index: 100;
  transition: 0.5s;
  padding:10px 10px 10px 20px;
  font-weight: 500;
  display:flex;
  align-items: center;
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1000px){
  .movie_text_mini{
    font-size:0.8rem;
  }
}
@media (max-width: 767px){
  .movie_text_mini{
font-size:4vw;
  }
}
.show_text{
  bottom:0;
  background-color:rgb(216, 195, 127);
  color:white;
}
.bgc_gray{background-color:rgb(247, 247, 247);}
.bgc_deepgray{background-color:rgb(198, 198, 198);}
.bgc_pink{background-color:rgb(255, 68, 132);}
.bgc_gold{background-color:rgb(216, 195, 127);}
.bgc_green{  background-color:#40c496;}
.bgc_red{background-color:rgb(255, 70, 46);}

.color_green{color:#40c496;}

.color_white{color: white !important;}

.hide_text{
  bottom:-20%;
  background-color:rgb(0, 0, 0);
 
}
/*エクササイズコンテンツ*/
.member_top_movie_mini:hover .show_text{
  bottom:-20%;
  opacity:0;
}
.member_top_movie_mini:hover .hide_text{
  bottom:0;
  opacity:100;
}