@charset "UTF-8";

#contentArea > header::after {
  background-image: url(../../career/voice/images/career_voice_main_common.jpg);
  }

/* ---------------------------------------------------------------------
	voice index
*/

#contentArea.voice-top > header::after {
  background-image: url(../../career/voice/images/career_voice_main.jpg);
  }

/* ----- list shadow ----- */
#contentArea  ul.list-shadow {
  margin-top: 80px;
  }
  #contentArea  ul.list-shadow li .box {
    position: relative;
    box-shadow: none;
    text-align: center;
    }
  #contentArea  ul.list-shadow li .caption {
    margin: 16px 0 0;
    color: #6b7280;
    text-align: center;
    }

#contentArea  ul.list-shadow li a {
  display: block;
  text-decoration: none;
  }

/* box */
#contentArea  ul.list-shadow li .box .inner {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Helvetica Neue", Helvetica , sans-serif;
  color: #033570;
  transition: all 0.15s;
  }
  #contentArea  ul.list-shadow li .box .inner span {
    font-size: 1.4rem;
    }
  #contentArea  ul.list-shadow li .box .inner p {
    margin: 0;
    font-size: 3.6rem;
    line-height: 0.8;
    font-weight: bold;
    }
    #contentArea  ul.list-shadow li a:hover .box .inner {
      color: #d70a30;
      }
  #contentArea  ul.list-shadow li .box img {
    z-index: 1;
    width: 90.62%;
    vertical-align: bottom;
    border-radius: 50%;
    }

/* caption */
#contentArea  ul.list-shadow li .caption {
  color: #111827;
  font-size: 1.8rem;
  font-weight: bold;
  transition: all 0.15s;
  }
  #contentArea  ul.list-shadow li .caption span {
    color: #6b7280;
    font-size: 1.6rem;
    font-weight: normal;
    }

/* ---------------------------------------------------------------------
	voice detail
*/
#contentArea.voice-001 > header::after {
  background-image: url(../../career/voice/voice_001/images/career_voice_voice001_main.jpg);
  }
#contentArea.voice-002 > header::after {
  background-image: url(../../career/voice/voice_002/images/career_voice_voice002_main.jpg);
  }
#contentArea.voice-003 > header::after {
  background-image: url(../../career/voice/voice_003/images/career_voice_voice003_main.jpg);
  }
#contentArea.voice-004 > header::after {
  background-image: url(../../career/voice/voice_004/images/career_voice_voice004_main.jpg);
  }
#contentArea.voice-005 > header::after {
  background-image: url(../../career/voice/voice_005/images/career_voice_voice005_main.jpg);
  }
#contentArea.voice-006 > header::after {
  background-image: url(../../career/voice/voice_006/images/career_voice_voice006_main.jpg);
  }

#contentArea .voice-top {
  z-index: 10;
  position: absolute;
  left: 50%;
  top: calc(50% + 108px);
  width: 100%;
  text-align: center;
  transform: translateX(-50%);
  }
  #contentArea .voice-top .voicetop_circle {
    width: 215px;
    vertical-align: bottom;
    border-radius: 50%;
    }
    #contentArea .voice-top p {
    margin-top: 16px;
    margin-bottom: 0;
    color: #111827;
    font-size: 1.8rem;
    }
    #contentArea .voice-top p.caption {
      margin-top: 0;
      color: #6b7280;
      }

#contentArea article.voice-top-child-art {
  margin-top: 256px;
  }

#contentArea .button_outer {
  text-align: center;
  }

/* ---------------------------------------------------------------------
	SP
*/
@media only screen and (max-width : 767px) {

  #contentArea > header::after {
    background-position: 35% 50%;
    }

/* box */
#contentArea  ul.list-shadow li .box .inner {
  top: -24px;
  left: 0;
  }
  #contentArea  ul.list-shadow li .box .inner span {
    font-size: 1.2rem;
    }
  #contentArea  ul.list-shadow li .box .inner p {
    font-size: 2.8rem;
    line-height: 0.6;
    }

/* ---------------------------------------------------------------------
	voice detail
*/
#contentArea.voice-001 > header::after {
  background-position: 64% 50%;
  }
#contentArea.voice-002 > header::after {
  background-position: 68% 50%;
  }
#contentArea.voice-003 > header::after {
  background-position: 50% 50%;
  }
#contentArea.voice-004 > header::after {
  background-position: 64% 50%;
  }
#contentArea.voice-005 > header::after {
  background-position: 55% 50%;
  }
#contentArea.voice-006 > header::after {
  background-position: 78% 50%;
  }

  #contentArea .voice-top .voicetop_circle {
    width: 156px;
    }

}