@charset "UTF-8";
/* スマホ・タブレット対応 */


/* ========================================
   下層ページ共通Hero
======================================== */

.hero-common {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 100vh;

    padding:
        calc(var(--header-height) + 80px)
        40px
        100px;

    overflow: hidden;

    color: var(--color-white);
    background-color: var(--color-black);
}
.hero-common-inner {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 80px;

    width: min(1200px, 100%);
    margin: 0 auto;
}
.hero-common-title {
    margin-top: 30px;

    color: var(--color-white);

    font-size: clamp(3.4rem, 7vw, 6.8rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.04em;

    text-shadow:
        0 0 10px rgb(36 233 255 / 45%),
        0 0 30px rgb(36 233 255 / 22%),
        0 0 60px rgb(184 156 255 / 15%);
}
/* ========================================
   共通スクロールアニメーション
======================================== */

.reveal {
    opacity: 0;
    transform: translateY(55px);
    filter: blur(5px);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease,
        filter 0.9s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
/* ========================================
   1100px以下
======================================== */

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

    :root {
        --side-space: 28px;
    }

    .global-nav {
        display: none;
    }

    .hamburger-button {
        margin-left: auto;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-action {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ========================================
   900px以下
======================================== */
@media (max-width: 900px) {

    .fixed-contact {
        right: 15px;
        bottom: 15px;
    }

    .fixed-contact-link {
        padding: 12px 18px;
    }

    .fixed-contact-text {
        font-size: .9rem;
    }

}

/* ========================================
   768px以下
======================================== */

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

    :root {
        --header-height: 72px;
        --side-space: 20px;
    }

    .section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
 .hero-common-inner {
        grid-template-columns: 1fr;
        gap: 45px;
        text-align: center;
    }
    /* ヘッダー */

    .header-inner {
        padding: 0 16px;
    }

    .header-logo-image {
        width: 43px;
        height: 43px;
    }

    .header-company-name {
        font-size: 0.58rem;
    }

    .header-site-name {
        font-size: 1rem;
    }

    .hamburger-button {
        width: 46px;
        height: 46px;
    }


    /* ハンバーガーメニュー */

    .hamburger-menu {
        width: 100%;
        padding:
            calc(var(--header-height) + 30px)
            24px
            30px;
    }

    /* 固定問い合わせ */

    .fixed-contact {
        right: 10px;
        bottom: 10px;
        gap: 3px;
        padding: 5px;
        border-radius: 14px;
    }

    .fixed-contact-link {
        width: 58px;
        min-height: 57px;
        padding: 6px 3px;
    }

    /* フッター */

    .footer {
        padding-top: 65px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-bottom: 50px;
    }

    .footer-nav-list {
        grid-template-columns: 1fr;
    }

    .footer-action {
        grid-column: auto;
        grid-template-columns: 1fr;
    }
}
/* ========================================
   600px以下
======================================== */
@media (max-width: 600px) {

    .fixed-contact {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    .fixed-contact-link {
        width: 100%;

        padding: 15px;

        justify-content: center;
    }

    .fixed-contact-text {
        font-size: .95rem;
    }

}

/* ========================================
   480px以下
======================================== */

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

    :root {
        --side-space: 16px;
    }

    .header-logo-text {
        display: none;
    }

    .section-button {
        width: 100%;
        min-width: 0;
    }
}
/* ========================================
   動きを減らす設定をしている人への配慮
======================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}