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

/*全て共通：hideエリアをはじめは非表示*/
.hide-area-01,.hide-area-02{
	display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
.modaal-content-container{
  min-width: 300px;
  height: auto;
  text-align: center;
    color: #fff;
    background-color: #849988;
  padding: 20px;
}
.modaal-content-container h2{
  font-size: 2.0rem;
  letter-spacing: 2px;
  font-weight: 400;
}
.modaal-content-container h2 span{
  font-size: 1.2rem;
  display: block;
  padding: 10px 0;
}
.hide-p{
  margin: 0 auto;
  padding: 20px 0 ;
  font-size: 1.4rem;
}
.hide-ul-1 img{
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 22px 8px;
}
.hide-ul-1 ol{
  display: flex;
  /*padding: 20px 0;*/
}
.hide-p-flex{
  display: block;
  text-align: left;
  padding: 0 10px 0 5px;
}
.hide-p-title{
  border-bottom: solid 1px #fff;
  font-size: 1.6rem;
  padding-bottom: 4px;
}
.hide-p-discription{
  font-size: 1.4rem;
  line-height: 24px;
  padding:8px 14px;
}


/*プレミアムコース*/
.br-pc{
  display: none;
}


.hide-area-02{
  min-width: 300px;
}
.hide-area-02-flex{
  display: flex;
  max-width: 500px;
}
.hide-area-02-flex img{
  width: 120px;
  height: 100px;
  padding: 10px 6px 0;
}
.hide-area-02_ol{
  background-color: #dee6df;
  margin: 8px auto 16px;
  padding: 10px;
  max-width: 500px;
  
}
.hide-area-02_title{
  color: #333333;
  font-size: 1.6rem;
  
}
.hide-area-02_title{
  border-bottom: solid 1px #333;
  padding: 6px;
}
.hide-area-02_discription{
  color: #333333;
  padding: 8px;
    text-align: left;
  font-size: 1.3rem;
}









@media screen and (min-width:750px){
  
  .modaal-content-container{
  min-width: 600px;
  padding: 20px;
}
.modaal-content-container h2{
  font-size: 3.0rem;
}
.modaal-content-container h2 span{
  font-size: 1.4rem;
}
.hide-p{
  margin: 0 auto;
  max-width: 620px;
  padding: 20px 0 ;
  font-size: 1.4rem;
}
  .hide-p-flex {
    width: 70%;}
  
.hide-ul-1 img{
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin: 10px 8px;
}
.hide-ul-1 ol{
  padding: 20px 0;
}

.hide-p-title{
  border-bottom: solid 1px #fff;
  font-size: 2rem;
  padding-bottom: 4px;
}
.hide-p-discription{
  font-size: 1.6rem;
  line-height: 24px;
}
  
  
  
  
/*PC*/

@media screen and (min-width:960px){
  
   .modaal-content-container{
  min-width: 850px;
  padding: 20px;
}
  .hide-ol-wrapper01,.hide-ol-wrapper02{
    display: flex;
  }
.modaal-content-container h2{
  font-size: 3.0rem;
}
.modaal-content-container h2 span{
  font-size: 1.4rem;
}
.hide-p{
  margin: 0 auto;
  max-width: 900px;
  padding: 20px 0 ;
  font-size: 1.4rem;
}
.hide-ul-1 img{
  border-radius: 50%;
  width: 120px;
  height: 120px;
  margin: 10px 8px;
}
.hide-ul-1 ol{
  padding: 20px 0;
  width: 50%;
}

.hide-p-title{
  border-bottom: solid 1px #fff;
  font-size: 1.8rem;
  padding-bottom: 4px;
}
.hide-p-discription{
  font-size: 1.6rem;
  line-height: 24px;
}
  
  /*プレミアムコース*/
.br-pc{
  display: block;
}

.hide-area-02-flex{
  display: block;
  max-width: 900px;
}
  .hide-area-02_flex{
    display: flex;
  }
.hide-area-02-flex img{
  width: 200px;
  height: 150px;
  padding: 10px 6px 0;
}
.hide-area-02_ol{
  background-color: #dee6df;
  margin: 8px 16px;
  padding: 10px;
  width: 30%;
  max-width: 300px;
  
}
.hide-area-02_title{
  color: #333333;
  font-size: 1.6rem;
  
}
.hide-area-02_title{
  border-bottom: solid 1px #333;
  padding: 6px;
}
.hide-area-02_discription{
  color: #333333;
  padding: 8px;
    text-align: left;
  font-size: 1.3rem;
}
  }
  
  /*infoエリアをはじめは非表示*/
#info{
	display: none;
}

/*モーダルの横幅を変更したい場合*/
/*.modaal-container{
    max-width: 600px;
}*/

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}