@charset "utf-8";
header { position: absolute; top: 0; left: 0; z-index: 2;}
main { 
    max-width: none; padding: 0;
    background: #000; color: #fff;}

@media screen and (max-width:799px){
    header { background: none;}

    main { margin: 0; padding: 0;}
}

/**============================================================================================**/
/* ABOUT US */
#aboutus1 .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    box-sizing: border-box; width: 100%; height: 100vh; padding: 0 20px 100px;
    background: url("images/main-img.webp") no-repeat;
    background-size: auto 1000px;
    background-position: bottom left;}

#aboutus1 .m-0a { width: 100%; max-width: 1200px;}

#aboutus1 h1 { margin-bottom: 40px; font-size: 50px; line-height: 1.0em;}
#aboutus1 h1 span { display: inline-block; font-size: 20px; font-weight: 500; line-height: 1.0em;}

@media screen and (max-width:1599px){
    #aboutus1 .flex { background-position: bottom left -100px;}
}

@media screen and (max-width:1499px){
    #aboutus1 .flex { background-position: bottom left -150px;}
}

@media screen and (max-width:1399px){
    #aboutus1 .flex { background-position: bottom left -250px;}
}

@media screen and (max-width:1299px){
    #aboutus1 .flex { background-position: bottom left -350px;}
}

@media screen and (max-width:1199px){
    #aboutus1 .flex { background-position: bottom left -450px;}
}

@media screen and (max-width:1099px){
    #aboutus1 .flex { background-position: bottom left -550px;}
}

@media screen and (max-width:999px){
    #aboutus1 .flex { 
        height: 800px; padding-bottom: 50px; 
        background-size: auto 800px; background-position: bottom left -350px;}
}

@media screen and (max-width:899px){
    #aboutus1 .flex { background-position: bottom left -450px;}
}

@media screen and (max-width:799px){
    #aboutus1 .flex { background-position: bottom left -550px;}
}

@media screen and (max-width:699px){
    #aboutus1 .flex { 
        height: 850px;
        background-size: auto 780px;
        background-position: top right -300px;
        font-size: 14px; line-height: 1.4em;}

    #aboutus1 h1 { margin-bottom: 20px; font-size: 35px;}
    #aboutus1 h1 span { margin-bottom: 10px; font-size: 14px;}
}

@media screen and (max-width:599px){
    #aboutus1 .flex { 
        background-position: top right -350px;}
}

@media screen and (max-width:449px){
    #aboutus1 .flex {
        background: url("images/main-img_mb.webp") no-repeat;
        background-size: auto 850px;
        background-position: top right;}
}

@media screen and (max-width:399px){
    #aboutus1 .flex { background-size: auto 790px;}
}

/* AZTRONの新たな旅へ…… */
#aboutus1 .ta_c { padding: 100px 20px;}

#aboutus1::after { 
    content: '';
    display: block;
    width: 100%; height: 0; padding: 42.6% 0 0;
    background: url("images/aboutus01.webp") no-repeat;
    background-size: 100% auto;}

@media screen and (max-width:699px){
    #aboutus1 .ta_c { padding: 30px 20px;}
    #aboutus1::after { margin-top: 30px;}
}
/**============================================================================================**/

/**============================================================================================**/
/* Nature Inspired・True Aztron・CORE VALUE・People First・Real & Rad */
#aboutus2 { padding: 50px 0 0;}

#aboutus2 h2 { margin-bottom: 30px; font-size: 50px; line-height: 1.0em;}
#aboutus2 h2 span { display: inline-block; font-size: 20px; font-weight: 500; line-height: 1.0em;}

#aboutus2 > div { 
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;    
    width: 100%; margin: 50px 0 0;
    background: #282828;}
    
#aboutus2 > div::after {
    content: '';
    display: block;
    width: 50%; height: 0; padding: 32.81% 0 0;}     
    
#aboutus2 .flex1::after { background: url("images/aboutus02.webp") no-repeat; background-size: 100% auto;}
#aboutus2 .flex2::after { background: url("images/aboutus03.webp") no-repeat; background-size: 100% auto;}
#aboutus2 .flex3::after { background: url("images/aboutus04.webp") no-repeat; background-size: 100% auto;}
#aboutus2 .flex4::after { background: url("images/aboutus05.webp") no-repeat; background-size: 100% auto;}
#aboutus2 .flex5::after { background: url("images/aboutus06.webp") no-repeat; background-size: 100% auto;}
    
#aboutus2 .flex1::after,
#aboutus2 .flex3::after,
#aboutus2 .flex5::after { 
     -webkit-order: -1;
    order: -1;}

#aboutus2 .p_20 { box-sizing: border-box; width: 50%;}

#aboutus2 .m-0a { max-width: 480px;}

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

    #aboutus2 h2 { font-size: 20px; line-height: 1.0em;}
    #aboutus2 h2 span { font-size: 12px;}
}

@media screen and (max-width:999px){
    #aboutus2 > div::after { overflow: hidden; padding-top: 350px;}
    #aboutus2 .flex1::after,
    #aboutus2 .flex2::after,
    #aboutus2 .flex3::after,
    #aboutus2 .flex4::after,
    #aboutus2 .flex5::after { background-size: auto 350px;}

    #aboutus2 .flex1::after,
    #aboutus2 .flex2::after,   
    #aboutus2 .flex3::after,
    #aboutus2 .flex4::after,
    #aboutus2 .flex5::after { background-position: top center;}
}

@media screen and (max-width:899px){
    #aboutus2 > div::after { padding-top: 370px;}
    #aboutus2 .flex1::after,
    #aboutus2 .flex2::after,
    #aboutus2 .flex3::after,
    #aboutus2 .flex4::after,
    #aboutus2 .flex5::after { background-size: auto 370px;}
}

@media screen and (max-width:799px){
    #aboutus2 > div::after { padding-top: 390px;}
    #aboutus2 .flex1::after,
    #aboutus2 .flex2::after,
    #aboutus2 .flex3::after,
    #aboutus2 .flex4::after,
    #aboutus2 .flex5::after { background-size: auto 390px;}
}

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

    #aboutus2 h2 span { margin-top: 10px;}

    #aboutus2 > div { display: block; background: none;}

    #aboutus2 > div::after,
    #aboutus2 .p_20 { width: 100%;}
    
    #aboutus2 > div::after { padding-top: 65.625%;}     
    #aboutus2 .p_20 { margin-bottom: 10px;}

    #aboutus2 .flex1::after,
    #aboutus2 .flex2::after,
    #aboutus2 .flex3::after,
    #aboutus2 .flex4::after,
    #aboutus2 .flex5::after { background-size: 100% auto;}
}

@media screen and (max-width:499px){
    #aboutus2 > div::after { padding-top: 350px;}
    #aboutus2 .flex1::after,
    #aboutus2 .flex2::after,
    #aboutus2 .flex3::after,
    #aboutus2 .flex4::after,
    #aboutus2 .flex5::after { background-size: auto 350px;}
}

@media screen and (max-width:399px){
    #aboutus2 .flex1::after { background-position: top left -80px;}
    #aboutus2 .flex2::after { background-position: top left;}
    #aboutus2 .flex3::after { background-position: top center;}
    #aboutus2 .flex4::after { background-position: top center;}
    #aboutus2 .flex5::after { background-position: top center;}
}

/**============================================================================================**/

/**============================================================================================**/
/* AZTRONという名に込めて */
#aboutus3 { padding: 100px 0 150px;}

#aboutus3 h2 { 
    padding: 0 20px;
    font-size: 50px; line-height: 1.0em; text-align: center;}

#aboutus3 .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    margin:  60px 0 100px; padding: 0 20px;
    font-size: 18px; line-height: 1.6em;}

@media screen and (max-width:699px){
    #aboutus3 h2 { font-size: 20px;}

    #aboutus3 .flex {
        margin:  20px 0 70px;
        font-size: 16px; line-height: 1.6em;}
}

/* LastUp2026.01.30_kimata */