footer {
    border-top: solid 2px #fff;
    padding-top: 36px;
    padding-bottom: 40px;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #1f1f1f;
    position: relative;
    overflow-x: clip;

    @media screen and (max-width:640px){
        border-top: solid 1px #fff;
        padding: 32px 16px;
    }
}

footer a.top-rocket {
    display: block;
    position: absolute;
    /* 2026-09-14 箱を絵の実寸(62x128)に合わせた。
       旧: top:-352px / height:180px（絵は下寄せなので上に52pxの空白）
       新: top:-300px / height:128px（描画位置は同じ。空白だけ消える）
       ::after（煙）の top も 180px → 128px に連動して変更している。 */
    top: -300px;
    right: 132px;
    width: 62px;
    height: 128px;
    background: no-repeat center bottom url(../img/footer_rocket.svg);
    text-decoration: none;
    color: #fff;

    @media screen and (max-width:1280px){
        right: 12px;
    }

    @media screen and (max-width:640px){
        /* 2026-09-14 スマホのロケット
             幅   24px → 48px（小さすぎたため2倍に）
             高さ 48 × 128/62 = 99px（SVGの実寸比）
             right 6px → 24px（端に寄りすぎていたため内側へ）
             top  -149px → -168px（機体の下端が煙の稜線に16px刺さる位置）
           ※ 幅を変えたら ::after の right も変える必要がある。下のコメント参照。 */
        width: 48px;
        height: 99px;
        right: 24px;
        top: -168px;
        background-size: contain;
    }
}

/* 「TOP」の文字。ロケットの真上に置く。
   以前はアンカー本体の文字だったため、24px幅の箱に16pxの3文字が
   収まらずはみ出していた（2026-09-14 span に分離）。 */
footer a.top-rocket span {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 8px;
    transform: translateX(-50%);

    /* 2026-09-14 13px → 24px。ロケットの幅(62px)に対して
       文字が小さすぎたため。スマホは 48px の機体に対して14px。 */
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.12em;
    line-height: 1;
    white-space: nowrap;

    /* トップページの CONTACT セクションだけ背景が写真なので、
       白抜き文字が沈まないよう最小限の影を残している。 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);

    @media screen and (max-width:640px){
        font-size: 14px;
        margin-bottom: 6px;
    }
}

@keyframes bgShake {
    0% {
        background-position: calc(50% - 1px) bottom;
    }
    50% {
        background-position: calc(50% + 1px) bottom;
    }
    100% {
        background-position: calc(50% - 1px) bottom;
    }
}

footer a.top-rocket:hover {
    animation: bgShake 0.08s infinite linear;
}

footer a.top-rocket:after {
    content: "";
    display: block;
    max-width: 444px;
    width: 100vw;
    aspect-ratio: 444 / 172;
    background: no-repeat right bottom / contain url(../img/footer_rocket_smoke.svg);
    position: absolute;

    /* 煙(山)の噴射線と機体の中心をそろえるための値。
       噴射線は絵の左から 63.29%（444pxのうち281px）の位置にある。
         right = 絵の幅 × 0.6329 − 機体の幅 ÷ 2
       PC : 444 × 0.6329 − 62 ÷ 2 = 281 − 31 = 250 … ではなく、
            機体の右端を基準にするので 444 − 281 − 31 = 132 → right:-132px
       SP : 220 − 139 − 24 = 57 → right:-57px（下のメディアクエリ）
       機体の幅や煙の幅を変えたら、この式で計算し直すこと。 */
    right: -132px;

    /* 2026-09-14 箱の高さを180→128にしたので、煙の位置も 180 → 128 に。
       これで山の下端がフッターの上辺にそろう。 */
    top: 128px;

    @media screen and (max-width:640px){
        /* 2026-09-14 機体の幅を24→48pxにしたので、噴射線の位置がずれていた。
           220 − 139 − 24 = 57 → -57px（旧 -69px は機体24px用の値） */
        right: -57px;
        /* 箱の高さ99pxに合わせて 83px。山の下端がフッター上辺にそろう。 */
        top: 83px;
        width: 220px;
        z-index: 0;
    }
}

footer div.inner {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}

footer div.inner div.overview {
}

footer div.inner div.overview h2 {
    margin-bottom: 24px;
}

footer div.inner div.overview h2 a {
    display: block;
    padding-left: 56px;
    background: no-repeat left center url(../img/logo_kagoshima_university_white.svg);
    text-decoration: none;
    color: #fff;
    line-height: 1.25;
    transition: opacity 0.3s ease;

    @media screen and (max-width:640px){
        padding-left: 48px;
        background-size: 32px;
    }
}

footer div.inner div.overview h2 a:hover {
    opacity: 0.75;
}

footer div.inner div.overview h2 a span.sub {
    @media screen and (max-width:640px){
        /* 2026-09-13 ヘッダーと同じ 12px に */
        font-size: 12px;
    }
}

footer div.inner div.overview h2 a span.main {
    font-size: 1.375rem;
    font-weight: bold;
    display: block;

    @media screen and (max-width:640px){
        /* 2026-09-13 ヘッダーと同じ 14px に（旧 1.125rem＝18px。
           18pxだと iPhone SE 幅で2行に折り返していた） */
        font-size: 14px;
    }
}

footer div.inner div.overview address {
    font-style: normal;

    @media screen and (max-width:640px){
        /* 2026-09-13 サイト名を小さくしたので、住所も合わせる */
        font-size: 12px;
    }
}

footer div.inner div.overview p {
    margin-bottom: 64px;

    @media screen and (max-width:640px){
        margin-bottom: 40px;
        font-size: 12px;
    }
}

footer div.inner ul.sub-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;

    @media screen and (max-width:640px){
        gap: 4px;
        flex-direction: column;
    }
}

footer div.inner ul.sub-list li {

}

footer div.inner ul.sub-list li a {
    color: #fff;
    text-decoration: none;
    padding-right: 20px;
    background:
        no-repeat right center / 12px 12px url(../img/icon-external-white.svg),
        no-repeat left bottom / 0 1px linear-gradient(#fff, #fff);
    transition: background-size 0.3s ease;

    @media screen and (max-width:640px){
        font-size: 12px;
    }
}

footer div.inner ul.sub-list li a:hover {
    background-size: 12px 12px, calc(100% - 20px) 1px;
}

footer p.copylight {
    text-align: center;
    color: #fff;
    margin-top: 64px;

    @media screen and (max-width:640px){
        margin-top: 40px;
        /* 2026-09-13 フッター全体に合わせて 14px → 12px */
        font-size: 12px;
    }
}