@charset "utf-8";
:root {
    --blk: #333;
    --wht: #fff;
    --ylw: #fff896;
    --light-ylw: #fffdeb;
    --blue: #0075c2;
    --l-blue: #c7d5ed;
    --pnk: #cc6699;
    --l-pnk: #e0bad2;
    --font-main: "Noto Sans JP", sans-serif;
    --font-sub: "Zen Kaku Gothic New", sans-serif;
    --max-width: min(1200px,96%);
    --max-content: min(1100px,90%);
}
body,p,td,th,ol,ul,h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
}
ol,ul{
    list-style: none
}
img {
    width: 100%;
    vertical-align: middle;
}
a {
    border: 0;
    color: var(--blk);
    text-decoration: none;
}
html {
    font-size: 62.5%;
    line-height: 1;
    font-family: var(--font-main);
    background-color: var(--light-ylw);
}
p {
    font-size: 1.6rem;
    line-height: 1.6;
}
p.f_xs {
    font-size: 1.4rem;
    padding-top: 1.2rem;
}
p.f_xxs {
    font-size: 1.2rem;
    padding-top: 1.2rem;
}
p.pd_none {
    padding-top: 0;
}
.fadeIn {
    opacity : 0;
    transform : translate(0, 20px);
    transition : all 1s;
}
.fadeIn.active{
    opacity : 1;
    transform : translate(0, 0);
}
.pc_none {
    display: none;
}
#main {
    overflow: hidden;
}
#main .main_head {
    text-align: center;
}
#main .main_head::before {
    content: "";
    width: 100%;
    height: 2rem;
    background: url("../images/line.webp") top center / cover no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}
#main .main_head h1 {
    width: min(823px,80vw);
    margin: 10rem auto 4rem;
    opacity: 0;
    animation: top_01 2.5s ease 1s forwards;
}
@keyframes top_01 {
    0% {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
#main .main_head .introduction {
    color: var(--blue);
    font-family: var(--font-sub);
    font-size: 2.2rem;
    line-height: 1.56;
    font-weight: 700;
    padding-bottom: 2rem;
    opacity: 0;
    animation: top_02 2.5s ease 1.5s forwards;
}
@keyframes top_02 {
    0% {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
#main .main_head .f_xs {
    opacity: 0;
    animation: top_03 2.5s ease 1.5s forwards;
}
@keyframes top_03 {
    0% {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
#main .swiper {
    margin-top: 5rem;
    opacity: 0;
    animation: top_04 2.5s ease 2s forwards;
}
@keyframes top_04 {
    0% {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}
#main .swiper-wrapper {
    transition-timing-function: linear; 
}
#main .tabiwa_pass {
    width: var(--max-content);
    margin: 8rem auto 10rem;
    background-color: var(--wht);
    border-radius: 20px;
}
#main .tabiwa_pass .outer {
    padding: 4.5rem 4.5rem 2rem;
    gap: 2rem;
    display: grid;
    grid-template-columns: 2.5fr 2fr 0.5fr;
}
#main .pass_detail .title img {
    width: min(310px,42vw);
    margin-bottom: 0.5rem;
}
#main .pass_detail .price img {
    width: min(320px,28vw);
    margin: 1rem 0;
}
#main .pass_detail dl {
    font-size: 1.6rem;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
}
#main .pass_detail dl dt {
    background-color: var(--ylw);
    color: var(--blue);
    padding: 0.5rem 0;
    display: inline-block;
    width: min(10vw,90px);
    text-align: center;
}
#main .pass_detail dl dd {
    margin-left: 0;
}
#main .pass_detail dl dd span.small {
    font-size: 1.3rem;
    padding-top: 0.5rem;
    display: inline-block;
    line-height: 1.4;
}
#main .pass_detail dl dd span.pink {
    color: var(--pnk);
    padding-left: 0.15rem;
}
#main .qr .qr_text {
    margin-bottom: 1rem;
} 
#main .navigation {
    text-align: center;
}
#main .navigation .nav_text img{
    width: 410px;
}
#main .navigation ul {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    margin: 2rem 0;
}
#main .navigation ul li img{
    width: 340px;
}
#main .heading {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: var(--max-content);
    margin: 10rem auto;
}
#main .heading h2{
    flex: 1.5;
}
#main .heading p{
    flex: 2;
    font-size: 1.8rem;
    line-height: 1.7;
}
#main .wrapper {
    width: var(--max-content);
    margin: 0 auto;
}
#main .wrapper .spot {
    background-color: var(--wht);
    padding: 8rem 5rem;
    display: grid;
    gap: 3rem;
    position: relative;
    grid-template-columns: 1.2fr 1fr;
}
#main .wrapper .spot.reverse {
    grid-template-columns: 1fr 1.2fr;
}
#main .wrapper h3 img{
    width: 21rem;
    height: 5rem;
    object-fit: contain;
    object-position: bottom left;
}
#main .wrapper .spot_detail .description {
    padding: 2rem 0 2rem;
}
#main .spot_detail .spot_info .ico {
    text-indent: -1.8em;
    padding-left: 1.8em;
    padding-bottom: 0.2rem;
    font-size: 1.4rem;
}
#main .spot_detail .spot_info .ico span {
    padding-left: 2.5rem;
    padding-bottom: 0.25rem;
}
#main .spot_detail .spot_info span.tel {
    background: url("../images/ico_tel.svg") center left / 1.8rem no-repeat;
}
#main .spot_detail .spot_info span.address {
    background: url("../images/ico_address.svg") center left / 1.8rem no-repeat;
}
#main .spot_detail .spot_info span.time {
    background: url("../images/ico_time.svg") center left / 1.8rem no-repeat;
}
#main .spot_detail .spot_info span.train {
    background: url("../images/ico_train.svg") center left / 1.8rem no-repeat;
}
#main .spot_detail .spot_info span.budget {
    background: url("../images/ico_budget.svg") center left / 1.8rem no-repeat;
}
#main .spot_detail .spot_info span.holiday {
    background: url("../images/ico_holiday.svg") center left / 1.8rem no-repeat;
}
#main .spot_detail .link_btn a {
    display: inline-block;
    padding: 0.5rem 2rem 0.5rem 2.5rem;
    border: 1.5px solid var(--blue);
    border-radius: 5px;
    font-size: 1.6rem;
    color: var(--blue);
    margin-top: 1.8rem;
    position: relative;
}
#main .spot_detail .link_btn p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#main .spot_detail .link_btn p::after {
    content: "";
    background: url("../images/ico_link.png") center left / 1.6rem no-repeat;
    width: 2rem;
    height: 2rem;
}
#main .spot_detail .link_btn.sns p::after {
    background: url("../images/ico_ig.png") center left / 1.8rem no-repeat;
}
#scenery .wrapper .spot_01 .spot_img p {
    grid-column: 1 / 4;
    padding-top: 0;
}
#scenery .wrapper .spot_01 .spot_illust_figure {
    position: absolute;
    top: -16rem;
    right: max(calc((100vw - 1100px) / 2 - 67rem), 2.75vw);
    width: min(240px,20vw);
}
#main .wrapper .map {
    width: 90%;
    margin: 0 auto;
}
#scenery .wrapper .first {
    width: min(350px,30vw);
    margin: 0 auto 0 min(330px,25vw);
    text-align: center;
}
#scenery .spot .inner {
    display: flex;
    grid-column: 1 / 3;
    width: min(850px,80vw);
    margin: 5rem auto 0;
    gap: 4rem;
}
#scenery .spot .inner .spot_detail,
#scenery .spot .inner .spot_img {
    flex: 1;
}
#main .spot .spot_img {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    align-self: start;
}
#main .spot .spot_img img:nth-of-type(1) {
    grid-column: 1 / 4;
}
#main .spot .spot_img img:nth-of-type(2) {
    grid-column: 1 / 3;
}
#scenery .spot_02 .spot_img img:nth-of-type(2) {
    grid-column: 2 / 4;
}
#family {
    padding-top: 10rem;
} 
#family .wrapper .first {
    width: 180px;
    margin: 0 auto;
    text-align: center;
}
#family .wrapper h3 img {
    width: 29rem;
    height: 2.6rem;
}
#family .wrapper .spot_01 .spot_illust_figure {
    position: absolute;
    top: -16rem;
    right: max(calc((100vw - 1100px) / 2 - 67rem), 2.75vw);
    width: min(220px,20vw);
}
#family .wrapper .spot_02 .spot_illust_figure {
    position: absolute;
    bottom: -3rem;
    left: max(calc((100vw - 1100px) / 2 - 59rem), 7.75vw);
    width: min(260px,18vw);
}
#family .spot_02 .spot_img img:nth-of-type(2) {
    grid-column: 1 / 4;
}
#family .wrapper .spot_03 {
    grid-template-columns: 1fr 1.2fr;
    margin-bottom: 3rem;
    position: relative;
}
#family .wrapper .spot_03::after {
    content: "";
    background: url("../images/fam_map-line.png") center bottom/ 1.8rem no-repeat;
    width: 1.4rem;
    height: 4rem;
    position: absolute;
    bottom: -4rem;
    left: 50%;
    transform: translateX(-50%);
}
#family .wrapper .spot_03 h3 img{
    height: 10rem;
}
#family .wrapper .spot_03 .spot_illust_figure {
    position: absolute;
    bottom: min(41rem,-1vw);
    left: max(calc((100vw - 1100px) / 2 - 59rem), 7.75vw);
    width: min(330px,24vw);
}
#family .spot_04 .spot_img img:nth-of-type(2) {
    grid-column: 1 / 2;
}
#main .about_wester {
    background-color: var(--l-blue);
    position: relative;
    width: min(90%,var(--max-content));
    margin: 10rem auto 8rem;
}
#main .about_wester .about_wrapper{
    display: grid;
    gap: 1rem 3rem;
    padding: 4rem 8rem;
}
#main .about_wester .about_wrapper .title{ 
    grid-column: 1 / 2;
    width: 28rem;
}
#main .about_wester .about_wrapper .about_qr{ 
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    width: 11rem;
}
#main .about_wester::before {
    content: "";
    background: url("../images/about_treat.png") left top/ 6rem no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 30rem;
    height: 10rem;
}
#main .about_wester::after {
    content: "";
    background: url("../images/about_treat.png") right bottom/ 6rem no-repeat;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 6rem;
    height: 6rem;
    transform: scale(-1, -1);
}
#main .qr_sp {
    text-align: center;
    margin-top: 1rem;
}
#main .qr_sp .text{
    text-align: center;
    font-size: 1.6rem;
}
#main .qr_sp .qr_link a{
    display: block;
    background-color: var(--blue);
    color: var(--wht);
    width: 15rem;
    border-radius: 5px;
    padding: 1.2rem 4rem 1.2rem 2rem;
    position: relative;
}
#main .qr_sp .qr_link p::after{
    content: "";
    background: url("../images/qr_btn_sp.png") right bottom/ contain no-repeat;
    position: absolute;
    top: 50%;
    right: 3rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
}
#main .qr_sp .qr_link > a > p{
    line-height: 1;
}
#footer {
    background-color: var(--wht);
    text-align: center;
    padding-top: 6rem;
}
#footer .share_btn ul {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}
#footer .share_btn ul li img{
    width: 4rem;
}
#footer .share_btn ul .url {
    position: relative;
}
#footer .success_msg {
    display: none;
    position: absolute;
    line-height: 1;
    background-color: var(--l-pnk);
    color: var(--wht);
    top: 0.5rem;
    left: 5rem;
    text-align: center;
    border-radius: 5px;
    padding: 0.8rem 1rem;
    font-size: 1.4rem;
    width: 15rem;
}
#footer .credit {
    padding: 3rem 0 5rem;
    border-bottom: 1px solid rgba(0,0,0,.2);
}
#footer .credit p {
    font-size: 1.4rem;
}
#footer button {
    background: none;
    border: none;
    padding: 0;
    cursor:pointer;
}
#footer .copyright {
    padding: 2.5rem 0;
}
#footer small {
    font-size: 1.2rem;
}
#main .link_btn a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    content: '';
    background-color: rgba(197, 212, 236,.5);
    transition-duration: .4s;
    overflow: hidden; 
    z-index: -1;
    border-radius: 3px;
}
#main .link_btn a {
    z-index: 1;
}
#main .navigation ul li,
#footer .share_btn li.sns {
    transition-duration: .4s;
}
#page-top {
    display: none;
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    font-size: 2rem;
    line-height: 1;
    z-index: 99;
}
#page-top a {
    background: var(--l-pnk);
    text-decoration: none;
    color: #fff;
    padding: 2rem 2rem;
    text-align: center;
    display: block;
    border-radius: 50%;
    transition: all .3s;
}
@media (any-hover: hover) {
    #main .qr_sp .qr_link a:hover,
    #main .qr .qr_text a:hover {
        opacity: .8;
    }
    #main .link_btn a:hover::before {
        width: 100%;
    }
    #main .navigation ul li:hover,
    #footer .share_btn li.sns:hover  {
        transform: translateY(2px);
    }
    #page-top a:hover {
        text-decoration: none;
        opacity: .5;
    }
}
@media screen and (max-width: 1100px) {
    #family .wrapper .spot_02 {
        padding-bottom: 10vw;
    }
    #family .wrapper .spot_02 .spot_illust_figure {
        bottom: -3rem;
        left: 29vw;
        width: min(260px,18vw);
    }
}
@media screen and (max-width: 767px) {
    :root {
        --max-width: 100%;
        --max-content: 90.67vw;
    }
    p {
        font-size: 3.73vw;
        line-height: 1.6;
    }
    p.f_xs {
        font-size: 3.2vw;
    }
    p.f_xxs {
        font-size: 2.93vw;
        padding-top: 1vw;
    }
    p.pd_none {
        padding-top: 0;
    }
    .sp_none {
        display: none;
    } 
    .pc_none {
        display: inline-block;
    } 
    #main .main_head {
        text-align: center;
    }
    #main .main_head h1 {
        width: 68vw;
        margin: 20vw auto 10vw;
    }
    #main .main_head .introduction {
        font-size: 4.53vw;
        padding-bottom: 6vw;
    }
    #main .swiper {
        margin-top: 12vw;
    }
    #main .tabiwa_pass {
        width: var(--max-width);
        margin: 18vw 0;
        background-color: var(--wht);
        border-radius: 20px;
    }
    #main .tabiwa_pass .outer {
        padding: 10vw 4vw;
        gap: 4vw;
        grid-template-columns: 100%;
    }
    #main .pass_detail .title,
    #main .pass_detail .price {
        text-align: center;
    }
    #main .pass_detail .title img {
        width: 60vw;
        margin: 5vw 0 2vw;
    }
    #main .pass_detail .price img {
        width: 90vw;
        margin: 8vw 0 4vw;
    }
    #main .pass_detail .title + p {
        text-align: center;
    }
    #main .pass_detail dl {
        font-size: 3.5vw;
        gap: 1rem;
    }
    #main .pass_detail dl dt {
        padding: 1vw 0 1.2vw;
        width: auto;
        flex: 1;
    }
    #main .pass_detail dl dd {
        flex: 3;
    }
    #main .pass_detail dl dd span.small {
        font-size: 2.93vw;
        padding-top: 0.5rem;
    }
    #main .qr_sp {
        text-align: center;
        margin-top: 3vw;
    }
    #main .qr_sp .text{
        text-align: center;
        font-size: 3.73vw;
    }
    #main .qr_sp .qr_link a{
        display: block;
        background-color: var(--blue);
        color: var(--wht);
        width: 56.4vw;
        margin: 2vw auto;
        border-radius: 5px;
        padding: 3vw;
        position: relative;
    }
    #main .qr_sp .qr_link p::after{
        content: "";
        background: url("../images/qr_btn_sp.png") right bottom/ contain no-repeat;
        position: absolute;
        top: 48%;
        right: 2vw;
        transform: translateY(-50%);
        width: 4.5vw;
        height: 4.5vw;
    }
    #main .qr_sp .qr_link > a > p{
        line-height: 1;
    }
    #main .navigation .nav_text img{
        width: 71.33vw;
    }
    #main .navigation ul {
        flex-wrap: wrap;
        gap: 2vw;
        margin: 4vw 0 20vw;
    }
    #main .navigation ul li img{
        width: 74.67vw;
    }
    #main .heading {
        flex-wrap: wrap;
        gap: 6vw;
        width: var(--max-content);
        margin: 15vw auto;
    }
    #main .heading h2{
        flex: auto;
    }
    #main .heading p{
        flex: auto;
        font-size: 4vw;
    }
    #main .wrapper {
        width: var(--max-content);
        margin: 0 auto;
    }
    #main .wrapper .spot {
        padding: 10vw 4vw;
        gap: 6vw;
        grid-template-columns: 1fr;
    }
    #main .wrapper .spot.reverse {
        grid-template-columns: 1fr;
    }
    #main .wrapper .spot.reverse .spot_detail {
        grid-row: 2;
    }
    #main .wrapper h3 img{
        width: 100%;
        height: 11.47vw;
    }
    #main .wrapper .spot_detail .description {
        padding: 4vw 0;
    }
    #main .spot_detail .spot_info .ico {
        text-indent: -1.8em;
        padding-left: 1.8em;
        padding-bottom: 1vw;
        font-size: 3.47vw;
        line-height: 1.5;
    }
    #main .spot_detail .spot_info .ico span {
        padding-left: 5.8vw;
        padding-bottom: 0.6vw;
    }
    #main .spot_detail .spot_info span.tel {
        background: url("../images/ico_tel.svg") center left / 4vw no-repeat;
    }
    #main .spot_detail .spot_info span.address {
        background: url("../images/ico_address.svg") center left / 4vw no-repeat;
    }
    #main .spot_detail .spot_info span.time {
        background: url("../images/ico_time.svg") center left / 4vw no-repeat;
    }
    #main .spot_detail .spot_info span.train {
        background: url("../images/ico_train.svg") center left / 4vw no-repeat;
    }
    #main .spot_detail .spot_info span.budget {
        background: url("../images/ico_budget.svg") center left / 4vw no-repeat;
    }
    #main .spot_detail .spot_info span.holiday {
        background: url("../images/ico_holiday.svg") center left / 4vw no-repeat;
    }
    #main .spot_detail .link_btn a {
        padding: 1.5vw 4vw 1.5vw 6vw;
        font-size: 3.73vw;
        margin-top: 4vw;
    }
    #main .spot_detail .link_btn p {
        gap: 1.5vw;
    }
    #main .spot_detail .link_btn p::after {
        content: "";
        background: url("../images/ico_link.png") center left / 4vw no-repeat;
        width: 5vw;
        height: 5vw;
    }
    #main .spot_detail .link_btn.sns p::after {
        background: url("../images/ico_ig.png") center left / 3.8vw no-repeat;
    }
    #scenery .wrapper .spot_01 .spot_illust_figure {
        top: auto;
        right: -1vw;
        bottom: 6vw;
        width: 54vw;
    }
    #main .wrapper .map {
        width: 70%;
        margin: 0 auto;
    }
    #scenery .wrapper .first {
        width: 64vw;
        margin: 0 auto 0 -2vw;
        text-align: center;
    }
    #scenery .wrapper .second {
        width: 57.33vw;
        margin: 0 auto 0 16.68vw;
        text-align: center;
    }
    #scenery .wrapper .third {
        width: 74vw;
        margin: 0 auto 0 -1.5vw;
        text-align: center;
    }
    #scenery .wrapper .fourth {
        width: 68vw;
        margin: 0 auto 0 3.68vw;
        text-align: center;
    }
    #scenery .spot .inner {
        flex-wrap: wrap;
        grid-column: 1;
        width: 100%;
        margin: 8vw auto 0;
        gap: 4vw;
    }
    #scenery .spot .inner .spot_detail,
    #scenery .spot .inner .spot_img {
        flex: auto;
    }
    #scenery .wrapper .spot_01 .spot_img p {
        padding: 0;
        grid-column: 1;
    }
    #main .wrapper .spot_01 {
        padding-bottom: 60vw;
    }
    #main .spot .spot_img {
        grid-template-columns: 1fr;
        gap: 1.5vw;
    }
    #main .spot .spot_img img:nth-of-type(1) {
        grid-column: 1;
    }
    #main .spot .spot_img img:nth-of-type(2) {
        grid-column: 1;
    }

    #scenery .spot_02 .spot_img img:nth-of-type(2) {
        grid-column: 1;
        grid-row: 2;
    }
    #main .wrapper .spot_03 .inner h3 img {
        height: 5.5vw;
    }
    #scenery .spot .spot_detail{
        grid-column: 1;
    }
    #family {
        padding-top: 12vw;
    } 
    #family .wrapper .first {
        width: 36vw;
    }
    #family .wrapper .second {
        width: 63vw;
        margin: 0 auto 0 13.84vw;
    }
    #family .wrapper .third {
        width: 56vw;
    }
    #family .wrapper .fourth {
        width: 73vw;
        margin: 0 2.8vw 0 auto;
    }
    #family .wrapper h3 img {
        width: 100%;
        height: 6vw;
    }
    #family .wrapper .spot_01 .spot_illust_figure {
        position: absolute;
        top: auto;
        right: 2vw;
        bottom: -4vw;
        width: 54vw;
    }
    #family .wrapper .spot_01 h3 img {
        object-position: -1vw bottom;
    }
    #family .wrapper .spot_02 {
        padding-bottom: 50vw;
    }
    #family .wrapper .spot_02 .spot_illust_figure {
        position: absolute;
        bottom: -9vw;
        left: 3vw;
        width: 60vw;
    }
    #family .spot_02 .spot_img img:nth-of-type(2) {
        grid-column: 1;
    }
    #family .wrapper .spot_03 {
        grid-template-columns: 1fr 1.2fr;
        margin-bottom: 3rem;
        position: relative;
        padding-bottom: 50vw;
    }
    #family .wrapper .spot_03::after {
        content: "";
        background: url("../images/fam_map-line.png") center bottom/ 3vw no-repeat;
        width: 7vw;
        height: 18vw;
        position: absolute;
        bottom: -18vw;
        left: 50%;
        transform: translateX(-50%);
    }
    #family .wrapper .spot_03 h3 img{
        height: 23vw;
    }
    #family .wrapper .spot_03 .spot_illust_figure {
        bottom: 8vw;
        left: 19vw;
        width: 74vw;
    }
    #family .wrapper .spot_03 h3 img{
        height: 23vw;
    }
    #family .wrapper .spot_04 h3 img {
        object-position: -1vw bottom;
    }
    #family .spot_04 .spot_img img:nth-of-type(2) {
        grid-column: 1;
        width: 50%;
    }
    #main .about_wester {
        width: var(--max-content);
        margin: 20vw auto 14vw;
    }
    #main .about_wester .about_wrapper{
        gap: 1rem 3rem;
        padding: 4rem 2rem 3rem;
    }
    #main .about_wester .about_wrapper .title{ 
        grid-column: 1;
        width: 60vw;
        margin: 0 auto;
    }
    #main .about_wester::before {
        content: "";
        background: url("../images/about_treat.png") left top/ 10vw no-repeat;
    }
    #main .about_wester::after {
        content: "";
        background: url("../images/about_treat.png") right bottom/ 10vw no-repeat;
        width: 10vw;
        height: 10vw;
    }
    #footer {
        padding-top: 10vw;
    }
    #footer .share_btn ul {
        gap: 4vw;
        padding: 3vw 0 7vw;
        margin-top: 0;
    }
    #footer .share_btn ul li img{
        width: 8vw;
    }
    #footer .share_btn ul .url {
        position: relative;
    }
    #footer .success_msg {
        display: none;
        position: absolute;
        top: 10vw;
        left: -15vw;
        padding: 1.5vw 3vw;
        font-size: 3vw;
        width: 32vw;
    }
    #footer .credit {
        padding: 0 0 10vw;
    }
    #footer .credit p {
        font-size: 2.8vw;
    }
    #footer .copyright {
        padding: 4vw 0;
    }
    #footer small {
        font-size: 2.5vw;
        line-height: 1.5;
    }
    #main .link_btn a::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
        content: '';
        background-color: rgba(197, 212, 236,.5);
        transition-duration: .4s;
        overflow: hidden; 
        z-index: -1;
        border-radius: 3px;
    }
    #main .link_btn a {
        z-index: 1;
    }
    #main .navigation ul li,
    #footer .share_btn li {
        transition-duration: .4s;
    }
    #page-top {
        bottom: 3vw;
        right: 3vw;
        font-size: 3vw;
    }
    #page-top a {
        padding: 3vw;
    }
    
}