@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:100|Roboto:300,400,500,700&display=swap');
/* CSS Document */


/*reset*/
*{
 margin: 0;
 padding: 0;
 list-style: none;
 box-sizing: border-box;
 outline: none;
}
html{
 font-family: 'Roboto', sans-serif;
 font-weight: 300;
 font-size: 62.5%;
 color: #444;
 line-height: 1.15;
 -webkit-text-size-adjust: 100%;
}
h1,h2,h3,h4,h5,h6,b,strong{ font-weight: inherit;}
a{
 text-decoration: none;
 color: inherit;
}
/*タイトル用フォント*/
.Mplus{
 font-family: 'M PLUS 1p', sans-serif;
 font-weight: 100;
}
body{ min-width: 1240px;}

.textNone{
 display: block;
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
}




/*-------------------
 header
--------------------*/
header{
 height: 80px;
 background-color: #fff;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 50px;
}
header .companyLogo{
 width: 98px;
 height: 26px;
 margin-top: -4px;
 background: url("/images/common/logo.png") no-repeat center bottom;
 background-size: contain;
}

header .rightWrap{
 display: flex;
 justify-content: space-between;
 align-items: center;
}

header .languageSelect{
 margin-right: 30px;
 font-size: 1.3rem;
 cursor: default;
 font-weight: 300;
}
header .languageSelect .jp{
 margin-right: 5px;
 cursor: pointer;
 transition: color 0.2s;
}
header .languageSelect .en{
 font-weight: 500;
 margin-left: 5px;
}
header .languageSelect .jp:hover{ color: #003f7e;}

/*SNS*/
header .sns a{
 display: inline-block;
 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;
 width: 20px;
 height: 20px;
 position: relative;
}
header .sns a::before,
header .sns a::after{
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
 transition: opacity 0.2s;
}
header .sns a::before{ opacity: 1;}
header .sns a::after{ opacity: 0;}
header .sns a:hover::before{ opacity: 0;}
header .sns a:hover::after{ opacity: 1;}
header .sns .facebook::before{ background-image: url("/images/common/icon_facebook_gray.png");}
header .sns .instagram::before{ background-image: url("/images/common/icon_instagram_gray.png");}
header .sns .facebook::after{ background-image: url("/images/common/icon_facebook_color.png");}
header .sns .instagram::after{ background-image: url("/images/common/icon_instagram_color.png");}
header .sns .facebook{ margin-right: 12px;}




/*-------------------
 heroImage
--------------------*/
.heroImage{
 width: 100%;
 height: 53.7vw;
 min-height: 634px;
 background: url("/english/images/bg_main.jpg") no-repeat center;
 background-size: cover;
 position: relative;
 margin-bottom: 135px;
}
.heroImage h1{
 width: 980px;
 margin: 0 auto;
 padding: 12.5% 0 55px;
 font-size: 7.2rem;
 line-height: 9.2rem;
 color: #fff;
 font-weight: 700;
 background: url("/images/common/logo_white.png") no-repeat left bottom;
 background-size: 170px auto;
}
.heroImage h1 span{ display: none;}

.heroImage .movieWrap{
 position: absolute;
 right: 22%;
 top: 64%;
 color: #fff;
 font-size: 1.4rem;
 font-weight: 400;
 letter-spacing: 0.1em;
 text-align: center;
}
.heroImage .conceptMovie{
 position: relative;
 display: block;
 border: 3px solid #fff;
 border-radius: 3px;
 background-color: #221713;
 margin-bottom: 10px;
 overflow: hidden;/*Edge IEの崩れ防止*/
}
.heroImage .conceptMovie img{
 display: block;
 opacity: 0.6;
 transition: opacity 0.3s;
}
.heroImage .conceptMovie:hover img{ opacity: 0.4;}
.heroImage .conceptMovie::after{
 content: "";
 background: url("/images/home/icon_play.png") no-repeat center;
 background-size: contain;
 width: 26px;
 height: 26px;
 position: absolute;
 top: calc(50% - 13px);
 left: calc(50% - 13px);
}




/*-------------------
 コンテンツ共通
--------------------*/
section h2.Mplus{
 font-size: 9.6rem;
 line-height: 1;
}
section p,
section dl{
 font-size: 1.4rem;
 line-height: 3rem;
}
section:not(.section-Products){ padding-left: 100px;}




/*-------------------
 About us
--------------------*/
.section-AboutUs{
 padding-top: 9%;
 min-height: 44.1vw;
 margin-bottom: 135px;
 padding-bottom: 70px;
 background: url("/english/images/bg_about.png") no-repeat center;
 background-size: cover;
}
.section-AboutUs h2{ margin-bottom: 55px;}
.section-AboutUs p{
 width: 38.6vw;
 min-width: 455px;
}




/*-------------------
 Products
--------------------*/
.section-Products{ margin-bottom: 190px;}
.section-Products h2{ margin: 0 0 55px 100px;}
.section-Products > p{
 width: 50vw;
 min-width: 590px;
 margin: 0 0 45px 100px;
}

/*marukei*/
.section-Products .marukeiArea{
 padding: 138px 0 90px 172px;
 min-height: 520px;
 margin-bottom: 134px;
 background: url("/english/images/bg_marukei.png") no-repeat right center;
}
.section-Products .marukeiArea h3{
 width: 280px;
 height: 44px;
 background: url("/english/images/logo_marukei.png") no-repeat left center;
 background-size: contain;
 margin-bottom: 35px;
}
.section-Products .marukeiArea p,
.section-Products .mellinaArea p{
 width: 33.5vw;
 min-width: 395px;
}


/*mellina*/
.section-Products .mellinaArea{
 padding: 200px 0 90px 53%;
 min-height: 582px;
 background: url("/english/images/bg_mellina.png") no-repeat left center;
}
.section-Products .mellinaArea h3{
 width: 233px;
 height: 52px;
 background: url("/english/images/logo_mellina.png") no-repeat left center;
 background-size: contain;
 margin-bottom: 35px;
}




/*-------------------
 Reliability Ecology
--------------------*/
.section-ReliabilityEcology{
 padding-bottom: 80px;
 min-height: 730px;
 margin-bottom: 190px;
 background: url("/english/images/bg_reliability.png") no-repeat right bottom;
}
.section-ReliabilityEcology h2{ margin-bottom: 50px;}
.section-ReliabilityEcology p{
 width: 37.5vw;
 min-width: 442px;
}




/*-------------------
 Overview
--------------------*/
.section-Overview{
 margin-bottom: 177px;
 padding-top: 140px;
 padding-bottom: 50px;
 background: url("/english/images/bg_overview.png") no-repeat right center;
 background-size: auto 100%;
}
.section-Overview h2{ margin-bottom: 110px;}
.section-Overview .overviewList{
 margin-left: 80px;
 width: 57.4vw;
 min-width: 677px;
}
.section-Overview .overviewList dl{ display: flex;}
.section-Overview .overviewList dl:not(:last-of-type){ margin-bottom: 20px;}
.section-Overview .overviewList dt{
 font-weight: 700;
 width: 182px;
 flex-shrink: 0;
}

/*googlemap*/
.section-Overview .overviewList .linkBtn{
 display: block;
 margin: 5px 0 10px;
 width: 130px;
 height: 34px;
 line-height: 34px;
 font-size: 1.2rem;
 text-align: center;
 color: #fff;
 position: relative;
 z-index: 1;
 cursor: pointer;
}
.section-Overview .overviewList .linkBtn::before{
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #003f7e;
 border-radius: 17px;
 transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 2.4);
 outline: 1px solid transparent;/*firefoxカクカク解消*/
 z-index: -1;
}
.section-Overview .overviewList .linkBtn:hover::before{ transform: scale(1.07) rotate(0.01deg);}




/*-------------------
 footer
--------------------*/
footer{
 background-color: #003f7e;
 color: #fff;
 padding: 30px 0;
}
footer small{
 display: block;
 text-align: center;
 font-size: 1rem;
 font-weight: 400;
}
footer small span{
 font-size: 1.3rem;
 vertical-align: middle;
}