@charset "UTF-8";

/* =========================================
   Footer Styles
   ========================================= */

/* Footer Container */
.footer {
    background-color: var(--c-primary);
    width: 100%;
}

.footer__inner {
    max-width: var(--w-page);
    margin: 0 auto;
    padding: 3.6rem 0 2.8rem;
}

/* =========================================
   Main Content Area (Logo & Navigation)
   ========================================= */
.footer__main {
    display: flex;
    padding-left: 11.9rem;
    padding-right: 15.7rem;
}

/* Logo */
.footer__logo {
    flex-shrink: 0;
    margin-right: 7.3rem;
}

.footer__logo img {
    width: 24.9rem;
    height: 6.5rem;
}

/* =========================================
   Navigation Area
   ========================================= */
.footer__nav {
    display: flex;
    flex: 1;
    padding-top: 1.4rem;
    gap: 4rem; /* カラム間の余白を調整 */
}

/* HOME Link */
.footer__nav-home {
    flex-shrink: 0;
    /* PC: タイトルの行間(22px) + 下余白(24px) = 46px 分下げて、リスト1行目と揃える */
    padding-top: 4.6rem; 
}

/* Navigation Columns Container */
.footer__nav-columns {
    display: flex;
    gap: 4rem; /* 会社案内と事業内容の間隔 */
}

/* Navigation Group */
.footer__nav-group {
    flex-shrink: 0;
}

/* Navigation Title (Bold) */
.footer__nav-title {
    display: block;
    font-family: var(--font-base);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.2rem;
    letter-spacing: 0;
    color: var(--c-text-white);
    margin-bottom: 2.4rem; /* タイトルとリストの間隔を広げる */
}

/* Navigation List */
.footer__nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__nav-list li {
    line-height: 2.2rem;
    margin-bottom: 1.4rem; /* 行間を広くする */
}

.footer__nav-list li:last-child {
    margin-bottom: 0;
}

/* Link Styles (with underline) */
.footer__link {
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.2rem;
    letter-spacing: 0;
    color: var(--c-text-white);
    text-decoration: none;
    border-bottom: 1px solid var(--c-text-white);
    display: inline;
    transition: opacity 0.3s ease;
}

.footer__link:hover {
    opacity: 0.7;
}

/* Other Links Group (NEWS, 採用情報, お問い合わせ) */
.footer__nav-group--other {
    margin-left: auto;
    /* PC: タイトルの高さ分下げて他のリスト1行目と揃える */
    padding-top: 4.6rem; 
}

.footer__nav-list--other {
    display: flex;
    flex-direction: row; /* PC: 横並び */
    gap: 3rem; /* 横並びの間隔 */
}

.footer__nav-list--other li {
    line-height: 2.2rem;
    margin-bottom: 0;
}

/* =========================================
   Bottom Area (Banners & Copyright)
   ========================================= */
.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 5.8rem;
    padding-left: 11.7rem;
    padding-right: 3.2rem;
}

/* Banners Container */
.footer__banners {
    display: flex;
    gap: 2rem;
}

/* Banner Item */
.footer__banner {
    display: block;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.footer__banner:hover {
    opacity: 0.7;
}

.footer__banner img {
    width: 26rem;
    height: 7.4rem;
    display: block;
}

/* Copyright */
.footer__copyright {
    font-family: var(--font-base);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.2rem;
    letter-spacing: 0;
    color: var(--c-text-white);
    margin: 0;
    white-space: nowrap;
}

/* =========================================
   SP Styles (768px以下) - 修正版 v2
   ========================================= */
@media (max-width: 766px) {
    .footer__inner {
        padding: 2.9rem 0 4.8rem;
    }

    /* Main Area */
    .footer__main {
        flex-direction: column;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* Logo */
    .footer__logo {
        margin: 0 auto 3.5rem;
    }

    .footer__logo img {
        width: 11.7rem;
        height: auto;
    }

    /* Navigation Container */
    .footer__nav {
        flex-direction: column;
        padding-top: 0;
        /* 横幅の制限（5rem）は維持 */
        padding-left: 5rem; 
        padding-right: 5rem;
        width: 100%; 
        margin: 0 auto;
        gap: 0;
        align-items: flex-start;
    }

    /* HOME Link */
    .footer__nav-home {
        margin-bottom: 3.3rem;
        padding-top: 0;
        width: 100%;
        text-align: left;
    }

    /* Navigation Columns (会社案内 & 事業内容) */
    .footer__nav-columns {
        display: flex;
        /* ▼ 修正: 間隔を広げて事業案内を右へずらす (3rem -> 6rem) */
        gap: 6rem; 
        /* ▼ 修正: 左揃えにして、下のブロックと左端を合わせる */
        justify-content: flex-start; 
        margin-bottom: 3.5rem;
        width: 100%;
    }

    /* Navigation Group */
    .footer__nav-group {
        margin-bottom: 0;
        flex: 0 1 auto; 
    }

    .footer__nav-columns .footer__nav-group {
        flex: 0 1 auto;
    }

    /* Soltec Mind Block */
    .footer__nav-group--mind {
        width: 100%;
        margin-bottom: 3rem;
        /* 親要素と同じ左端から始まるため、特別な指定なしで揃います */
    }

    /* Other Links Block */
    .footer__nav-group--other {
        margin-left: 0;
        margin-bottom: 3.9rem;
        padding-top: 0;
        width: 100%;
    }

    /* Typography Updates (from previous request) */
    .footer__nav-title {
        font-size: 2.1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }

    .footer__nav-list li {
        line-height: 3.8rem;
        margin-bottom: 0;
    }

    .footer__link {
        font-size: 1.6rem;
        line-height: 3.8rem;
        border-bottom: none;
    }

    .footer__nav-list--other {
        flex-direction: column;
        gap: 0;
    }

    .footer__nav-list--other li {
        line-height: 3.8rem;
    }

    /* Bottom Area */
    .footer__bottom {
        flex-direction: column;
        align-items: center;
        margin-top: 2.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .footer__banners {
        flex-direction: column;
        gap: 1.4rem;
        width: 100%;
        max-width: 33.6rem;
    }

    .footer__banner img {
        width: 100%;
        height: auto;
    }

    .footer__copyright {
        font-size: 1rem;
        line-height: 2.2rem;
        margin-top: 4.8rem;
        text-align: center;
    }
}

/* =========================================
   Root Font Size Adjustment (360px or less)
   ========================================= */

/* 360px以下の画面では、基準サイズを少し下げることで
   全体のフォントサイズや余白を比率を保ったまま縮小します
*/
@media screen and (max-width: 361px) {
  html {
    /* 通常62.5%(10px) のところを 58%(約9.3px) に設定 */
    font-size: 58%; 
  }
}

@media screen and (max-width: 321px) {
  html {
    /* 通常62.5%(10px) のところを 58%(約9.3px) に設定 */
    font-size: 53%; 
  }
}

/* =========================================
   Tablet Adjustments (767px - 1024px)
   フッター：HOME独立＋4カラム＋文字拡大＋バナー＆コピーライト調整
   ========================================= */
@media screen and (min-width: 767px) and (max-width: 1024px) {
    
    /* 1. ロゴを上段中央に配置 */
    .footer__main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .footer__logo {
        margin: 0 auto 4rem auto !important;
    }

    /* 2. ナビゲーション全体の設定 */
    .footer__nav {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important; 
        gap: 2rem 4rem !important; 
        width: 100% !important;
        max-width: fit-content !important; 
        margin: 0 auto !important; 
        padding: 0 !important;
    }

    /* 3. HOMEを1行目に独占させる */
    .footer__nav-home {
        flex: 0 0 100% !important; 
        padding-top: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* 4. カラムが伸びないように中身のサイズに合わせる */
    .footer__nav-columns,
    .footer__nav-group--mind,
    .footer__nav-group--other {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* 会社案内・事業内容のまとまり */
    .footer__nav-columns {
        display: flex !important;
        flex-direction: row !important;
        gap: 4rem !important; 
    }
    
    /* NEWS等を縦並びに */
    .footer__nav-group--other {
        padding-top: 0 !important;
    }
    
    .footer__nav-list--other {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* =========================================
       文字サイズの拡大設定
       ========================================= */
    .footer__nav-title {
        font-size: 1.8rem !important; 
        margin-bottom: 2rem !important;
        line-height: 1.4 !important;
    }

    .footer__link {
        font-size: 1.6rem !important; 
    }

    .footer__nav-home .footer__link {
        font-size: 1.8rem !important;
        font-weight: 700 !important;
    }

    .footer__nav-list li,
    .footer__nav-list--other li {
        margin-bottom: 1.5rem !important;
        line-height: 1.4 !important;
    }

    /* =========================================
       バナーエリアとコピーライト（最下部）の調整
       ========================================= */
    .footer__bottom {
        display: flex !important;
        flex-direction: column !important; /* 横並びを解除して縦積みに変更 */
        align-items: center !important;    /* 中央揃え */
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        margin-top: 6rem !important;
        /* ★コピーライトの下の少しの余白 */
        padding-bottom: 3rem !important;   
    }

    .footer__banners {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important; /* 画面が狭い場合はバナーを折り返す */
        /* ★バナーとコピーライトの間の広い余白 */
        margin-bottom: 4rem !important; 
    }

    .footer__copyright {
        margin: 0 !important;
        text-align: center !important; /* 文字を中央揃え */
    }
}