/*============================
#top
============================*/
section#top {
}
section#top div.fv {
    min-height: 750px;
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding-top: 172px;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 40px;
    /* background: no-repeat center / cover url(../img/fv_back.webp); */
    /* 2026-09-13 背景画像の下に黒を敷く。
       cover の端が端数ピクセルになったときに下地の白が透けるのを防ぐ。 */
    background-color: #000;
    transition: background-position 0.1s ease;

    /* 2026-10-06 横のはみ出しだけを切る。
       ロケットの層（::after）は幅いっぱいの板を fvRocket で最大 6px 右へ動かすため、
       ページ全体の幅が 375〜381px の間で揺れ、iPhone の Safari では横にスクロールできていた。
       hidden にすると、下にはみ出させているさっつんまで切れるので clip で横だけ止める。 */
    overflow-x: clip;

    /* 2026-09-13 動かない3枚（星空2枚＋月）だけをここに置く。
       動く地球とロケットは ::before / ::after に分離し、transform で動かす。
       background-position を animate すると毎フレーム画像を再サンプリングするため、
       端が端数ピクセルになって白い線がチラチラ走る（iOS Safari）。 */
    background-image:
    url(../img/fv-moon.png),
    url(../img/fv-stars.svg),
    url(../img/fv-stars.webp);

    background-position:
        right 15% bottom 15%,
        center,
        center;
    background-size:
        108px auto,
        cover,
        cover;
    background-repeat: no-repeat;

    @media screen and (max-width:640px){
        /* iOSの 100vh はツールバーを含まない高さで、実際の表示より縦に長い。
           表示領域そのものを表す svh を使う（1行目は svh 非対応環境の保険）。
           さっつんは下が少し切れてよいが、CTAボタンに被らない高さにしている。 */
        min-height: 100vh;
        min-height: calc(100svh - 60px);

        /* 中央揃えだと本文の位置が高さに引きずられてさっつんと衝突するため、
           上寄せにして位置を固定する。150pxは地球の下端（約138px）を避ける値。 */
        align-items: flex-start;
        padding-top: 150px;
        padding-bottom: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* 動く2枚は擬似要素に分け、transform で動かす。
   transform はラスタライズ済みのレイヤーを合成側でずらすだけなので、
   画像の再サンプリングが起きず、継ぎ目の線が出ない。 */

/* 地球（左上） */
section#top div.fv::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: no-repeat left top / 880px auto url(../img/fv-earth.webp);
    animation: fvEarth 12s ease-in-out infinite;
    will-change: transform;

    @media screen and (max-width:640px){
        background-size: 100% auto;
    }
}

/* ロケット */
section#top div.fv::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: no-repeat left 70% top 70% / 550px auto url(../img/fv-rocket.webp);
    animation: fvRocket 12s ease-in-out infinite;
    will-change: transform;

    @media screen and (max-width:640px){
        background-size: 100% auto;
    }
}

/* 2026-10-06 FV が画面から外れている間は動きを止める（script.js が .is-paused を付け外し）。
   見えている間の動きは変わらない。協賛欄などを見ているときに iPhone の描画を軽くするため。 */
section#top div.fv.is-paused::before,
section#top div.fv.is-paused::after,
section#top div.fv.is-paused img.sattsun {
    animation-play-state: paused;
}

/* 2026-09-13 background-position ではなく transform で動かす方式に変更。
   動きの量とタイミングは従来の fvFloat を踏襲している。
   月は動きがごく僅かだったため、.fv 側の静止背景に移した。 */
@keyframes fvEarth{
    0%   { transform: translate3d(0, 0, 0); }
    40%  { transform: translate3d(-10px, -6px, 0); }
    80%  { transform: translate3d(-2px, -4px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes fvRocket{
    0%   { transform: translate3d(0, 0, 0); }
    20%  { transform: translate3d(6px, -8px, 0); }
    60%  { transform: translate3d(-6px, 8px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

section#top div.fv div.inner {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
    /* 2026-09-13 ::before（背景の動く3枚）より前面に出す */
    position: relative;
    z-index: 1;

    @media screen and (max-width:640px){
        text-align: center;
    }
}

section#top div.fv div.inner h2 {
    font-family: "Bebas Neue", sans-serif;
    color: #fff;
    font-size: 6rem;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 12px;

    @media screen and (max-width:640px){
        font-size: 3.4rem;
        letter-spacing: .05em;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    @media screen and (max-width:480px){
        font-size: 2.6rem;
    }
}

section#top div.fv div.inner h2 span.transparent {
    color: transparent;
    display: block;
    -webkit-text-stroke:2px #fff;

    @media screen and (max-width:640px){
        -webkit-text-stroke:1px #fff;
    }
}

section#top div.fv div.inner p {
    color: #fff;
    font-size: 1.375rem;
    letter-spacing: 0.4em;
    margin-bottom: 48px;

    @media screen and (max-width:640px){
        font-size: 1rem;
        letter-spacing: .15em;
        line-height: 1.8;
        margin-bottom: 36px;
    }

    @media screen and (max-width:480px){
        font-size: 0.875rem;
    }
}

section#top div.fv div.inner p span.db {

    @media screen and (max-width:640px){
        display: block;
    }
}

section#top div.fv div.inner a {
    display: flex;
    align-items: center;
    padding: 24px;
    background-color: #d4a574;
    width: 100%;
    max-width: 330px;
    justify-content: center;
    color: #000;
    text-decoration: none;
    font-size: 1.25rem;
    box-sizing: border-box;
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: 0.25s;

    @media screen and (max-width:640px){
        max-width: 100%;
        padding: 18px;
        font-size: 1.125rem;
    }

    @media screen and (max-width:480px){
        padding: 16px;
        font-size: 1rem;
    }
}

/* お問い合わせ送信ボタンと同系のホバー（色変化＋少し浮く＋発光影） */
section#top div.fv div.inner a:hover {
    background-color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(212, 165, 116, 0.45);
}

section#top div.fv div.inner a:active {
    transform: translateY(0);
}

/* さっつん（FV右下・下のセクションに少しはみ出して浮遊） */
section#top div.fv img.sattsun {
    position: absolute;
    right: 3%;
    bottom: -105px;
    width: 480px;
    z-index: 5;
    animation: sattsunFloat 6s ease-in-out infinite;
    pointer-events: none;

    @media screen and (max-width:1280px){
        width: 400px;
        bottom: -92px;
    }

    /* @media screen and (max-width:1024px){
        width: 250px;
        bottom: -82px;
    } */

    @media screen and (max-width:768px){
        width: 300px;
        right: 16px;
        bottom: -70px;
    }

    /* @media screen and (max-width:640px){
        width: 165px;
        right: 10px;
        bottom: -90px;
    } */

    @media screen and (max-width:480px){
        width: 240px;
        bottom: -76px;
    }
}

@keyframes sattsunFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-14px) rotate(2deg);
    }
}

@keyframes floatEarth{
    0%,100%{
        background-position:left top;
    }
    50%{
        background-position:calc(0% - 12px) calc(0% - 8px);
    }
}

@keyframes floatRocket{
    0%,100%{
        transform:translate(0,0) rotate(0deg);
    }
    50%{
        transform:translate(8px,-10px) rotate(.5deg);
    }
}

@keyframes floatMoon{
    0%,100%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(-6px,4px);
    }
}




section#top section.overview {
    padding: 148px 12px 120px;
    background-color: #000;

    @media screen and (max-width:640px){
        padding: 80px 16px;
    }
}

section#top section.overview div.upper {
    max-width: 1040px;
    margin: 0 auto 88px;
    display: flex;
    justify-content: space-between;

    @media screen and (max-width:640px){
        flex-direction: column;
        margin-bottom: 12px;
    }
}

section#top section.overview div.upper div.text {
    color: #fff;
    min-width: 50%;

    @media screen and (max-width:640px){
        min-width: 100%;
    }
}

section#top section.overview div.upper div.text h3 {
    color: #007ec6;
    font-size: 1.875rem;
    line-height: 1.75;
    padding-bottom: 32px;
    border-bottom: solid 1px #fff;
    margin-bottom: 44px;

    @media screen and (max-width:640px){
        font-size: 1.5rem;
        line-height: 1.5;
        padding-bottom: 20px;
        margin-bottom: 28px;
    }

    @media screen and (max-width:480px){
        font-size: 1.25rem;
    }
}

section#top section.overview div.upper div.text h3 span.db {
    @media screen and (max-width: 640px) {
        display: inline;
    }
}

section#top section.overview div.upper div.text p {
    margin-bottom: 2rem;

    @media screen and (max-width:640px){
        margin-bottom: 1.5rem;
    }
}

section#top section.overview div.upper div.text p span.db {

    @media screen and (max-width:640px){
        display: inline;
    }
}

section#top section.overview div.upper div.video {
    max-width: 360px;
    margin-left: 20px;

    @media screen and (max-width:640px){
        max-width: 100%;
        margin: 12px 0 0;
        aspect-ratio: 1;
    }
}

section#top section.overview div.upper div.video video {
    display: block;
    width: 100%;
    border-radius: 12px;
    @media screen and (max-width:640px){
        object-fit: cover;
        object-position: bottom;
        width: 100%;
        height: 100%;
    }
}

section#top section.overview div.upper div.video video source {
}

section#top section.overview div.research-center {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
}

section#top section.overview div.research-center h4 {
    color: #fff;
    font-size: 2.25rem;
    letter-spacing: 0.6em;
    font-family: "Bebas Neue", sans-serif;

    @media screen and (max-width:640px){
        font-size: 1.75rem;
        letter-spacing: .2em;
        text-align: center;
    }

    @media screen and (max-width:480px){
        font-size: 1.375rem;
    }
}

section#top section.overview div.research-center ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 28px;

    @media screen and (max-width:640px){
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
    }
}

section#top section.overview div.research-center ul li {

    @media screen and (max-width:640px){
        width: calc(50% - 6px);
    }
}

section#top section.overview div.research-center ul li img {
    border-radius: 12px;
    display: block;
    max-width: 226px;
    width: 100%;

    @media screen and (max-width:640px){
        max-width: 100%;
    }
}




section#top section.support {
    background-color: #fff;
    padding: 80px 12px 100px;

    @media screen and (max-width:640px){
        padding: 80px 16px;
    }
}

section#top section.support h3 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 32px;

    @media screen and (max-width:640px){
        margin-bottom: 24px;
    }
}

section#top section.support h3 span.jp {
}

section#top section.support p {
    text-align: center;
    margin-bottom: 40px;

    @media screen and (max-width:640px){
        margin-bottom: 32px;
    }
}

section#top section.support dl {
    margin: 0 auto;
    max-width: 1040px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    gap: 40px;

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

section#top section.support dl div.column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 16px;
    width: 100%;
    padding: 32px 12px;
    min-height: 226px;
    box-sizing: border-box;
    border-radius: 12px;
    position: relative;

    @media screen and (max-width:640px){
        min-height: 180px;
        padding: 28px 20px;
    }
}

/* ホバーで黒のオーバーレイがかかり、文字の上に応援コメントが出る */
section#top section.support dl div.column p.hover-comment {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    text-align: center;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;

    @media screen and (max-width:640px){
        font-size: 1rem;
        padding: 20px;
    }

    @media screen and (max-width:480px){
        font-size: 0.875rem;
        padding: 16px;
    }
}

section#top section.support dl div.column:hover p.hover-comment {
    opacity: 1;
}

/* 公式サイトへの小さなリンク（コメントより手前で押せる） */
section#top section.support dl div.column a.site-link {
    position: relative;
    z-index: 2;
    display: block;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1;
    padding: 10px 38px 10px 22px;
    border: solid 1px rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    text-decoration: none;
    background:
        no-repeat right 18px center / 11px 11px url(../img/icon-external-white.svg),
        no-repeat left center / 0% 100% linear-gradient(#fff, #fff);
    transition: background-size 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

section#top section.support dl div.column a.site-link:hover {
    background:
        no-repeat right 18px center / 11px 11px url(../img/icon-external-black.svg),
        no-repeat left center / 100% 100% linear-gradient(#fff, #fff);
    color: #000;
    border-color: #fff;
}

section#top section.support dl div.column.jaxa {
    background: no-repeat center / cover url(../img/support_jaxa.webp);
}

section#top section.support dl div.column.minamitane {
    background: no-repeat center / cover url(../img/support_minamitane.webp);
}

section#top section.support dl div.column dt {
    font-size: 1.5rem;
    padding-bottom: 12px;
    border-bottom: solid 1px #fff;
    margin-bottom: 20px;
    line-height: 1;

    @media screen and (max-width:640px){
        font-size: 1.25rem;
        margin-bottom: 16px;
    }

    @media screen and (max-width:480px){
        font-size: 1.125rem;
    }
}

section#top section.support dl div.column dd {
    font-family: "Bebas Neue", sans-serif;
    font-size: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    letter-spacing: 0.1em;

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

    @media screen and (max-width:480px){
        font-size: 2.4rem;
    }
}

section#top section.support dl div.column dd span.small {
    font-size: 3rem;

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

    @media screen and (max-width:480px){
        font-size: 1.8rem;
    }
}

section#top section.support dl div.column dd span.en {
    font-size: 1rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    letter-spacing: 0em;
    display: block;
    margin-top: 12px;

    @media screen and (max-width:640px){
        font-size: .875rem;
        margin-top: 8px;
    }

    @media screen and (max-width:480px){
        font-size: .75rem;
    }
}
section#top section.message {
    padding: 88px 12px;
    background: no-repeat center / cover url(../img/message_back.webp);

    @media screen and (max-width:640px){
        padding: 80px 16px;
    }
}

section#top section.message div.inner {
    max-width: 1040px;
    margin: 0 auto;
}

section#top section.message div.inner h3 {
    color: #fff;
    margin-bottom: 40px;

    @media screen and (max-width:640px){
        margin-bottom: 32px;
        margin-left: auto;
        margin-right: auto;
    }
}

section#top section.message div.inner h3 span.jp {
}

section#top section.message div.inner div.df {
    display: flex;
    justify-content: space-between;
    gap: 40px;

    @media screen and (max-width:640px){
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
}

section#top section.message div.inner div.df div.img {
    max-width: 280px;
    width: 100%;

    @media screen and (max-width:640px){
        max-width: 220px;
    }
}

section#top section.message div.inner div.df div.img img {
    display: block;
    width: 100%;
    border-radius: 4px;
}

section#top section.message div.inner div.df div.text {
    max-width: 710px;
    color: #fff;
    width: 100%;

    @media screen and (max-width:640px){
        max-width: 100%;
    }
}

section#top section.message div.inner div.df div.text div.director {
    margin-bottom: 24px;
}

section#top section.message div.inner div.df div.text div.director p.title {
    font-size: 14px;
    line-height: 1.7;

    @media screen and (max-width:640px){
        text-align: center;
    }

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

section#top section.message div.inner div.df div.text div.director p.title span{
    display: inline-block;
}

section#top section.message div.inner div.df div.text div.director p.name {
    font-size: 24px;
    font-weight: 600;
    margin-top: 4px;

    @media screen and (max-width:640px){
        text-align: center;
    }

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

section#top section.message div.inner div.df div.text p.greeting {
}
section#top section.activities {
    color: #fff;
    padding: 144px 12px;
    background-color: #000;

    @media screen and (max-width:640px){
        padding: 80px 16px;
    }
}

section#top section.activities h3 {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 72px;

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

section#top section.activities h3 span.jp {
}

section#top section.activities section.ac-section {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 64px;
    color: #000;
    padding: 64px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12px;

    @media screen and (max-width:640px){
        padding: 24px;
        margin-bottom: 32px;
    }
}

section#top section.activities section.ac-section div.df {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;

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

section#top section.activities section.ac-section div.df div.text {
    max-width: 504px;
    margin-right: 40px;

    @media screen and (max-width:640px){
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 24px;
    }
}

section#top section.activities section.ac-section div.df div.text h4 {
    font-size: 1.75rem;
    line-height: 1.75;
    padding-bottom: 28px;
    border-bottom: solid 1px;
    margin-bottom: 20px;

    @media screen and (max-width:640px){
        font-size: 1.4rem;
        line-height: 1.5;
        padding-bottom: 16px;
    }

    @media screen and (max-width:480px){
        font-size: 1.2rem;
    }
}

section#top section.activities section.ac-section div.df div.text h4 span.db {
    @media screen and (max-width:640px){
        display: inline;
    }
}

section#top section.activities section.ac-section div.df div.text h4 span.small {
    display: block;
    font-size: 1.25rem;

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

    @media screen and (max-width:480px){
        font-size: 0.875rem;
    }
}

section#top section.activities section.ac-section div.df div.text p {
}

section#top section.activities section.ac-section div.df div.img {
    max-width: 380px;
    width: 100%;
    min-width: 160px;

    @media screen and (max-width:640px){
        max-width: 100%;
        min-width: 0;
    }
}

section#top section.activities section.ac-section div.df div.img img {
    display: block;
    width: 100%;
    border-radius: 4px;
}

section#top section.activities section.ac-section ul {
    display: flex;
    gap: 12px;

    @media screen and (max-width:640px){
        flex-wrap: wrap;
        gap: 8px;
    }
}

section#top section.activities section.ac-section ul li {
    width: 100%;

    @media screen and (max-width:640px){
        width: calc(50% - 4px);
    }
}

section#top section.activities section.ac-section ul li img {
    width: 100%;
    display: block;
    border-radius: 4px;
}

section#top section.activities section.ac-section div.df div.text h4 span {
}
section#top section.about {
    background-color: #000;
}

section#top section.about div.center-overview {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    background-color: #1f1f1f;

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

section#top section.about div.center-overview div.text {
    width: 50vw;
    padding-top: 56px;
    padding-bottom: 56px;
    padding-right: 56px;
    box-sizing: border-box;
    color: #fff;

    @media screen and (max-width:640px){
        width: 100%;
        padding: 40px 20px;
    }
}

section#top section.about div.center-overview div.text h3 {
    margin-bottom: 52px;

    @media screen and (max-width:640px){
        margin-bottom: 28px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

section#top section.about div.center-overview div.text h3 span.jp {
}

section#top section.about div.center-overview div.text h4 {
    font-size: 1.5rem;
    margin-bottom: 12px;

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

    @media screen and (max-width:480px){
        font-size: 1.125rem;
    }
}

section#top section.about div.center-overview div.text p {
}

section#top section.about div.center-overview div.img {
    width: calc(50vw - 72px);
    overflow: hidden;

    @media screen and (max-width:640px){
        width: 100%;
        aspect-ratio: 3 / 4;
    }
}

section#top section.about div.center-overview div.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

section#top section.about div.collaboration {
    background-color: #000;
    padding-top: 144px;
    padding-left: 12px;
    padding-right: 12px;
    color: #fff;

    @media screen and (max-width:640px){
        padding: 80px 16px 0;
    }
}

section#top section.about div.collaboration h4 {
    color: #fff;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 16px;

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

    @media screen and (max-width:480px){
        font-size: 1.125rem;
    }
}

section#top section.about div.collaboration p {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

section#top section.about div.collaboration img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1040px;
    border-radius: 4px;
    margin-bottom: 140px;

    @media screen and (max-width:640px){
        margin-bottom: 80px;
    }
}

section#top section.about div.chart {
    background-color: #000;
    /* 2026-09-12 下の余白を 120px → 180px に（指摘により拡大） */
    padding-bottom: 180px;

    @media screen and (max-width:640px){
        padding: 0 16px 110px;
    }
}

section#top section.about div.chart h4 {
    color: #fff;
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 16px;

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

    @media screen and (max-width:480px){
        font-size: 1.2rem;
    }
}

/* 組織図（画像1枚版）用。front-page.php でコメントアウト中 */
section#top section.about div.chart img {
    display: block;
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
}

section#top section.about div.chart div.content {
    box-sizing: border-box;
    max-width: 1080px;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;

    @media screen and (max-width:640px){
        padding: 0;
    }
}

/* 組織図 共通 */
section#top section.about div.chart div.content ul,
section#top section.about div.chart div.content li {
    text-align: center;
}

section#top section.about div.chart div.content li {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

section#top section.about div.chart div.content .item {
    background-color: #fff;
    border-radius: 10px;
}

section#top section.about div.chart div.content div.principal,
section#top section.about div.chart div.content div.manager {
    box-sizing: border-box;
    /* semi.eng の228pxでは小さすぎたため 280px に（元は370px） */
    width: 280px;
    max-width: 100%;
    padding: 14px 18px;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;

    @media screen and (max-width:640px){
        width: 100%;
        max-width: 280px;
    }
}

section#top section.about div.chart div.content div.principal img,
section#top section.about div.chart div.content div.manager img {
    display: block;
    flex-shrink: 0;
    /* カードを280pxにしたのに合わせて 76px（semiは64px・元は88px）。形は四角のまま */
    width: 76px;
    height: 76px;
    max-width: none;
    margin: 0;
    border-radius: 6px;
    object-fit: cover;

    @media screen and (max-width:640px){
        width: 68px;
        height: 68px;
    }

    @media screen and (max-width:480px){
        width: 60px;
        height: 60px;
    }
}

section#top section.about div.chart div.content div.principal div.text,
section#top section.about div.chart div.content div.manager div.text {
    /* カード280pxに合わせて 16px（semiは12px・元は36px） */
    margin-left: 16px;
    text-align: left;

    @media screen and (max-width:480px){
        margin-left: 12px;
    }
}

section#top section.about div.chart div.content p.position {
    color: #000;
    /* カードの拡大に合わせて 0.9375rem（semiは0.875rem・元は1rem） */
    font-size: 0.9375rem;
    line-height: 1.25;

    @media screen and (max-width:480px){
        font-size: 0.875rem;
    }
}

section#top section.about div.chart div.content p.name {
    margin-top: 4px;
    color: #000;
    /* カードの拡大に合わせて 1.375rem（semiは1.25rem・元は1.625rem） */
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;

    @media screen and (max-width:768px){
        font-size: 1.25rem;
    }

    @media screen and (max-width:480px){
        font-size: 1.125rem;
    }
}

/* 組織図 1階層目（センター長） */
section#top section.about div.chart div.content ul.parent-list {
    text-align: center;
    position: relative;
    z-index: 1;
}

section#top section.about div.chart div.content div.principal::after {
    content: '';
    display: block;
    width: 2px;
    height: 32px;
    background-color: #d0d0d0;
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;

    @media screen and (max-width:480px){
        height: 24px;
        bottom: -24px;
    }
}

/* 組織図 2階層目（副センター長） */
section#top section.about div.chart div.content ul.child-list {
    width: 100%;
}

section#top section.about div.chart div.content div.manager {
    margin-top: 32px;

    @media screen and (max-width:480px){
        margin-top: 24px;
    }
}

section#top section.about div.chart div.content div.manager::after {
    content: '';
    display: block;
    width: 2px;
    height: 124px;
    background-color: #d0d0d0;
    position: absolute;
    bottom: -124px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;

    @media screen and (max-width:768px){
        height: 100px;
        bottom: -100px;
    }

    @media screen and (max-width:640px){
        height: 84px;
        bottom: -84px;
    }

    @media screen and (max-width:480px){
        height: 64px;
        bottom: -64px;
    }
}

/* 組織図 3階層目（各部門） */
section#top section.about div.chart div.content ul.grandchild-list {
    margin-top: 124px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 48px;

    @media screen and (max-width:768px){
        margin-top: 100px;
        gap: 28px;
    }

    @media screen and (max-width:640px){
        margin-top: 84px;
        gap: 16px;
    }

    @media screen and (max-width:480px){
        margin-top: 64px;
        gap: 10px;
    }
}

/* 2026-09-12 min-height を廃止。中身の高さに合わせて縮む。
   3つの箱は ul.grandchild-list（display:flex）の子なので、
   いちばん高い箱の高さに自動で揃う（部門名だけの箱も同じ高さになる）。
   上に伸びる接続線（::before）は top:-59px と箱の外側基準なので影響しない。 */
section#top section.about div.chart div.content li.grandchild-list-item {
    box-sizing: border-box;
    width: calc((100% - 96px) / 3);
    padding: 20px 16px;
    /* 2026-09-12 中身を上下中央に。氏名が無い箱で下だけ余白が空くのを解消 */
    justify-content: center;
    line-height: 1.5;

    @media screen and (max-width:768px){
        width: calc((100% - 56px) / 3);
        padding: 18px 12px;
    }

    @media screen and (max-width:640px){
        width: calc((100% - 32px) / 3);
        padding: 14px 8px;
    }

    @media screen and (max-width:480px){
        width: calc((100% - 20px) / 3);
        padding: 12px 6px;
    }
}

section#top section.about div.chart div.content li.grandchild-list-item:first-child::before {
    content: '';
    width: 50%;
    height: 60px;
    border-top: 2px solid #d0d0d0;
    border-left: 2px solid #d0d0d0;
    border-top-left-radius: 15px;
    position: absolute;
    top: -59px;
    right: 0;
    z-index: -1;

    @media screen and (max-width:768px){
        height: 46px;
        top: -45px;
    }

    @media screen and (max-width:640px){
        height: 40px;
        top: -39px;
    }

    @media screen and (max-width:480px){
        height: 32px;
        top: -31px;
    }
}

section#top section.about div.chart div.content li.grandchild-list-item:nth-child(2)::before {
    content: '';
    width: 140%;
    height: 2px;
    background-color: #d0d0d0;
    position: absolute;
    top: -59px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;

    @media screen and (max-width:768px){
        top: -45px;
    }

    @media screen and (max-width:640px){
        top: -39px;
    }

    @media screen and (max-width:480px){
        top: -31px;
    }
}

section#top section.about div.chart div.content li.grandchild-list-item:last-child::before {
    content: '';
    width: 50%;
    height: 60px;
    border-top: 2px solid #d0d0d0;
    border-right: 2px solid #d0d0d0;
    border-top-right-radius: 15px;
    position: absolute;
    top: -59px;
    left: 0;
    z-index: -1;

    @media screen and (max-width:768px){
        height: 46px;
        top: -45px;
    }

    @media screen and (max-width:640px){
        height: 40px;
        top: -39px;
    }

    @media screen and (max-width:480px){
        height: 32px;
        top: -31px;
    }
}

section#top section.about div.chart div.content p.department {
    /* 2026-09-12 黒 → サイトのブルー */
    color: #007ec6;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;

    @media screen and (max-width:768px){
        font-size: 1.0625rem;
    }

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

    @media screen and (max-width:480px){
        font-size: 0.875rem;
    }
}

section#top section.about div.chart div.content ul.member-list {
    margin-top: 16px;
    width: 100%;

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

section#top section.about div.chart div.content ul.member-list li {
    color: #333;
    /* 2026-09-12 指定により16pxで固定（rem指定だと将来ルート値を変えたときに動くため） */
    font-size: 16px;
    line-height: 1.6;

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

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

section#top section.news {
    padding: 140px 12px;
    background-color: #f6f4ef;

    @media screen and (max-width:640px){
        padding: 80px 16px;
    }
}

section#top section.news div.inner {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

section#top section.news div.inner h3 {
    margin-bottom: 44px;
    color: #000;

    @media screen and (max-width:640px){
        margin-bottom: 32px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

section#top section.news div.inner h3 span.jp {
}

section#top section.news div.inner a.more {
    height: 150px;
    display: flex;
    background: #000;
    aspect-ratio: 1;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 1.25rem;
    margin: 48px auto 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    @media screen and (max-width:640px){
        height: 100px;
        font-size: 1rem;
        margin-top: 32px;
    }

    @media screen and (max-width:480px){
        height: 88px;
        font-size: 0.875rem;
    }
}

section#top section.news div.inner a.more:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
section#top section.sponsors {
}

section#top section.sponsors div.upper {
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
    background: no-repeat center / cover url(../img/sponsors_back.webp);

    @media screen and (max-width:640px){
        padding: 80px 16px;
    }
}

section#top section.sponsors div.upper div.inner {
    max-height: 860px;
    display: flex;
    justify-content: space-between;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;

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

section#top section.sponsors div.upper div.inner div.text {
    width: 100%;
    max-width: 380px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media screen and (max-width:640px){
        max-width: 100%;
    }
}

section#top section.sponsors div.upper div.inner div.text h3 {
    margin-bottom: 48px;

    @media screen and (max-width:640px){
        margin-bottom: 24px;
        margin-left: auto;
        margin-right: auto;
    }
}

section#top section.sponsors div.upper div.inner div.text h3 span.jp {
}

section#top section.sponsors div.upper div.inner div.text p {
}

section#top section.sponsors div.upper div.inner div.text a {
    display: block;
    font-size: 1.375rem;
    text-align: center;
    padding: 24px 12px;
    background-color: #007ec6;
    border-radius: 32px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    margin-top: 48px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: 0.25s;

    @media screen and (max-width:640px){
        margin-top: 32px;
        font-size: 1.125rem;
        padding: 18px 12px;
    }

    @media screen and (max-width:480px){
        font-size: 1rem;
    }
}

/* お問い合わせ送信ボタンと同系のホバー（色変化＋少し浮く＋発光影） */
section#top section.sponsors div.upper div.inner div.text a:hover {
    background-color: #fff;
    color: #007ec6;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 126, 198, 0.35);
}

section#top section.sponsors div.upper div.inner div.text a:active {
    transform: translateY(0);
}

/* 2026-10-06 translateX/Y → translate3d。動きの量と向きは同じ。
   最初から描画専用の層（GPU）で動かすよう明示し、iPhone でのかくつき・一瞬消える現象を抑える。 */
@keyframes scrollUp{
    from{
        transform:translate3d(0, 0, 0);
    }
    to{
        transform:translate3d(0, -50%, 0);
    }
}

@keyframes scrollDown{
    from{
        transform:translate3d(0, -50%, 0);
    }
    to{
        transform:translate3d(0, 0, 0);
    }
}

@keyframes scrollLeft{
    from{
        transform:translate3d(0, 0, 0);
    }
    to{
        transform:translate3d(-50%, 0, 0);
    }
}

@keyframes scrollRight{
    from{
        transform:translate3d(-50%, 0, 0);
    }
    to{
        transform:translate3d(0, 0, 0);
    }
}

section#top section.sponsors div.upper div.inner div.imgs {
    width: 100%;
    max-width: 580px;
    margin-left: 80px;
    gap: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    @media screen and (max-width:640px){
        max-width:100%;
        margin:40px 0 0;
        display:flex;
        flex-direction:column;
        gap:12px;
    }
}
section#top section.sponsors div.upper div.inner div.imgs ul.img-list{
    /* 2026-10-06 動く列を最初から別の描画層にしておく（見た目は変わらない） */
    will-change: transform;
    backface-visibility: hidden;

    @media screen and (max-width:640px){
        display:flex;
        flex-wrap:nowrap;
        width:max-content;
        gap:12px;
        margin-left: -20px;
        margin-right: -20px;
    }

}
section#top section.sponsors div.upper div.inner div.imgs ul.img-list.up {
    animation: scrollUp 20s linear infinite;
    @media screen and (max-width:640px){
        animation:scrollLeft 25s linear infinite;
    }
}

/* 2026-10-06 スライダーが画面から外れている間は止め、見える位置に来たら続きから動かす
   （script.js が div.imgs に .is-paused を付け外し）。見えている間の動きは変わらない。 */
section#top section.sponsors div.upper div.inner div.imgs.is-paused ul.img-list.up,
section#top section.sponsors div.upper div.inner div.imgs.is-paused ul.img-list.down {
    animation-play-state: paused;
}
section#top section.sponsors div.upper div.inner div.imgs ul.img-list li{
    @media screen and (max-width:640px){
        flex:0 0 180px;
        max-width:none;
        margin-bottom:0;
    }
}

section#top section.sponsors div.upper div.inner div.imgs ul.img-list.up li {
    width: 100%;
    max-width: 272px;
    aspect-ratio: 4/3;
    margin-bottom: 40px;

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

section#top section.sponsors div.upper div.inner div.imgs ul.img-list.up li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
}

section#top section.sponsors div.upper div.inner div.imgs ul.img-list.down {
    animation: scrollDown 20s linear infinite;
    @media screen and (max-width:640px){
        animation:scrollRight 25s linear infinite;
    }
}

section#top section.sponsors div.upper div.inner div.imgs ul.img-list.down li {
    width: 100%;
    max-width: 272px;
    aspect-ratio: 4/3;
    margin-bottom: 40px;

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

section#top section.sponsors div.upper div.inner div.imgs ul.img-list.down li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
}

section#top section.sponsors div.partners {
    padding: 80px 12px;
    background-color: #fff;

    @media screen and (max-width:640px){
        padding: 80px 16px;
    }
}

section#top section.sponsors div.partners h4 {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 24px;

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

    @media screen and (max-width:480px){
        font-size: 1.25rem;
    }
}

section#top section.sponsors div.partners ul.primes {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: flex-start;
    max-width: 1040px;
    margin: 0 auto 80px;

    @media screen and (max-width:640px){
        gap: 20px;
        margin-bottom: 48px;
    }
}

section#top section.sponsors div.partners ul.primes li {
    width: calc((100% - 80px)/3);

    @media screen and (max-width:640px){
        width: calc((100% - 20px)/2);
    }
}

section#top section.sponsors div.partners ul.primes li a {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #fff;
    box-sizing: border-box;
    border: solid 1px #e8e8e8;
    border-radius: 8px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    @media screen and (max-width:640px){
        padding: 16px;
    }
}

section#top section.sponsors div.partners ul.primes li a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

section#top section.sponsors div.partners ul.primes li a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

section#top section.sponsors div.partners ul.commons {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: flex-start;
    max-width: 1040px;
    margin: 0 auto 80px;

    @media screen and (max-width:640px){
        gap: 16px;
        margin-bottom: 48px;
    }
}

section#top section.sponsors div.partners ul.commons li {
    width: calc((100% - 72px)/4);

    @media screen and (max-width:640px){
        width: calc((100% - 16px)/2);
    }
}

section#top section.sponsors div.partners ul.commons li a {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #fff;
    box-sizing: border-box;
    border: solid 1px #e8e8e8;
    border-radius: 8px;
    padding: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

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

section#top section.sponsors div.partners ul.commons li a:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

section#top section.sponsors div.partners ul.commons li a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
section#top section.access {
    color: #fff;
    padding: 120px 12px;
    background-color: #000;

    @media screen and (max-width:640px){
        padding: 80px 16px;
    }
}

section#top section.access div.inner {
    max-width: 1040px;
    margin: 0 auto;
}

section#top section.access div.inner h3 {
    margin-bottom: 64px;

    @media screen and (max-width:640px){
        margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

section#top section.access div.inner h3 span.jp {
}

/* 2つの地図を横並び（SPは縦積み） */
section#top section.access div.inner div.maps {
    display: flex;
    gap: 40px;

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

section#top section.access div.inner dl {
    display: flex;
    flex-direction: column;
}

/* 見出しが折り返しても地図の下端が揃うように */
section#top section.access div.inner dl dd {
    margin-top: auto;
}

section#top section.access div.inner dl dt {
    font-size: 1.875rem;

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

    @media screen and (max-width:480px){
        font-size: 1.125rem;
    }
}

section#top section.access div.inner dl.wide {
    flex: 3;
}

section#top section.access div.inner dl.wide dd {
}

/* イラストマップ(378:420)と高さが揃う比率 */
section#top section.access div.inner dl.wide dd iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.35;
    border-radius: 4px;

    @media screen and (max-width:640px){
        aspect-ratio: 1 / 1;
    }
}

section#top section.access div.inner dl.detail {
    flex: 2;
}

section#top section.access div.inner dl.detail dt {
}

section#top section.access div.inner dl.detail dd.illust-map img {
    display: block;
    width: 100%;
    border-radius: 4px;
}
section#top section.contact {
    /* 2026-09-14 下はフッターのロケットの居場所。
       これを削ると、ロケットが本文の白い要素に重なる。
       必要な高さの根拠は css/footer.css の a.top-rocket を参照。 */
    padding: 114px 12px 390px;
    background: no-repeat center / cover url(../img/contact_back.webp);

    @media screen and (max-width:640px){
        padding: 80px 16px 200px;
    }
}

section#top section.contact h3 {
    color: #fff;
    margin-bottom: 32px;
    margin-left: auto;
    margin-right: auto;

    @media screen and (max-width:640px){
        margin-bottom: 24px;
    }
}

section#top section.contact h3 span.jp {
}

section#top section.contact p.explain {
    color: #fff;

    @media screen and (max-width:640px){
        margin-bottom: 32px;
    }
}

section#top section.contact dl {

}

section#top section.contact dl > div {
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    padding: 40px 20px 40px 180px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 172px;
    margin-bottom: 24px;
    background-color: #fff;
    background-position: left 64px center;
    background-repeat: no-repeat;
    border-radius: 8px;
    align-items: flex-start;

    @media screen and (max-width:640px){
        padding: 96px 20px 24px;
        height: auto;
        min-height: 180px;
        background-position: center 24px;
        background-size: 48px;
        align-items: center;
        text-align: center;
    }

    @media screen and (max-width:480px){
        font-size: 1rem;
    }
}

section#top section.contact dl > div dt {
    font-weight: bold;

    @media screen and (max-width:640px){
        margin-bottom: 8px;
    }
}

section#top section.contact dl > div dd {

    @media screen and (max-width:640px){
        width: 100%;
    }
}

section#top section.contact dl > div dd a {
    display: block;
    text-decoration: none;
    color: #fff;
    text-align: center;
    padding: 8px 12px;
    background: no-repeat left center / 0% 100% linear-gradient(#fff, #fff) #007ec6;
    width: 100%;
    border-radius: 3px;
    border: solid 1px transparent;
    box-sizing: border-box;
    transition: background-size 0.4s ease, color 0.4s ease, border-color 0.4s ease;

    @media screen and (max-width:640px){
        width: fit-content;
        padding: 8px 20px;
        margin: 0 auto;
    }
}

/* 左から右にスルッと白く塗り替わる */
section#top section.contact dl > div dd a:hover {
    background-size: 100% 100%;
    border-color: #007ec6;
    color: #007ec6;
}

section#top section.contact dl div.form {
    background-image: url(../img/contact_form.svg);
}

section#top section.contact dl div.form dt {
}

section#top section.contact dl div.form dd {
}

section#top section.contact dl div.form dd a {
}

section#top section.contact dl div.tel {
    background-image: url(../img/contact_tel.svg);
}

section#top section.contact dl div.tel dt {
}

section#top section.contact dl div.tel dd {
}

section#top section.contact dl div.tel dd a {
}