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

body{font-family: 'Noto Serif JP', serif;}

/* ================================================== */
/* レイアウト */
/* ================================================== */
.contents{
  position:relative;
  margin-top:190px;/*headerの高さ分空ける*/
  margin-bottom:180px;
  overflow:hidden;
}
.wrap{
  position:relative;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
  }
@media only screen and (max-width: 1260px) {
.contents{
  margin-top:60px;/*headerの高さ分空ける*/
}
}
@media only screen and (max-width: 1024px) {

.wrap{
  max-width:90%;
  }
}
@media only screen and (max-width: 768px) {
 .wrap{
  max-width:85%;
  } 
}
@media only screen and (max-width: 480px) {
.contents{
  margin-bottom:100px;
}
}
/* ================================================== */
/* 各ページタイトル */
/* ================================================== */
/* ============ .pattern01 ============ */
#titlearea.pattern01{
  margin:100px auto;
  text-align:center;
  }
#titlearea.pattern01 .title{
  font-size:6.4rem;
  color:#B2C3C7;
  }
#titlearea.pattern01 .subtitle{
  margin-top:40px;
  color:#4F595D;
  }
#titlearea.pattern01 + .contents{
  margin-top:100px;
  }
@media only screen and (max-width: 1024px) {
#titlearea.pattern01{
  width: 90%;
  }
}
@media only screen and (max-width: 480px) {
#titlearea.pattern01{
  margin:50px auto;
  text-align:center;
  width: 85%;
  }
#titlearea.pattern01 .title{
  font-size:3.6rem;
  }
#titlearea.pattern01 .subtitle{
  margin-top:20px;
  }
}

/* ============ .pattern02 ============ */
#titlearea.pattern02{
  margin:100px auto;
  text-align:center;
  }
#titlearea.pattern02 .title{
  font-size:2.4rem;
  line-height: 1.6;
  color:#B2C3C7;
  }
@media only screen and (max-width: 1024px) {
#titlearea.pattern02{
  width: 90%;
  }
}
@media only screen and (max-width: 480px) {
#titlearea.pattern02{
  width: 85%;
  }
#titlearea.pattern02 .title{
  font-size:2.0rem;
  }
}
/* ============ .pattern03 ============ */
#titlearea.pattern03{
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height:calc(100vh - 190px) ;/*headerの高さ分引く*/
  margin-bottom:180px;
  }
#titlearea.pattern03::before{
  content: "";
  display:block;
  position:absolute;
  top:0;
  right:0;
  height: 100%;
  width: 70vw;
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
  }
#about #titlearea.pattern03::before{
  background-image:url(/img/about/titlearea.jpg);
  }
#coating #titlearea.pattern03::before{
  background-image:url(/img/coating/titlearea.jpg);
  }
#product #titlearea.pattern03::before{
  background-image:url(/img/product/titlearea.jpg);
  }
#titlearea.pattern03 .inner{
  position: absolute;
  top:50%;
  left:10vw;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  }
#titlearea.pattern03 .title{
  position:relative;
  display:inline-block;
  color:#4F595D;
  padding-right:160px;
  margin-bottom:60px;
  white-space: nowrap;
  }
#titlearea.pattern03 .title::after{
  content: "";
  position: absolute;
  display: inline-block;
  width:150px;
  height:1px;
  background-color:#4F595D;
  top:50%;
  right:0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%)
  }
#titlearea.pattern03 .catch{
  font-size:9.0rem;
  line-height:normal;
  }
#titlearea.pattern03 .catch .layer01{
  display:block;
  color:#B2C3C7;
  }
#titlearea.pattern03 .catch .layer02{
  display:block;
  color:#3B85A5;
  }
/* 専用アニメ */
#titlearea.pattern03::before,
#titlearea.pattern03 .title,
#titlearea.pattern03 .catch .layer01,
#titlearea.pattern03 .catch .layer02{
  opacity: 0;
  }
#titlearea.pattern03.active::before{
  animation: fadein 2.0s both;
  animation-delay: 1.0s;
  }
#titlearea.pattern03.active .title{
  animation: b-fadein 2.0s both;
  }
#titlearea.pattern03.active .catch .layer01{
  animation: l-fadein 2.0s both;
  }
#titlearea.pattern03.active .catch .layer02{
  animation: r-fadein 2.0s both;
  }
@media only screen and (max-width: 1024px) {
#titlearea.pattern03{
  min-height: 600px;
  }
}
@media only screen and (max-width: 768px) {
#titlearea.pattern03{
  min-height: 500px;
  margin-bottom:100px;
  }
#titlearea.pattern03 .catch{
  font-size:6.0rem;
  }
}
@media only screen and (max-width: 480px) {
#titlearea.pattern03{
  min-height: 300px;
  margin-bottom:70px;
  }
#titlearea.pattern03 .title{
  padding-right:80px;
  margin-bottom:20px;
  }
#titlearea.pattern03 .title::after{
  width:70px;
  }
#titlearea.pattern03 .catch{
  font-size:3.6rem;
  }
}
/* ============ .pattern04 ============ */
#titlearea.pattern04{
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height:100vh;
  margin-bottom:180px;
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
  color:#FFF;
  white-space: nowrap;
  }
#titlearea.pattern04 .inner{
  position: absolute;
  top:50%;
  left:10vw;
  -webkit-transform: translateY(-40%);
  -moz-transform: translateY(-40%);
  transform: translateY(-40%);
  z-index:1;
  }
#titlearea.pattern04 .title{
  position:relative;
  display:inline-block;
  padding-right:160px;
  margin-bottom:60px;
  white-space: nowrap;
  }
#titlearea.pattern04 .title::after{
  content: "";
  position: absolute;
  display: inline-block;
  width:150px;
  height:1px;
  background-color:#FFF;
  top:50%;
  right:0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%)
  }
/* 専用アニメ */
#titlearea.pattern04 .title,
#titlearea.pattern04 .catch{
  opacity: 0;
  }
#titlearea.pattern04.active .title{
  animation: b-fadein 2.0s both;
  }
#titlearea.pattern04.active .catch{
  animation: l-fadein 2.0s both;
  }
@media only screen and (max-width: 1024px) {
#titlearea.pattern04{
  min-height: 600px;
  }
}
@media only screen and (max-width: 640px) {
#titlearea.pattern04{
  min-height: 500px;
  margin-bottom:100px;
  }
}
@media only screen and (max-width: 480px) {
#titlearea.pattern04{
  min-height: 400px;
  margin-bottom:70px;
  }
#titlearea.pattern04 .title{
  padding-right:80px;
  margin-bottom:20px;
  }
#titlearea.pattern04 .title::after{
  width:70px;
  }
}

/* ================================================== */
/* リンクエリア */
/* ================================================== */
/* ============ .linkarea ============ */
.linkarea .inner{
  z-index:1;
  }

/* ============ #ver01 ============ */
.linkarea.ver01{
  align-items:stretch;
  }
.linkarea.ver01 .pc{
  display:block;
  }
.linkarea.ver01 .sp{
  display:none;
  }
.linkarea.ver01 .box{
  position:relative;
  color: #FFF;
  width:100%;
  text-align:left;
  }
.linkarea.ver01 .box a{
  position:relative;
  display: block;
  width: 100%;
  color: #FFF;
  margin:0 auto;
  height: 30vw;
  white-space: nowrap
  }
.linkarea.ver01 .box a .inner{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
  }
.linkarea.ver01 .box a .inner::before{
  content: "";
  position: absolute;
  display:block;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
  height: 20vw;
  background-image:url(/img/common/linkarea/ver01_text.svg);
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
  }
.linkarea.ver01 .c-inner{
  display:inline-block;
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  }
.linkarea.ver01 .linkcatch{
  font-size:2.0rem;
  margin-bottom:20px;
  }
.linkarea.ver01 .linktitle{
  font-size:2.7rem;
  line-height:1.6;
  }
.linkarea.ver01 .linktitle .large{
  font-size:120%;
  }
.linkarea.ver01 .box a::before{
  background-color: #6D7F83;
  }
.linkarea.ver01 .box a::after{
  background-image: url(/img/common/linkarea/ver01.jpg);
  }
@media only screen and (min-width: 1200px) {
.linkarea.ver01 .box a{
  height: 420px;
  }
.linkarea.ver01 .box a .inner::before{
  height: 300px;
  }
}
@media only screen and (max-width: 1024px) {
.linkarea.ver01 .box a{
  height: 30vw;
  }
.linkarea.ver01 .box a .inner::before{
  height: 20vw;
  }
.linkarea.ver01 .linkcate{
  font-size:1.8rem;
  }
.linkarea.ver01 .linkcatch{
  font-size:1.6rem;
  }
.linkarea.ver01 .linktitle{
  font-size:2.0rem;
  }
}
@media only screen and (max-width: 768px) {

.linkarea.ver01 .box a{
  height: 34vw;
  }
.linkarea.ver01 .box a .inner::before{
  height: 24vw;
  }
.linkarea.ver01 .linkcate{
  font-size:1.6rem;
  }
.linkarea.ver01 .linkcatch{
  font-size:1.2rem;
  }
.linkarea.ver01 .linktitle{
  font-size:1.6rem;
  }
}
@media only screen and (max-width: 640px) {
.linkarea.ver01{
  display:block;
  }
.linkarea.ver01 .pc{
  display:none;
  }
.linkarea.ver01 .sp{
  display:block;
  }
.linkarea.ver01 .box{
  margin:0 auto;
  }
.linkarea.ver01 .box a{
  padding-top: 51.7333%;
  }
.linkarea.ver01 .box a .inner{
  width:85%;
  }
.linkarea.ver01 .box a .inner::before{
  display:none;
  }
.linkarea.ver01 .linkcate.sp{
  position:relative;
  display:inline-block;
  font-size:1.2rem;
  color:#B2C3C7;
  margin-bottom:0;
  padding-right:110px;
  padding-left:7.5%;
  }
.linkarea.ver01 .linkcate::after{
  content: "";
  position: absolute;
  display: inline-block;
  width:90px;
  height:1px;
  background-color:#B2C3C7;
  top:50%;
  right:0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%)
  }
.linkarea.ver01 .linkcatch{
  font-size: 1.4rem;
  }
.linkarea.ver01 .linktitle{
  font-size:2.0rem;
  }
}
@media only screen and (max-width: 480px) {
}
/* ============ #ver02 ============ */

.linkarea.ver02{
  align-items:stretch;
  }
.linkarea.ver02 .pc{
  display:block;
  }
.linkarea.ver02 .sp{
  display:none;
  }
.linkarea.ver02 .box{
  position:relative;
  color: #FFF;
  width:100%;
  text-align:left;
  }
.linkarea.ver02 .box a{
  position:relative;
  display: block;
  width: 100%;
  color: #FFF;
  margin:0 auto;
  /*height:310px;*/
  height:470px;
  white-space: nowrap;
  }
.linkarea.ver02 .box a .inner{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width:100%;
  }
.linkarea.ver02 .linkcate{
  font-size:1.6rem;
  margin-bottom:20px;
  z-index:2;
  }
.linkarea.ver02 .linkcatch{
  font-size:1.6rem;
  margin-bottom:20px;
  }
.linkarea.ver02 .linkcatch .line{
  position:relative;
  }
.linkarea.ver02 .linkcatch .line::after{
  content: "";
  display: block;
  position:absolute;
  bottom:-3px;
  left:0;
  width:100%;
  height:1px;
  background-color:#FFF;
  }
.linkarea.ver02 .linktitle{
  font-size:2.0rem;
  line-height: 2.2;
  }
.linkarea.ver02 .linktitle .large{
  font-size:120%;
  }
.linkarea.ver02 .box.shop a::before{
  background-color: #C4CED0;
  }
.linkarea.ver02 .box.shop a:hover::before{
  background-color: #677A85;
  }
.linkarea.ver02 .box.shop a::after{
  background-image: url(/img/common/linkarea/ver02_ec.jpg);
  background-position: 80% center;
  }
.linkarea.ver02 .box.recruit01 a::before{
  background: #4B4237;
  background: -webkit-linear-gradient(to left, #FFF, #4B4237);
  background: linear-gradient(to left, #FFF, #4B4237); 
  }
.linkarea.ver02 .box.recruit01 a::after{
  background-image: url(/img/common/linkarea/ver02_recruit01.jpg);
  background-position:90% center;
  }
.linkarea.ver02 .box.recruit02 a::before{
  background-color: #C4CED0;
  }
.linkarea.ver02 .box.recruit02 a:hover::before{
  background-color: #677A85;
  }
.linkarea.ver02 .box.recruit02 a::after{
  background-image: url(/img/common/linkarea/ver02_recruit02.jpg);
  background-position:55% top;
  }
@media only screen and (max-width: 1024px) {
.linkarea.ver02 .box a{
  height:310px;
  }
.linkarea.ver02 .linktitle{
  font-size:2.0rem;
  line-height: 1.6;
  }
}
@media only screen and (max-width: 768px) {
.linkarea.ver02 .linkcate{
  font-size:1.6rem;
  }
.linkarea.ver02 .linkcatch{
  font-size:1.2rem;
  }
.linkarea.ver02 .linktitle{
  font-size:1.6rem;
  }
}
@media only screen and (max-width: 640px) {
.linkarea.ver02{
  display:block;
  }
.linkarea.ver02 .pc{
  display:none;
  }
.linkarea.ver02 .sp{
  display:block;
  }
.linkarea.ver02 .box{
  width:85%;
  margin:0 auto 30px;
  }
.linkarea.ver02 .box a .inner{
  width:85%;
  }
.linkarea.ver02 .linkcate.sp{
  position:relative;
  display:inline-block;
  font-size:1.2rem;
  color:#B2C3C7;
  margin-bottom:0;
  padding-right:110px;
  }
.linkarea.ver02 .linkcate::after{
  content: "";
  position: absolute;
  display: inline-block;
  width:90px;
  height:1px;
  background-color:#B2C3C7;
  top:50%;
  right:0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%)
  }
.linkarea.ver02 .linkcatch{
  font-size:1.6rem;
  }
.linkarea.ver02 .linktitle{
  font-size:2.0rem;
  }
}
@media only screen and (max-width: 480px) {
}


/* ================================================== */
/* 文字同士が重なる見出し */
/* ================================================== */
.pileup_title{
  margin-bottom:50px;
  }
.pileup_title .en{
  position:relative;
  font-size:4.0rem;
  line-height:1;
  color:#000;
  /*overflow:hidden;*/
  }
.pileup_title .en .layer01{
  position:relative;
  display:block;
  }
.pileup_title .en .layer02{
  position:relative;
  display: block;
  color:#A8A8A8;
  margin-top:-2.0rem;
  }
.pileup_title .jp{
  color:#000;
  font-size:1.6rem;
  margin-top:10px;
  }
/* 専用アニメ */
.pileup_title .en .layer01,
.pileup_title .en .layer02,
.pileup_title .jp{
  opacity: 0;
  }
.pileup_title.active .en .layer01{
  animation: l-fadein 1.5s both;
}
.pileup_title.active .en .layer02{
  animation: r-fadein 1.5s both;
}
.pileup_title.active .jp{
  animation: pileup_title_jp 1.0s both;
  animation-delay: 0.5s;
}
@keyframes pileup_title_jp {
from {
    opacity: 0;
    transform: translateY(30px);
		transition: all 1.5s cubic-bezier(.23,1,.32,1) .2s;
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@media only screen and (max-width: 480px) {
.pileup_title{
  margin-bottom:30px;
  }
.pileup_title .en{
  font-size:3.0rem;
  }
.pileup_title .en .layer02{
  margin-top:-1.5rem;
  }
.pileup_title .jp{
  font-size:1.2rem;
  margin-top:20px;
  }
}

/* ================================================== */
/* #voice（.voicelist） */
/* ================================================== */

#voice .pileup_title .en .layer02{
  left: 2.3em;
  }
#voice .voicelist .box{
  position:relative;
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
  color:#FFF;
  }
#voice .voicelist .box::before{
  background-color: #BCCED6;
  }
#voice .voicelist .box .wrap{
  position:relative;
  height:470px;
  }
#voice .voicelist .box:nth-of-type(1){
  background-image:url(/img/recruit/voice_bg01.jpg);
  }
#voice .voicelist .box:nth-of-type(2){
  background-image:url(/img/recruit/voice_bg02.jpg);
  }
#voice .voicelist .box:nth-of-type(3){
  background-image:url(/img/recruit/voice_bg03.jpg);
  }
#voice .voicelist .box .inner{
  position:absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  max-width:720px;
  z-index:1;
  }
#voice .voicelist .box:nth-child(even) .inner{
  left: auto;
  right:0;
  }
#voice .voicelist .box h4{
  font-size:2.2rem;
  margin-bottom:40px;
  }
#voice .voicelist .box .profile{
  margin-top:60px;
  font-size:1.6rem;
  }

/* 専用アニメ */
#voice .voicelist .box.active::before{
  background-color:#2B404A;
  transition: 2.0s;
}

@media only screen and (max-width: 480px) {
#voice .voicelist .box{
  padding:50px 0;
  }
#voice .voicelist .box .wrap{
  height: auto;
  }
#voice .voicelist .box .inner{
  position: relative;
  top: 0;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  transform: translateY(0);
  }
#voice .voicelist .box .profile{
  margin-top:30px;
  }
}