/* Override CSS START */
.justify_content_center .btn_outline_gray { min-width: 180px; }
.page_introduction .title { font-weight: normal; }
.page_introduction_center { margin-bottom: 50px; }
.page_introduction_center .title {
  font-size: 60px;
  font-weight: 500;
}
.page_introduction_center .description {
  font-size: 15px;
  font-weight: 500;
}
.btnarea_center{
  margin: 40px 0 0;
}
@media screen and (max-width: 768px){
  .page_introduction_center .title {
    font-size: 54px;
  }
}
@media screen and (max-width: 576px){
  .page_introduction_center .title {
    font-size: 36px;
  }
  .page_introduction_center { margin-bottom: 40px; }
  .btnarea_center{
    margin: 30px 0 0;
  }
}

/* Override CSS END */

/* Page common CSS START */
.section_container { padding: 65px 15px; }

@media screen and (max-width: 768px){
  .section_container { padding: 54px 15px; }
}
@media screen and (max-width: 576px){
  .section_container { padding: 40px 15px; }
}
/* Page common CSS END */

/* Japan Map START */
.japan_map {
  top: 0;
  margin: 0 auto 0 0;
}
@media screen and (max-width: 1080px){
  .japan_map{
    left: 0;
  }
}
@media screen and (max-width: 992px){
  .japan_map{
    left: 100px;
  }
}
@media screen and (max-width: 768px){
  .japan_map{
    left: 0;
  }
}
@media screen and (max-width: 576px){
  .japan_map{
    left: -40px;
  }
}
@media screen and (max-width: 480px){
  .japan_map{
    left: 0;
    top: 20px;
    flex: 0 0 300px;
    width: 300px;
    margin: 0 auto 20px;
  }
}


/* Japan Map END */

/* Location Picker START */
.bg_sub_banner {
  background: url('../../images/salon/bg_flower.jpg') top center no-repeat;
  background-size: cover;
  padding: 44px 20px 55px 20px;
}
.location_box {
  background: #000;
  max-width: 1280px;
  margin: -25px auto 0;
  color: #FFF;
  padding: 45px;
  box-shadow: 0 20px 12px 0 rgba(45, 16, 51, 0.28);
}
.location_picker {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  min-height: 460px;
  margin-right: 15px;
}
@media screen and (max-width: 768px){
  .bg_sub_banner {
    padding: 34px 10px 55px 10px;
  }
  .location_box {
    padding: 35px;
  }
}
@media screen and (max-width: 480px){
  .location_picker{
    flex-direction: column;
  }
}

/* Content */
.location_picker .content {
  position: absolute;
  top: 0;
  left: 0;
}
.location_picker .title {
  font-size: 41px;
  font-family: 'cinzel-regular';
  font-weight: 500;
  letter-spacing: 11px;
}
.location_picker .description {
  font-size: 13px;
  margin: 14px 0 0;
}

@media screen and (max-width: 576px){
  .location_picker .title {
    font-size: 36px;
  }
}

/* List Location */
.location_picker .list_location_container {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.location_picker .list_location .item {
  font-size: 16px;
  padding: 10px 0;
  cursor: pointer;
  transition: color 0.2s ease;
}
.location_picker .list_location .item.active { color: #E83992; }


@media screen and (max-width: 992px){
  .location_picker .tab_wrap{
    right: 30px;
  }
}
@media screen and (max-width: 640px){
  .location_picker .tab_wrap{
    right: 0;
  }
}
@media screen and (max-width: 576px){
  .location_picker .list_location .item {
    font-size: 14px;
  }
  .location_picker .tab_wrap{
    right: -20px;
  }
}
@media screen and (max-width: 480px){
  .location_picker .tab_wrap {
    right: 0;
    position: relative;
    width: 100%;
  }
  .location_picker .list_location_container{
    flex-direction: column-reverse;
    align-items: flex-start;
    margin: 10px 0 0;
  }
  .location_picker .list_location{
    display: flex;
    padding: 0;
    margin: 0;
  }
  .location_picker .list_location .item{
    padding: 0;
    margin: 8px 0px 8px 20px;
  }
  .list_location > li:after{
    bottom: 0;
  }
  [class*="list_prefectures"]{
    padding: 0;
    margin: 10px 0 0;
  }
}


/* Location Picker END */

/* Filter Box START */
.location_filter_container { border-left: 1px solid rgba(255,255,255,0.15); }
.location_filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.location_filter .form_control {
  background-color: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.12);
  color: #5F656A;
  padding: 0px 24px;
  font-size: 16px;
  border-radius: 0;
  height: 50px;
}
.location_filter .search_input { background: rgba(255, 255, 255, 0.13) url('../../images/common/ico_search_white.svg') right 12px center no-repeat; }
.location_filter .btn_filter {
  font-size: 15px;
  font-weight: bold;
  height: 50px;
  border-radius: 0;
  box-shadow: 0 10px 14px 0 rgba(97, 17, 108, .4);
}

@media screen and (max-width: 992px){
  .location_filter_container {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 30px 0 0;
    margin: 40px 0 0;
  }
  .location_filter_container .location_filter{
    padding: 0;
  }
}
@media screen and (max-width: 576px){
  .location_filter .form_control {
    height: 42px;
  }
}

/* Filter Box END */

/* Feature News Box START */
.feature_news_box_container {
  border-left: 1px solid rgba(255,255,255,0.15);
  padding-left: 30px;
  padding-right: 0px;
}
.feature_news_box {
  max-height: 430px;
  overflow-y: auto;
}
.feature_news_box .news_item { margin-bottom: 25px; }
.feature_news_box .news_item .type {
  display: inline-block;
  font-family: 'cinzel-regular';
  background: #FFF;
  color: #000;
  text-align: center;
  min-width: 61px;
  padding: 1px 0;
  margin: 0 7px 10px 0;
}
.feature_news_box .news_item .type.type_news { background: #FFF; }
.feature_news_box .news_item .type.type_blog { background: #E2CFE5; }
.feature_news_box .news_item .type.type_shop { background: #CEDDF2; }
.feature_news_box .news_item .release_date {
  font-family: 'hiragino-sans-gb-w6';
  font-size: 12px;
  color: #fff;
}
.feature_news_box .news_item .title { color: #DDD; padding-bottom: 15px;}

@media screen and (max-width: 1200px){
  .feature_news_box_container{
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 30px 0 0;
    margin: 40px 0 0;
  }
}

/* Feature News Box START */

/* Subscription START */
.subscription .image { text-align: center; cursor: pointer; }
.subscription .image:hover {opacity: 0.85;}
.subscription .image img { width: 1080px; max-width: 100%; }
.subscription .current_user {
  display: inline-block;
  padding: 0px 24px;
  margin: 25px 0 50px;
  border-bottom: 1px dotted #64286C;
  font-size: 15px;
}
.subscription .current_user .amount {
  font-size: 39px;
  color: #64286C;
  margin: 0 10px;
  font-weight: bold;
}
@media screen and (max-width: 576px){
  .subscription .current_user .amount {
    font-size: 32px;
  }
}
/* Subscription END */

/* Popularity Box START */
.popularity_box {
  margin: -15px -10px;
  margin-top: 40px;
}
.popularity_box .popularity_item {
  flex: 0 1 20%;
  padding: 15px 10px;
}
.popularity_box .popularity_item .image {
  display: block;
  width: 100%;
  margin-bottom: 15px;
}
.popularity_box .popularity_item .image .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 74%;
}
.popularity_box .popularity_item .location {color: #64286C; font-weight: bold; }
.popularity_box .popularity_item .title {
  display: block;
  font-family: 'hiragino-sans-gb-w6';
  font-size: 16px;
  font-weight: bold;
  margin: 3px 0;
}
.popularity_box .popularity_item .point_info { margin: 3px 0 10px; }
.popularity_box .popularity_item .point_info .point {
  font-family: 'hiragino-sans-gb-w6';
  font-size: 18px;
  font-weight: bold;
  color: #E72E8B;
}
@media screen and (max-width: 992px){
  .popularity_box .popularity_item {
    flex: 0 1 33.3333%;
  }
}
@media screen and (max-width: 768px){
  .popularity_box .popularity_item .title {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px){
  .popularity_box .popularity_item {
    flex: 0 1 50%;
  }
  .popularity_box .popularity_item .image {
    margin-bottom: 10px;
  }
  .popularity_box .popularity_item .title {
    font-size: 13px;
  }
}
/* Popularity Box END */

/* Salon Ranking START */
.salon_ranking_box .salon_ranking_item { margin-bottom: 30px; }
.salon_ranking_box .salon_ranking_item .image {
  display: block;
  flex: 0 0 145px;
  height: 113px;
  margin-right: 20px;
}
.salon_ranking_box .salon_ranking_item .image .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 74%;
}
.salon_ranking_box .salon_ranking_item .step_round_icon {
  top: 0;
  left: 0;
  margin-top: -10px;
  margin-left: 2px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
}
.salon_ranking_box .salon_ranking_item .location {color: #64286C; font-weight: bold; }
.salon_ranking_box .salon_ranking_item .title {
  display: block;
  font-family: 'hiragino-sans-gb-w6';
  font-size: 16px;
  font-weight: bold;
  margin: 3px 0 10px;
}
.salon_ranking_box .salon_ranking_item .point_info { margin: 3px 0 3px; }
.salon_ranking_box .salon_ranking_item .point_info .point {
  font-family: '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' ,sans-serif;;
  font-size: 18px;
  font-weight: bold;
  color: #E72E8B;
}
.salon_ranking_box .salon_ranking_item .point_info .money {
  font-size: 15px;
  font-weight: bold;
}

@media screen and (max-width: 768px){
  .salon_ranking_box .salon_ranking_item .title {
    font-size: 14px;
    margin: 3px 0;
  }
  .salon_ranking_box .salon_ranking_item { margin-bottom: 20px; }
}
@media screen and (max-width: 480px){
  .salon_ranking_box .salon_ranking_item .title {
    font-size: 13px;
  }
  .salon_ranking_box .salon_ranking_item .image {
    flex: 0 0 120px;
    height: auto;
  }
  .salon_ranking_box .area_star{
    margin: 0;
  }
  .salon_ranking_box .salon_ranking_item .point_info span {
    font-size: 12px;
  }
  .salon_ranking_box .salon_ranking_item .point_info .point {
    font-size: 16px;
  }
}
/* Salon Ranking END */

/* Questionnaire START */
.questionnaire .item {
  padding: 25px;
  background: #fff;
}
.questionnaire .item{
}

@media screen and (max-width: 768px){
  .questionnaire .area_menu{
    margin: 4px 0 0;
  }
}


/* Questionnaire END */

/* News Box START */
.news_container { padding: 65px 15px; }
.news_box { margin: 45px 0; padding: 0;}
.news_box .news_item { margin-bottom: 20px; width: 100%; }
.news_box .news_item .image {
  display: block;
  flex: 0 0 125px;
  height: 93px;
  margin-right: 20px;
}
.news_box .news_item .title {
  display: block;
  font-weight: bold;
}
@media screen and (max-width: 576px){
  .news_box .news_item .description {
    display: none;
  }
}
.news_box .news_item .release_date {
  font-family: 'hiragino-sans-gb-w6';
  font-weight: bold;
  font-size: 12px;
  color: #9EB1BF;
  margin: 7px 0;
}
.news_box .news_item .author {
  text-decoration: underline;
}
/* News Box END */

/* Banner Overlay START */
.overlay_banner_container { margin: 50px 0; }
/* Banner Overlay END */

.bg_heart{
  background: url(../../images/salon/ico_heart_white.svg) left 10% center no-repeat;
  background-color: #64286C;
}

/* ニュース・ブログ */
@media screen and (max-width: 768px){
  .area_post > div + div{
    margin: 30px 0 0;
  }
}
@media screen and (max-width: 576px){
  .news_box { margin: 30px 0 10px; }
}


/* ! サロンブログ ———————————————————————————————————————————————————————————— */
/* リスト ------------- */
.list_blog_salon{
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: -16px -16px 20px;
  background-color: #fff;
}
.list_blog_salon > li{
  padding: 16px;
  width: 50%;
}
.list_blog_salon article{
  display: flex;
  align-items: flex-start;
  position: relative;
}
.list_blog_salon article > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.list_blog_salon .text{
  flex: 1 1 auto;
  min-width: 10px;
}
.list_blog_salon .ttl{
  font: 600 18px/1em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' , sans-serif;
  margin: 0 0 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_blog_salon .description{
  font: 400 13px/1em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' , sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_blog_salon .img{
  flex: 0 0 180px;
  margin: 0 0 0 20px;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.list_blog_salon .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 60%;
}
.list_blog_salon article:hover .ttl{
  color: #64286C;
  text-decoration: underline;
}
@media screen and (max-width: 960px){
  .list_blog_salon > li{
    width: 100%;
  }
  .list_blog_salon .img{
    flex: 0 0 140px;
    margin: 0 0 0 10px;
  }
}
@media screen and (max-width: 560px){
  .list_blog_salon .ttl{
    font-size: 16px;
    margin: 0 0 10px;
  }
}
@media screen and (max-width: 480px){
  .list_blog_salon .img{
    flex: 0 0 100px;
  }
}

/* 日付・ユーザー */
.area_blog_info{
  display: flex;
  align-items: center;
  margin: 20px 0 0;
}
.area_blog_info .date{
  color: #aaa;
  font: 300 14px/1em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' , sans-serif;
  margin: 0;
}
@media screen and (max-width: 960px){
  .area_blog_info{
    margin: 10px 0 0;
  }
}
@media screen and (max-width: 560px){
  .area_blog_info{
    margin: 10px 0 0;
  }
}
@media screen and (max-width: 480px){
  .area_blog_info{
    display: block;
  }
  .area_blog_info .date{
    font-size: 12px;
  }
}

/* ユーザー */
.list_blog_salon .block_user{
  margin: 0 0 0 auto;
  flex: 0 0 160px;
}
.block_user{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.block_user > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.block_user [class*="thumb"]{
  flex: 0 0 30px;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: 50px;
  margin: 0 8px 0 0;
}
.block_user [class*="thumb"]:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.block_user .name{
  margin: 0;
  font: 600 13px/1em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' , sans-serif;
}
.block_user:hover{
  opacity: .7;
}

@media screen and (max-width: 768px){
  .block_user .name{
    font-size: 13px;
  }
  .block_user [class*="thumb"]{
    flex: 0 0 20px;
  }
}
@media screen and (max-width: 480px){
  .list_blog_salon .block_user{
    margin: 4px 0 0;
  }
}


/* 詳細 ------------- */
.area_blog_cnt > p{
  font: 400 16px/1.6em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' , sans-serif;
}
@media screen and (max-width: 560px){
  .area_blog_cnt > p{
    font-size: 14px;
  }
}
.area_blog_cnt iframe {
  max-width: 100%;
}

/* ! ブログ ———————————————————————————————————————————————————————————— */
.list_blog_salon_col{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: -10px;

}
.list_blog_salon_col > li{
  width: 25%;
  padding: 10px;
}
.list_blog_salon_col .img{
  margin: 0 0 10px;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.list_blog_salon_col .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 60%;
}
.list_blog_salon_col .ttl {
  font: 600 18px/1.3em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' , sans-serif;
  margin: 0 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_blog_salon_col .description {
  font: 400 13px/1.4em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' , sans-serif;
  overflow: hidden;
  max-height: 36px;
}
.list_blog_salon_col .area_blog_info{
  display: block;
  margin: 10px 0 0;
}
.list_blog_salon_col .date {
  color: #aaa;
  font: 300 13px/1em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' , sans-serif;
  margin: 0;
}
@media screen and (max-width: 960px){
  .list_blog_salon_col{
    margin: -5px;
  }
  .list_blog_salon_col > li{
    width: 33.3333%;
    padding: 5px;
  }
  .list_blog_salon_col .ttl{
    font-size: 16px;
  }
}
@media screen and (max-width: 640px){
  .list_blog_salon_col{
  }
  .list_blog_salon_col > li{
    width: 50%;
  }
}
@media screen and (max-width: 480px){
  .list_blog_salon_col .ttl{
    font-size: 14px;
  }
}

/* ユーザー */
.list_blog_salon_col .block_user{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.list_blog_salon_col .block_user > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.list_blog_salon_col .block_user [class*="thumb"]{
  flex: 0 0 20px;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border-radius: 50px;
  margin: 0 8px 0 0;
}
.list_blog_salon_col .block_user [class*="thumb"]:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.list_blog_salon_col .block_user .name{
  margin: 0;
  font: 600 13px/1em '游ゴシック体', YuGothic, '游ゴシック', 'Yu Gothic' , sans-serif;
}
.list_blog_salon_col .block_user:hover{
  opacity: .7;
}