@charset "utf-8";

#name-fixed-btn {
margin: 0;
padding: 10px 12px 10px 8px;
position: fixed;
right: 0;
top: 190px;
background: url(../img/stripe.png) repeat left top transparent;
border-radius: 4px 0 0 4px;
z-index: 100;
line-height: 0; /* Edge */
}

#name-fixed-btn[aria-hidden="true"] {
display: none;
opacity: 0;
transition: all 1s;
}

#name-fixed-btn[aria-hidden="false"] {
display: block;
opacity: 1;
transition: opacity 1s;
}

#name-fixed-btn ul {
margin: 0;
padding: 0;
}

#name-fixed-btn li {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}

#name-fixed-btn li a {
display: block;
width: 60px;
height: 220px;
overflow: hidden;
text-indent: -9999rem;
}

#name-fixed-btn li a:hover {
opacity: 0.85;
}

#name-fixed-btn li:first-child {
margin-bottom: 10px;
}



/* --- */

#name-fixed-btn[class*=med] {
background-color: #c0c0c0;
}

#name-fixed-btn[class*=med] li:first-child a {
background: url(../img/med/btn-01.png) no-repeat center top transparent;
}

#name-fixed-btn[class*=med] li:last-child a {
background: url(../img/med/btn-02.png) no-repeat center top transparent;
}

/* - */

#name-fixed-btn[class*=beauty] {
background-color: #777;
}

#name-fixed-btn[class*=beauty] li:first-child a {
background: url(../img/beauty/btn-01.png) no-repeat center top transparent;
}

#name-fixed-btn[class*=beauty] li:last-child a {
background: url(../img/beauty/btn-02.png) no-repeat center top transparent;
}

.name-fukuoka-beauty #name-fixed-btn li:last-child a {
background: url(../img/beauty/btn-03.png) no-repeat center top transparent;
}

/* - */

#name-fixed-btn[class*=sweets] {
background-color: #d7cfb5;
}

#name-fixed-btn[class*=sweets] li:first-child a {
background: url(../img/sweets/btn-01.png) no-repeat center top transparent;
}

#name-fixed-btn[class*=sweets] li:last-child a {
background: url(../img/sweets/btn-02.png) no-repeat center top transparent;
}


/* - */

#name-fixed-btn[class*=chori] {
background-color: #0e3365;
}

#name-fixed-btn[class*=chori] li:first-child a {
background: url(../img/nagoya-chori/btn-01.png) no-repeat center top transparent;
}

#name-fixed-btn[class*=chori] li:last-child a {
background: url(../img/nagoya-chori/btn-02.png) no-repeat center top transparent;
}

/* - */

#name-fixed-btn[class*=nagoya-chori] {
background-color: #0e3365;
}

#name-fixed-btn[class*=nagoya-chori] li:first-child a {
background: url(../img/nagoya-chori/btn-01.png) no-repeat center top transparent;
}

#name-fixed-btn[class*=nagoya-chori] li:last-child a {
background: url(../img/nagoya-chori/btn-02.png) no-repeat center top transparent;
}

/* - */

#name-fixed-btn[class*=eiyo] {
background-color: #f5e5bd;
}

#name-fixed-btn[class*=eiyo] li:first-child a {
background: url(../img/eiyo/btn-01.png) no-repeat center top transparent;
}

#name-fixed-btn[class*=eiyo] li:last-child a {
background: url(../img/eiyo/btn-02.png) no-repeat center top transparent;
}

/* - */

#name-fixed-btn[class*=fukushi] {
background-color: #ebebeb;
}

#name-fixed-btn[class*=fukushi] li:first-child a {
background: url(../img/fukushi/btn-01.png) no-repeat center top transparent;
}

#name-fixed-btn[class*=fukushi] li:last-child a {
background: url(../img/fukushi/btn-02.png) no-repeat center top transparent;
}

/* - */

#name-fixed-btn[class*=fukushi-tsushin] {
background-color: #ebebeb;
}

#name-fixed-btn[class*=fukushi-tsushin] li:first-child a {
background: url(../img/fukushi-tsushin/btn-01.png) no-repeat center top transparent;
}

#name-fixed-btn[class*=fukushi-tsushin] li:last-child a {
background: url(../img/fukushi-tsushin/btn-02.png) no-repeat center top transparent;
}





@media (max-width: 1250px), (max-height: 700px) {

#name-fixed-btn {
right: 0;
left: 0;
top: auto;
bottom: 0;
margin: 0 auto;
padding: 3px 0 0 0;
text-align: center;
border-radius: 0;
}

#name-fixed-btn.name-fixed-btn-top {
top: 0;
bottom: auto;
padding: 3px 0 5px;
}

#name-fixed-btn ul {
position: relative;
top: -5px;
}


#name-fixed-btn.name-fixed-btn-top ul {
position: static;
}

#name-fixed-btn li {
width: 152px;
height: 51px;
display: inline-block;
}

#name-fixed-btn li a {
width: 152px;
height: 51px;
}

#name-fixed-btn li:first-child {
margin-bottom: 0;
margin-right: 3px;
}


#name-fixed-btn li:last-child {
margin-left: 3px;
}

/* --- */

#name-fixed-btn[class*=med] li:first-child a {
background: url(../img/med/btn-sp-01.png) no-repeat center top transparent;
background-size: 152px 51px;
}

#name-fixed-btn[class*=med] li:last-child a {
background: url(../img/med/btn-sp-02.png) no-repeat center top transparent;
background-size: 152px 51px;

}

/* - */

#name-fixed-btn[class*=beauty] li:first-child a {
background: url(../img/beauty/btn-sp-01.png) no-repeat center top transparent;
background-size: 152px 51px;
}

#name-fixed-btn[class*=beauty] li:last-child a {
background: url(../img/beauty/btn-sp-02.png) no-repeat center top transparent;
background-size: 152px 51px;
}

.name-fukuoka-beauty #name-fixed-btn li:last-child a {
background: url(../img/beauty/btn-sp-03.png) no-repeat center top transparent;
background-size: 152px 51px;
}

/* - */

#name-fixed-btn[class*=sweets] li:first-child a {
background: url(../img/sweets/btn-sp-01.png) no-repeat center top transparent;
background-size: 152px 51px;
}

#name-fixed-btn[class*=sweets] li:last-child a {
background: url(../img/sweets/btn-sp-02.png) no-repeat center top transparent;
background-size: 152px 51px;
}



/* - */

#name-fixed-btn[class*=chori] li:first-child a {
background: url(../img/nagoya-chori/btn-sp-01.png) no-repeat center top transparent;
background-size: 152px 51px;
}

#name-fixed-btn[class*=chori] li:last-child a {
background: url(../img/nagoya-chori/btn-sp-02.png) no-repeat center top transparent;
background-size: 152px 51px;
}

/* - */

#name-fixed-btn[class*=nagoya-chori] li:first-child a {
background: url(../img/nagoya-chori/btn-sp-01.png) no-repeat center top transparent;
background-size: 152px 51px;
}

#name-fixed-btn[class*=nagoya-chori] li:last-child a {
background: url(../img/nagoya-chori/btn-sp-02.png) no-repeat center top transparent;
background-size: 152px 51px;
}

/* - */

#name-fixed-btn[class*=eiyo] li:first-child a {
background: url(../img/eiyo/btn-sp-01.png) no-repeat center top transparent;
background-size: 152px 51px;
}

#name-fixed-btn[class*=eiyo] li:last-child a {
background: url(../img/eiyo/btn-sp-02.png) no-repeat center top transparent;
background-size: 152px 51px;
}

/* - */

#name-fixed-btn[class*=fukushi] li:first-child a {
background: url(../img/fukushi/btn-sp-01.png) no-repeat center top transparent;
background-size: 152px 51px;
}

#name-fixed-btn[class*=fukushi] li:last-child a {
background: url(../img/fukushi/btn-sp-02.png) no-repeat center top transparent;
background-size: 152px 51px;
}

/* - */

#name-fixed-btn[class*=fukushi-tsushin] li:first-child a {
background: url(../img/fukushi-tsushin/btn-sp-01.png) no-repeat center top transparent;
background-size: 152px 51px;
}

#name-fixed-btn[class*=fukushi-tsushin] li:last-child a {
background: url(../img/fukushi-tsushin/btn-sp-02.png) no-repeat center top transparent;
background-size: 152px 51px;
}

}