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

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	index.html
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* MV */
#mvSec.metalaboMvSec { background-image: linear-gradient(30deg, #f3f3f7, #edeef2); margin-top: 90px; padding: 147px 0; }
#mvSec.metalaboMvSec .contentSize { display: flex; max-width: 1200px; margin: 0 auto; padding: 0; }
#mvSec.metalaboMvSec .contentSize #metalaboMvInfo { margin-top: 45px; margin-left: 30px; }
#mvSec.metalaboMvSec .contentSize #metalaboMvInfo h1 img { max-width: 369px; }
#mvSec.metalaboMvSec .contentSize #metalaboMvInfo h1 + div { font-size: 1.5rem; line-height: 2; margin-top: 40px; }

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

    #mvSec.metalaboMvSec { padding: 11.5vw 0; }
    #mvSec.metalaboMvSec .contentSize { padding: 0 20px; align-items: center; }
    #mvSec.metalaboMvSec .contentSize #metalaboMvImg { width: 54%; }
    #mvSec.metalaboMvSec .contentSize #metalaboMvInfo { margin-left: 2.5%; margin-top: 0; }
    #mvSec.metalaboMvSec .contentSize #metalaboMvInfo .mainHead { margin-top: 0; }

}

@media screen and (max-width: 1000px) {
    #mvSec.metalaboMvSec .contentSize #metalaboMvInfo .mainHead { width: 37vw; }
    #mvSec.metalaboMvSec .contentSize #metalaboMvInfo h1 + div { font-size: 2.4vw; margin-top: 4vw; }
}

@media screen and (max-width: 920px) {
    #mvSec.metalaboMvSec { margin-top: 82px; }
}

@media screen and (max-width: 750px) {
    #mvSec.metalaboMvSec { margin-top: 50px; padding: 1vw 0 10vw; background: #f8f8fd; }
    #mvSec.metalaboMvSec .contentSize { display: block; padding: 0; }
    #mvSec.metalaboMvSec .contentSize #metalaboMvImg { width: 100%; }
    #mvSec.metalaboMvSec .contentSize #metalaboMvInfo { margin: 0 20px; }
    #mvSec.metalaboMvSec .contentSize #metalaboMvInfo .mainHead { width: 84%; }
    #mvSec.metalaboMvSec .contentSize #metalaboMvInfo h1 + div { font-size: 1.4rem; margin-top: 12px; }
}

/* BG */
#mainWrap { padding-bottom: 0; }
#metalaboBgSec { background: url("/metalabo/images/index_bg_pc.webp") no-repeat center top; padding-bottom: 130px; }

@media screen and (max-width: 750px) {
    #metalaboBgSec { background: url("/metalabo/images/index_bg_sp.webp") no-repeat center top / 100%; padding-bottom: 60px; }
}

/* Intro */
#metalaboIntroSec .emphasisTxt { margin-top: 85px; text-align: center; }
#metalaboIntroSec .emphasisTxt + .emphasisTxt { margin-top: 15px; }
#metalaboIntroSec #metalaboEcBtn { margin-top: 40px; }
#metalaboIntroSec #metalaboEcBtn .iconBlank { margin: 0 auto; width: 340px; padding: 13px 10px; }
#metalaboIntroSec #metalaboEcBtn .iconBlank span { width: 94%; }

@media screen and (max-width: 750px) {
    #metalaboIntroSec .emphasisTxt { margin-top: 27px; font-size: 1.13rem; line-height: 1.8; }
    #metalaboIntroSec #metalaboEcBtn { margin-top: 24px; }
    #metalaboIntroSec #metalaboEcBtn .iconBlank { width: 310px; padding: 11px 10px 12px; }
}

/* Item */
.metalaboItemArea { max-width: 1280px; margin: 60px auto 0; padding: 40px; border-radius: 20px; display: flex; justify-content: space-between; position: relative; overflow: hidden; }
.metalaboItemArea + .metalaboItemArea { margin-top: 20px; }
.metalaboItemArea::after { content: ""; opacity: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: #000; z-index: 1; transition: 0.5s; }
.metalaboItemArea:hover::after { opacity: 0.7; }
.metalaboItemArea .metalaboTitleInner { width: 38.5%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; z-index: 2; }
.metalaboItemArea:hover .metalaboTitleInner { background-color: #ebebeb; border-radius: 20px; }
.metalaboItemArea .metalaboTitleInner h3 { font-weight: 450; font-size: 1.5rem; }
.metalaboItemArea .metalaboTitleInner h3 span { font-size: 1rem; display: block; }
.metalaboItemArea .metalaboTitleInner p { }
.metalaboItemArea .metalaboTitleInner .metalaboTitleImg { margin-top: 30px; }
.metalaboItemArea .metalaboTitleInner .spDetailBtn { display: none; }
.metalaboItemArea .metalaboImgInner { width: 59.5%; position: relative; }
.metalaboItemArea .metalaboImgInner .metalaboImg { border-radius: 15px; overflow: hidden; }
.metalaboItemArea .metalaboImgInner .metalaboOvInfo { opacity: 0; color: #fff; position: absolute; top: 0; left: 0;right: 0; z-index: 2; padding: 35px 70px; transition: 0.5s; }
.metalaboItemArea .metalaboTitleInner .spScroll { display: none; }
.metalaboItemArea:hover .metalaboImgInner .metalaboOvInfo { opacity: 1; }
.metalaboItemArea .metalaboImgInner .metalaboOvInfo p+ p { margin-top: 25px; }
.metalaboItemArea .metalaboImgInner .metalaboOvInfo p.atComment { font-size: 0.75rem; }
.metalaboItemArea .metalaboImgInner .metalaboOvInfo .metalaboEcBtn { margin-top: 40px; }
.metalaboItemArea .metalaboImgInner .metalaboOvInfo .metalaboEcBtn .iconBlank { margin: 0 auto; width: 240px; background-color: #fc6100; padding: 14px 20px; }
.metalaboItemArea .metalaboImgInner .metalaboOvInfo .metalaboEcBtn a:hover.iconBlank { background-color: #ffa700; }
.metalaboItemArea .metalaboImgInner .metalaboOvInfo .metalaboEcBtn .iconBlank .iconBlank span { width: 190px; }
.metalaboItemArea + .subheadingUnderLineColor { margin-top: 90px; }

.metalaboItemAreaReverse { flex-direction: row-reverse; }

@media screen and (max-width: 1280px) {
    .metalaboItemArea { padding: 3vw; align-items: center; }
    .metalaboItemArea .metalaboImgInner .metalaboOvInfo { padding: 1vw 2vw; }
    .metalaboItemArea .metalaboImgInner .metalaboOvInfo p + p { margin-top: 10px; }
    .metalaboItemArea .metalaboImgInner .metalaboOvInfo .metalaboEcBtn { margin-top: 20px; }
    .metalaboItemArea .metalaboTitleInner { padding: 20px 10px; }
}

@media screen and (max-width: 980px) {
    .metalaboItemArea { align-items: stretch; }
    .metalaboItemArea .metalaboImgInner { display: flex; align-items: center; }
    .metalaboItemArea .metalaboImgInner .metalaboOvInfo p { font-size: 0.93rem; }
    
}

@media screen and (max-width: 750px) {
    .metalaboItemArea + .subheadingUnderLineColor { margin-top: 40px; }
    .metalaboItemArea { display: block; margin-top: 32px; width: 90%; padding: 16px; border-radius: 10px; }
    .metalaboItemArea + .metalaboItemArea { margin-top: 18px; }
    .metalaboItemArea .metalaboTitleInner { width: 100%; min-height: 100vw; padding: 10px; }
    .metalaboItemArea .metalaboTitleInner h3 { font-size: 1.4rem; }
    .metalaboItemArea .metalaboTitleInner p { margin-top: 5px; }
    .metalaboItemArea .metalaboTitleInner .metalaboTitleImg { margin-top: 10px; width: 94%; }
    .metalaboItemArea .metalaboTitleInner .spDetailBtn { display: block; position: relative; overflow: visible; margin-top: 20px; }
    .metalaboItemArea .metalaboTitleInner .spScroll { display: block; position: relative; width: 100%; opacity: 0; transition: all 0.4s ease-out; }
    .metalaboItemArea .metalaboTitleInner .spScroll > div { width: 55px; position: absolute; bottom: -12vw; left: 0; right: 0; margin: 0 auto; }
    .metalaboItemArea .metalaboTitleInner .spScroll img { margin-left: 10px; }
    .metalaboItemArea .metalaboTitleInner .spScroll.isVisible { opacity: 1; transform: none; }
    .metalaboItemArea .metalaboImgInner { width: 100%; margin-top: 15px; }
    .metalaboItemArea .metalaboImgInner .metalaboImg { border-radius: 10px; }
    .metalaboItemArea .metalaboImgInner .metalaboOvInfo { padding: 15px 22px; }
    .metalaboItemArea .metalaboImgInner .metalaboOvInfo p { line-height: 1.4; }
    .metalaboItemArea .metalaboImgInner .metalaboOvInfo p + p { margin-top: 20px; }
    .metalaboItemArea .metalaboImgInner .metalaboOvInfo .metalaboEcBtn { margin-top: 18px; }
    .metalaboItemArea .metalaboImgInner .metalaboOvInfo .metalaboEcBtn .iconBlank { width: 215px; padding: 12px 20px; pointer-events: none; }

    .metalaboItemArea:hover::after { opacity: 0; }
    .metalaboItemArea:hover .metalaboTitleInner { background-color: transparent; border-radius: 0; }
    .metalaboItemArea:hover .metalaboImgInner .metalaboOvInfo { opacity: 0; }
    
    .metalaboItemArea.metalaboItemOn::after { opacity: 0.7; }
    .metalaboItemArea.metalaboItemOn .metalaboTitleInner { background-color: #ebebeb; border-radius: 10px; }
    .metalaboItemArea.metalaboItemOn .metalaboImgInner .metalaboOvInfo { opacity: 1; }
    .metalaboItemArea.metalaboItemOn .metalaboImgInner .metalaboOvInfo .metalaboEcBtn .iconBlank { pointer-events: auto; }
    .metalaboItemArea.metalaboItemOn .spScroll.isVisible { opacity: 0; transform: none; }

    .metalaboItemArea .metalaboImgInner .metalaboOvInfo .metalaboEcBtn a:hover.iconBlank { background-color: #fc6100; }
}