@charset "UTF-8";

/*===============================

ページ内共通

================================*/


/* ------------------------------
   　見出し
------------------------------ */

.heading {
    position: relative;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    clear: both;
    margin-bottom: 50px;
}

.heading .backicon {
    position: absolute;
    right: 0;
    width: 35%;
    max-height: 250px;
    margin-top: -30px;
    opacity: .7;
}

@media screen and (max-width:1200px) {
    .heading .backicon {
        right: 3%;
    }
}

.heading h2 {
    font-size: 3.6rem;
    text-decoration: none;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
    width: 90%;
}

@media screen and (max-width:600px) {
    .heading h2 {
        font-size: 3.2rem;
    }

}



.heading p {
    position: relative;
    padding: 20px 5% 0px;
    max-width: 900px;
    margin: 0 auto 50px;
    color: #777;
}

/* ------------------------------
   　ボタン
------------------------------ */

/* ▼▼ボタン01（黒→黄色）▼▼ */
.btn01 {
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
    clear: both;
    text-align: center;
    position: relative;
}


.btn01 span {
    position: relative;
    display: inline-block;
    padding: 8px 40px;
    border: 3px solid #141414;
    background: #141414;
    border-radius: 200px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 1;
    font-weight: bold;
    font-size: 2.4rem;
}


@media screen and (max-width:600px) {
    .btn01 span {
        padding: 8px 30px;
        font-size: 1.8rem;
    }
}

.btn01 a:hover {
    opacity: 1 !important;
}

.btn01 a span:hover {
    background-color: #ffdc00;
    color: #141414;
}



/* ▼▼ボタン02（黒→白）▼ */

.btn02 {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    clear: both;
    text-align: center;
    position: relative;
}

.btn02 span {
    position: relative;
    display: inline-block;
    padding: 8px 30px;
    border: 3px solid #141414;
    background: #141414;
    border-radius: 200px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 1;
    font-weight: bold;
    font-size: 25px;
}

@media screen and (max-width:600px) {
    .btn02 span {
        padding: 8px 20px;
        font-size: 18px;
    }
}

.btn02 a:hover {
    opacity: 1 !important;
}

.btn02 a span:hover {
    background-color: #FFF;
    color: #141414;
}


/* ▼▼ボタン03（白→黒）▼▼ */

.btn03 {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    clear: both;
    text-align: center;
    position: relative;
}

.btn03 span {
    position: relative;
    display: inline-block;
    padding: 8px 30px;
    border: 3px solid #FFF;
    background: #FFF;
    border-radius: 200px;
    color: #141414;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 1;
    font-weight: bold;
    font-size: 2.5rem;
}

@media screen and (max-width:600px) {
    .btn03 span {
        padding: 8px 20px;
        font-size: 1.8rem;
    }
}

.btn03 a:hover {
    opacity: 1 !important;
}

.btn03 a span:hover {
    background-color: #141414;
    color: #FFF;
}


/* ▼▼ボタン04（白→赤）▼▼ */

.btn04 {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    clear: both;
    text-align: center;
    position: relative;
}

.btn04 span {
    position: relative;
    display: inline-block;
    padding: 8px 30px;
    border: 3px solid #cc0700;
    color: #cc0700;
    background: #FFF;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 1;
    font-weight: bold;
    font-size: 2.5rem;
}

@media screen and (max-width:600px) {
    .btn04 span {
        padding: 8px 20px;
        font-size: 1.8rem;
    }
}

.btn04 a:hover {
    opacity: 1 !important;
}

.btn04 a span:hover {
    background-color: #cc0700;
    color: #FFF;
}


/* ▼▼ボタン05（アイコンあり）（黒→黄色）▼▼ */

.btn05 {
    width: 100%;
    max-width: 1000px;
    margin: 10px auto;
    clear: both;
    text-align: center;
    position: relative;
}


.btn05 span {
    position: relative;
    display: inline-block;
    padding: 8px 40px;
    border: 3px solid #141414;
    background: #141414;
    border-radius: 200px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    z-index: 1;
    font-weight: bold;
    font-size: 2.4rem;
}


.btn05 span img {
    height: 35px;
    position: relative;
    top: 4px;
    padding-right: 10px;
}


@media screen and (max-width:600px) {
    .btn05 span {
        padding: 5px 20px;
        font-size: 1.4rem;
    }

    .btn05 span img {
        height: 14px;
        top: 0px;
        padding-right: 3px;
    }
}

.btn05 a:hover {
    opacity: 1 !important;
}

.btn05 a span:hover {
    background-color: #FFF;
    color: #141414;
}

.btn05 a span:hover img {
    filter: invert(100%) grayscale(100%) contrast(100%);
    -webkit-filter: invert(100%) grayscale(100%) contrast(100%);
}