.top-container{
    padding-bottom:8em;
}
.top-slide{
    overflow:hidden;
}
.recommends{
    margin: 4em auto -12em;
}
.top-slider p,
.top-slider img,
.item-list p,
.item-list img{
     width:260px;
     margin:0 auto;
}
.top-slider p,
.item-list p{
     text-align:center;
     margin-bottom:10px;
}
.top-slider img,
.item-list img {
     margin-bottom: 20px;
     height:auto;
}
.slides-triple{
    margin:3em auto;
}
.item-name{
    height: 40px;
    overflow: hidden;
    line-height: 1.5;
}

/* tab menu */
#menu{
    margin-top:16em;
}
.top-menu{
    padding:3em auto;
}
.tab-menu {
    display: flex;
    padding: 4px 0;
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
    margin: 2.2em 0;
}
#tabls{
    margin-bottom: 3em;
}
#tabs li {
     width:calc(100%/3);
     text-align:center;
}
.tab-menu li a {
    display: block;
    font-size: 18px;
    padding: 18px 0;
    margin: 0 1px;
    color:#000;
}
.tab-menu li.active a,
.tab-menu li a:hover{
     background:#000;
     color:#fff;
     text-decoration:none;
}
.panel{
     background-color:#fff;
     padding:4em;
}
.more {
     width:100%;
     margin-top:3em;
}
.more a{
     display:block;
     background:url(https://gigaplus.makeshop.jp/asadoritest1/top/btn-more.png) no-repeat center;
     width:203px;
     height:53px;
     text-indent:-9999px;
     margin:0 auto;
}
.more a:hover{
     background:url(https://gigaplus.makeshop.jp/asadoritest1/top/btn-more-on.png) no-repeat center;
}
.top-message {
    background: url(../images/top/scissors.png) no-repeat center top;
    background-size: 100%;
    background-attachment: fixed;
    padding:3em 0;
}
.top-message h2,
.top-message p{
text-align:center;
}
.top-message h2{
   font-size:26px;
   font-weight:normal;
}
.top-message p{
   font-size:20px;
   margin-top:1em;
   line-height:2;
}

/* artist */
.artist,
.artist .container {
     position:relative;
}
.artist h2{
     text-align: center;
}
.artist-note li{
    display: inline-block;
    width: 235px;
    vertical-align: top;
}
.artist-2,
.artist-3,
.artist-4{
     margin-left:15px;
}
.artist-2{
     padding-top:30px;
}
.artist-3{
     padding-top:60px;
}
.artist-4{
     padding-top:90px;
}
.artist-note p,
.activities,
.news-title {
     font-size:15px;
}
.artist-note h5 span{
    display:block;
    font-size:13px;
}
.artist-note h5 {
    font-size: 18px;
    position: relative;
    background: url(../images/icon-arrow-down.png) no-repeat bottom center;
    text-align: center;
    margin: 15px 0;
    color: #e71f17;
    font-weight: normal;
    padding-bottom: 12px;
    cursor: pointer;
}
}
.artist-note h5:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.artist-note h5.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}
.artist-note dl {
    text-align: left;
    display:none;
}
.artist-note dl dt {
    border: solid 1px #d7d6d6;
    padding: 2px;
    background-color: #fbe7e7;
    display: inline-block;
    padding: 2px 8px;
    margin-bottom: 4px;
}
.artist-note dl dd{
    margin-bottom: 8px;
}
/* Menu */
.hm-menu {
    margin: 0 10px;
    box-sizing: border-box;
}
.hm-menu-half {
    width: calc(50% - 20px);
}
	.hm-menu th.ttl {text-align: center; background:#F5D9D9;}
	.hm-menu th.sub-ttl{
            text-align: center;
            background: #eee;
}
	.hm-menu th,
	.hm-menu td {text-align: left; padding: .4em 0;}
	.hm-menu .price {text-align:right; white-space: nowrap;}
	.smalltxt {font-size:70%; display:inline-block;}
	.attend {
		margin:2em auto;
		border-top:dashed #F5D9D9 2px;
		border-bottom:dashed #F5D9D9 2px;
		padding:.8em .3em;
	}
	#tabs .attend li{
	    width:100%;
		text-align:left;
	}
	
/* about */
.about {
      background:url(../images/top/bg-room.jpg) no-repeat center top;
      background-size:100%;
      background-attachment: fixed;
      padding-top:3.8em;
}
.about p,
.about h2,
.about h3{
      font-weight:normal;
      text-align:center;
}
.title-about{
      padding-top:5em;
}
.title-about h2 {
    font-size: 30px;
    margin-bottom: 10px;
}
/* lesson */
.recommend-course{
    color:#f00;
}
.lesson {
      background:url(../images/top/bg-cosme.jpg) no-repeat center bottom;
      background-size:100%;
      background-attachment: fixed;
}
.lesson-mn {
    text-align: left;
    width: 60%;
    line-height: 1.6;
}
.lesson-mn dt{
    border: solid 1px #666;
    display: inline-block;
    padding: .2em 2em;
    margin: 2em 0 .4em;
    font-size: 18px;
}
.lesson-mn h3,
.consul-mn h3{
    font-weight: bold;
    margin-bottom: .4em;
    display: block;
    font-size: 16px;
    border-bottom: dashed 2px #ccc;
    padding-bottom: .4em;
    margin-top: 1em;
}

#beauty-consulting p{
    font-size:18px;
    line-height:1.5;
    margin-top:.8em;
     
}
.company-info {
    background-color: #fff;
    opacity: .82;
    margin: 2em auto;
    border-radius: 12px;
    box-shadow: 0 3px 4px 0 rgba(0,0,0,0.1);
}
.company-info th,
.company-info td {
    padding: 14px;
}
.company-info th {
    width: 20%;
    text-align: center;
    white-space: nowrap;
    background: #eee;
    border-top: solid 1px #fff;
}
.company-info td{
    text-align:left;
}
.text-area-1 {
    width: 576px;
    margin-top: -10px;
}
.consul-mn {
    text-align: left;
    line-height: 1.6;
}
#artist,
#about-us,
#private-lesson,
#beauty-consulting,
#partner,
#recruit  {
    padding-top: 180px;
}
.consulting .container{
      background:url(../images/top/bg-consul.jpg) no-repeat left top;
}
.recruit .container {
    background: url(../images/top/bg-makebrush.jpg) no-repeat right top;
    height: 520px;
}
.recruit-info {
      margin:2em auto;
}
.recruit .text-area-2{
    position: relative;
}
#entry {
    background-color: #f00;
    color: #fff;
    text-decoration: none;
    padding: .6em 2em;
    position: absolute;
    right: 0;
}

#entry:hover{
    opacity:.8;
}
.text-area-2 {
    width: 500px;
    margin-top: -10px;
}
.business .container{
      background:url(../images/top/bg-styling.jpg) no-repeat center top;
      padding-top:418px;
}
#partner p{
    font-size:18px;
    line-height:1.8;
    margin-top:1.6em;
}

.news h2{
    margin-left:58px;
}
.news-title{
    float: right;
    width: 680px;
    text-align: left;
}
.news-title dt {
    font-size: 14px;
    color: #666;
}
.news-title dd{
    margin-bottom:10px;
}

.instagram {
    margin:8em auto;
}

/*****************************************************

    for smartphone

*****************************************************/
@media screen and (max-width: 896px) { 
    .top-message {
    margin-top: 80px;
    background-size:120%;
    }
    .top-message p {
    font-size: 16px;
    margin-top: .5em;
    line-height: 1.4;
    }
    .top-slider p, .top-slider img, .item-list p, .item-list img {
    width: 100%;
    }
    .slick-prev {
    left: 0;
    }
    .slick-next {
    right: 0;
    }
    .slick-prev, .slick-next {
    background-size: 70%;
    top: 40%;
    }
    .inner{
      padding-top:3em;
    }
    .tab-menu li a {
    font-size: 14px;
    }
    .tab-menu li a span{
      display:none;
    }
    .panel {
    background-color: #fff;
    padding: .8em;
    }
    .item-list {
    display: block;
    }
    .hm-menu-half {
    width: 97%;
    }
    .artist-note li {
    display: inline-block;
    width: 48%;
    }
    .artist-2,
    .artist-3,
    .artist-4{
     margin-left:0;
     padding-top:0;
     }
    .lesson {
    background-size: inherit;
    background-position: right;
    }
    #private-lesson .container{
      background-color:#fff;
      opacity:.9;
      padding: 2em 0;
    }
    #private-lesson h2,
    #beauty-consulting h2,
    #recruit h2{
      text-align:center;
    }
    .lesson-mn,
    #beauty-consulting .container{
    width: 95%;
    margin: 0 auto;
    }
    .lesson-mn dt {
    display: block;
    text-align: center;
    }
    .text-area-1 {
    width: 100%;
    margin-top: 0;
    }
    .consulting .container {
    background: none;
    }
    .recruit .container {
    height: 360px;
    background-size: 60%;
    background-position:right bottom;
    padding: 2em;
    box-sizing: border-box;
    width: 100%;
    }
    .text-area-2 {
    width: 100%;
    margin-top: 0;
    }
    .business .container {
    padding: 200px 1.4em 0;
    width: 100%;
    box-sizing: border-box;
    background-size: 100%;
    }
    .news h2 {
    margin-left: 0;
    float: none;
    text-align: center;
    }
    .news .inner {
    padding-top: 2em;
    padding-bottom: 2em;
    }
    .news-title {
    float: none;
    width: 90%;
    margin: 0 auto;
    }
}