/*======================================
    mainWrapper
======================================*/
.mainWrapper h1 {
    margin-bottom: 30px;
    line-height: 0;
    text-align: center
    }
.mainWrapper section {
    margin-bottom: 60px
    }
/*======================================
    mainVisual
======================================*/
.mainVisual {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 465px;
    /*margin-bottom: 20px;*/
    background: url(../images.af5ba4cbe7862aa4174e04b3b0055c66/mv-bg.png) center no-repeat
    }
.mainVisual .mvSlider {
    margin-top: 9px
    }
.mainVisual .mvSlider li {
    text-align: center
    }
.mainVisual .mvFrame1 {
    position: absolute;
    top: 314px;
    left: 50%;
    margin-left: -557px
    }
.mainVisual .mvFrame2 {
    position: absolute;
    top: 11px;
    left: 50%;
    margin-left: 351px
    }
/*======================================
    topContents
======================================*/
.topContents {
    position: relative;
    width: 445px;
    height: 270px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    text-shadow: none
    }
.topContents.salonInfo {
    float: left;
    background: #FB5AA7 url(../images.af5ba4cbe7862aa4174e04b3b0055c66/info-photo.jpg) center top no-repeat
    }
.topContents.stylist {
    float: right;
    background: #FB5AA7 url(../images.af5ba4cbe7862aa4174e04b3b0055c66/stylist-photo.jpg) center top no-repeat
    }
/****** hovContent ******/
.topContents .hovContent {
    position: absolute;
    top: 190px;
    bottom: 0;
    transition: all 0.3s ease
    }
.topContents:hover .hovContent {
    top: auto;
    bottom: 45px
    }
.topContents .hovContent h1 {
    margin: 0
    }
.topContents .hovContent p {
    padding: 10px;
    background: #FB5AA7;
    line-height: 1.3;
    font-size: 0.9em;
    color: #fff
    }
/****** ul ******/
.topContents ul {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 15px 0;
    background: #FB5AA7;
    text-align: center
    }
.topContents ul li {
    display: inline-block;
    margin: 0 3px
    }
.topContents ul li a {
    display: block;
    padding: 3px 0.5em;
    border: #fff solid 1px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    text-shadow: none
    }
.topContents ul li a:hover {
    background: #fff;
    color: #FB5AA7
    }
/*======================================
    hairCatalog
======================================*/
.hairCatalog {
    clear: both
    }
/****** viewBtn ******/
.hairCatalog .viewBtn {
    float: right;
    margin-top: -100px
    }
.hairCatalog .viewBtn a {
    display: inline-block;
    padding: 9px 14px 7px 21px;
    border: #FB5AA7 solid 1px;
    background: rgba(255, 255, 255, 0.6)
    }
.hairCatalog .viewBtn a:hover {
    background: #fff
    }
.hairCatalog .viewBtn a:hover img {
    opacity: 1
    }
.hairCatalog ul {
    clear: both;
    text-align: center
    }
.hairCatalog ul li {
    display: inline-block;
    margin: 0 14px;
    line-height: 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
    }
.hairCatalog ul li:first-child {
    margin-left: 0
    }
.hairCatalog ul li:last-child {
    margin-right: 0
    }
/*======================================
    reservation
======================================*/
.reservation p {
    margin-bottom: 20px;
    text-align: center
    }
/****** reservationSite ******/
.reservation .reservationSite {
    overflow: hidden;
    padding-top: 10px;
    border: #fff solid 1px;
    background: #fff;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5)
    }
/* siteList */
.reservation .reservationSite .siteList {
    float: left;
    width: 285px;
    margin: 10px 10px 20px
    }
.reservation .reservationSite .siteList h2 {
    margin-bottom: 20px;
    text-align: center;
    line-height: 0
    }
.reservation .reservationSite .siteList ul {
    text-align: center
    }
.reservation .reservationSite .siteList ul li {
    display: inline-block;
    margin: 0 3px 10px
    }
.reservation .reservationSite .siteList ul li a {
    display: block;
    width: 5em;
    padding: 3px 0;
    border: #FB5AA7 solid 1px;
    background: #fff;
    text-align: center;
    text-decoration: none;
    color: #FB5AA7;
    text-shadow: none
    }
.reservation .reservationSite .siteList ul li a:hover {
    background: #FB5AA7;
    color: #fff
    }
/*======================================
    newsContents
======================================*/
.newsContents {
    width: 445px
    }
.newsContents.news {
    float: left
    }
.newsContents.blog {
    float: right
    }
/****** newsList ******/
.newsContents .newsList {
    height: 250px;
    padding: 15px 10px;
    background: url(../images.af5ba4cbe7862aa4174e04b3b0055c66/news-bg.png);
    border-radius: 8px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3) inset
    }
.newsContents .newsList article {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: rgba(153, 102, 102, 0.3) dotted 1px
    }
.newsContents .newsList article a {
    text-decoration: none
    }
.newsContents .newsList article time {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px;
    background: #FB5AA7;
    box-shadow: 3px 3px 0 #fff;
    font-size: 0.8em;
    color: #fff;
    text-shadow: none
    }
.newsContents .newsList article h2 {
    margin-bottom: 10px;
    line-height: 1.3;
    color: #966
    }
.newsContents .newsList article p {
    line-height: 1.3;
    font-size: 0.8em
    }
.newsContents .newsList article a p {
    text-decoration: underline
    }
.newsContents .newsList article p .more {
    color: #FB5AA7
    }
.newsList a.normal {
    text-decoration: underline !important
    }