@charset "UTF-8";

/* ========================================
   SP用ローディングアニメーション（768px未満）
   矢じり108px・直線36pxに合わせた移動量
======================================== */
@keyframes headLeft-sp {
    0%   { transform: translateX(0); animation-timing-function: ease-out; }
    40%  { transform: translateX(calc(-20vw + 21.6px)); }
    60%  { transform: translateX(calc(-20vw + 21.6px)); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { transform: translateX(calc(-100vw + 108px)); }
}

@keyframes lineLeft-sp {
    0%   { width: 0; animation-timing-function: ease-out; }
    40%  { width: calc(20vw - 21.6px); }
    60%  { width: calc(20vw - 21.6px); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { width: calc(100vw - 108px); }
}

@keyframes headRight-sp {
    0%   { transform: translateX(0); animation-timing-function: ease-out; }
    40%  { transform: translateX(calc(20vw - 21.6px)); }
    60%  { transform: translateX(calc(20vw - 21.6px)); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { transform: translateX(calc(100vw - 108px)); }
}

@keyframes lineRight-sp {
    0%   { width: 0; animation-timing-function: ease-out; }
    40%  { width: calc(20vw - 21.6px); }
    60%  { width: calc(20vw - 21.6px); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { width: calc(100vw - 108px); }
}


/* ========================================
   SP用ローディングアニメーション（480px未満）
   矢じり54px・直線18pxに合わせた移動量
======================================== */
@keyframes headLeft-xs {
    0%   { transform: translateX(0); animation-timing-function: ease-out; }
    40%  { transform: translateX(calc(-20vw + 10.8px)); }
    60%  { transform: translateX(calc(-20vw + 10.8px)); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { transform: translateX(calc(-100vw + 54px)); }
}

@keyframes lineLeft-xs {
    0%   { width: 0; animation-timing-function: ease-out; }
    40%  { width: calc(20vw - 10.8px); }
    60%  { width: calc(20vw - 10.8px); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { width: calc(100vw - 54px); }
}

@keyframes headRight-xs {
    0%   { transform: translateX(0); animation-timing-function: ease-out; }
    40%  { transform: translateX(calc(20vw - 10.8px)); }
    60%  { transform: translateX(calc(20vw - 10.8px)); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { transform: translateX(calc(100vw - 54px)); }
}

@keyframes lineRight-xs {
    0%   { width: 0; animation-timing-function: ease-out; }
    40%  { width: calc(20vw - 10.8px); }
    60%  { width: calc(20vw - 10.8px); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { width: calc(100vw - 54px); }
}


@media (max-width: 768px) {

    /* ========================================
       CREDENTIALS MARQUEE
    ======================================== */

    .marquee__track,
    .marquee__list {
        gap: 20px;
    }

    .marquee__img {
        width: clamp(180px, 46vw, 260px);
    }


    /* ========================================
       LOADING
    ======================================== */

    .loading__arrow--top,
    .loading__arrow--bottom {
        height: 108px;
    }

    .loading__arrow-head--left,
    .loading__arrow-head--right {
        width: 108px;
        height: 108px;
    }

    .loading__arrow--top .loading__arrow-line,
    .loading__arrow--bottom .loading__arrow-line {
        height: 36px;
    }

    .loading__arrow-head--left {
        animation-name: headLeft-sp;
    }

    .loading__arrow-head--right {
        animation-name: headRight-sp;
    }

    .loading__arrow--top .loading__arrow-line {
        animation-name: lineLeft-sp;
    }

    .loading__arrow--bottom .loading__arrow-line {
        animation-name: lineRight-sp;
    }


    /* ========================================
       HERO
    ======================================== */

    .hero {
        min-height: calc(100svh - 56px);
        padding: 80px 24px 48px;
    }

    .hero__overlay {
        left: 50vw;
        top: 80vh;
        width: 190vw;
    }


    /* ========================================
       ABOUT
    ======================================== */

    .about__inner {
        grid-template-columns: 1fr;
    }

    .about__visual {
        order: 2;
    }

    .about__body {
        order: 1;
    }


    /* ========================================
       CONTENT SELECT
    ======================================== */

    .content-select__grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* ========================================
       NATIONWIDE
    ======================================== */

    .nationwide__cases {
        grid-template-columns: 1fr;
    }


    /* ========================================
       CONTENTS LIBRARY
    ======================================== */

    .contents__grid {
        grid-template-columns: repeat(3, 1fr);
    }


    /* ========================================
       NEWS
    ======================================== */

    .news__link {
        flex-wrap: wrap;
        gap: 6px;
        padding: 14px 4px;
    }

    .news__text {
        width: 100%;
    }


    /* ========================================
       CONTACT
    ======================================== */

    .contact__cards {
        grid-template-columns: 1fr;
    }


    /* ========================================
       FOOTER PARTNERS
    ======================================== */

    .footer-partners {
        padding-left: clamp(16px, 12vw, 56px);
        padding-right: clamp(16px, 12vw, 56px);
    }

    .footer-partners__plates {
        align-items: center;
    }

    /* 開発プレートを全幅 */
    .sticker-plate--dev {
        display: flex;
        width: 100%;
    }

    .sticker-plate--dev .sticker-plate__body {
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
    }

    .sticker-plate--dev .sticker-plate__logo {
        width: 100px;
        min-width: 100px;
        height: 52px;
        object-fit: contain;
        object-position: center;
        flex-shrink: 0;
    }

    /* 協力3社を縦積み・中央揃え */
    .footer-partners__collab {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .sticker-plate--collab {
        width: 100%;
    }

    .sticker-plate--collab .sticker-plate__body {
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 14px;
    }

    /* ロゴを固定幅ボックスとして扱い、テキスト左端を揃える */
    .sticker-plate--collab .sticker-plate__logo {
        width: 100px;
        min-width: 100px;
        height: 36px;
        object-fit: contain;
        object-position: center;
        flex-shrink: 0;
    }


    /* ========================================
       FOOTER MAIN
    ======================================== */

    .footer-main {
        padding: 56px var(--section-px) 32px;
    }

    .footer-main__inner {
        gap: 28px;
    }

    .footer-main__logo img {
        height: 72px;
    }

    .footer-main__row {
        flex-direction: column;
        gap: 32px;
    }

    .footer-supervisor__logo {
        height: 40px;
    }

    .footer-main__nav {
        flex-direction: column;
        gap: 20px;
        margin-right: 0;
    }

    /* ナビリンクのタップ領域拡大 */
    .footer-nav__list {
        gap: 0;
    }

    .footer-nav__link {
        display: block;
        padding: 10px 0;
    }



    /* ========================================
       フォントサイズ最低保証（14px）
    ======================================== */

    .section-label__text,
    .content-select__tile-label,
    .nationwide__note,
    .contents__category,
    .events__status,
    .events__date,
    .events__venue,
    .news__date,
    .news__tag,
    .sticker-plate__tab span,
    .sticker-plate__text p,
    .sticker-plate__name,
    .footer-partners__heading-text,
    .footer-nav-group__label,
    .footer-nav__link,
    .footer-supervisor__name,
    .footer-supervisor__address,
    .footer-copy__text,
    .footer-copy__tagline,
    .contact__card-en {
        font-size: 14px;
    }

    .footer-supervisor__tel-img {
        height: 14px;
    }

}


@media (max-width: 600px) {

    /* ========================================
       FOOTER COPY（収まらなくなるタイミングで縦積み）
    ======================================== */

    .footer-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

}


@media (max-width: 479px) {

    /* ========================================
       LOADING
    ======================================== */

    .loading__arrow--top,
    .loading__arrow--bottom {
        height: 54px;
    }

    .loading__arrow-head--left,
    .loading__arrow-head--right {
        width: 54px;
        height: 54px;
    }

    .loading__arrow--top .loading__arrow-line,
    .loading__arrow--bottom .loading__arrow-line {
        height: 18px;
    }

    .loading__arrow-head--left {
        animation-name: headLeft-xs;
    }

    .loading__arrow-head--right {
        animation-name: headRight-xs;
    }

    .loading__arrow--top .loading__arrow-line {
        animation-name: lineLeft-xs;
    }

    .loading__arrow--bottom .loading__arrow-line {
        animation-name: lineRight-xs;
    }


    /* ========================================
       HEADER
    ======================================== */

    .site-header {
        height: 72px;
        padding: 0 16px;
    }

    .site-header__logo img {
        height: 56px;
    }

    .site-header__cta {
        font-size: 11px;
        padding: 12px 16px 12px 28px;
    }


    /* ========================================
       FOOTER PARTNERS
       タブをbodyの上に縦積み・左右辺を揃える
    ======================================== */

    .footer-partners {
        padding-left: 16px;
        padding-right: 16px;
    }

    .footer-partners__inner {
        overflow: hidden;
    }

    .sticker-plate--dev,
    .sticker-plate--collab {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    /* タブのskewをリセット・幅を揃える */
    .sticker-plate--dev .sticker-plate__tab,
    .sticker-plate--collab .sticker-plate__tab {
        transform: none;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 18px;
        justify-content: flex-start;
    }

    .sticker-plate--dev .sticker-plate__tab span,
    .sticker-plate--collab .sticker-plate__tab span {
        transform: none;
    }

    /* bodyのskewをリセット・幅と縦paddingを揃える */
    .sticker-plate--dev .sticker-plate__body,
    .sticker-plate--collab .sticker-plate__body {
        transform: none;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 18px;
    }

    .sticker-plate--dev .sticker-plate__logo,
    .sticker-plate--collab .sticker-plate__logo {
        transform: none;
        width: 80px;
        min-width: 80px;
        height: 30px;
    }

    .sticker-plate__text,
    .sticker-plate__name {
        transform: none;
    }


}


@media (max-width: 330px) {

    /* 長社名のみフォント縮小・折り返し許可 */
    .footer-partners__collab .sticker-plate--collab:nth-child(3) .sticker-plate__name {
        font-size: 11px;
        white-space: normal;
        line-height: 1.4;
        letter-spacing: 0;
    }

}


/* ========================================
   NEWS PAGE
======================================== */

@media (max-width: 768px) {

    .news-page {
        padding-top: 100px;
        padding-bottom: 60px;
    }

}

@media (max-width: 479px) {

    .news-page {
        padding-top: 80px;
    }

}


/* ========================================
   CONTACT PAGE
======================================== */

@media (max-width: 768px) {

    .contact-page {
        padding-top: 100px;
        padding-bottom: 60px;
    }

    .contact-page__title {
        font-size: clamp(24px, 6vw, 36px);
    }

    .form-cols {
        grid-template-columns: 1fr;
    }

    .form-submit-btn {
        width: 100%;
        padding: 16px 24px;
    }

}

@media (max-width: 479px) {

    .contact-page {
        padding-top: 80px;
    }

}