@charset "utf-8";

/*===================================
　フッター共通スタイル
===================================*/

#footer {
    padding-top: 2px;
    text-align: center;
    border-top: 1px solid #c0c0c0;
}

#footer_navi {
    margin: 0 auto;
    max-width: 800px;
    padding: 0;
    width: 90%;
}

    #footer_navi ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        padding: 10px;
    }

    #footer_navi li {
        flex: 1 1 auto;
        text-align: center;
        padding: 1px;
    }

        #footer_navi li + li {
            border-left: 1px solid #c0c0c0;
        }

    #footer_navi a {
        display: block;
        color: #202020;
        font-size: 0.8rem;
        line-height: 1.2rem;
        font-family: sans-serif;
        transition: 0.3s;
    }

        #footer_navi a:hover {
            color: #000;
            background-color: #f0f0f0;
        }

/* ===================================
   ページトップボタンアニメーション
=================================== */
#page-top {
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 999;
    opacity: 0; /* 初期は非表示 */
    transform: translateY(140px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

    /* 表示・非表示アニメーション */
    #page-top.UpMove {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #page-top.DownMove {
        opacity: 0;
        visibility: visible; /* 即非表示にせずフェード */
        transform: translateY(20px);
    }

    /* ボタンデザイン */
    #page-top a {
        position: relative;
        display: inline-block;
        background: rgba(119, 119, 119, 0.8);
        color: #fff;
        font-size: 1.0rem;
        text-align: center;
        padding: 5px 20px 5px 35px;
        text-decoration: none;
        font-weight: 400;
        letter-spacing: 0.05em;
        transition: background 0.3s, transform 0.3s;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    }

        /* 矢印アイコン */
        #page-top a::before {
            content: "▲";
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.8rem;
            color: #fff;
        }

        /* hover時 */
        #page-top a:hover {
            background: rgba(243, 152, 0, 0.9); /* オレンジ強調 */
            transform: translateY(-2px);
        }

/* スマホ用（メニュー下固定） */
@media screen and (max-width:700px) {
    #page-top {
        right: 10px;
        bottom: 20px;
    }
}

/*===================================
　住所・電話・コピーライト
===================================*/

.footer-contact {
    display: block; /* ← flexではなくブロック要素に */
    text-align: center; /* ← 中央寄せ */
    width: 100%; /* ← 全幅 */
    margin: 12px auto;
    line-height: 1.2;
    box-sizing: border-box;
}

/* 住所 */
.footer-address {
    font-size: 0.9rem;
    color: #505050;
    margin: 0 auto 2px auto; /* ← 中央寄せを明示 */
    text-align: center; /* ← 念のため明示 */
    display: block;
}

/* 電話番号リンク */
.footer-tel {
    text-align: center; /* ← 明示的に中央寄せ */
    margin: 0;
}

    .footer-tel a {
        display: inline-block; /* ← テキスト長に合わせて中央 */
        color: #505050;
        font-size: 0.9rem;
        text-decoration: none;
        transition: color 0.3s;
    }

        .footer-tel a:hover {
            color: #f39800; /* オレンジで強調 */
        }

/* コピーライト */
.footer-copyright {
    text-align: center;
    font-size: 0.75rem;
    color: #909090;
    margin: 8px 0 12px 0;
}

/* スマホ調整 */
@media screen and (max-width:700px) {
    .footer-address,
    .footer-tel a {
        font-size: 0.95rem;
    }
}


/*===================================
　スマホ（700px以下）
===================================*/
@media screen and (max-width:700px) {
    #footer {
        padding: 12px 20px;
        background-color: #fff;
        text-align: center;
        border-top: 0;
    }

    #footer_navi ul {
        display: block;
        border: none;
    }

    #footer_navi li + li {
        border-left: none;
        border-top: 1px solid #c0c0c0;
    }

    #footer_navi a {
        line-height: 2.0rem;
        font-size: 0.9rem;
    }

    .footer-address,
    .footer-tel a {
        font-size: 0.9rem;
    }

    .footer-copyright {
        font-size: 0.8rem;
    }
}