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

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	index.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* ヘッダー */
#headerWrap { transition: 0.5s; }
#headerWrap { background-color: transparent; }
#headerWrap #headerSec #naviArea #naviInquiry a.commonBtn { border-radius: 0 30px 30px 0; }

#headerWrap.headerFollowWrap { background-color: #fff; }
#headerWrap.headerFollowWrap #headerSec #naviArea #naviInquiry a.commonBtn { border-radius: 30px; }

@media screen and (max-width: 920px) {
    #headerWrap.naviOn { background-color: #fff; }
    #headerWrap #headerSec #naviArea #naviInquiry a.commonBtn { border-radius: 30px; }
}

@media screen and (max-width: 750px) {

}

/* MV */
#mvSec { padding-top: 0; }

#mvSec { position: relative; }
#mvSec #mvInfoArea { position: absolute; z-index: 1; top: 50%; left: 0; right: 0; padding: 0 20px; margin: 0 auto; width: 100%; max-width: 1160px; transform: translateY(-42%); }
#mvSec #mvInfoArea h2 { font-size: 2.62rem; line-height: 1.8; font-weight: 450; }
#mvSec #mvInfoArea p { font-size: 1.12rem; margin-top: 25px; line-height: 1.9; }
#mvSec #mvInfoArea.mvInfoAreaColor { color: #fff; }

@media screen and (max-width: 750px) {
    #mvSec #mvInfoArea { transform: translateY(0); }
    #mvSec #mvInfoArea h2 { font-size: 2rem; line-height: 1.6; }
    #mvSec #mvInfoArea p { font-size: 1rem; margin-top: 14px; }
}

/* 導入 */
#introSec { margin-top: 80px; position: relative; min-height: 482px; }
#introSec #introImg { width: calc(100% - 230px); }
#introSec #introTxt { position: absolute; right: 60px; top: 0; padding-top: 20px; font-size: 1.25rem; line-height: 2; font-weight: 450; writing-mode: vertical-rl; -ms-writing-mode: tb-rl; text-orientation: upright; }

@media screen and (max-width: 750px) {
    #introSec { margin-top: 45px; min-height: 350px; }
    #introSec #introImg { width: calc(100% - 110px); }
    #introSec #introTxt { font-size: 1rem; right: 14px; line-height: 1.7; padding-top: 0; }
}

/* 商品 */
#productsSec { margin-top: 95px; padding: 0; }
#productsSec .productsArea + .productsArea { margin-top: 70px; }
#productsSec .productsArea a { display: flex; justify-content: space-between; align-items: center; color: #000; text-decoration: none; padding: 20px; }
#productsSec .productsArea a,
#productsSec .productsArea a .productsInfo div { transition: 0.5s background-color, 0.5s color; }
#productsSec .productsArea a:hover { background-color: #f4f5f7; }
#productsSec .productsArea a:hover img { opacity: 1; }
#productsSec .productsArea .productsImg { width: 50%; }
#productsSec .productsArea .productsImg img { border-radius: 0 100px 0 0; }
#productsSec .productsArea .productsInfo { width: 46%; }
#productsSec .productsArea .productsInfo h2 { padding-left: 78px; padding-right: 30px; font-size: 2.5rem; font-weight: 400; letter-spacing: -0.02em; position: relative; }
#productsSec .productsArea .productsInfo h2::before,
#productsSec .productsArea .productsInfo h2::after { content: ""; display: block; position: absolute; transition: 0.5s background-color; }
#productsSec .productsArea .productsInfo h2::before { background-color: #094; border-radius: 50%; width: 20px; height: 20px; right: 0; top: calc(50% - 7px); }
#productsSec .productsArea .productsInfo h2::after { clip-path: polygon(0 0, 0% 100%, 100% 50%); background-color: #fff; width: 6px; height: 6px; top: 50%; right: 6px; }
#productsSec .productsArea a:hover .productsInfo h2::before { background-color: #2cbd56; }
#productsSec .productsArea .productsInfo div { margin-top: 50px; padding-top: 45px; line-height: 2; border-top: solid 1px #ccc; }
#productsSec .productsArea a:hover .productsInfo div { color: #094; }

#productsSec #cycleRackArea.productsArea .productsInfo h2 { background: url("/common/images/icon_cycle_rack.svg") no-repeat 2px 0.05em / 64px; }
#productsSec #processingArea.productsArea .productsInfo h2 { background: url("/common/images/icon_processing.svg") no-repeat 4px 0.35em / 65px; }
#productsSec #metalaboArea.productsArea .productsInfo h2 img { width: 300px; }
#productsSec #metalaboArea.productsArea .productsInfo h2 { padding-left: 0; }
#productsSec #metalaboArea.productsArea .productsInfo h2::before { top: calc(50% + 5px); }
#productsSec #metalaboArea.productsArea .productsInfo h2::after { top: calc(50% + 12px); }
#productsSec #metalaboArea.productsArea .productsInfo div { margin-top: 70px; }

@media screen and (max-width: 1260px) {
    #productsSec .productsArea .productsImg { width: 46%; }
    #productsSec .productsArea .productsInfo { width: 50%; }
    #productsSec .productsArea .productsInfo h2 { font-size: 3.18vw; padding-left: 7.1vw; }
    #productsSec #cycleRackArea.productsArea .productsInfo h2 { background-size: 4.7vw; }
    #productsSec #processingArea.productsArea .productsInfo h2 { background-size: 5vw; padding-left: 6.5vw; }
    #productsSec #metalaboArea.productsArea .productsInfo h2 img { width: 24vw; }
}

@media screen and (max-width: 750px) {
    #productsSec { margin-top: 18px; }
    #productsSec .productsArea + .productsArea { margin-top: 45px; }
    #productsSec .productsArea a { display: block; padding: 0 20px; }
    #productsSec .productsArea .productsImg,
    #productsSec .productsArea .productsInfo { width: 100%; }
    #productsSec .productsArea .productsImg img { border-radius: 0 50px 0 0; }
    #productsSec .productsArea .productsInfo h2 { padding-left: 45px; font-size: 1.53rem; margin-top: 10px; }
    #productsSec .productsArea .productsInfo h2::before { width: 18px; height: 18px; top: calc(50% - 5px); }
    #productsSec .productsArea .productsInfo h2::after { width: 6px; height: 5px; top: calc(50% + 1px); }
    #productsSec .productsArea .productsInfo div { margin-top: 13px; padding-top: 10px; line-height: 1.7; }
    
    #productsSec #cycleRackArea.productsArea .productsInfo h2 { background-size: 38px; background-position: left 0.1em; min-height: 44px; padding-top: 5px; }
    #productsSec #processingArea.productsArea .productsInfo h2 { padding-left: 45px; background-size: 39px; background-position: left 0.4em; min-height: 44px; padding-top: 5px; }
    #productsSec #metalaboArea.productsArea .productsInfo h2::before { top: calc(50% - 5px); }
    #productsSec #metalaboArea.productsArea .productsInfo h2::after {top: calc(50% + 1px); }
    #productsSec #metalaboArea.productsArea .productsInfo h2 img { width: 174px; }
    #productsSec #metalaboArea.productsArea .productsInfo div { margin-top: 13px; }
    
    #productsSec .productsArea a,
    #productsSec .productsArea a .productsInfo div { transition: 1s; }
    #productsSec .productsArea a:hover { background-color: transparent; }
    #productsSec .productsArea a:hover .productsInfo div { color: #000; }
    #productsSec .productsArea a:hover .productsInfo h2::before { background-color: #094; }
}

/* NEWS */ 
#newsSec { margin-top: 117px; display: flex; }
#newsSec #newsHead h2 { font-size: 2.5rem; font-weight: 500; line-height: 1.6; }
#newsSec #newsHead h2 span { display: block; color: #094; font-size: 0.87rem; }
#newsSec #newsHead #newsBtn { margin-top: 30px; }
#newsSec #newsBody { margin-top: 18px; margin-left: 7%; flex: 1; }

@media screen and (max-width: 750px) {
    #newsSec { display: block; margin-top: 55px; }
    #newsSec #newsHead { display: flex; justify-content: space-between; align-items: center; }
    #newsSec #newsHead h2 { font-size: 1.86rem; line-height: 1.3; }
    #newsSec #newsHead #newsBtn { margin-top: 0; width: 160px; }
    #newsSec #newsHead #newsBtn .commonBtn { width: 100%; padding: 5px 10px; }
    #newsSec #newsBody { margin-left: 0; }
}

/* LINKs */
#linksSec { margin-top: 140px; }
#linksSec ul { display: flex; justify-content: space-between; }
#linksSec ul li { width: 32%; position: relative; overflow: hidden; }
#linksSec ul li a { display: block; }
#linksSec ul li img { transition: 0.5s; }
#linksSec ul li a:hover img { opacity: 1; transform: scale(1.1); }
#linksSec ul li span { display: block; position: absolute; top: calc(50% - 1em); left: 0; right: 0; text-align: center; margin: auto; color: #fff; font-size: 1.5rem; }
#linksSec ul li a::before,
#linksSec ul li a::after { content: ""; display: block; position: absolute; z-index: 1; transition: background-color 0.5s; }
#linksSec ul li a::before { background-color: #094; border-radius: 50%; width: 20px; height: 20px; right: 10px; top: calc(50% - 7px); }
#linksSec ul li a:hover::before { background-color: #2cbd56; }
#linksSec ul li a::after { clip-path: polygon(0 0, 0% 100%, 100% 50%); background-color: #fff; width: 6px; height: 6px; top: 50%; right: 16px; }

@media screen and (max-width: 750px) {
    #linksSec { margin-top: 50px; }
    #linksSec ul li span { font-size: 1rem; top: calc(50% - 0.8em); }
    #linksSec ul li a::before { width: 16px; height: 16px; left: 0; right: 0; margin: 0 auto; top: auto; bottom: 10px; }
    #linksSec ul li a::after { width: 5px; height: 5px; left: 0; right: 0; margin: 0 auto; top: auto; bottom: 16px; }
    #linksSec ul li a:hover img { transform: scale(1); }
    #linksSec ul li a:hover::before { background-color: #094; }
}