@charset "utf-8";
header { position: absolute; top: 0; left: 0; z-index: 2;}

main { max-width: none; padding: 0; background: #f5f5f5;}
section { max-width: 1200px; margin: 100px auto 0; padding: 0 20px;}
 
h2 { font-size: 50px; line-height: 1.0em;}
h2 span { font-size: 40px; line-height: 1.0em;}

@media screen and (max-width:799px){
    main { margin: 0; padding: 0;}
    section { margin-top: 50px;}
    
    h2 { font-size: 40px;}
    h2 span { font-size: 30px;}
}

@media screen and (max-width:699px){
    main { font-size: 14px; line-height: 1.6em;}

    h2,
    h2 span { font-size: 20px; line-height: 1.3em;}
}

/**============================================================================================**/
#foilTech1 { max-width: none; margin-top: 0; padding: 0;}

/* メインイメージ */
#foilTech1 .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/foil-tech.webp") no-repeat;
    background-size: auto 990px;
    background-position: bottom center;
    color: #fff;}

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

#foilTech1 h1 { margin-bottom: 40px; font-size: 50px; line-height: 1.0em;}
#foilTech1 h1 br { display: none;}

@media screen and (max-width:1499px){
    #foilTech1 .flex { 
        background-size: auto 100vh;
        background-position: bottom right -220px;}
}

@media screen and (max-width:1199px){
    #foilTech1 .flex { 
        background: url("images/foil-tech_mb.webp") no-repeat;
        background-size: auto 100vh;
        background-position: top center;}
}

@media screen and (max-width:999px){
    #foilTech1 .flex { padding-bottom: 50px;}
}


@media screen and (max-width:699px){
    #foilTech1 .flex { line-height: 1.4em;}

    #foilTech1 h1 { margin-bottom: 20px; font-size: 30px; line-height: 1.3em;}
    #foilTech1 h1 br { display: block;}
}

/* 動画 */
#foilTech1 video { width: 100%; height: auto;}

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

/**============================================================================================**/
/* Aspect Ratioとは？ */
#foilTech2 > h2 { margin: 0 0 50px;}

#foilTech2 .dis-tbl_tab { width: 100%; margin: 0 0 50px;}
#foilTech2 .dis-tbl_tab > * { display: table-cell; vertical-align: top;}

/* Aspect Ratioとは？（テキスト） */
#foilTech2 .dis-tbl_tab > div { padding-left: 100px;}

#foilTech2 h3 { font-size: 16px; font-weight: 500; line-height: 1.6em;}

@media screen and (max-width:899px){
    #foilTech2 > h2 { font-size: 40px;}
}

@media screen and (max-width:799px){
    #foilTech2 > h2 { font-size: 35px;}

    #foilTech2 .dis-tbl_tab,
    #foilTech2 .dis-tbl_tab > * { display: block;}
    #foilTech2 .dis-tbl_tab > div { padding: 30px 0 0;}
}

@media screen and (max-width:699px){
    #foilTech2 > h2 { margin: 0 0 30px;}
    #foilTech2 h3 { font-size: 14px;}
}

/**========================================**/
/* Low Aspect → High Aspect */
#foilTech2 .flex1 {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%; padding-top: 205px;
    background: url("images/aspect-ratio_l-h.webp") no-repeat;
    background-size: 100% auto;
    background-position: top left;}

/* 矢印（→） */
#foilTech2 .flex1::before {
    content: '';
    display: block;
    width: 350px; height: 12px; margin-top: 70px;
    background: url("images/arrow.webp") no-repeat;
    background-size: 100% auto;}

#foilTech2 .flex1 p { width: 160px; margin: 40px 0 0;}
#foilTech2 .flex1 strong { display: block; margin: 0 0 20px; font-size: 25px;}

/* Low Aspect */
#foilTech2 .flex1 .low {
    -webkit-order: -1;
    order: -1;}

@media screen and (max-width:1239px){
    #foilTech2 .flex1 { padding-top: 17.083%;}
}

@media screen and (max-width:899px){
    /* 矢印（→） */
    #foilTech2 .flex1::before { width: 260px;}    
}

@media screen and (max-width:699px){
    #foilTech2 .flex1 {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;}

    /* 矢印（→） */
    #foilTech2 .flex1::before {
        width: 100%; height: 22px; margin: 20px 0 15px;
        background-position: center center;}

    /* Low Aspect */
    #foilTech2 .flex1 .low {
        -webkit-order: 0;
        order: 0;}

    #foilTech2 .flex1 p { width: 100px; margin: 0; font-size: 12px; line-height: 1.6em;}
    #foilTech2 .flex1 strong { margin-bottom: 10px; font-size: 16px;}
}

/**========================================**/
/* 1450H / 1800H  1650 / 2000 */
#foilTech2 .flex2 {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%; margin-top: 100px;}

#foilTech2 .flex2 div { padding-right: 80px;}
#foilTech2 .flex2 p:nth-of-type(1) { padding-right: 10px;}
#foilTech2 .flex2 p:nth-of-type(2) { padding-left: 10px;}

#foilTech2 .flex2 h2 { margin: 0 0 40px;}
#foilTech2 .flex2 li { 
    content: '・';
    position: relative;
    margin: 5px 0 0; padding: 0 0 0 20px;}
    
#foilTech2 .flex2 li::before { 
    content: '・';
    position: absolute; top: 0; left: 0;}

#foilTech2 .flex2 img { width: 100%; max-width: 350px; max-height: none;}

@media screen and (max-width:999px){
    #foilTech2 .flex2 {
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;}
            
    #foilTech2 .flex2 div { width: 100%; padding: 0;}        
    #foilTech2 .flex2 p { box-sizing: border-box; width: 50%; margin: 30px 0 0; text-align: center;}
}

@media screen and (max-width:699px){
    #foilTech2 .flex2 { margin-top: 80px;}
    #foilTech2 .flex2 h2 { margin: 0 0 20px;}
}

@media screen and (max-width:599px){
    #foilTech2 .flex2 p { width: 100%; margin: 20px 0 0;}
    #foilTech2 .flex2 p:nth-of-type(1),
    #foilTech2 .flex2 p:nth-of-type(2) { padding: 0;}
}

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

/**============================================================================================**/
/* Stabilizer（スタビライザー） */
#foilTech3 h2 { margin: 0 0 40px;}
#foilTech3 h3,
#foilTech3 h4 { 
    margin: 30px 0 0;
    font-size: 16px; font-weight: 500; line-height: 1.6em;
    font-family: "Noto Sans JP", sans-serif;
	font-style: normal;}

#foilTech3 h4:nth-of-type(1) { margin: 0;}

@media screen and (max-width:699px){
    #foilTech3 h2 { margin: 0 0 30px;}
    #foilTech3 h3,
    #foilTech3 h4 { font-size: 14px;}
}

/* Low Aspect → High Aspect */
#foilTech3 .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%; margin: 40px 0 0; padding-top: 292px;
    background: url("images/stabilizers.webp") no-repeat;
    background-size: 100% auto;
    background-position: top left;}


#foilTech3 .flex p { width: 240px; margin: 40px 0 0;}
#foilTech3 .flex strong { display: block; margin: 0 0 20px; font-size: 25px;}

@media screen and (max-width:1239px){
    #foilTech3 .flex { padding-top: 24.33%;}
}

@media screen and (max-width:699px){
    #foilTech3 .flex {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;}

    #foilTech3 .flex p { width: 100px; margin: 30px 0 0; font-size: 12px; line-height: 1.6em;}
    #foilTech3 .flex strong { margin-bottom: 10px; font-size: 16px;}
}

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

/**============================================================================================**/
/* Fuselage（フューサレージ） */
#foilTech4 h2 { margin: 0 0 40px;}

@media screen and (max-width:699px){
    #foilTech4 h2 { margin: 0 0 30px;}
}

/* Low Aspect → High Aspect */
#foilTech4 .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%; max-width: 965px; margin: 40px auto 0; padding-top: 349px;
    background: url("images/fuselages.webp") no-repeat;
    background-size: 100% auto;
    background-position: top left;}


#foilTech4 .flex p { width: 260px; margin: 40px 0 0;}
#foilTech4 .flex strong { display: block; margin: 0 0 20px; font-size: 25px;}

@media screen and (max-width:1004px){
    #foilTech4 .flex { padding-top: 36.16%;}
}

@media screen and (max-width:699px){
    #foilTech4 .flex {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;}

    #foilTech4 .flex p { width: 135px; margin-top: 30px; font-size: 12px; line-height: 1.6em;}
    #foilTech4 .flex strong { margin-bottom: 10px; font-size: 16px;}
}

@media screen and (max-width:349px){
    #foilTech4 .flex p { width: 110px;}
}


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

/**============================================================================================**/
/* Masts（マスト） Aluminium Masts（アルミ） Carbon Fiber Tech（カーボン） */
#foilTech5 { padding-bottom: 100px;}
#foilTech5 h2 { margin: 0 0 40px;}

@media screen and (max-width:799px){
    #foilTech5 { padding-bottom: 50px;}
}

@media screen and (max-width:699px){
    #foilTech5 h2 { margin: 0 0 20px;}
}

#foilTech5 .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;}

#foilTech5 .flex:not(:last-child) { margin: 0 0 100px;}

#foilTech5 div { box-sizing: border-box; width: 58.34%; padding: 0 30px 0 0;}
#foilTech5 p { width: 41.66%; text-align: center;}
#foilTech5 img { width: 100%; max-width: 500px; max-height: none;}

@media screen and (max-width:999px){
    #foilTech5 .flex {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;}
        
    #foilTech5 .flex:not(:last-child) { margin: 0 0 80px;}

    #foilTech5 .flex div,
    #foilTech5 .flex p { width: 100%;}

    #foilTech5 p { margin: 20px 0 0;}
}


/* LastUp2026.02.02_kimata */