@charset 'utf-8';

/* ==============================================
 *
 * Page -- Company
 *
 * =========================================== */

/* main visual
-------------------------------- */
.mv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  color: #FFFFFF;
  background-image: url(../../images/company/mv.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width:769px) , print{
  .mv {
    padding-left: calc(100vw * 0.045714);
    height: calc(100vw * 0.4444);
  }
  .mvWord {
    margin-bottom: 40px;
  }
  .mvNote {
    font-size: 1.5rem;
    letter-spacing: 0.3rem;
    line-height: 2.0;
  }
}
@media screen and (max-width:768px) {
  .mv {
    padding-left: calc(100vw * 0.064);
    height: calc(100vw * 0.8);
  }
  .mvWord {
    margin-bottom: 20px;
  }
  .mvWord img {
    max-width: 225px;
  }
  .mvNote {
    font-size: 1.2rem;
    letter-spacing: 0.3rem;
    line-height: 2.0;
  }
}


/* main
-------------------------------- */
@media screen and (min-width:769px), print {
  main {
    padding: 65px 42px;
  }
}
@media screen and (max-width:768px) {
  main {
    padding: 32px 20px;
  }
}

/* menu button
-------------------------------- */
.cardLink {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}
.cardLink.card-news {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

.cardLink:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
  z-index:1;
}
.cardLink:hover:after {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
.card-message:after { background-image: url(../../images/company/message.jpg); }
.card-identity:after { background-image: url(../../images/company/identity.jpg); }
.card-outline:after { background-image: url(../../images/company/outline.jpg); }
.card-history:after { background-image: url(../../images/company/history.jpg); }
.card-safety:after { background-image: url(../../images/company/safety.jpg); }
.card-environment:after { background-image: url(../../images/company/environment.jpg); }
.card-news:after { background-image: url(../../images/company/news.jpg); }
.cardLink a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: #FFFFFF;
  transition: 0.8s;
  z-index: 300;
}
.cardLink a:hover {
  border: 1px solid rgba(255, 255, 255, 0.8);
/*
  box-shadow: 0 0 1px rgba(255, 255, 255, 1.0);
*/
}
.card__more {
  z-index: 500;
}
.card__more:after {
  display: inline-block;
  content: '';
  position: absolute;
  right: 0;
  top: 24%;
  width: 50px;
  height: 1px;
  line-height: 1px;
  font-size: 1px;
  border-top: solid 1px #ffffff;
  transition: width 0.5s ease-out;
  z-index: 99;
}
.cardLink a:hover .card__more:after {
  width: 60px;
}
.cardLinkBorder {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #FFFFFF;
  opacity: 0;
  z-index: 80;
  transition: 0.8s;
}
.cardLink.card-news .cardLinkBorder {
  position: absolute;
  left: 15px;
  top: 15px;
  width: calc(100% - 30px);
  height: calc(100% - 30px);
  border: 1px solid #FFFFFF;
  opacity: 0;
  z-index: 80;
  transition: 0.8s;
}

.cardLink:hover .cardLinkBorder {
  opacity: 1.0;
}
.cardLink .linkLearnMore {
  position: absolute;
  right: -2px;
  bottom: 0;
  letter-spacing: 0;
  line-height: 0;
  z-index: 99;
}
.cardLink .linkLearnMore:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 48%;
  width: 16%;
  border-bottom: 1px solid #FFFFFF;
  transition: 0.8s;
}
.cardLink:hover .linkLearnMore:after {
  width: 24%;
}
@media screen and (min-width:769px), print {
  .mainLink {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .cardLink {
    margin-bottom: 30px;
    width: 48%;
    height: calc(100vw * 0.25215);
  }
  .cardLink.card-news {
    margin-bottom: 30px;
    padding: 15px;
    width: 48%;
    height: calc(100vw * 0.25215);
  }
	
/*  .cardLink:last-of-type {
    width: 100%;
    height: calc(100vw * 0.1714);
  }
*/
	.cardLink h2 {
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    z-index: 200;
  }
  .cardLink h2 img {
    width: calc(100% * 0.47169811);
  }
	
/*  .cardLink:last-of-type h2 {
    left: calc(100vw * 0.05714);
    top: 38%;
    bottom: 0;
  }
  .cardLink:last-of-type h2 img {
    width: calc(100vw * 0.08785714);
  }*/
  .cardLink {
    padding: 15px;
  }
  .card__more {
    right: -15px;
    bottom: -15px;
  }
  .cardLink a:hover .card__more {
    right: -16px;
    bottom: -16px;
  }
  .cardLink .linkLearnMore {
    width: calc(100vw * 0.185714);
  }
  .cardLink.card-news {
    margin-bottom: 30px;
    padding: 15px;
    width: 48%;
    height: calc(100vw * 0.25215);
  }
  .cardLink.card-news h2 {
    position: static;
    top: 0;
	  padding: 0;
    z-index: 200;
    left: calc(100vw * 0.02857143);
    width: 100%;
    margin: 0 0 0 20px;
		line-height: 0;
  }
  .cardLink.card-news h2 img {
    max-width: 50%;
    height: auto;
		width: auto;
  }
  .cardLink.card-news .linkLearnMore {
    width: calc(100vw * 0.185714);
  }
  .btnLearnMore {
    position: absolute;
    right: -15px;
    bottom: -15px;
    margin: 0;
    padding: 0;
    line-height: 0;
  }
  .btnLearnMore img {
    width: calc(100vw * 0.1857);
    height: auto !important;
  }
  .btnLearnMore:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 40px;
    border-top: 1px solid #FFFFFF;
    transition: 0.8s;
  }
  .cardLink:hover .btnLearnMore:after {
    width: 60px;
  }
}
@media screen and (max-width:768px) {
  .cardLink {
    display: block;
    margin-bottom: 30px;
    width: 100%;
    height: calc(100vw * 0.593333);
  }
  .cardLink h2 {
    position: absolute;
    left: 0;
    top: 24%;
    width: 100%;
    z-index: 200;
  }
  .cardLink h2 img {
    width: calc(100vw * 0.52);
    height: auto;
  }
/*  .cardLink:last-of-type h2 {
    position: absolute;
    left: 18px;
    top: 30%;
    width: 100%;
    text-align: left;
    z-index: 200;
  }
  .cardLink:last-of-type h2 img {
    width: calc(100vw * 0.21866);
    height: auto;
  }*/
  .cardLink.card-news {
    margin-bottom: 30px;
    width: 100%;
    height: calc(100vw * 0.593333);
  }
  .cardLink.card-news h2 {
    position: static;
    top: 0;
	  padding: 0;
    z-index: 200;
    margin: 0 0 0 20px;
    left: calc(100vw * 0.06666);
    width: 100%;
  }
  .cardLink.card-news h2 img {
    max-width: 40%;
    height: auto;
  }
  .cardLink.card-news .linkLearnMore {
    width: calc(100vw * 0.453333);
  }

	
	
  .linkLearnMore {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 50%;
    line-height: 0;
  }
  .linkLearnMore img {
    width: 100%;
    height: auto !important
  }
  .btnLearnMore:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 42%;
    width: 40px;
    border-top: 1px solid #FFFFFF;
  }
}