/* common */
.bl-txt{
  display: inline-block;
  text-align: left;
	vertical-align:top;
}
.bl-img{
  display: inline-block;
  margin-right:80px;
	vertical-align:top;
}

dl{
  display: table;
}
dt,
dd{
  padding-bottom: 10px;
  display: table-cell;
  text-align: left;
  line-height: 140%;
}
dt{
  width: 105px;
}
dd{
}
dd a{
  display: inline-block;
  background: #eee;
  font-size: 1.2rem;
  letter-spacing: .5px;
  text-decoration: none;
  border-radius: 30px;
  padding: 5px 10px;
  margin: 5px auto 0 0;
}
dd a:hover{
  background: #000;
  color: #fff;
}
/*dl{
  display: table;
}
dt,
dd{
  border: 10px solid #fff;
  display: table-cell;
  text-align: left;
}
dt{
  width: 80px;
  height: 70px;
  background: #eee;
  line-height: 140%;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
}
dd{
  vertical-align: middle;
}
*/
.boutiquelist{
  margin-top: 15px;
  min-height: calc(100vh - 220px);
  background: #ddd url(../img/common/bg-boutique.png) 80% top no-repeat;
  background-size: auto;
  text-align: center;
/*  background: -moz-linear-gradient(top, rgba(32,32,32,1), rgba(32,32,32,1) 50%, rgba(27,27,27,1) 50%, rgba(27,27,27,1));
  background: -webkit-linear-gradient(top, rgba(32,32,32,1), rgba(32,32,32,1) 50%, rgba(27,27,27,1) 50%, rgba(27,27,27,1));
  background: linear-gradient(top, rgba(32,32,32,1), rgba(32,32,32,1) 50%, rgba(27,27,27,1) 50%, rgba(27,27,27,1));
  -moz-background-size: 11px 11px;
  -webkit-background-size: 11px 11px;
  background-size: 11px 11px;*/
}
.boutiquelist h2{
	display:block;
	width:220px;
	margin: 60px 10vw 40px;
}

.boutiquelist a{
  display: inline-block;
  width: 32vw;
  height: 500px;
  margin: 0 0 0 .5vw;
  position: relative;
  text-align: center;
  overflow: auto;
}
.boutiquelist .ph-marunouchi,
.boutiquelist .ph-roppongi{
  width: 48.3vw;
}
.boutiquelist .ph-marunouchi,
.boutiquelist .ph-shinjuku{
  margin-left:0;
}

.boutiquelist a section{
  background: rgba(0,0,0,.75);
  position:absolute;
  width: 200px;
  height: 100%;
  bottom: 0;
  right: 0;
}
.boutiquelist a img{
  width: 180px;
  margin: 20px 10px;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.boutiquelist a:hover img{
  -webkit-filter:invert(100%);
  -moz-filter:invert(100%);
  -ms-filter:invert(100%);
  filter: invert(100%);
  opacity:.8;
}
.boutiquelist a p{
  color: #fff;
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}
.boutiquelist a p.more{
  padding: 10px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
}
.boutiquelist a p.more:before {
    content: "";
    display: inline-block;
    border: 5px solid transparent;
    border-left: 5px solid #000;
}
.boutiquelist a:hover p.more{
  color: #fff;
  background: none;
  border: 1px solid #fff;
}
.boutiquelist a:hover  p.more:before {
    border-left-color: #fff;
}
.boutiquelist .common-access{
  display: none;
}

.acs-first{
  height: 700px;
  max-height: 100vh;
}
.acs-first h1{
  display: block;
	margin-top: 250px;
  text-align: center;
}


.acs-info{
	padding: 75px 10px;
  text-align: center;
	position:relative;
}
.acs-info .bl-img{
 margin: 50px 100px 0 50px;
}
.acs-info p{
  font-size: 1.3rem;
  margin-top:10px;
}

.acs-map{
    overflow: visible;
}
.acs-map div{
    overflow: visible;
}
#map{
  width: 100%;
  height: 400px;
}

.acs-acs{
	background: #eee;
	padding: 40px 10px;
	text-align:center;
}
.acs-acs .bl-img{
	display:inline-block;
	vertical-align:top;
	margin:0 20px;
/*  -webkit-filter:invert(100%);
  -moz-filter:invert(100%);
  -ms-filter:invert(100%);
  filter: invert(100%);*/
}
.acs-acs h2{
	display:inline-block;
	vertical-align:top;
  margin: 20px auto;
}


.acs-salon{
  background: url(../img/common/bg-border.png) repeat;
  position:relative;
}
.acs-salon .ph-main{
  background-repeat: no-repeat;
  background-position: center center;
	background-size: cover;
  width: 48vw;
	height: 370px;
	display:inline-block;
  vertical-align: top;
  -webkit-clip-path: polygon(0 0, 100% 0%, 92% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 92% 100%, 0% 100%);
}
.marunouchi .ph-main{
  background-image:url("../img/access/ph-marunouchi.jpg");
}
.roppongi .ph-main{
  background-image:url("../img/access/ph-roppongi.jpg");
}
.shinjuku .ph-main{
  background-image:url("../img/access/ph-shinjuku.jpg");
}
.shibuya .ph-main{
  background-image:url("../img/access/ph-shibuya.jpg");
}
.nagoya .ph-main{
  background-image:url("../img/access/ph-nagoya.jpg");
}
.fukuoka .ph-main{
  background-image:url("../img/access/ph-fukuoka.jpg");
}
.acs-salon .bl-txt{
	padding: 25px 0 25px 25px;
}
.acs-salon h2{
  margin-bottom: 20px;
}
.marunouchi .common-access .ph-marunouchi img,
.roppongi .common-access .ph-roppongi img,
.shinjuku .common-access .ph-shinjuku img,
.shibuya .common-access .ph-shibuya img,
.nagoya .common-access .ph-nagoya img,
.fukuoka .common-access .ph-fukuoka img{
  -webkit-filter:invert(100%);
  -moz-filter:invert(100%);
  -ms-filter:invert(100%);
  filter: invert(100%);
  opacity:.8;
}
.acs-limited{
	padding: 40px 10px;
  position:relative;
}

.acs-limited{
  text-align: center;
}
.acs-limited h2{
  margin-bottom: 20px;
}
.acs-limited section{
  width: 820px;
  margin: 40px auto 0;
  text-align: left;
}
.acs-limited .bl-txt{
  max-width: 500px;
}
.acs-limited .bl-txt p{
  margin-bottom:15px;
}
.acs-limited h4{
  font-size: 1.6rem;
  font-weight: bold;
  margin:0 0 15px;
}
.acs-limited h4 span{
  color: #aaa;
  display: block;
  font-size: 1.4rem;
}
.acs-limited section img{
  border: 5px solid #eee;
  margin-right: 20px;
  max-width: 280px;
  height: auto;
}


/* ------------------------- windows size pattern ------------------------- */
@media screen and (max-width: 1700px){
  .boutiquelist{
    margin-top: 0;
  }
  .boutiquelist a{
    display: block;
    width: 1200px!important;
    height: 500px;
    margin: 0 auto 5px!important;
  }
}
@media screen and (max-width: 1200px){
  .boutiquelist a{
    width: 100vw!important;
  }
}
@media screen and (max-width: 999px){
  .acs-salon .ph-main {
      width: 100vw;
      height: 240px;
      -webkit-clip-path: none;
      clip-path: none;
  }
  .acs-limited .bl-txt {
      max-width: 400px;
  }
}
@media screen and (max-width: 768px){

	article{
		text-align:center;
	}
  dl {
      margin: 0 auto;
      width: 370px;
  }
  dt{
    text-align: right;
  }
  .bl-txt{
		text-align:center;
	}
	.bl-img{
		text-align:center;
		margin:0 auto;
	}
  .acs-info .bl-img{
   margin: -20px auto 50px;
    padding: 0 60px;
  }
  .acs-limited section{
    width: 520px;
    text-align: center;
  }
  .acs-limited .bl-img{
    margin: 0 auto;
    max-width: 500px;
  }

}