@charset "UTF-8";

.news-explanation {
  margin-top: 1rem;
  padding: 1rem 0;
  border-top: 1px solid #cccccc;
}

/*フリーエリア*/

.sample-info-box {
  padding: 10px;
  overflow: hidden;
  background: #fff;
  height: 70px;
}

.sample-info-box .content-explanation {
  display: none;
}

.sample-info-box h3 {
  font-size: 14px!important;
  margin-bottom: .2rem;
}

.sample-info-box h3 a {
  font-size: 14px!important;
  color: #333;
}

.sample-info-box span{
  font-weight:normal;
  font-size: 12px!important;
}

.txt-description{
  padding-top:0px!important;
}

.about-wrap2 {
  padding: 20px 0 40px 0!important;
  width: 1070px;
  text-align: center;
}

.about-wrap2 .ttl-md {
  padding: 10px 0;
  font-size: 22px;
  margin-bottom: 30px;
  color: #71519f;
  font-weight: normal;
  border-top: 2px solid #71519f;
  border-bottom: 2px solid #71519f;
}

.about-wrap2 .ttl-md2 {
  widht:100%;
  padding: 15px;
  font-size: 22px;
  margin: 30px 0;
  font-weight: normal;
  background-color:#cccccc;
  text-align:left;
  color: #000000;
}

.pay_detail{
  width:100%;
  margin:20px;
}

.pay_detail h3{
  width:100%;
  margin:40px 0 15px 0;
  padding: 10px;
  font-size: 22px;
  color: #000;
  font-weight: bold;
  border-bottom: 1px solid #000;
}

.pay_detail h4{
  font-weight: bold;
  margin:0 0 0 10px;
}

.pay_detail p{
  margin:0 0 20px 10px;
}

.topttl-md{
  margin-bottom:20px;
  padding: 10px 0;
  font-size: 24px;
  margin-top: -20px;
  color: #71519f;
  font-weight: bold;
  border-top: 2px solid #71519f;
  border-bottom: 2px solid #71519f;
}

.btn-vll-bg  {
    padding: 25px;
    background: #888888;
    color: #fff !important;
    font-size: 18px;
    display: inline-block;
}

.btn-vll-bg2  {
    padding: 25px;
    background: #bbbbbb;
    color: #fff !important;
    font-size: 18px;
    display: inline-block;
}

.about-wrap2 .ttl-can h2{
  padding: 10px 0;
  font-size: 22px;
  margin-bottom: 30px;
  color: #f4b183;
  font-weight: normal;
  border-top: 2px solid #f4b183;
  border-bottom: 2px solid #f4b183;
}

.col-md-4 h3 img{
  width:247px;
  height:60px;
}

.w_pallet_list{
  margin-bottom:20px;
  width:290px;
}

.pay_list{
  margin:0 5px 20px 5px ;
  padding:30px 20px 10px 20px;
  width:340px;
  height:340px;
  text-align:center;
  background-color:#f7f7f7;
}

.pay_list img{
  text-align:center;
}

.rm40{
  margin-right:40px;
}

.rm20{
  margin-right:20px;
}

.rm25{
  margin-right:25px;
}

.rm30{
  margin-right:30px;
}

.lm20{
  margin-left:20px;
}

.lm10{
  margin-left:10px;
}

.w_pallet img{
  width:290px;

}

.btn-wrap {
  margin: 0 auto;
  width: 600px;
  text-align: center;
}

.btn-wrap .btn-bk{
  width:49%;
}

.cp_attention{
  width:550px;
  margin:30px auto;
}

.cp_attention dt{
  font-size: 18px !important;
  text-align: left;
  color: #71519f;
}

.cp_attention dd{
  font-size: 18px !important;
  text-align: left;
}

.about-wrap2 p {
  color: #333;
  line-height: 1.6;
  margin-botton:20px;
}

.about-wrap2 > a {
  margin-top: 30px;
}

.about-wrap2 .btn-wrap {
  margin-top: 60px;
}

.btn-wrap3 {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
/*  justify-content: space-around;*/
  justify-content: center;
}

.about-wrap2 dl{
  margin: -15px 0 0 0 ;

}

.about-wrap2 dt{
  margin:  0;
}

.about-wrap2 dd{
  margin: 0;
  font-size:80%;
  margin-left:15px;
  line-height:140%;

}

.about-wrap2 .step{
  background-color:#999;
  color:#fff;
  margin-bottom:10px;
  padding:10px;
}

.step_line{
  border: 1px solid #999;
  width:320px;
  height:610px;
  margin-bottom:30px;
    text-align:center;
}

.step_line_txt p{
  margin-top:50px;
}

.step_img{
  text-align:center;
  width:246px;
  margin:0 auto 10px auto;
}


.step_bg{
   margin-top:8px;
   padding:10px;
   background-color:#fff;
   color:#000;
   border-radius: 10px; 
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}

/*こんな方にオススメ*/

.osusume {
  position:relative; 
  border: 1px solid #cccccc;
  height:260px;
}
.osusume h3{
  background-color:#71519f;
  color:#ffffff;
  text-align:left;
  padding:10px;
}
.icon01{
 position:absolute;
 top: -10px;
 right:0;
}

.icon01 img{
  widht:94px;
}
.icon02{
 position:absolute;
 top: -10px;
 right:0;
}

.icon02 img{
  widht:194px;
}

.osusume ul{
  margin:30px 0 20px 20px;
}

.osusume li{
  margin:20px;
  list-style-type: disc;
  text-align:left;
  line-height:7px;
  font-size: 90%;
}

/*受講のながれ*/
.step_txt{
  margin: 60px 0;
}


/*詳細ページ*/

.content-explanation{
  margin: 1rem 0;
}

.delivery_date{
  background-color: #2c3e50;
  color: #ffffff;
  font-size: 18px;
}

.chat_tit{
  font-weight:bold;
  font-size:22px;
  margin:20px 0 10px 0;
}

.questionnaire{
  font-weight:bold;
  font-size:18px;
  margin:20px 0 10px 0;
}


.content-explanation .seminar_tit{
  font-weight:bold;
  font-size:20px;
  padding:0 0 10px 0;
  margin:0 0 10px 0;
}

.content-explanation p{
  font-size:14px;
  color:#61616;
  margin:0 0 20px 0;
}

.content-explanation .archive{
  font-size:16px;
  color:#c0392b;
}

.content-explanation .live_delivery{
  font-size:14px;
  color:#616161;
}

.content-explanation .deadline{
  font-size:10px;
  color:#c0392b;
}


.content-explanation .logo{
  width:150px;
  height:auto;
  padding:20px 0;
  text-align:left;
}
.logo2 img{
  width:150px;
  height:auto;
  padding:0 20px 10px 0;
}


.logo2 li {
list-style:none;/*デフォルトの指定を解除*/
display:inline-block;/*liをインラインブロック要素に*/
padding:10px 0 20px 0; /*縦の余白を指定*/
width:150px;/*幅を指定*/
height:150px;/*高さを指定*/
vertical-align:middle;/*縦方向を中央揃え*/
text-align:center;/*横方向を中央揃え*/
}

.content-explanation .photo{
  width:250px;
  height:auto;
  text-align:right;
}

.content-explanation .shop_name{
  font-weight:bold;
  font-size:22px;
}

.content-explanation .main_txt{
  clear:both;
  font-weight:normal;
  font-size:16px;
  line-height:160%;
}

.content-explanation .sns{
  margin:15px 0;
  line-height:160%;
  font-size:16px;
}

.content-explanation .sns dt{
  font-weight:bold;
}

.content-explanation .sns dd{
  font-weight:normal;
  margin-left:10px;
}

.content-explanation .thumbnail_img img{

}

.content-explanation .point{
margin:15px 0;
  line-height:160%;
}


.content-explanation .point dt{
  font-weight:normal;
  color:#fff;
  margin:5px 5px 15px 5px;
}

.content-explanation .point dt span{
  background-color:#7030a0;
  margin:5px 0;
  padding:10px;
}

.point_dt{
  background-color:#7030a0;
  margin:5px 0;
  padding:10px;
}

.content-explanation .point dd{
  font-weight:normal;
  margin:10px 10px 20px 10px;
}



.box-content {

}

.content-explanation{

}

/*カテゴリボタン*/
.catelink {
  padding: 4px 5px;
  border: 1px solid #9178b4;
  font-size: 12px;
  color: #ffffff;
  background-color:#9178b4;
  display: inline-block;
}

.catelink a{
  color: #ffffff!important;
}

a.catelink:visited,
a.catelink:focus {
  color: #ffffff !important;
}

.bg-wh .tag-price {
  font-size: 14px;
}


.joken{
  margin:10px 0 30px 0;
  text-align:left;
}

.joken dl dt{
  margin:20px 0 5px 0;
  color:#674498;
}

.joken dl dd{
  margin:5px 0;
}

.txt_left{
  text-align:left;
}

.btn-wide{
  width:350px;
}

.btn-wide02{
  width:500px;
}

.btn-wide03{
  width:600px;
}

.btn-wide04{
  width:200px;
}

.btn-pp_t {
  width:100%;
  padding: 20px 40px;
  background: #674498;
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  line-height:160%;;
  display: inline-block;
}

.btn-pp_t + .btn-pp_t {
/*  margin-left: 70px;*/
}

.btn-pp_t span {
  font-size: 24px;
}

.btn-pp_t:hover,
a.btn-pp_t:visited,
a.btn-pp_t:focus {
  color: #fff;
}

.btn-pp {
  padding: 30px 40px;
  background: #674498;
  color: #fff;
  font-size: 24px;
  letter-spacing: 2px;
  display: inline-block;
}

.btn-pp + .btn-pp {
/*  margin-left: 70px;*/
}

.btn-pp span {
  font-size: 24px;
}

.btn-pp:hover,
a.btn-pp:visited,
a.btn-pp:focus {
  color: #fff;
}

/*TOP動画コンテンツラインナップ*/

.movielist{
  overflow: hidden;
  padding:30px 0 0 0 ;
  height:200px;
}

.movielist ul li{
  display: table-cell;

}

.movielist_sub img{
 width:132px;
 height:85px;
}

.movielist_sub video{
 width:150px;
 height:80px;
 margin-left:-17px; top:-100px;
}

.movielist_main video{
 width:232px;
 top:-150px;
}

.movielist_main img{
 width:240px;
}

.movie_frame{
position: relative; z-index: 2;
}

.movie{
position: relative; z-index: 1; 
}


/* ランダム表示 */
.item_wrapper {
  list-style-type: none;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 1vw 1vw;
}

.item {
  width: calc(100% / 3 - 2 * 1vw);
  margin: 0;
}

.random_margin{
  margin-left:15px;
}

@media screen and (min-width: 425px) {
  .item {
    width: calc(100% / 4 - 2 * 1vw);
  }
}

@media screen and (min-width: 980px) {
  .item {
    width: calc(100% / 5 - 2 * 1vw);
  }
}

.item_wrapper img {
  vertical-align: bottom;
}

.trim-image-to-circle {
    background-image: url("summerriver.jpg");  /* 表示する画像 */
    width:  220px;       /* ※縦横を同値に */
    height: 220px;       /* ※縦横を同値に */
    border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
    background-position: left top;  /* 横長画像の左上を基準に表示 */
    display: inline-block;          /* 複数の画像を横に並べたい場合 */
}

.t_logo{
    display: flex;
    justify-content: center;
}

.t_logo img{
   width:60px;
   text-align:center;
   font-size:10px;
   margin:5px 0;
   image-rendering: -webkit-optimize-contrast;
}

.t_name{
   text-align:center;
   margin:0 0 40px 0;
}

.t_name span{
   font-size:8px;
   margin:5px 0 0 3px;
}

/* 月定額見放題プラン 初月無料トライアル */
.firstmonth_free{
  text-align:center;
}

.firstmonth_free img{
  width:850px;
}

.btn-vl-bg02t {
    padding: 10px;
    background: #674498;
    color: #fff !important;
    font-size: 14px;
    display: inline-block;
    letter-spacing:3px;
    text-align:center;
}

.btn-vl-bg02t strong{
  font-weight:bold;
  font-size:22px;
  padding:5px;
}
.btn-vl-bg02 {
    padding: 20px 35px;
    background: #674498;
    color: #fff !important;
    font-size: 20px;
    display: inline-block;
    letter-spacing:3px;
}

.btn-vl-bg02 strong{
  font-weight:bold;
  font-size:40px;
  padding:5px;
}

.btn-vl-bg02 span{
  font-size:14px !important;
  color:#f96649;
  line-height:130%!important;
  display:block;
}

.credit{
  padding-top:10px;
}

.btn-vl-bg03 {
    margin:0 0 50px 0;
    padding: 30px 20px;
    background: #674498;
    color: #fff !important;
    font-size: 20px;
    display: inline-block;
    letter-spacing:3px;
}

.btn-vl-bg03 strong{
  font-weight:bold;
  font-size:40px;
  padding:5px;
}

.btn-vl-bg03 span{
  font-size:14px !important;
  color:#f96649;
  line-height:130%!important;
  display:block;
}

.btn-vl-bg04 {
    margin:0 0 50px 0;
    padding: 10px 0;
    background: #ccc;
    color: #fff !important;
    font-size: 14px;
    display: inline-block;
    letter-spacing:3px;
}

.btn-vl-bg_member01 {
    margin:0 0 30px 0;
    padding: 20px 50px;
    background: #fff;
    color: #674498 !important;
    font-size: 24px;
    display: inline-block;
    letter-spacing:3px;
    border: 3px solid #674498;
}

.btn-vl-bg_member02 {
    margin:0 0 50px 0;
    padding: 20px 50px;
    background: #674498;
    color: #fff !important;
    font-size: 24px;
    display: inline-block;
    letter-spacing:3px;
    border: 3px solid #674498;
}

ul.asterisk li {
  list-style-type: none;
  text-indent: -1em;
}
ul.asterisk li:before {
  display: inline;
  content: "※";
}

.caution01{
  width:850px;
  margin:20px auto 0 auto;
  padding:40px;
  text-align:left;
  font-size:22px;
  color:#604a95;
  font-weight:bold;
  font-family: "Helvetica Neue",    Arial,    "Hiragino Kaku Gothic ProN",    "Hiragino Sans",sans-serif;
  line-height:160%;
}

.caution02{
  width:850px;
  margin:0 auto 20px auto;
  padding:20px 30px;
  text-align:left;
  border: 1px solid #674498;
}

.caution02 p {
 margin-left:1em;
 text-indent:-1em;
}

.caution03{
  width:850px;
  margin:20px auto 0 auto;
  padding:50px;
  text-align:left;
  font-size:18px;
  font-family: "Helvetica Neue",    Arial,    "Hiragino Kaku Gothic ProN",    "Hiragino Sans",sans-serif;
  line-height:160%;
}

.freeplan_tit{
  font-size:24px;
  color:#674498;
  padding:0 0 30px 0;
  font-family: "Helvetica Neue",    Arial,    "Hiragino Kaku Gothic ProN",    "Hiragino Sans",sans-serif;
  line-height:160%;
  letter-spacing:3px;
  text-align:center;
}

.freeplan_tit strong{
  line-height:150%;
  font-size:50px;
  font-weight:bold;
  color:#674498;
  letter-spacing:3px;
}

.freeplan_tit span{
  font-size:18px;
  line-height:130%;
}

.free_hosoku{
  width:800px;
  margin:0 auto;
  padding:30px 0;
  font-size:20px;
  color:#000000;
  font-family: "Helvetica Neue",    Arial,    "Hiragino Kaku Gothic ProN",    "Hiragino Sans",sans-serif;
  line-height:160%;
  text-align:left;
}

.free_hosoku strong{
  font-size:28px;
  font-weight:bold;
  color:#674498;
}

.kome {
      vertical-align: super;
      font-size: 2rem;
}

.btn_cancel{
}
.cancelimg p{
  width:800px;
  margin:10px auto;
  text-align:left;
}

.cancelimg img{
  margin:20px 0;
  width:800px;
  border: 1px solid #674498;
}

.text-danger2{
color: #dc3545 !important;
margin:5px 0 0 0 ;
}

.large {
    font-size: 120%;
    font-weight: 400;
}

/* 【月額定額プラン(見放題)】のご契約  カテゴリ一覧　*/
.register li{
   display: flex;
}

.register{
    width:450px;
    margin:20px 40px;
    padding:20px;
    border: 1px solid #cccccc;
}

/* 【フッター】SNSリンク　*/
.btn-wrap-sns{
   position: relative;
   overflow: hidden;
}

.btn-wrap-sns ul li {
        display: inline-block;
        margin: 0 40px 80px 40px;
                text-align:center;
}

.btn-wrap-sns ul li img{
        width:150px;
        text-align:center;
}

.bextit{
        text-align:center;
        color:#674498;
        font-size:16px;
}

.line-tit{
        text-align:center;
        font-weight:bold;
        color:#06c755;
        font-size:18px;
}
.insta-tit{
        text-align:center;
        font-weight:bold;
        color:#bd09ab;
        font-size:18px;
}

.ttl-md2 {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  font-size:20px;
  margin:0 0 40px 0;
}
.ttl-md2:before, .ttl-md2:after {
  border-top: 1px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
.ttl-md2:before {
  margin-right: 1em; /* 文字の右隣 */
}
.ttl-md2:after {
  margin-left: 1em; /* 文字の左隣 */
}




/*新規無料会員登録キャンペーン*/

.newmen_cp{
  width:100%;
  text-align:center;
  padding:20px;
} 

.btn_cp{
  width:100%;
  text-align:center;
  padding:30px;
}

.btn_cp img{
  width:450px;
}

.newmen_cp img{
  width:195px;
}

.maintxt_cp{
  width:780px;
  margin:20px auto;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    font-size:120%;
}

.textred_cp{
  color:#ff0000;
  font-weight:bold;
}

.centertxt_cp{
  width:100%;
  text-align:center;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    font-size:90%;
    padding:0 0 50px 0;
}

.cp_img{
  text-align:center;
  padding:40px 0 0 5px 0;
}

.ttl_img_cp{
  text-align:center;
}

.cp_txt{
  text-align:center;
  font-size:110%;
  font-weight:bold;
  padding:20px;
}

.att_txt_cp{
  width:800px;
  margin:20px auto;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.att_txt_cp ul{
  margin:0 0 20px 0;
}

.att_txt_cp li{
  list-style: square;
    margin:0 0 0 30px;
}

.att_txt_cp2 {
	padding-left:1em;
	text-indent:-1em;
    margin:20px 0 0 0;
}

/*新規無料会員登録キャンペーン*/
.agency_top_txt{
  text-align:center;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    font-size:160%;
    font-weight:bold;
    margin:20px 0 20px 0!important;
}

.agency_txt{
  text-align:center;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    font-size:120%;
    font-weight:bold;
    margin:20px 0 20px 0!important;
}

.agency_txt_s{
  text-align:center;
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    margin:20px 0 20px 0!important;
}

.agency_mds{
    margin:50px 0 20px 0;
    padding:15px;
    width:100%;
    color:#ffffff;
    background-color:#674498;
    text-align:center;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    font-size:120%;
    font-weight:bold;
}

.studio{
 float:none;
 width:1000px;
 margin:20px auto;
}

.studio img{
     width:90%;
}

.studio li{
     display: inline-block;
     text-align:center;
}

.agency_btn{
    width:100%;
    margin:20px 0;
    text-align:center;
}

.agency_btn img{
    width:60%;
}

.agency_kiyaku{
    font-size:90%;
}


/*検索*/
.box-search{
    margin:0 auto;
    padding:0 30px 30px 40px;
    width:450px;
    text-align:center;
    background-color: #ededed;
}
.box-search .btn{
   margin:0 0 0 10px !important;
}
.box-search .btn-theme{
    background-color: #9178b4!important;
}

.box-search .ttl-md{
     text-align:center;
     font-size:100%;
}

.box-search_01{
    display:inline-block;
    vertical-align: top;
    margin:0;
    text-align:center;
}
.box-search_01_m{
    margin:0 0 0 0;
    padding:0 30px 30px 40px;
    background-color: #ededed;
}
.box-search_01 img{
    width:299px;
    margin:0 0;
    background-color:#fff;
}
.box-search_01 .btn{
   margin:0 0 0 10px !important;
}
.box-search_01 .btn-theme{
    background-color: #9178b4;
}

.box-search_01 .ttl-md{
     text-align:center;
     font-size:100%;
}

/*フリーエリア 美容学生プラン専用トップページカテゴリ一覧*/
.college_top_category{
overflow:hidden;
width:980px;
height:320px;
margin:0 auto;
background-color:#ededed;
padding:0 0 0 10px;
}

.college_top_category>div{
float:left;
width:33%;
} 

.college_top_category img{
width:320px;
height:320px;
padding:5px 0 5px 5px;
}

/*フリーページ 美容学生プラン専用recordingカテゴリ一覧*/
.recording-wrap{
  display: flex;
  margin: 0 auto;
  max-width: 1024px;
  width: 100%;
}
.recording-box {
  height: auto;
  margin: .5%;
  width: 35%;
}
.recording-box a {
  background-color: #fff;
  color: #222;
  display: block;
  text-decoration: none;
}
.recording-box img {
  display: block;
  height: auto;
  width: 100%;
  padding:10px;
}



/*グループ追加　ログイン画面01*/
.box-login01{
    height: 100%;
    background-color: #ededed;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.box-login01 .ttl-lg{
     text-align:center;
     padding:20px;
}


.box-login01 .form-group{
     padding:20px 40px;
}
.btn-area-center, .btn-area-right{
     padding:20px 40px;
}

.container{
     padding:15px;
}
.login_area form{
     padding:20px;

}

.login_img{
   width:510px;
   margin:0 auto;
}
.login_img img{
   width:510px;
   height:200px;
}

/* 5 Columns */
.col-15, .col-sm-15, .col-md-15, .col-lg-15 {
	position: relative;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}
@media (min-width: 768px) {
.col-sm-15 {
	width: 20%;
	flex: 0 0 20%;
}
}
@media (min-width: 992px) {
.col-md-15 {
	width: 20%;
	flex: 0 0 20%;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
	width: 20%;
	flex: 0 0 20%;
}
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 1024px) {
.pc { display: none !important; }
.sp { display: block !important; }
}