/*  #mainImg
================================================ */
@media screen and (min-width: 600px) { #mainImg { height: 600px; }
  #mainImg .img { background-image: url("../img/staff/img_mainimg01-pc.jpg"); height: 400px; } }

/*  #profile
================================================ */
#profile .titWrap .inner { padding-top: 45px; }

#profile .titWrap .lead { text-align: center; padding-top: 20px; }

#profile .secProfile { margin: 35px -20px 0; background: url(../img/staff/bg_profile_sp.jpg) no-repeat; background-size: cover; }

#profile .secProfile + .secProfile { margin-top: 20px; }

#profile .secProfile .pic { text-align: center; padding-top: 10px; }

#profile .secProfile .pic img { width: 43%; }

#profile .secProfile .txtWrap { position: relative; margin-top: -70px; padding: 27px 20px; background: #fff; color: #222; }

#profile .secProfile .txtWrap .comment { font-size: 2rem; font-weight: bold; font-family: serif; }

#profile .secProfile .txtWrap .name { padding-top: 17px; }

#profile .secProfile .txtWrap .name .ja { font-size: 2rem; font-weight: 700; line-height: 1.2; }

#profile .secProfile .txtWrap .name .en { padding-left: 10px; font-size: 1.2rem; font-weight: 700; color: #999; }

#profile .secProfile .txtWrap .info { padding-top: 10px; }

#profile .secProfile .txtWrap .txt { padding-top: 15px; }

#profile .secProfile:nth-of-type(2n+1) .txtWrap { background: #222; color: #fff; }

@media screen and (min-width: 600px) { #profile .titWrap .inner { padding-top: 100px; }
  #profile .titWrap .lead { padding-top: 40px; text-align: center; }
  #profile .secProfile { position: relative; background: url(../img/staff/bg_profile_pc.jpg) no-repeat; background-size: cover; margin: 70px 0 0; }
  #profile .secProfile + .secProfile { margin-top: 10px; }
  #profile .secProfile .inner { height: 600px; overflow: hidden; position: relative; }
  #profile .secProfile .pic { position: absolute; left: 110px; bottom: 0; width: 330px; }
  #profile .secProfile .pic img { width: 100%; }
  #profile .secProfile .txtWrap { float: right; height: 100%; box-sizing: border-box; width: 615px; margin: 0; padding: 80px 70px; background: #fff; color: #222; }
  #profile .secProfile .txtWrap .comment { font-size: 3rem; }
  #profile .secProfile .txtWrap .name { padding-top: 48px; }
  #profile .secProfile .txtWrap .name .ja { font-size: 3rem; }
  #profile .secProfile .txtWrap .name .en { font-size: 1.6rem; }
  #profile .secProfile .txtWrap .info { padding-top: 20px; }
  #profile .secProfile .txtWrap .txt { padding-top: 30px; }
  #profile .secProfile:nth-of-type(2n+1) .pic { left: auto; right: 110px; }
  #profile .secProfile:nth-of-type(2n+1) .pic img { width: 100%; }
  #profile .secProfile:nth-of-type(2n+1) .txtWrap { float: left; } }

#staff .secIntro { background: #333; }

#staff .secIntro:nth-child(2n+1) { background: #fff; color: #222; }

#staff .secIntro .inner { padding-top: 45px; padding-bottom: 50px; }

#staff .secIntro .list { margin-top: 20px; }

#staff .secIntro .item { overflow: hidden; position: relative; display: inline-block; cursor: pointer; }

#staff .secIntro .item + .item { margin-top: 15px; }

#staff .secIntro .item .info { position: absolute; box-sizing: border-box; top: 84%; left: 0; right: 0; bottom: 0; height: 100%; padding: 4% 50px 5px; text-align: center; background: rgba(76, 76, 76, 0.8); color: #fff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

#staff .secIntro .item .info .name .en { font-size: 1.2rem; line-height: 1.2; color: #999; padding-bottom: 10px; }

#staff .secIntro .item .info .name .ja { font-size: 2rem; font-weight: 700; }

#staff .secIntro .item .info .details { padding-top: 7px; text-align: left; line-height: 1.5; }

#staff .secIntro .item .info.is_open { top: 0; height: 100%; padding-top: 35px; }

#staff .secIntro .item .info.is_open .name .en { padding-bottom: 0; }

@media screen and (min-width: 600px) { #staff .secIntro .inner { padding-top: 110px; padding-bottom: 120px; }
  #staff .secIntro .list { overflow: hidden; margin-top: 45px; }
  #staff .secIntro .item { float: left; box-sizing: border-box; width: 380px; }
  #staff .secIntro .item + .item { margin-top: 0; }
  #staff .secIntro .item:nth-child(3n+2), #staff .secIntro .item:nth-child(3n+3) { margin-left: 30px; }
  #staff .secIntro .item:nth-child(n+4) { margin-top: 30px; }
  #staff .secIntro .item .info { top: 200px; padding: 15px 80px 5px; }
  #staff .secIntro .item .info .name .en { font-size: 1.6rem; padding-bottom: 10px; }
  #staff .secIntro .item .info .name .ja { font-size: 3rem; }
  #staff .secIntro .item .info .details { padding-top: 15px; }
  #staff .secIntro .item .info.is_open { padding-top: 45px; } }

/*  #contact
================================================ */
#contact { background: url("../img/work/bg_contact01_sp.jpg") no-repeat center; background-size: cover; }

#contact .inner { padding-top: 45px; padding-bottom: 72px; }

#contact .list { margin-top: 24px; padding: 4px 23px 0; border-top: 1px solid #434343; }

#contact .list li { padding-top: 20px; }

#contact .list .tit { position: relative; padding-left: 25px; font-size: 1.8rem; font-weight: 700; }

#contact .list .tit:before { position: absolute; top: 9px; left: 0; box-sizing: border-box; content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; }

#contact .list .btn { margin-top: 12px; }

@media screen and (min-width: 600px) { #contact { background-image: url("../img/work/bg_contact01_pc.jpg"); }
  #contact .inner { padding: 90px 0 100px; }
  #contact .list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 42px; padding: 24px 0 0; }
  #contact .list li { width: calc(50% - 20px); }
  #contact .list li + li { margin-left: 40px; }
  #contact .list .tit { padding-left: 28px; }
  #contact .list .tit:before { top: 9px; width: 18px; height: 18px; }
  #contact .list .btn { margin-top: 12px; } }