/* ----footer----- */
/* ===== CSS VARIABLES FOR DESIGN SYSTEM ===== */
:root {
  --color-primary: #0152C3;
  --color-secondary: #3377FF;
  --color-accent: #FDED40;
  --color-danger: #F00E0E;
  --color-success: #02AD33;
  --color-info: #94B9F3;
  --color-bg: #F8F8F8;
  --color-white: #fff;
  --color-black: #333;
  --color-brown: #FCEAAC;
  --color-error: #FCCCCB;
  --color-blue-gradient: linear-gradient(#3377FF, #1A3975);
  --color-green-gradient: linear-gradient(#0BFF50, #02AD33);
  --color-mail-gradient: linear-gradient(#00265C,#0051C2);
  --color-line-gradient: linear-gradient(#189e03,#02AD33);
  --font-main: 'Noto Sans JP', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;
  --font-size-xxl: 36px;
  --font-size-xxxl: 60px;
  --font-size-display: 72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow: 0 4px 12px rgba(1, 82, 195, 0.08);
}

/* ===== UNIFIED UTILITY CLASSES ===== */
.white { color: var(--color-white); }
.black { color: var(--color-black); }
.primary { color: var(--color-primary); }
.secondary { color: var(--color-secondary); }
.accent { color: var(--color-accent); }
.danger { color: var(--color-danger); }
.success { color: var(--color-success); }
.info { color: var(--color-info); }

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-danger { background-color: var(--color-danger); }
.bg-success { background-color: var(--color-success); }
.bg-info { background-color: var(--color-info); }
.bg-brown { background-color: var(--color-brown); }
.bg-error { background-color: var(--color-error); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-mail-btn { background: var(--color-mail-gradient); }
.bg-line-btn { background: var(--color-line-gradient); }
.bg-blue-gradient { background: var(--color-blue-gradient); }
.bg-green-gradient { background: var(--color-green-gradient); }

.font-main { font-family: var(--font-main); }

.xs { font-size: var(--font-size-xs); }
.sm { font-size: var(--font-size-sm); }
.md { font-size: var(--font-size-md); }
.lg { font-size: var(--font-size-lg); }
.xl { font-size: var(--font-size-xl); }
.xxl { font-size: var(--font-size-xxl); }
.xxxl { font-size: var(--font-size-xxxl); }
.display { font-size: var(--font-size-display); }

.bold { font-weight: bold; }
.bold900 { font-weight: 900; }
.italic { font-style: italic; }

.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }

.shadow { box-shadow: var(--shadow); }

.gap4 { gap: 4px; }
.gap8 { gap: 8px; }
.gap16 { gap: 16px; }
.gap20 { gap: 20px; }
.gap24 { gap: 24px; }
.gap36 { gap: 36px; }
.gap60 { gap: 60px; }
.gap80 { gap: 80px; }
.gap120 { gap: 120px; }
.gap200 { gap: 200px; }

.p-8 { padding: 8px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }
.p-32 { padding: 32px; }
.p-36 { padding: 36px; }
.p-60 { padding: 60px; }
.p-72 { padding: 72px; }
.p-120 { padding: 120px; }

.m-8 { margin: 8px; }
.m-16 { margin: 16px; }
.m-20 { margin: 20px; }
.m-24 { margin: 24px; }
.m-36 { margin: 36px; }
.m-60 { margin: 60px; }
.m-72 { margin: 72px; }
.m-120 { margin: 120px; }

/* Remove duplicate .xlarger, unify to .display or .xxxl */
.xlarger { font-size: var(--font-size-display); font-weight: 900; }

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}
a{
    text-decoration: none;
    color: white;
}
body{
    width: 100%;
    height: auto;
    margin-bottom: 200px;
    font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
    line-height: 1.6;
    color: #0152C3;
    overflow-x: hidden;
}
li a{
    font-style: none;
    color: white;
    text-decoration: none
    ;
}
li{
    list-style: none;
}

.footer{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: absolute; */
    /* bottom: 0; */
    background-color: var(--color-primary);
    padding: 2rem;
}
.footer_container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}
.footer_main{
    display: flex;
    flex-direction: row;
    gap: 10rem;
    justify-content: space-between;
    
}
.footer_menu p{
    color: white;
    font-size: 1.5rem;
}
.footer_menu{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer_service{
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.footer_question{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer_question p{
    color: white;
    font-size: 1.5rem;
}
.footer_question div{
    display: flex;
    flex-direction: column;
    color: white;
}
.footer_profile{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer_profile p{
    color: white;
    font-size: 1.5rem;
}
.footer_profile div{
    color: white;
    display: flex;
    flex-direction: column;
}
.footer_bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

/* Add responsive styles for different screen sizes */

/* For 1440px screens */
@media screen and (max-width: 1440px) {
    .footer {
        padding: 2rem 10rem 1rem 10rem;
    }
    
    .footer_main {
        gap: 6rem;
    }
    
    .footer_menu p,
    .footer_question p,
    .footer_profile p {
        font-size: 1.3rem;
    }
}

/* For 1024px screens */
@media screen and (max-width: 1024px) {
    .footer {
        padding: 2rem 2rem 1rem 2rem;
       
    }
    body{
        padding-bottom: 0;
    }
    
    .footer_main {
        gap: 4rem;
    }
    
    .footer_menu p,
    .footer_question p,
    .footer_profile p {
        font-size: 1.2rem;
    }
    
    .footer_service ul li a,
    .footer_question div span,
    .footer_profile div span {
        font-size: 0.9rem;
    }
}

/* For 768px screens (tablets) */
@media screen and (max-width: 768px) {
    .footer {
        padding: 2rem 2rem 1rem 2rem;
    }
    
    .footer_main {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        text-align: center;
    }
    
    .footer_menu,
    .footer_question,
    .footer_profile {
        width: 100%;
    }
    
    .footer_service ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .footer_service ul li {
        margin: 0.3rem;
    }
    
    .footer_menu p,
    .footer_question p,
    .footer_profile p {
        font-size: 1.1rem;
    }
    body{
        padding-bottom: 0;
    }
    
}

/* For 375px screens (mobile) */
@media screen and (max-width: 480px) {
    .footer {
        padding: 1.5rem 1rem 1rem 1rem;
    }
    
    .footer_container {
        gap: 1.5rem;
    }
    
    .footer_main {
        gap: 1.5rem;
    }
    
    .footer_menu p,
    .footer_question p,
    .footer_profile p {
        font-size: 1rem;
    }
    
    .footer_service ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer_service ul li {
        margin: 0.2rem 0;
    }
    
    .footer_service ul li a,
    .footer_question div span,
    .footer_profile div span {
        font-size: 0.8rem;
    }
    
    .footer_bottom p {
        font-size: 0.7rem;
        text-align: center;
    }
    body{
        padding-bottom: 0;
    }
  
}