.visual {
    aspect-ratio:18 / 8;
}

.visual .container {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.visual_line {
    width:1px;
    height:136px;
    background-color:#fff;
    margin:0 auto 60px;
}

h2 {
    font-size:50px;
    color:#fff;
    text-align:center;
    font-weight:700;
}

.subh2 {
    font-size:32px;
    color:#fff;
    text-align:center;
    font-weight:500;
}

.sec1_logo .logo_img {
    width:208px;
    height:auto;
}

.sec1_logo {
    margin-bottom:150px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}




#page_philosophy .visual {
    background:url('/img/ssk/visual_philosophy.png') 50% 50% no-repeat;
    background-size:cover;
}

#page_philosophy div[class*='sec1_box'] {
    display:flex;
    gap:30px;
    width:100%;
    max-width:1280px;
    justify-content:space-between;
    align-items:center;
    margin:0 auto 150px;
}

#page_philosophy .sec1_box2 {
    flex-direction:row-reverse;
}

#page_philosophy .box_img {
    border-radius:30px;
    overflow:hidden;
    width:590px;
}

#page_philosophy .box_content {
    width:50%;
    max-width:645px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

#page_philosophy .box_content svg {
    margin-bottom:70px;
}

#page_philosophy .box_txt {
    width:100%;
}

#page_philosophy .box_txt .title {
    font-size:45px;
    font-weight:700;
    margin-bottom:25px;
}

#page_philosophy .box_txt .sub {
    font-size:30px;
    color:#898989;
    letter-spacing:-1.1px;
}

#page_philosophy .sec1_box1 .box_txt .title {
    color:#B47E58;
}

#page_philosophy .sec1_box2 .box_txt .title {
    color:#87C246;
}

#page_philosophy .sec1_box3 .box_txt .title {
    color:#F1D296;
}



#page_history .visual {
    background:url('/img/ssk/visual_history.png') 50% 50% no-repeat;
    background-size:cover;
}

#page_history .logo_img {
    margin-bottom:60px;
}

#page_history .logo_txt {
    text-align:center;
    font-size:30px;
    line-height:180%;
    color:#898989;
}

#page_history ul.year {
    width:100%;
    position:relative;
    padding:30px 0 100px;
}

#page_history ul.year:after {
    content:'';
    position:absolute;
    display:block;
    width:2px;
    height:100%;
    background-color:#7CBE2A;
}

#page_history ul.year li {
    text-indent:-8px;
    width:50%;
    line-height:180%;
    font-size:25px;
}

html[lang="en"] #page_history ul.year li {
    letter-spacing:-1.5px;
}

#page_history ul.year li.strong {
    font-weight:700;
    font-size:24px;
}

#page_history ul.year li:before {
    content:'·';
    padding-right:4px;
    font-weight:700;
}

#page_history ul.year li.nonestyle {
    padding-top:10px;
}


#page_history ul.year li.nonestyle:before {
    content:'';
    padding-left:5px;
}

#page_history ul.year li.nonestyle img {
    width:100%;
    max-width:400px;
    height:auto;
    border-radius:10px;
}

#page_history ul.year li.nonestyle.small img {
    max-width:200px;
}


#page_history ul.year:nth-of-type(odd) {
    margin-left:51%;
    padding-left:80px;
}

#page_history ul.year:nth-of-type(odd):after {
    left:0;
    top:0;
}

#page_history ul.year:nth-of-type(even) {
    padding-right:120px;
    text-align:right;
}

#page_history ul.year:nth-of-type(even):after {
    right:calc(49% - 2px);
    top:0;
}



#page_history ul.y2025:before {
    content:'2025';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:5px 40px 5px 40px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:-88px;
}


#page_history ul.y2025:after {
    top:35px !important;
}


#page_history ul.y2024:before {
    content:'2024';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:5px 40px 5px 40px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:calc(50% + 14px);
}


#page_history ul.y2023:before {
    content:'2023';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:5px 40px 5px 40px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:-88px;
}

#page_history ul.y2022:before {
    content:'2022';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:40px 5px 40px 5px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:calc(50% + 14px);
}

#page_history ul.y2021:before {
    content:'2021';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:5px 40px 5px 40px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:-88px;
}

#page_history ul.y2020:before {
    content:'2020';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:40px 5px 40px 5px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:calc(50% + 14px);
}

#page_history ul.y2019:before {
    content:'2019';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:5px 40px 5px 40px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:-88px
}

#page_history ul.y2018:before {
    content:'2018';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:40px 5px 40px 5px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:calc(50% + 14px);
}

#page_history ul.y2017:before {
    content:'2017';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:5px 40px 5px 40px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:-88px;
}

#page_history ul.y2016:before {
    content:'2016';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:40px 5px 40px 5px;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:calc(50% + 14px);
}

#page_history ul.y2015:before {
    content:'2015';
    position:absolute;
    display:block;
    width:90px;
    height:90px;
    background-color:#7CBE2A;
    border-radius:50%;
    color:#fff;
    font-size:20px;
    font-weight:500;
    line-height:90px;
    text-align:center;
    top:0;
    left:-88px;
}

#page_history ul.y2015:after {
    top:0;
    height:10px;
}




#page_org .visual {
    background:url('/img/ssk/visual_org.png') 50% 50% no-repeat;
    background-size:cover;
}

#page_org .m_orgchart {
    display:none;
}

#page_org .pc_orgchart {
    max-width:880px;
}

#page_org .sec_2 {
    padding-bottom:130px;
}

#page_org .sec_2 .container {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

#page_org .sec_3 {
    background:url('/img/ssk/org_bottom.png') 50% 50% no-repeat;
    background-size:cover;
    aspect-ratio: 12 / 5;
}

@media all and (max-width:1379px) {
    .visual_line {
        margin-bottom:30px;
    }

    #page_philosophy .box_txt .sub br {
        display:none;
    }

    #page_history ul.year:nth-of-type(even):before {
        left:51% !important;
    }
}



@media all and (max-width:1024px) {
    .visual_line {
        height:100px;
    }

    h2 {
        font-size:32px;
    }
    
    .subh2 {
        font-size:21px;
    }

    .sec1_logo .logo_img {
        width:140px;
    }

    #page_philosophy div[class*='sec1_box'],
    #page_philosophy .sec1_box2 {
        flex-direction:column;
    }

    #page_philosophy div[class*='sec1_box'] {
        gap:60px;
        margin-bottom:100px;
    }

    #page_philosophy .box_content svg {
        margin-bottom:20px;
        width:auto;
        height:100px;
    }

    #page_philosophy .box_content {
        width:100%;
    }

    #page_philosophy .box_img {
        width:100%;
    }

    #page_philosophy .box_txt {
        text-align:center;
        word-break:keep-all;
    }

    #page_history .logo_txt,
    #page_history ul.year li {
        font-size:17px;
        letter-spacing:-1px;
    }

    #page_history ul.year li.strong {
        font-size:17px;
    }

    #page_history ul.year li.nonestyle img {
        width:80%;
    }

    #page_history ul.year:before {
        width:80px !important;
        height:80px !important;
        line-height:80px !important;
    }

    #page_history ul.year:nth-of-type(odd):not(.y2015):before {
        left:-78px;
    }

    #page_history ul.y2015:before {
        left:-40px !important;
    }

    #page_history ul.y2023:after {
        top:45px !important;
    }

    #page_history ul.year:nth-of-type(odd) {
        padding-left:60px;
    }

    #page_history ul.year:nth-of-type(even) {
        padding-right:100px;
    }



    #page_org .sec_2 {
        padding-bottom:100px;
    }
}

@media all and (max-width:768px) {
    .visual {
        aspect-ratio:10 / 9;
    }

    .visual_line {
        height:60px;
        margin-bottom:20px;
    }

    h2 {
        font-size:20px;
    }
    
    .subh2 {
        font-size:15px;
        letter-spacing:-0.5px;
    }

    .sec1_logo .logo_img {
        width:100px;
    }

    .sec1_logo {
        margin-bottom:60px;
    }

    #page_philosophy .box_content svg {
        height:50px;
        margin-bottom:14px;
    }

    #page_philosophy .box_txt .title {
        font-size:20px;
        margin-bottom:10px;
    }

    #page_philosophy .box_txt .sub {
        font-size:16px;
    }

    #page_philosophy div[class*='sec1_box'] {
        gap:40px;
        margin-bottom:60px;
    }

    #page_history .logo_txt {
        font-size:16px;
        word-break:keep-all;
    }

    #page_history .logo_txt br {
        display:none;
    }

    #page_history ul.year li.strong,
    #page_history ul.year li {
        font-size:15px;
    }

    #page_history ul.year li {
        width:100%;
    }

    #page_history ul.year {
        padding:30px 0 60px;
    }

    #page_history ul.year:nth-of-type(odd):before,
    #page_history ul.year:nth-of-type(even):before {
        border-radius: 40px 5px 40px 5px !important;
        left: 0 !important;
        right:-80px !important;
    }

    #page_history ul.year:nth-of-type(even):after {
        left:0 !important;
        right: 0;
    }

    #page_history ul.year:nth-of-type(even) {
        text-align:left;
        padding-right:0;
        padding-left:96px;
    }

    #page_history ul.year:nth-of-type(odd) {
        margin-left:0;
        padding-left:96px;
    }

    #page_history ul.y2015:after {
        height:50px;
    }

    #page_history ul.year li.nonestyle img {
        width:100%;
    }

    #page_history ul.year li {
        word-break:keep-all;
        letter-spacing:-0.5px;
    }


    #page_org .pc_orgchart {
        display:none;
    }

    #page_org .m_orgchart {
        display:block;
    }

    #page_org .sec_2 {
        padding-bottom:50px;
    }

}