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

main { max-width: none; padding: 0;}
section { max-width: 1200px; margin: 0 auto; padding: 100px 20px;}

h2 { font-size: 50px; line-height: 1.4em;}
h3 { margin: 0 0 20px; font-size: 30px; line-height: 1.4em;}
h4 { font-size: 16px; font-weight: 500; line-height: 1.4em;}

@media screen and (max-width:799px){
    main { margin: 0; padding-bottom: 80px;}
    section { padding: 80px 20px 0;}
    
    h2 { font-size: 40px;}
    h3 { font-size: 25px;}
}

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

    h2 { font-size: 20px; line-height: 1.3em;}
    h3,
    h4 { font-size: 16px; line-height: 1.3em;}
}

/**============================================================================================**/
#surfskate1 { 
    max-width: none; padding: 0;
    background: #000;}

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

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

#surfskate1 h1 { margin-bottom: 40px; font-size: 50px; line-height: 1.5em;}

#surfskate1 .ta_c { padding: 100px 20px; color: #fff;}

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

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

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

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


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

    #surfskate1 h1 { margin-bottom: 20px; font-size: 30px; line-height: 1.3em;}
}

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

/**============================================================================================**/
/* Truck System – トラックの特徴 */
#surfskate2 .flex {
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box; width: 100%; margin: 50px 0 0;}

#surfskate2 .flex p { width: 66.67%; max-width: 800px;}
#surfskate2 .flex div { box-sizing: border-box; width: 33.33%; padding-left: 50px;}

#surfskate2 h3 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 20px;}

#surfskate2 h3 span:first-child { margin-right: 5px;}

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

    #surfskate2 .flex p,
    #surfskate2 .flex div { width: 100%; max-width: none; padding: 0;}

    #surfskate2 .flex div { 
         -webkit-order: -1;
        order: -1;
        margin: 0 0 20px;}
}

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

    #surfskate2 .flex:nth-of-type(1) { margin-top: 20px;}

    #surfskate2 h3 { margin: 0 0 10px;}

}

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

/**============================================================================================**/
/* Wheels – ホイール選び */
#surfskate3 img { display: block; margin: 0 auto;}

#surfskate3 .flex {
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box; width: 100%; margin: 50px 0 0;}

#surfskate3 .flex > *:first-child { width: 58.33%; max-width: 700px;}
#surfskate3 .flex > *:last-child { box-sizing: border-box; width: 41.67%; padding-left: 50px;}
#surfskate3 .flex > *:last-child img { width: 100%; max-width: 350px; max-height: none;}

#surfskate3 h3 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 20px;}

#surfskate3 h3 span:first-child { margin-right: 5px;}

#surfskate3 p { margin: 0 0 50px;}
#surfskate3 ul { margin: 0 0 30px;}
#surfskate3 li { 
    position: relative;
    margin: 0; padding: 0 0 0 20px;}
    
#surfskate3 li::before { 
    content: '・';
    position: absolute; top: 0; left: 0;}

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

    #surfskate3 .flex { margin: 20px 0 0;}
    #surfskate3 .flex > *:first-child,
    #surfskate3 .flex > *:last-child { width: 100%; max-width: none; padding: 0;}
    #surfskate3 .flex > *:last-child { margin: 80px 0 0;}

    #surfskate3 h3 { margin: 0 0 10px;}

    #surfskate3 p { margin: 0 0 20px;}
    #surfskate3 ul { margin: 0 0 40px;}
}

@media screen and (max-width:699px){
    #surfskate3 .flex > *:last-child img { max-width: 250px;}
}

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

/**============================================================================================**/
/* Kicktail & Nose – キックテールとノーズ・Concave – コンケーブ形状 */
#surfskate4 img,
#surfskate5 img { display: block; margin: 0 auto;}

#surfskate4 h2,
#surfskate5 h2 { 
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 30px;}

#surfskate4 h2 span:first-child,
#surfskate5 h2 span:first-child { margin-right: 20px;}

#surfskate4 .flex,
#surfskate5 .flex {
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box; width: 100%; margin: 30px 0 0;}

#surfskate4 .flex p,
#surfskate5 .flex p { width: 66.67%; max-width: 800px;}
#surfskate4 .flex div,
#surfskate5 .flex div { box-sizing: border-box; width: 33.33%; padding-left: 50px;}

#surfskate4 h3,
#surfskate5 h3 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 20px;}

#surfskate4 h3 span:first-child,
#surfskate5 h3 span:first-child { margin-right: 5px;}

#surfskate4 ul { margin: 25px 0 0;}
#surfskate4 li { margin: 10px 0 0;}

@media screen and (max-width:999px){
    #surfskate4 .flex,
    #surfskate5 .flex {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;}

    #surfskate4 .flex p,
    #surfskate5 .flex p,
    #surfskate4 .flex div,
    #surfskate5 .flex div { width: 100%; max-width: none; padding: 0;}
    
    #surfskate4 .flex div,
    #surfskate5 .flex div { margin: 80px 0 0;}
}

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

    #surfskate4 .flex,
    #surfskate5 .flex { margin: 20px 0 0;}

    #surfskate4 .flex div,
    #surfskate5 .flex div { margin: 40px 0 0;}
    
    #surfskate4 ul { margin: 20px 0 0;}
}

/**========================================**/
/* Concave – コンケーブ形状 */
#surfskate5 li { 
    position: relative;
    margin: 5px 0 0; padding: 0 0 0 20px;}
    
#surfskate5 li::before { 
    content: '・';
    position: absolute; top: 0; left: 0;}

#surfskate5 .flex h3 { margin: 0; font-size: 16px; line-height: 1.4em;}
#surfskate5 .flex ul:not(:last-child) { margin: 0 0 30px;}

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

#surfskate5 .dis-tbl_tab ul { margin: 0 0 5px;}

@media screen and (max-width:999px){
    #surfskate5 .dis-tbl_tab,
    #surfskate5 .dis-tbl_tab > * { display: block;}
    
    #surfskate5 .dis-tbl_tab { margin: 80px 0 0;}
    #surfskate5 .dis-tbl_tab > div { padding: 20px 0 0;}
}


/* LastUp2026.02.02_kimata */