@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	index.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
#aboutSec { background: url("/about/images/index_bg_pc.webp") no-repeat center -112px; }
#aboutSec .mainHead,
#aboutSec .mainHeadSub { text-align: center; }
#aboutSec .mainHead { margin-top: 75px; }
#aboutSec #aboutIntroTxt { font-size: 1.5rem; line-height: 2.5; text-align: center; margin-top: 68px; }
#aboutSec .contentSizeS { padding: 0; }

#aboutSec #philosophyArea { margin-top: 110px; }
#aboutSec #philosophyArea h2 { background-image: linear-gradient(90deg, #1f4600, #24b121); color: #fff; font-size: 1.62rem; font-weight: 400; padding: 2px 10px; text-align: center; }
#aboutSec #philosophyArea ul { margin: 0 2.5%; }
#aboutSec #philosophyArea ul > li { display: flex; font-size: 1.25rem; margin-top: 40px; }
#aboutSec #philosophyArea ul > li .philosophyListHead { background-color: #edeef2; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; }
#aboutSec #philosophyArea ul > li .philosophyListInfo { align-self: center; flex: 1; margin-left: 2%; }
#aboutSec #philosophyArea ul > li .philosophyListInfo ol li { position: relative; padding-left: 2.1em; }
#aboutSec #philosophyArea ul > li .philosophyListInfo ol li::before { position: absolute; content: counter(list-item) "．"; left: 0.5rem; }
#aboutSec #philosophyArea ul > li .philosophyListInfo ol li:nth-child(n+2) { margin-top: 7px; }

#aboutLinkList { margin-top: 132px; display: flex; justify-content: space-between; }
#aboutLinkList li { width: 32%; max-width: 295px; border: solid 1px #ddd; border-radius: 10px; overflow: hidden; }
#aboutLinkList li a { color: #000; text-decoration: none; display: block; height: 100%; }
#aboutLinkList li a:hover { color: #094; }
#aboutLinkList li a:hover img { opacity: 1; }
#aboutLinkList li div.cycleRackItemImg { overflow: hidden; }
#aboutLinkList li a:hover div.cycleRackItemImg img { transform: scale(1.1); }

#aboutLinkList li div.cycleRackItemTxt { padding: 25px 35px 22px 10px; font-size: 1.12rem; font-weight: 400; position: relative; text-align: center; line-height: 1.3; }
#aboutLinkList li div.cycleRackItemTxt::before,
#aboutLinkList li div.cycleRackItemTxt::after { content: ""; display: block; position: absolute; }
#aboutLinkList li div.cycleRackItemTxt::before { background-color: #094; border-radius: 50%; width: 16px; height: 16px; right: 9px; top: calc(50% - 7px); transition: 0.5s background-color; }
#aboutLinkList li div.cycleRackItemTxt::after { clip-path: polygon(0 0, 0% 100%, 100% 50%); background-color: #fff; width: 5px; height: 5px; top: calc(50% - 2px); right: 14px; }
#aboutLinkList li a:hover div.cycleRackItemTxt::before { background-color: #2abb54; }

#aboutLinkList li#cycleRackItem div span { background: url("/common/images/icon_cycle_rack.svg") no-repeat left top / 26px 29px; padding-left: 33px; }
#aboutLinkList li#processingItem div span { background: url("/common/images/icon_processing.svg") no-repeat left 4px / 29px 20px; padding-left: 37px; }
#aboutLinkList li#metalaboItem div.cycleRackItemTxt { padding: 20px 10px 27px; }
#aboutLinkList li#metalaboItem div.cycleRackItemTxt img { width: 136px; border-radius: 0; }

@media screen and (max-width: 750px) {
    #aboutSec { background: url("/about/images/index_bg_sp.webp") no-repeat center -65px / 100%; }
    #aboutSec .mainHead { margin-top: 38px; }
    #aboutSec #aboutIntroTxt { font-size: 1.2rem; line-height: 1.8; margin-top: 20px; }

    #aboutSec #philosophyArea { margin-top: 63px; font-size: 1.33rem; padding-bottom: 4px; }
    #aboutSec #philosophyArea h2 { font-size: 1.33rem; padding: 3px 10px 4px; }
    #aboutSec #philosophyArea ul { margin: 0; }
    #aboutSec #philosophyArea ul > li { display: block; margin-top: 30px; font-size: 1.06rem; }
    #aboutSec #philosophyArea ul > li .philosophyListHead { width: 100%; height: auto; padding: 5px; }
    #aboutSec #philosophyArea ul > li .philosophyListInfo { margin: 10px 0 0; line-height: 1.8; }
    #aboutSec #philosophyArea ul > li .philosophyListInfo ol li { padding-left: 1.8em; }
    #aboutSec #philosophyArea ul > li .philosophyListInfo ol li::before { left: 0.2rem; }

    #aboutLinkList { margin-top: 62px; display: block; }
    #aboutLinkList li { width: 100%; max-width: 100%; border-radius: 5px; }
    #aboutLinkList li:nth-child(n+2) { margin-top: 22px; }
    #aboutLinkList li div.cycleRackItemTxt { font-size: 1.06rem; padding: 0 35px 0 10px; }
    #aboutLinkList li div.cycleRackItemTxt span { display: inline-block; padding: 21px 0 17px; }
    #aboutLinkList li#cycleRackItem div span { background-position: left center; background-size: 23px; padding-left: 28px; }
    #aboutLinkList li#processingItem div span { background-position: left center; background-size: 25px; padding-left: 34px; }
    #aboutLinkList li#metalaboItem div.cycleRackItemTxt { padding: 20px 10px; }
    #aboutLinkList li#metalaboItem div.cycleRackItemTxt img { width: 120px; }
    
    #aboutLinkList li a:hover { color: #000; }
    #aboutLinkList li a:hover div.cycleRackItemImg img { transform: scale(1); }
    #aboutLinkList li a:hover div.cycleRackItemTxt::before { background-color: #094; }

}