/* ==========================================
   Footer（フッター）
========================================== */

/*
【役割】
ホームページ最下部に表示する情報エリアです。

【表示内容】
・会社名
・住所
・Copyright

【特徴】
画面下へ固定表示しています。

【注意】
padding を変更すると
フッターの高さが変わります。
*/

/* ==========================================
   フッター全体
========================================== */

.site-footer{
    position:fixed;                        /* 画面下へ固定 */
    bottom:0;                              /* 下端 */
    left:0;                                /* 左端 */
    width:100%;                            /* 横幅いっぱい */
    background:#d0d0d0;                  /* 背景色（グレー） */
    padding:24px 40px;                     /* 高さに余裕を持たせる */
    height: 40px;                          /* 高さを固定 */
    box-sizing:border-box;                 /* paddingを高さへ含める */
    z-index:9999;                          /* 最前面 */
    display:flex;                          /* Flexレイアウト */
    align-items:center;                    /* 縦中央 */
    justify-content:center;                /* 横中央 */
}

/* ==========================================
   フッター内部
========================================== */

/*
【役割】
会社情報を横並びに表示します。

翻訳で文字数が増えても
高さが変わらないよう
1行表示を維持します。
*/

.footer-inner{
    display:flex;                          /* 横並び */
    justify-content:center;                /* 横中央 */
    align-items:center;                    /* 上揃え */
    gap:18px;                              /* 各項目の間隔 */
    flex-wrap:nowrap;                      /* 折り返さない */
    max-width:1400px;                      /* 最大幅 */
    width:100%;                            /* 横幅 */
    text-align:center;                     /* 中央揃え */
    line-height:1.8;                       /* 行間 */
}

/* ==========================================
   会社名
========================================== */

.footer-company{
    color:#d6001c;                         /* ブランドカラー */
    font-size:16px;                        /* 文字サイズ */
    font-weight:700;                       /* 太字 */
}

/* ==========================================
   住所
========================================== */

.footer-address{
    color:#d6001c;                         /* ブランドカラー */
    font-size:15px;                        /* 文字サイズ */
}

/* ==========================================
   Copyright
========================================== */

.footer-copy{
    color:#d6001c;                         /* ブランドカラー */
    font-size:14px;                        /* 文字サイズ */
}

/* ==========================================
   区切り記号（｜）
========================================== */

.footer-separator{
    color:#d6001c;                         /* ブランドカラー */
    font-size:14px;                        /* 文字サイズ */
}

/* ==========================================
   Footer 多言語対応
========================================== */

/*
【役割】
翻訳後に文字数が増えても
Footerの高さが変わらないよう
文字サイズを調整します。

【変更すると影響する項目】

font-size
→ Footer内の文字サイズ
*/

.footer-company,
.footer-address,
.footer-copy,
.footer-separator{
    font-size:clamp(11px,0.9vw,15px);      /* 自動調整 */
}

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

【変更すると影響する場所】

padding
→ フッター全体の高さ

gap
→ 各項目の間隔

font-size
→ 文字サイズ

background
→ 背景色

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

/* ==========================================================
   Footer スマホ対応
   ※PC表示には影響しない
========================================================== */

@media screen and (max-width:768px){

    .site-footer{
        height:auto;                 /* 固定高さをやめ、中身に応じて可変にする */
        min-height:40px;             /* 最低限の高さは確保 */
        padding:10px 15px;           /* 余白を縮小 */
    }

    .footer-inner{
        flex-wrap:wrap;              /* 狭い画面では折り返しを許可 */
        gap:4px 10px;                /* 折り返し時の間隔 */
        line-height:1.5;             /* 行間を調整 */
    }

    .footer-company,
    .footer-address,
    .footer-copy,
    .footer-separator{
        font-size:10px;              /* 文字サイズを縮小 */
    }
}

@media screen and (max-width:480px){

    .footer-separator{
        display:none;                /* 折り返した際に区切り記号だけ浮くため非表示 */
    }

    .footer-inner{
        gap:2px 6px;                 /* 間隔をさらに縮小 */
    }
}