@charset "utf-8";

/*
************************************************************************
* ボタン類
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */

button,
.button {
    border: none;
    text-align: left;
    background-color: transparent;
}

.link-button {
    display: inline-block;
    box-sizing: border-box;

    background-color: transparent;
    color: #3885FF;
    border: 1px solid #3885FF;
    border-radius: 1em 0 1em 0;

    text-align: center;
    width: 240px;
    padding: 0.8em 0;
    margin: 1.5em auto;

    font-size: 1em;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.03em;
}
.link-button.on,
.active .link-button,
.link-button:hover {
    background-color: #3885FF;
    color: #ffffff;
    border: 1px solid #ffffff;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease;
}
.link-button-center {
    margin-left: auto;
    margin-right: auto;
}

/****** 矢印   ********************************/
.click-arrow {
    display: block;
    text-decoration: none;
}
.click-arrow:hover {
    text-decoration: none;
}
.click-arrow:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0.25em);
    right: 1.0em;
    width: 0.5em;
    height: 0.5em;
    transform: rotate(45deg);
    border-right: 1px solid #3885FF;
    border-bottom: 1px solid #3885FF;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease;
}
.active .click-arrow:after,
.click-arrow.on:after,
.click-arrow:hover:after {
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

/*横向き右側*/
.click-arrow.click-arrow-yoko:after {
    transform: rotate(-45deg);
}
/*横向き左側*/
.click-arrow.click-arrow-yoko.click-arrow-yoko-left:after {
    display: none;
}

.click-arrow.click-arrow-yoko.click-arrow-yoko-left:before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0.25em);
    left: 1.0em;
    width: 0.5em;
    height: 0.5em;
    transform: rotate(135deg);
    border-right: 1px solid #3885FF;
    border-bottom: 1px solid #3885FF;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease;
}
.active .click-arrow.click-arrow-yoko.click-arrow-yoko-left:before,
.click-arrow.click-arrow-yoko.click-arrow-yoko-left.on:before,
.click-arrow.click-arrow-yoko.click-arrow-yoko-left:hover:before {
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}



/*アコーディオンの矢印*/
.accordion-trigger {
    width: 100%;
}
.accordion .click-arrow:after {
    top: calc(50% - 0.625em);
    right: 1.0em;
    width: 1.25em;
    height: 1.25em;
    border-right: 1px solid #404040;
    border-bottom: 1px solid #404040;
    transform: rotate(-45deg);
}
.accordion .click-arrow.on:after {
    transform: rotate(45deg);
    border-right: 1px solid #3885ff;
    border-bottom: 1px solid #3885ff;
}
.accordion .click-arrow:hover:after {
    border-right: 1px solid #3885ff;
    border-bottom: 1px solid #3885ff;
}

.search-tag .select-button-list {
    margin-top: 1em;
    justify-content: center;
}
.search-tag .accordion-trigger.click-arrow:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0.25em);
    right: 1.0em;
    width: 0.5em;
    height: 0.5em;
    transform: rotate(45deg);
    border-right: 1px solid #3885FF;
    border-bottom: 1px solid #3885FF;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease;
}
.search-tag .accordion-trigger.click-arrow.on:after,
.search-tag .accordion-trigger.click-arrow:hover:after {
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
.search-tag .accordion-trigger.click-arrow.on {
    display: none;
}

/****** ボタンが複数個並ぶ時   ********************************/

.select-button-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: -1em;
    margin-bottom: 1em;
}
.select-button-list.select-button-list-center {
    justify-content: center;
}
.select-button-item {
    width: calc(25% - 2em);
    margin: 1em;
    text-align: center;
}
.select-button-list .link-button {
    margin: 0;
}
.select-button-list .link-button.click-arrow:after {
    width: 0.5em;
    height: 0.5em;
    /*top: calc(35%);*/
}
.select-button-list .link-button.click-arrow:hover:after {

}


/****** 商品リンクボタン   ********************************/
.select-button-item-img {
    margin-bottom: 0.5em;
}
.select-button-list.select-button-item-list .select-button-item {

}

.select-button-list.select-button-item-list .link-button {
    border: none;
}
.select-button-list.select-button-item-list .link-button:hover {
    background-color: transparent;
    color: #3885ff;
    opacity: 0.7;
}

.select-button-list.select-button-item-list .link-button.click-arrow:after {
    top: calc(100% - 1.6em);
}
.select-button-list.select-button-item-list .link-button.click-arrow:hover:after {
    border-color: #3885ff;
}


/****** Web Select アプリ リンクボタン   ********************************/
.link-button-web-select span {
    font-weight: bold;
    font-size: 2.2rem;
    width: 50%;
    line-height: 1.2;
}

/****** LINE リンクボタン   ********************************/

.link-button.link-button-line {
    color: #fff;
    border-color: #00B900;
    background-color: #00B900;
    padding: 0.5em;
    display: inline-block;
}
.link-button-line.click-arrow:after {
    border-color: #fff;
}


.button.reserve-web {
    margin-bottom: 1em;
    border-radius: 0.5em;
}
.button.reserve-web a {
    padding: 0.3em 0;
    border: 1px solid #3885ff;
    border-radius: 0.5em;
    text-align: center;
    display: block;
}
.button.reserve-web:hover,
.button.reserve-web:hover a {
    background-color: #3885ff;
    color: #fff;
}
.button.reserve-web a:hover {
    background-color: #3885ff;
    text-decoration: none;
    color: #fff;
}
.button.reserve-web .text {
    font-size: 1.2em;
}
.button.reserve-web a.icon-out-link:hover:after {
    background-image: url(../../img/common/icon/ic-out-link-wh.svg);
}


.button.reserve-tel {
    border-radius: 0.5em;
}
.button.reserve-tel a {
    padding: 0.3em 0;
    border: 1px solid #3885ff;
    border-radius: 0.5em;
    text-align: center;
    display: block;
}
.button.reserve-tel:hover,
.button.reserve-tel:hover a {
    background-color: #3885ff;
    color: #fff;
}
.button.reserve-tel a:hover {
    background-color: #3885ff;
    text-decoration: none;
    color: #fff;
}
.button.reserve-tel .phone-number {
    font-size: 1.0em;
}
.button.reserve-tel .phone-number .tel {
    font-weight: bold;
}

.button.reserve-tel .icon.tel:before {
    margin-right: 0.6em;
}
.button.reserve-tel:hover .icon.tel:before {
    background-image: url(../../img/icon/tel-wh.svg);
}

/****** ページネーション   ********************************/

.pagination {
    margin: 0 auto;
    text-align: center;
}
.pagination li {
    display: inline-block;
    list-style: none;
    margin-left: 0;
}
.pagination li:first-child {
    margin-left: 0;
}
.pagination li a {
    border: 1px solid #3885FF;
    color: #3885FF;
    padding: 0.5em 2em;
    display: block;
}
.pagination li a:hover {
    background-color: #3885FF;
    color: #fff;
    text-decoration: none;
}
.pagination li.prev a {
    border-radius: 0.8em 0 0 0.8em;
}
.pagination li.next a {
    border-radius: 0 0.8em 0.8em 0;
}
.pagination li.disable {
    display: none;
}

select{
    outline:none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    border: none;
    letter-spacing: 0;


    background-color: #3885FF;
    padding: 0.5em 0.8em;
    border-radius: 0.4em;
    text-align: center;
    color: #fff;
    font-weight: bold;

}
select option{
  background-color: #fff;
  color: #333;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #828c9a;
}


/****** 電話   ********************************/

button.contact-tel {
    margin: 0 auto;
    display: block;
    text-align: center;
}

button.contact-tel a {
    color: #404040;
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 0.5em;
    display: block;
}
button.contact-tel .contact-tel-text {
    margin-bottom: 0.5em;
}

/****** 予約WEBと電話   ********************************/

.block-button-reserve .reserve-tel {
    width: 50%;
    float: left;
    text-align: center;
    line-height: 1;
}
.block-button-reserve .reserve-tel:last-child {
    float: none;
    margin: 0 auto;
}
.block-button-reserve .reserve-web {
    float: left;
    width: 50%;
    padding-left: 3em;
    text-align: center;
    border-left: 1px solid #707070;
}
.block-button-reserve .reserve-web a {
    display: block;
    width: 80%;
    margin: 0 auto;
    border:1px solid #404040;
    border-radius: 1em;
    padding: 1.5em 0;
    color: #404040;
}
.block-button-reserve .reserve-web.reserve-web-only {
    border-left: none;
    width: 100%;
}

.block-button-reserve .reserve-web.reserve-web-only a {
    width: 50%;
}


.block-button-reserve .reserve-web a:hover {
    background-color: #3885ff;
    color: #fff;
    font-weight: bold;
    border:1px solid #fff;
    text-decoration: none;
    transition-duration: 0.3s;
    transition-property: all;
    transition-timing-function: ease;
}
.block-button-reserve .reserve-web a:hover .icon-out-link:after {
    background-image: url(../../img/common/icon/ic-out-link-wh.svg);
}
.block-button-reserve .reserve-tel span:before {
    width: 0.9em;
    height: 0.8em;
    margin-right: 0.3em;
}
.block-button-reserve .reserve-tel .phone-number {
    display: block;
    font-size: 2em;
    margin: 0.2em 0 0.1em 0;
    line-height: 1;
    color: #404040;
    font-weight: bold;
}
.block-button-reserve .reserve-tel .phone-number:hover {
    text-decoration: none;
    color: #3885ff
}
.block-button-reserve .reserve-web .icon-out-link:after {
    margin-left: 0.5em;
    vertical-align: baseline;
    width: 1em;
    height: 1em;
    }
.block-button-reserve .flow-reserve-tel .phone-number .icon.tel {
    vertical-align: bottom;
}

.block-button-reserve .reserve-web.contact-mail a:hover .icon.mail:before {
    background-image: url(../../img/icon/mail-wh.svg);
}




/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1320px) {

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
    button {
        background-color: transparent;
    }
    .select-button-item {
        width: calc(50% - 2em);
        margin: 0.5em 1em;
        text-align: center;
    }
    .link-button {
        border-radius: 3.125vw 0 3.125vw 0;
        width: 60%;
        margin: 4.6875vw auto;
        padding: 2.34vw 0;
        font-size: 0.9em;
    }
    .select-button-list .link-button {
        width: 100%;
    }
    .accordion .click-arrow:after {
        width: 1em;
        height: 1em;
    }
    .link-button.link-button-line {
        display: block;
    }
    .block-button-reserve .reserve-tel {
        width: 100%;
        float: none;
        margin-bottom: 2em;
    }
    .block-button-reserve .reserve-web {
        float: none;
        width: 100%;
        padding-left: 0em;
        border-left: none;
    }
    .block-button-reserve .reserve-web.reserve-web-only a {
        width: 100%;
    }
}