@charset "utf-8";


/*-------------------
 header
--------------------*/
header .companyLogo a{
 width: 97px;
 height: 26px;
 margin-top: -6px;
}
header.scroll .companyLogo a{
 width: 97px;
 height: 26px;
 margin-top: -6px;
}


/*メニュー中身レイアウト*/
.menuContent{ padding-top: 19px;}
.menuContent .menuLogo{
 width: 97px;
 height: 26px;
}
.menuInner .marukei-mellina{ margin-bottom: 0;}
.menuInner .marukei-mellina li{
 width: 100%;
 border-bottom: 1px solid #fff;
}
.menuInner .marukei-mellina li a{
 font-size: 1rem;
 padding: 50px 0 19px;
}
.menuInner .marukei-mellina li .toMarukei{
 background-position: left 25px;
 background-size: auto 18px;
}
.menuInner .marukei-mellina li .toMellina{
 background-position: left 21px;
 background-size: auto 22px;
}
.menuInner .menuInner-Nav{
 border-bottom: none;
 margin-bottom: 5px;
 padding-bottom: 0;
}
.menuInner .menuInner-Nav > li{
 width: 100%;
 padding-right: 0;
}
.menuInner .menuInner-Nav li h2{
 font-size: 1.4rem;
 margin-bottom: 0;
 border-bottom: 1px solid #fff;
}
.menuInner .menuInner-Nav li h2 a{
 padding: 27px 0 25px;
 display: block;
 position: relative;
}
/*矢印*/
.menuInner .marukei-mellina li a::after,
.menuInner .menuInner-Nav li h2 a::after{
 content: "";
 width: 8px;
 height: 8px;
 border-bottom: 2px solid #fff;
 border-right: 2px solid #fff;
 transform: rotate(-45deg);
 position: absolute;
 right: 18px;
 top: calc(50% - 6px);
}


.menuInner .menuInner-Bottom li{
 margin-right: 0;
 margin-top: 18px;
 font-weight: bold;
}
.menuInner .menuInner-Bottom li:nth-of-type(3),
.menuInner .menuInner-Bottom li:nth-of-type(4),
.menuInner .menuInner-Bottom li:nth-of-type(5){ display: inline-block;}
.menuInner .menuInner-Bottom li:nth-of-type(3),
.menuInner .menuInner-Bottom li:nth-of-type(4){ margin-right: 30px;}

.menuInner .menuInner-Bottom .sns{ margin: 32px 0 0 0;}
.menuInner .menuInner-Bottom .sns .facebook{ margin-right: 15px;}


/*SNSまとめ*/
.sns a::after{ content: none;}
.sns a:hover::before{ opacity: 1;}




/*---------------
 安全衛生とQ&A
-----------------*/
.HealthQA ul{ display: block;}
.HealthQA ul li{ width: 100%;}
.HealthQA ul li:nth-of-type(n+2){ margin-top: 1px;}
.HealthQA ul li a{
 height: 53.3vw;
 min-height: 85px;
}
.HealthQA ul li a:hover::before{ transform: none;}
.HealthQA ul li h3{
 font-weight: normal;
 font-size: 1.2rem;
}
.HealthQA ul li h3 .AvenirMedium{
 font-size: 3.4rem;
 margin-bottom: 10px;
}
.HealthQA ul li h3 .AvenirMedium span{ font-size: 2.2rem;}




/*-------------------
 footer
--------------------*/
footer{ padding: 55px 0 22px;}
.footerInner{
 width: 100%;
 margin: 0 auto 64px;
 display: block;
 padding-left: 0;
}
.footerInner a:hover{ opacity: 1;}

/*innerLeft*/
.footerInner .innerLeft .footerLogo{
 margin: 0 auto;
 width: 252px;
 height: 29px;
 margin-bottom: 19px;
}
.footerInner .innerLeft p{ margin-bottom: 30px;}
.footerInner .innerLeft .sns .facebook{ margin-right: 18px;}
.footerInner .innerLeft .sns a{
 width: 30px;
 height: 30px;
}

/*copyright*/
.copyright{ font-weight: normal;}

/*ページトップボタン*/
footer .pageTop{
 width: 66px;
 height: 66px;
}
footer .pageTop::before{
 width: 88px;
 height: 88px;
 right: -26px;
 bottom: -33px;
}
footer .pageTop:hover::before{
 width: 88px;
 height: 88px;
}
footer .pageTop span{
 right: 24px;
 bottom: 19px;
}




/*--------------
 mainSlider
---------------*/
.mainSlider{
 margin-bottom: 72px;
 padding-bottom: 30px;
}
.mainSlider .sliderLi{
 width: 100%;
 height: 62vw;
 min-height: 198px;
 max-height: 470px;
}
.mainSlider .slider01{ background-image: url("/images/home/sp/mainImg01.jpg");}
.mainSlider .slider02{ background-image: url("/images/home/sp/mainImg02.jpg");}
.mainSlider .slider03{ background-image: url("/images/home/sp/mainImg03.jpg");}
.mainSlider .slider04{ background-image: url("/images/home/sp/mainImg04.jpg");}
.mainSlider .slider05{ background-image: url("/images/home/sp/mainImg05.jpg");}

.mainSlider .textWrap{
 width: calc(100% - 40px);
 height: 100%;
 padding-top: 8%;
}
/*とり達*/
.mainSlider .slider02 .textWrap::before{
 width: 17.6vw;
 height: 16vw;
 top: 13%;
 left: 41.5vw;
}
.mainSlider .slider03 .textWrap::before{
 width: 16.8vw;
 height: 20vw;
 top: 4%;
 left: 48vw;
}
.mainSlider .slider04 .textWrap::before{
 width: 16.8vw;
 height: 17vw;
 top: 9%;
 left: 43.5vw;
}
.mainSlider .slider05 .textWrap::before{
 width: 18.1vw;
 height: 20.5vw;
 top: 8%;
 left: 37vw;
}
.mainSlider .textWrap .subtitle{
 font-size: 2.6vw;
 font-weight: bold;
 letter-spacing: 0.1em;
 margin-bottom: 3.3%;
}
.mainSlider .textWrap h1{
 font-size: 3.0vw;
 margin-top: 45%;
 margin-left: 5%;
}
.mainSlider .textWrap h2{
 font-size: 10.1vw;
 margin-bottom: 4%;
 letter-spacing: 0;
 margin-left: -2px;
}

.mainSlider .textWrap h3{
 font-size: 3.2vw;
 line-height: 1.5em;
 margin-bottom: 2.5%;
 letter-spacing: 0.05em;
}
.mainSlider .textWrap h3 span{ letter-spacing: 0.05em;}
.mainSlider .textWrap .text{
 font-size: 2.1vw;
 line-height: 2em;
 letter-spacing: 0;
}


/*動画部分*/
.mainSlider .sliderLi .movieWrap{
 right: 10%;
 top: 56%;
 font-size: 2.6vw;
 width: 29.3%;
}
.mainSlider .sliderLi .conceptMovie{
 border: 2px solid #fff;
 border-radius: 2px;
 margin-bottom: 7px;
}
.mainSlider .sliderLi .conceptMovie img{
 width: 100%;
 height: auto;
}
.mainSlider .sliderLi .conceptMovie:hover img{ opacity: 0.6;}
.mainSlider .sliderLi .conceptMovie::after{
 width: 20px;
 height: 20px;
 top: calc(50% - 10px);
 left: calc(50% - 10px);
}


/*sliderの下側ドット*/
.slick-dots{ bottom: 0;}




/*---------------
 プロダクト
-----------------*/
.section-Products{
 width: calc(100% - 40px);
 margin: 0 auto 70px;
}
.section-Products .sectionTitle{ margin-bottom: 48px;}
.section-Products > ul{ display: block;}
.section-Products > ul > li:nth-of-type(n+2){ margin-top: 20px;}
.section-Products .marukei-mellina{ margin-bottom: 20px;}
.section-Products .marukei-mellina li{ width: 100%;}
.section-Products .marukei-mellina li a{ 
    padding: 40px 0 30px;}
.section-Products .marukei-mellina .marukeiArea a{ padding-top: 22.8%;}
.section-Products .marukei-mellina .mellinaArea a{ padding-top: 22.8%;}
.section-Products .marukei-mellina .marukeiArea img{ width: 64.8vw;}
.section-Products .marukei-mellina .mellinaArea img{ width: 71.4vw;}
.section-Products .marukei-mellina li a:hover img{ transform: none;}
.section-Products .marukei-mellina li h3{ margin: 0 auto 30px;}
.section-Products .marukei-mellina .marukeiArea h3{
 width: 133px;
 height: 21px;
 margin-top: 28px;
}
.section-Products .marukei-mellina .mellinaArea h3{
 width: 111px;
 height: 25px;
 margin-top: 15px;
}
.section-Products .marukei-mellina li p{
 font-size: 1.2rem;
 line-height: 2rem;
 width: calc(100% - 60px);
}

.section-Products .search-tray{ width: 100%;}
.section-Products .search-tray li > a{
 width: 100%;
 height: 0;
 padding-top: 35.8%;
}
.section-Products .search-tray li > a:hover::before{ transform: none;}
.section-Products .search-tray li .searchLink::before{ background-image: url("/images/home/sp/product_search.jpg");}
.section-Products .search-tray li .trayLink::before{ background-image: url("/images/home/sp/product_tray.jpg");}
.section-Products .search-tray li > a h3{
 font-size: 2.6vw;
 top: 33%;
 right: 0;
 left: 70%;
 width: 43vw;
 transform: translateX(-50%);
 white-space: nowrap;
}
.section-Products .search-tray li > a h3 .AvenirMedium{
 font-size: 5.8vw;
 margin-bottom: 11px;
}
.section-Products .search-tray li .trayLink h3 .AvenirMedium{ margin-bottom: 6px;}

/*シミュレーターの使い方、トレーセッティング例*/
.section-Products .search-tray .trayHoutoLinks a{
 font-size: 1.2rem;
 padding-bottom: 2px;
 font-weight: bold;
}
.section-Products .search-tray .trayHoutoLinks a:nth-of-type(n+2){ margin-left: 28px;}
.section-Products .search-tray .trayHoutoLinks a:hover{ border-color: #003f7e;}




/*---------------
 コーディネート
-----------------*/
.section-Coordinate{ margin-bottom: 75px;}
.section-Coordinate .sectionTitle{ margin-bottom: 24px;}
.coordinateSlider{ padding-bottom: 0;}
.coordinateSlider .sliderLi{ text-align: center;}
.coordinateSlider .sliderLi a{ outline: none;}
.coordinateSlider .sliderLi .img{
 width: 212px;
 height: 160px;
}
.coordinateSlider .sliderLi .img img{ margin-top: 36px;}
.coordinateSlider .sliderLi a:hover .img img{ transform: none;}
.coordinateSlider .sliderLi .img p{
 font-size: 0.9rem;
 line-height: 1.2rem;
 width: 60px;
 height: 60px;
}
.coordinateSlider .sliderLi h3{ font-weight: bold;}

/*矢印*/
.coordinateSlider .prevArrow,
.coordinateSlider .nextArrow{
 bottom: 50%;
 width: 40px;
 height: 40px;
}
.coordinateSlider .prevArrow{ left: 5%;}
.coordinateSlider .nextArrow{ right: 5%;}
.coordinateSlider .prevArrow::before,
.coordinateSlider .nextArrow::before{
 width: 8px;
 height: 8px;
 top: 15px;
}
.coordinateSlider .prevArrow::before{ left: 17px;}
.coordinateSlider .nextArrow::before{ left: 13px;}
.coordinateSlider .prevArrow:hover::after,
.coordinateSlider .nextArrow:hover::after{ transform: none;}




/*---------------
 安全衛生とQ&A
-----------------*/
.HealthQA{ margin-bottom: 72px;}

/*---------------
 オンラインショップ
-----------------*/
.ecshop img{
    width: 100%;
    height: auto;
}
.ecshop a:hover{
    opacity: 1;
}
.ecshop {
    width: calc(100% - 40px);
    margin: 0 auto 72px;
}


/*---------------
 カタログ
-----------------*/
/*topのカタログレイアウト*/
.section-Catalog{ margin-bottom: 80px;}
.section-Catalog::after{
 height: 275px;
 bottom: 25px;
}
.section-Catalog .sectionTitle{ margin-bottom: 31px;}
.section-Catalog ul{ margin-bottom: 40px;}
.catalogArea ul{
 width: 100%;
 display: block;
}
.catalogArea ul li{
 padding-top: 8px;/*NEWの分の高さ*/
 width: 100%;
}

/*画像*/
.catalogArea ul li .name .logoWrap img{ transform: scale(0.5);}
.catalogArea ul li .img{
 width: 147px;
 position: relative;
 height: 233px;
 margin-bottom: 8px;
}
.catalogArea ul li .img a:hover{ transform: none;}
.catalogArea ul li .img.new::after{
 top: -8px;
 right: -12px;
 width: 44px;
 height: 16px;
 line-height: 16px;
 border-radius: 8px;
 font-size: 0.9rem;
}
.catalogArea ul li .img .reflect{
 height: 24px;
}

/*ロゴまわり*/
.catalogArea ul li .name .sub{ font-weight: normal;}
.catalogArea ul li .name .logoWrap{ height: 77px;}
.catalogArea ul li .name .logoWrap span{ margin: 1px 0 12px;}

/*カタログのスライダーによる調整*/
/*矢印*/
.section-Catalog .prevArrow,
.section-Catalog .nextArrow{
 position: absolute;
 bottom: 65%;
 width: 40px;
 height: 40px;
 cursor: pointer;
 z-index: 1;
}
.section-Catalog .prevArrow{ left: 5%;}
.section-Catalog .nextArrow{ right: 5%;}
.section-Catalog .prevArrow::before,
.section-Catalog .nextArrow::before{
 content: "";
 display: block;
 width: 8px;
 height: 8px;
 border-right: 2px solid #fff;
 border-top: 2px solid #fff;
 position: absolute;
 top: 15px;
}
.section-Catalog .prevArrow::before{ transform: rotate(-135deg); left: 17px;}
.section-Catalog .nextArrow::before{ transform: rotate(45deg); left: 13px;}
.section-Catalog .prevArrow::after,
.section-Catalog .nextArrow::after{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 background-color: #003f7e;
 border-radius: 50%;
 width: 100%;
 height: 100%;
}




/*---------------
 採用情報
-----------------*/
.section-Recruit{
 height: 415px;
 background: url("/images/home/sp/bg_recruit.jpg") no-repeat center;
 background-size: cover;
}
.section-Recruit > div{
 width: 100%;
 padding-top: 142px;
}
.section-Recruit div h3{
 width: 100%;
 height: 26px;
 margin-bottom: 21px;
}
.section-Recruit div p{
 text-align: center;
 font-size: 1.2rem;
 margin-bottom: 27px;
}
.section-Recruit div .linkBtn.white{ margin: 0 auto;}



/*---------------
 マルケイとメリーナの検索ボタン
-----------------*/
.searchLink-box{
    display: flex;
    justify-content: center;
    padding-bottom: 50px;
    margin-bottom: 0;
    margin-top: 20px;
}

.searchLinkMarukei,
.searchLinkMellina{
    width: calc(100% - 60px);
    height: 0;
   }
      /* .searchLinkMarukei{
    border: 1px solid #c5deff;
   }
   .searchLinkMellina{
    border: 1px solid #ffc5c5;
   } */
   .searchLinkMarukei:hover::before,
   .searchLinkMellina:hover::before{
     transform: none;
    }
    .searchLinkMarukei::before{ 
        background: url("/images/home/sp/product_search.jpg") #fff no-repeat;
    background-size: cover;}
    .searchLinkMellina::before{ 
        background: url("/images/home/sp/product_mellina.jpg") #fff no-repeat;
        background-size: cover;}
    .searchLinkMarukei h4,
    .searchLinkMellina h4{
    font-size: 2.6vw;
    top: 27%;
    right: 0;
    left: 70%;
    width: 43vw;
    transform: translateX(-50%);
    white-space: nowrap;
   }
   .searchLinkMarukei h4 .AvenirMedium,
   .searchLinkMellina h4 .AvenirMedium{
    font-size: 5.8vw;
    margin-bottom: 11px;
    margin-bottom: 6px;
   }