/* ============== .c-btn ============== */
.c-btn
{
    font-family: 'Zen Old Mincho', serif;
    font-weight: 500;

    position: relative;
    z-index: 0;

    display: block;
    overflow: hidden;

    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 337px;
    padding: 14px 0;

    -webkit-transition: color .3s;
            transition: color .3s;
    text-align: center;
    letter-spacing: .1em;

    color: #fff;
    border: 1px solid #fff;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn
    {
        width: 17.55208vw;
        padding: .72917vw 0;

        border: .05208vw solid #fff;
    }
}

@media print, screen and (max-width: 1025px)
{
    .c-btn
    {
        width: 29.29688vw;
        padding: 1.5625vw 0;
    }
}

@media print, screen and (max-width: 430px)
{
    .c-btn
    {
        width: 68.26667vw;
        padding: 3.73333vw 0;

        border: .2vw solid #fff;
    }
}

.c-btn:before
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition: -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition: -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition:         transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition:         transform .6s cubic-bezier(.8, 0, .2, 1) 0s, -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top;

    background-color: #fff;
}

.c-btn:after
{
    position: absolute;
    top: 0;
    right: 16px;
    bottom: 0;

    width: 68px;
    height: 1px;
    margin: auto 0;

    content: '';

    background-color: #fff;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn:after
    {
        right: .83333vw;

        width: 3.54167vw;
        height: .05208vw;
    }
}

@media print, screen and (max-width: 430px)
{
    .c-btn:after
    {
        right: 3.38542vw;

        width: 6.51042vw;
        height: .19531vw;
    }
}

.c-btn > span,
.c-btn > div
{
    position: relative;
}

.c-btn > span::before,
.c-btn > div::before
{
    position: absolute;
    top: 0;
    right: -92px;
    bottom: 0;

    width: 68px;
    height: 2px;
    margin: auto 0;

    content: '';
    -webkit-transition: -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition: -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition:         transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition:         transform .6s cubic-bezier(.8, 0, .2, 1) 0s, -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
    -webkit-transition-delay: .1s;
            transition-delay: .1s;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top;

    background-color: #070707;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn > span::before,
    .c-btn > div::before
    {
        right: -4.79167vw;

        width: 3.54167vw;
        height: .10417vw;
    }
}

@media (any-hover: hover)
{
    .c-btn:hover
    {
        -webkit-transition: color .3s;
                transition: color .3s;

        color: #070707;
    }
    .c-btn:hover:before
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: left top;
                transform-origin: left top;
    }
    .c-btn:hover:after
    {
        opacity: 0;
    }
    .c-btn:hover > span::before,
    .c-btn:hover > div::before
    {
        -webkit-transition-delay: .1s;
                transition-delay: .1s;
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: left top;
                transform-origin: left top;
    }
}

.c-btn--black
{
    position: relative;
    z-index: 1;

    overflow: hidden;

    color: #fff;
    border: 1px solid #070707;
    background-color: transparent;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn--black
    {
        border: .05208vw solid #070707;
    }
}

@media print, screen and (max-width: 430px)
{
    .c-btn--black
    {
        margin: 0 auto;

        border: .19531vw solid #070707;
    }
}

.c-btn--black:before
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    content: '';
    -webkit-transition: -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition: -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition:         transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition:         transform .6s cubic-bezier(.8, 0, .2, 1) 0s, -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: left top;
            transform-origin: left top;

    background-color: #070707;
}

.c-btn--black:after
{
    position: absolute;
    right: 16px;

    height: 1px;

    content: '';
    -webkit-transition: background-color .3s;
            transition: background-color .3s;

    background-color: #fff;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn--black:after
    {
        right: .83333vw;

        height: .05208vw;
    }
}

@media print, screen and (max-width: 430px)
{
    .c-btn--black:after
    {
        right: 3.46667vw;

        height: .2vw;
    }
}

.c-btn--black > span::before,
.c-btn--black > div::before
{
    height: 1px;

    background-color: #070707;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn--black > span::before,
    .c-btn--black > div::before
    {
        height: .05208vw;
    }
}

@media (any-hover: hover)
{
    .c-btn--black:hover
    {
        color: #070707;
    }
    .c-btn--black:hover:before
    {
        -webkit-transform: scale(0, 1);
                transform: scale(0, 1);
        -webkit-transform-origin: right top;
                transform-origin: right top;
    }
    .c-btn--black:hover:after
    {
        right: 16px;

        background-color: #070707;
    }
}

@media print and (any-hover: hover), screen and (any-hover: hover) and (max-width: 1920px)
{
    .c-btn--black:hover:after
    {
        right: .83333vw;
    }
}

@media (any-hover: hover)
{
    .c-btn--black:hover > span::before,
    .c-btn--black:hover > div::before
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: left top;
                transform-origin: left top;

        background-color: #070707;
    }
}

.c-btn--center
{
    margin: 0 auto;
}

.c-btn--tourism
{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 53px;
    height: 337px;
    padding: 0 14px 10px 14px;

    letter-spacing: .2em;
        -ms-writing-mode: tb-rl;

    -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn--tourism
    {
        width: 2.76042vw;
        height: 17.55208vw;
        padding: 0 .72917vw .52083vw .72917vw;
    }
}

@media print, screen and (max-width: 1025px)
{
    .c-btn--tourism
    {
        width: 4.49219vw;
        height: 29.29688vw;
        padding: 0 1.5625vw .97656vw 1.5625vw;
    }
}

@media print, screen and (max-width: 430px)
{
    .c-btn--tourism
    {
        width: 68.26667vw;
        height: auto;
        margin: 0 auto;
        margin-top: 8vw;
        padding: 3.73333vw 0;

            -ms-writing-mode: lr-tb;

        border: .2vw solid #fff;

        -webkit-writing-mode: horizontal-tb;
                writing-mode: horizontal-tb;
    }
}

.c-btn--tourism:before
{
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: center top;
            transform-origin: center top;
}

.c-btn--tourism:after
{
    top: auto;
    right: 0;
    bottom: 16px;
    left: 0;

    width: 1px;
    height: 68px;
    margin: 0 auto;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn--tourism:after
    {
        bottom: .83333vw;

        width: .05208vw;
        height: 3.54167vw;
    }
}

@media print, screen and (max-width: 430px)
{
    .c-btn--tourism:after
    {
        right: 3.38542vw;
        bottom: 50%;
        left: auto;

        width: 6.51042vw;
        height: .19531vw;

        -webkit-transform: translateY(50%);
                transform: translateY(50%);
    }
}

.c-btn--tourism > span::before,
.c-btn--tourism > div::before
{
    top: auto;
    right: 0;
    bottom: -92px;
    left: 0;

    width: 2px;
    height: 68px;
    margin: 0 auto;

    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: center top;
            transform-origin: center top;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn--tourism > span::before,
    .c-btn--tourism > div::before
    {
        bottom: -4.79167vw;

        width: .10417vw;
        height: 3.54167vw;
    }
}

@media (any-hover: hover)
{
    .c-btn--tourism:hover:before
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: center top;
                transform-origin: center top;
    }
    .c-btn--tourism:hover > span::before
    .c-btn--tourism:hover > div::before
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: center top;
                transform-origin: center top;
    }
}

/* ===== <div>ラッパー対応 ===== */

/* <span>と同じ振る舞いにする（テキスト幅に収める） */
.c-btn > div
{
    position: relative;

    display: inline-block;
}

/* <p>のデフォルトmarginでボタン高さが崩れるためリセット */
.c-btn > div > p
{
    margin: 0;
    padding: 0;
}

/* .c-btn > span::before 相当 */
.c-btn > div::before
{
    position: absolute;
    top: 0;
    right: -92px;
    bottom: 0;

    width: 68px;
    height: 2px;
    margin: auto 0;

    content: '';
    -webkit-transition: -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition: -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition:         transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
            transition:         transform .6s cubic-bezier(.8, 0, .2, 1) 0s, -webkit-transform .6s cubic-bezier(.8, 0, .2, 1) 0s;
    -webkit-transition-delay: .1s;
            transition-delay: .1s;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: right top;
            transform-origin: right top;

    background-color: #070707;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn > div::before
    {
        right: -4.79167vw;

        width: 3.54167vw;
        height: .10417vw;
    }
}

@media (any-hover: hover)
{
    .c-btn:hover > div::before
    {
        -webkit-transition-delay: .1s;
                transition-delay: .1s;
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: left top;
                transform-origin: left top;
    }
}

/* ===== .c-btn--black ===== */

.c-btn--black > div::before
{
    height: 1px;

    background-color: #070707;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn--black > div::before
    {
        height: .05208vw;
    }
}

@media (any-hover: hover)
{
    .c-btn--black:hover > div::before
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: left top;
                transform-origin: left top;

        background-color: #070707;
    }
}

.c-btn--tourism > div::before
{
    top: auto;
    right: 0;
    bottom: -92px;
    left: 0;

    width: 2px;
    height: 68px;
    margin: 0 auto;

    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: center top;
            transform-origin: center top;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn--tourism > div::before
    {
        bottom: -4.79167vw;

        width: .10417vw;
        height: 3.54167vw;
    }
}

@media (any-hover: hover)
{
    .c-btn--tourism:hover > div::before
    {
        -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
        -webkit-transform-origin: center top;
                transform-origin: center top;
    }
}

.c-btn--left
{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0 auto;
    padding-left: 30px;

    text-align: left;
}

@media print, screen and (max-width: 1920px)
{
    .c-btn--left
    {
        padding-left: 1.5625vw;
    }
}

@media print, screen and (max-width: 1025px)
{
    .c-btn--left
    {
        padding-left: calc(30 / 1025 * 100vw);
    }
}

@media print, screen and (max-width: 430px)
{
    .c-btn--left
    {
        padding-left: calc(20 / 430 * 100vw);
    }
}