@charset "UTF-8";
/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/
img {
  width: 100%; }

p {
  /*	font-size: 115%;*/ }

/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
  #people.index {
    padding-top: 80px; }

  /* tit
  -----------------------------------------------*/
  #people.index #mainArea {
    position: relative;
    padding: 50px 0 60px; }

  #people.index #mainArea h1 {
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.1em; }

  #people.index #mainArea h1 span {
    display: block; }

  #people.index #mainArea h1 .eng_tit {
    font-size: 92px;
    color: #e8e7e7;
    line-height: 1; }

  #people.index #mainArea h1 .sub {
    font-size: 24px;
    text-align: center;
    font-weight: 400;
    width: 100%;
    color: #0096BF;
    margin-top: 20px;
    letter-spacing: 2px; }

  /* list
  -----------------------------------------------*/
  #people.index .peo_list {
    width: 100%;
    position: relative; }

  #people.index .peo_list li {
    position: relativee; }

  #people.index .peo_list li + li {
    margin-top: 4px; }

  #people.index .peo_list li a {
    display: block;
    position: relative;
    height: 21vw;
    min-height: 300px;
    overflow: hidden;
    background-color: #008cb7; }

  #people.index .peo_list li a:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: transform ease-out 3s, opacity 0.8s; }

  #people.index .peo_list li a:hover {
    opacity: 1; }

  #people.index .peo_list li a:hover:after {
    transform: scale(1.05);
    opacity: 0.6; }

  #people.index .peo_list li a .inner {
    width: 1040px;
    height: 100%;
    margin: 0 auto;
    position: relative; }

  #people.index .peo_list li a .inner .txt {
    width: 50%;
    height: 100%;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 2; }

  #people.index .peo_list li a:hover .inner .txt {
    color: #fff; }

  #people.index .peo_list li a .inner .txt .type {
    font-size: 18px;
    letter-spacing: 3px; }

  #people.index .peo_list li a .inner .txt .type span {
    display: inline-block;
    padding: 0px 4px 0px 8px;
    line-height: 1.5;
    box-sizing: border-box;
    border: 1px solid #4c9ac3;
    transition: 0.8s; }

  #people.index .peo_list li a:hover .inner .txt .type span {
    border: 1px solid #fff; }

  #people.index .peo_list li a .inner .txt .prof {
    margin-top: 25px;
    line-height: 1.5; }

  #people.index .peo_list li a .inner .txt dt {
    transition: 0.8s; }

  #people.index .peo_list li a .inner .txt dd {
    font-size: 20px;
    letter-spacing: 3px;
    transition: 0.8s; }

  #people.index .peo_list li a .inner .txt .his {
    margin-top: 10px;
    transition: 0.8s; }

  /* 個別設定
  --------------------------*/
  #people.index .peo_list li.hayase a:after {
    background: url("../img/index_hayase.jpg") no-repeat center;
    background-size: cover; }

  #people.index .peo_list li.yamamoto a:after {
    background: url("../img/index_yamamoto.jpg") no-repeat center;
    background-size: cover; }
  #people.index .peo_list li.yamamoto a .inner .txt {
    margin-left: auto; }

  #people.index .peo_list li.shimoyama a:after {
    background: url("../img/index_shimoyama.jpg") no-repeat center;
    background-size: cover; }

  #people.index .peo_list li.miyanoshita a {
    color: #fff; }
    #people.index .peo_list li.miyanoshita a .inner .txt {
      margin-left: auto; }
      #people.index .peo_list li.miyanoshita a .inner .txt .type span {
        border: 1px solid #fff; }
    #people.index .peo_list li.miyanoshita a:after {
      background: url("../img/index_miyanoshita.jpg") no-repeat center;
      background-size: cover; }

  #people.index .peo_list li.hamada a:after {
    background: url("../img/index_hamada.jpg") no-repeat center;
    background-size: cover; } }
/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
  #people.index {
    padding-top: 65px; }

  /* tit
  -----------------------------------------------*/
  #people.index #mainArea {
    position: relative;
    padding: 50px 0 60px; }

  #people.index #mainArea h1 {
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.1em; }

  #people.index #mainArea h1 span {
    display: block; }

  #people.index #mainArea h1 .eng_tit {
    font-size: 72px;
    color: #e8e7e7;
    line-height: 1;
    letter-spacing: 3px; }

  #people.index #mainArea h1 .sub {
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    width: 100%;
    color: #0096BF;
    margin-top: 10px;
    letter-spacing: 2px; }

  /* list
  -----------------------------------------------*/
  #people.index .peo_list {
    width: 100%;
    position: relative; }

  #people.index .peo_list li {
    position: relative; }

  #people.index .peo_list li + li {
    margin-top: 4px; }

  #people.index .peo_list li a {
    display: block;
    position: relative;
    height: 60vw;
    min-height: 240px;
    overflow: hidden;
    background-color: #008cb7; }

  #people.index .peo_list li a:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: transform ease-out 3s, opacity 0.8s; }

  #people.index .peo_list li a:hover {
    opacity: 1; }

  #people.index .peo_list li a .inner {
    height: 100%;
    margin: 0 auto;
    position: relative; }

  #people.index .peo_list li a .inner .txt {
    width: 50%;
    height: 100%;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 2; }

  #people.index .peo_list li a .inner .txt .type {
    font-size: 16px;
    letter-spacing: 2px; }

  #people.index .peo_list li a .inner .txt .type span {
    display: inline-block;
    padding: 3px 4px 3px 8px;
    line-height: 1.3;
    box-sizing: border-box;
    border: 1px solid #4c9ac3; }

  #people.index .peo_list li a .inner .txt .prof {
    margin-top: 20px;
    line-height: 1.5; }

  #people.index .peo_list li a .inner .txt dt {
    transition: 0.8s;
    font-size: 12px; }

  #people.index .peo_list li a .inner .txt dd {
    font-size: 18px;
    letter-spacing: 3px;
    transition: 0.8s;
    margin-top: 3px; }

  #people.index .peo_list li a .inner .txt .his {
    margin-top: 10px;
    font-size: 12px; }

  /* 個別設定
  --------------------------*/
  #people.index .peo_list li.hayase a:after {
    background: url("../img/index_hayase_sp.jpg") no-repeat center;
    background-size: cover; }

  #people.index .peo_list li.yamamoto a:after {
    background: url("../img/index_yamamoto_sp.jpg") no-repeat center;
    background-size: cover; }
  #people.index .peo_list li.yamamoto a .inner .txt {
    margin-left: auto; }

  #people.index .peo_list li.shimoyama a:after {
    background: url("../img/index_shimoyama_sp.jpg") no-repeat center;
    background-size: cover; }

  #people.index .peo_list li.miyanoshita a {
    color: #fff; }
    #people.index .peo_list li.miyanoshita a .inner .txt {
      margin-left: auto; }
      #people.index .peo_list li.miyanoshita a .inner .txt .type span {
        border: 1px solid #fff; }
    #people.index .peo_list li.miyanoshita a:after {
      background: url("../img/index_miyanoshita_sp.jpg") no-repeat center;
      background-size: cover; }

  #people.index .peo_list li.hamada a:after {
    background: url("../img/index_hamada_sp.jpg") no-repeat center;
    background-size: cover; } }