/*============================================================


  feature.css


============================================================*/
#content-hero .title-page {
  padding: 0;
}

@media (max-width: 480px) and (orientation: portrait) {
  #content-hero > .block-content > .block-image {
    width: calc(100% + 16rem);
    margin: 0 -8rem;
  }
}



/*========================================
  shinkiba
========================================*/
/*  hero
=====================*/
#feature-shinkiba #content-hero .text-catch {
  display: inline-block;
  font-weight: 400;
  letter-spacing: 0.48em;
  text-indent: 0.64em;
  margin-bottom: 2rem;
  position: relative;
}

#feature-shinkiba #content-hero .text-catch::before,
#feature-shinkiba #content-hero .text-catch::after {
  content: "";
  display: block;
  width: 1px;
  height: 4rem;
  background-color: #fff;
  margin: auto 0;
  position: absolute;
  top: 0;
  bottom: 0;
}

#feature-shinkiba #content-hero .text-catch::before {
  left: -3.2rem;
  -webkit-transform: rotate(-30deg);
     -moz-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
       -o-transform: rotate(-30deg);
          transform: rotate(-30deg);
}

#feature-shinkiba #content-hero .text-catch::after {
  right: -3.2rem;
  -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
       -o-transform: rotate(30deg);
          transform: rotate(30deg);
}

#feature-shinkiba #content-hero .title-page > span {
  font-weight: 300;
  letter-spacing: 0.1em;
}

#feature-shinkiba #content-hero .title-page > strong {
  display: block;
  letter-spacing: 0.48em;
  margin-top: 2.4rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-shinkiba #content-hero .text-catch {
    letter-spacing: 0.4em;
    margin-bottom: 1.6rem;
  }

  #feature-shinkiba #content-hero .text-catch::before,
  #feature-shinkiba #content-hero .text-catch::after {
    height: 2.4rem;
  }

  #feature-shinkiba #content-hero .text-catch::before {
    left: -2rem;
  }

  #feature-shinkiba #content-hero .text-catch::after {
    right: -2rem;
  }

  #feature-shinkiba #content-hero .title-page > span {
    letter-spacing: 0.08em;
  }

  #feature-shinkiba #content-hero .title-page > strong {
    letter-spacing: 0.24em;
    margin-top: 1.6rem;
  }
}




/*  profile
=====================*/
#feature-shinkiba #content-hero .block-profile {
  display: table;
  width: 100%;
  background-color: #f8f8f8;
  padding: 4rem 12rem; 
}

#feature-shinkiba #content-hero .block-profile .block-image {
  display: table-cell;
  vertical-align: middle;
}

#feature-shinkiba #content-hero .block-profile .block-image .photo {
  display: inline-block;
  width: 12rem;
  height: 12rem;
  border-radius: 6rem;
  margin-right: 4rem;
  overflow: hidden;
}

#feature-shinkiba #content-hero .block-profile .block-letter {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}

#feature-shinkiba #content-hero .block-profile .text-name {
  margin-bottom: 1.6rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-shinkiba #content-hero .block-profile {
    padding: 2.4rem 1.6rem; 
  }

  #feature-shinkiba #content-hero .block-profile .block-image {
    vertical-align: top;
  }

  #feature-shinkiba #content-hero .block-profile .block-image .photo {
    width: 4.8rem;
    height: 4.8rem;
    margin-right: 1.6rem;
  }

  #feature-shinkiba #content-hero .block-profile .block-letter {
    vertical-align: top;
  }

  #feature-shinkiba #content-hero .block-profile .text-name {
    margin-bottom: 1.2rem;
  }
}



/*  timeline
=====================*/
#feature-shinkiba #content-timeline {
}

#feature-shinkiba #content-timeline .list-timeline {
  padding-top: 10rem;
  overflow: hidden;
}

#feature-shinkiba #content-timeline .list-timeline > li {
  position: relative;
}

#feature-shinkiba #content-timeline .list-timeline > li::before {
  content: "";
  display: block;
  width: 2px;
  height: 28rem;
  background-color: #444;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: -18rem;
  z-index: 4;
}

#feature-shinkiba #content-timeline .list-timeline > li + li {
  margin-top: 8rem;
}


#feature-shinkiba #content-timeline .box-point {
  display: block;
  width: 100%;
  height: 28rem;
  background-color: #f8f8f8;
  position: relative;
}

#feature-shinkiba #content-timeline .box-point > dt {
  display: block;
  width: 20%;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  right: 0;
  left: 0;
  top: 50%;
  z-index: 2;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
}

#feature-shinkiba #content-timeline .box-point .text-time {
  font-size: 3.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

#feature-shinkiba #content-timeline .box-point > dd {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

#feature-shinkiba #content-timeline .box-point .block-letter {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: left;
  vertical-align: middle;
  padding: 1rem 4.8rem;
}

#feature-shinkiba #content-timeline .box-point .block-image {
  width: 40%;
  z-index: 0;
  top: 0;
}

#feature-shinkiba #content-timeline .box-point .block-letter.right {
  padding-left: 60%;
}

#feature-shinkiba #content-timeline .box-point .block-image.left {
  left: 0;
}

#feature-shinkiba #content-timeline .box-point .block-letter.left {
  padding-right: 60%;
}

#feature-shinkiba #content-timeline .box-point .block-image.right {
  left: auto;
  right: 0;
}

#feature-shinkiba #content-timeline .box-point .text-body {
  font-size: 1.52rem;
}

#feature-shinkiba #content-timeline .box-scene {
  position: relative;
  z-index: 6;
}


/*  animation  */
@-webkit-keyframes shinkiba_timeline_in_box {
  0% { -webkit-transform: scale(0.9); opacity: 0; }
  100% { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes shinkiba_timeline_in_box {
  0% { -moz-transform: scale(0.9); opacity: 0; }
  100% { -moz-transform: scale(1); opacity: 1; }
}

@-ms-keyframes shinkiba_timeline_in_box {
  0% { -ms-transform: scale(0.9); opacity: 0; }
  100% { -ms-transform: scale(1); opacity: 1; }
}

@-o-keyframes shinkiba_timeline_in_box {
  0% { -o-transform: scale(0.9); opacity: 0; }
  100% { -o-transform: scale(1); opacity: 1; }
}

@keyframes shinkiba_timeline_in_box {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

#feature-shinkiba #content-timeline .list-timeline > li .box-point,
#feature-shinkiba #content-timeline .list-timeline > li .box-scene {
  opacity: 0;
  -webkit-transform: scale(0.9);
     -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
       -o-transform: scale(0.9);
          transform: scale(0.9);
}

#feature-shinkiba #content-timeline .list-timeline > li.active .box-point,
#feature-shinkiba #content-timeline .list-timeline > li.active .box-scene {
  -webkit-animation: shinkiba_timeline_in_box 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 0.6s;
     -moz-animation: shinkiba_timeline_in_box 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 0.6s;
      -ms-animation: shinkiba_timeline_in_box 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 0.6s;
       -o-animation: shinkiba_timeline_in_box 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 0.6s;
          animation: shinkiba_timeline_in_box 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both 0.6s;
}

@-webkit-keyframes shinkiba_timeline_in_line {
  0% { -webkit-transform: scaleY(0); }
  100% { -webkit-transform: scaleY(1); }
}

@-moz-keyframes shinkiba_timeline_in_line {
  0% { -moz-transform: scaleY(0); }
  100% { -moz-transform: scaleY(1); }
}

@-ms-keyframes shinkiba_timeline_in_line {
  0% { -ms-transform: scaleY(0); }
  100% { -ms-transform: scaleY(1); }
}

@-o-keyframes shinkiba_timeline_in_line {
  0% { -o-transform: scaleY(0); }
  100% { -o-transform: scaleY(1); }
}

@keyframes shinkiba_timeline_in_line {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

#feature-shinkiba #content-timeline .list-timeline > li::before {
  -webkit-transform-origin: center top;
     -moz-transform-origin: center top;
      -ms-transform-origin: center top;
       -o-transform-origin: center top;
          transform-origin: center top;
  -webkit-transform: scaleY(0);
     -moz-transform: scaleY(0);
      -ms-transform: scaleY(0);
       -o-transform: scaleY(0);
          transform: scaleY(0);
}

#feature-shinkiba #content-timeline .list-timeline > li.active::before {
  -webkit-animation: shinkiba_timeline_in_line 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
     -moz-animation: shinkiba_timeline_in_line 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
      -ms-animation: shinkiba_timeline_in_line 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
       -o-animation: shinkiba_timeline_in_line 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
          animation: shinkiba_timeline_in_line 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}


@media (max-width: 480px) and (orientation: portrait) {
  #feature-shinkiba #content-timeline .list-timeline {
    padding-top: 4rem;
  }

  #feature-shinkiba #content-timeline .list-timeline > li::before {
    height: 100%;
    top: -50%;
    z-index: -1;
  }

  #feature-shinkiba #content-timeline .list-timeline > li + li {
    margin-top: 4rem;
  }


  #feature-shinkiba #content-timeline .box-point {
    height: auto;
  }

  #feature-shinkiba #content-timeline .box-point > dt {
    width: 100%;
    top: 6rem;
  }

  #feature-shinkiba #content-timeline .box-point .text-time {
    color: #fff;
    font-size: 2.4rem;
  }

  #feature-shinkiba #content-timeline .box-point > dd {
    display: block;
    height: auto;
  }

  #feature-shinkiba #content-timeline .box-point .block-letter {
    display: block;
    height: auto;
    padding: 14rem 1.6rem 1.6rem !important;
  }

  #feature-shinkiba #content-timeline .box-point .block-image {
    width: 100%;
    height: 12rem;
  }

  #feature-shinkiba #content-timeline .box-point .block-image::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #303036;
    opacity: 0.2;
    position: absolute;
    left: 0;
    top: 0;
  }

  #feature-shinkiba #content-timeline .box-point .text-body {
    font-size: 1.44rem;
  }
}


/*2020 12 02画像差し替えの追加*/

#feature-shinkiba .bgPositionTop{
  background-position: center top;
}
#feature-shinkiba .bgPositionBottom{
  background-position: center bottom;
}


/*========================================
  education
========================================*/
/*  hero
=====================*/
#feature-education #content-hero .block-letter {
}

#feature-education #content-hero .title-page {
  padding-top: 4.8rem;
  padding-left: 6.4rem;
}

#feature-education #content-hero .title-page > span {
  color: #002b6a;
  font-size: 8rem;
  font-weight: 100;
  letter-spacing: 0.12em;
  line-height: 1.24;
}

#feature-education #content-hero .title-page > span > em {
  color: #fff;
}

#feature-education #content-hero .title-page > strong {
  display: block;
  letter-spacing: 0.48em;
  margin-top: 2rem;
  margin-left: 0.6rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-education #content-hero .title-page {
    padding-top: 1.6rem;
    padding-left: 1.6rem;
  }

  #feature-education #content-hero .title-page > span {
    font-size: 3.8rem;
    letter-spacing: 0.08em;
    line-height: 1.2;
  }

  #feature-education #content-hero .title-page > strong {
    letter-spacing: 0.4em;
    line-height: 1.8;
    margin-top: 0.8rem;
    margin-left: 0.2rem;
  }
}


/*  head
=====================*/
#feature-education #content-head .text-catch {
  font-size: 4rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  margin-bottom: 3.2rem;
}

#feature-education #content-head .nav-anchor > ul,
#feature-education #content-head .nav-anchor > ul > li {
  display: inline;
}

#feature-education #content-head .nav-anchor > ul > li + li {
  margin-left: 4rem;
}

#feature-education #content-head .nav-anchor a {
  display: inline-block;
  width: 16rem;
  vertical-align: top;
}

#feature-education #content-head .nav-anchor a::after {
  content: "";
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background: url(/assets/images/common/ico_arrow_down_vio.svg) center center no-repeat;
  background-size: contain;
  margin-top: 1rem;
}

#feature-education #content-head .nav-anchor .block-image {
  display: inline-block;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  margin-bottom: 1.6rem;
  overflow: hidden;
}

#feature-education #content-head .nav-anchor .title-anchor {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-education #content-head .text-catch {
    font-size: 2.4rem;
    letter-spacing: 0.06em;
    margin-bottom: 2rem;
  }

  #feature-education #content-head .nav-anchor > ul > li {
    display: inline-block;
    width: 50%;
    margin-bottom: 2rem;
  }

  #feature-education #content-head .nav-anchor > ul > li + li {
    margin-left: 0;
  }

  #feature-education #content-head .nav-anchor {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
  }

  #feature-education #content-head .nav-anchor a {
    width: 100%;
    text-align: center;
  }

  #feature-education #content-head .nav-anchor a::after {
    margin-top: 0.8rem;
  }

  #feature-education #content-head .nav-anchor .block-image {
    width: 8rem;
    height: 8rem;
    margin-bottom: 1.2rem;
  }

  #feature-education #content-head .nav-anchor .title-anchor {
    font-size: 1.1rem;
    letter-spacing: 0.04em;
  }
}



/*  section hero
=====================*/
#feature-education .block-section.education .block-hero {
  position: relative;
  z-index: 0;
}

#feature-education .block-section.education .block-hero::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 1.6rem 2.4rem 0 2.4rem;
  border-color: #1d99b3 transparent transparent transparent;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.5rem;
}

#feature-education .block-section.education .block-hero::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#feature-education .block-section.education.szs {
  padding-bottom: 2rem;
  overflow: hidden;
}

#feature-education .block-section.education.szs .block-hero {
  width: 50%;
}

#feature-education .block-section.education.szs:nth-of-type(odd) .block-hero {
  float: left;
}

#feature-education .block-section.education.szs:nth-of-type(even) .block-hero {
  float: right;
}

#feature-education .block-section.education.szs:nth-of-type(odd) .block-hero::before {
  border-width: 2.4rem 0 2.4rem 1.6rem;
  border-color: transparent transparent transparent #1d99b3;
  margin: auto 0;
  left: auto;
  right: 0.5rem;
  top: 0;
  bottom: 0;
}

#feature-education .block-section.education.szs:nth-of-type(even) .block-hero::before {
  border-width: 2.4rem 1.6rem 2.4rem 0;
  border-color: transparent #1d99b3 transparent transparent;
  margin: auto 0;
  left: 0.5rem;
  right: auto;
  top: 0;
  bottom: 0;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-education .block-section.education .block-hero::before {
    border-width: 1.2rem 2rem 0 2rem;
    bottom: -1.1rem;
  }

  #feature-education .block-section.education.szs {
    padding-bottom: 6rem;
  }

  #feature-education .block-section.education.szs .block-hero {
    width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  #feature-education .block-section.education.szs .block-hero img {
    width: 50%;
  }

  #feature-education .block-section.education.szs .block-hero::after {
    content: "";
    display: block;
    width: calc(100% - 3.2rem);
    height: 100%;
    background-color: #1d99b3;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
  }

  #feature-education .block-section.education.szs:nth-of-type(odd) .block-hero {
    float: none;
  }

  #feature-education .block-section.education.szs:nth-of-type(even) .block-hero {
    float: none;
  }

  #feature-education .block-section.education.szs:nth-of-type(odd) .block-hero::before,
    #feature-education .block-section.education.szs:nth-of-type(even) .block-hero::before {
    border-width: 1.2rem 2rem 0 2rem;
    border-color: #1d99b3 transparent transparent transparent;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: auto;
    bottom: -1.1rem;
  }
}



/*  section content
=====================*/
#feature-education .block-section.education.szs .block-content {
  width: 50%;
  padding-left: 12rem;
  padding-right: 12rem;
  position: relative;
  top: 28rem;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
}

#feature-education .block-section.education.szs:nth-of-type(odd) .block-content {
  float: right;
}

#feature-education .block-section.education.szs:nth-of-type(even) .block-content {
  float: left;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-education .block-section.education.szs .block-content {
    width: 100%;
    padding-top: 3rem;
    padding-left: 2.4rem;
    padding-right: 2.4rem;
    top: 0;
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }

  #feature-education .block-section.education.szs:nth-of-type(odd) .block-content {
    float: none;
  }

  #feature-education .block-section.education.szs:nth-of-type(even) .block-content {
    float: none;
  }
}



/*  section letter
=====================*/
#feature-education .block-section.education .title-section {
  font-weight: 300;
}

#feature-education .block-section.education .title-section .text-number {
  font-size: inherit;
  vertical-align: middle;
  margin-left: 1.6rem;
}

#feature-education .block-section.education .title-section .text-number::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 6.4rem;
  background-color: #36388f;
  vertical-align: middle;
  margin: 0 4rem;
  opacity: 0.4;
  -webkit-transform: translateY(-10%);
     -moz-transform: translateY(-10%);
      -ms-transform: translateY(-10%);
       -o-transform: translateY(-10%);
          transform: translateY(-10%);
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-education .block-section.education .title-section {
    text-align: center;
    text-indent: -2rem;
  }

  #feature-education .block-section.education .title-section .text-number {
    margin-left: 0.4rem;
  }

  #feature-education .block-section.education .title-section .text-number::after {
    height: 4rem;
    margin: 0 2rem;
  }
}



/*  section image
=====================*/
#feature-education .block-section.education .list-scene {
  display: block;
  width: 100%;
  text-align: center;
}

#feature-education .block-section.education .list-scene > li {
  display: inline-block;
  width: 16rem;
}

#feature-education .block-section.education .list-scene > li + li {
  margin-left: 8rem;
}

#feature-education .block-section.education.szs .list-scene > li {
  width: 14.4rem;
}

#feature-education .block-section.education.szs .list-scene > li + li {
  margin-left: 6.4rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-education .block-section.education .list-scene > li {
    width: 8rem;
  }

  #feature-education .block-section.education .list-scene > li + li {
    margin-left: 2rem;
  }

  #feature-education .block-section.education.szs .list-scene > li {
    width: 8rem;
  }

  #feature-education .block-section.education.szs .list-scene > li + li {
    margin-left: 2rem;
  }
}




/*  policy
=====================*/
#feature-education #content-policy .block-letter {
  padding-left: 12rem;
  position: relative;
  z-index: 1;
}

#feature-education #content-policy .block-letter .text-summary {
  margin-top: 4rem;
}

#feature-education #content-policy .block-image {
  position: relative;
  z-index: 0;
}

#feature-education #content-policy .block-figure {
  width: 100%;
  background-color: #f8f8f8;
  padding: 8rem 4.8rem;
  margin: 2rem 0;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-education #content-policy {
    border-top: 1px solid #eee;
  }

  #feature-education #content-policy .block-letter {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  #feature-education #content-policy .block-letter .text-summary {
    margin-top: 1.6rem;
  }

  #feature-education #content-policy .block-image {
    margin-top: 2rem;
  }

  #feature-education #content-policy .block-figure {
    padding: 2.4rem;
    margin: 1.6rem 0;
  }
}





/*========================================
  voice common
========================================*/
/*  txt career
=====================*/
body.voice .text-career > strong {
  color: #6467ce;
  font-weight: 100;
}

body.voice .text-career > span {
  display: inline-block;
  margin-left: 0.4rem;
  -webkit-transform: translateY(-10%);
     -moz-transform: translateY(-10%);
      -ms-transform: translateY(-10%);
       -o-transform: translateY(-10%);
          transform: translateY(-10%);
}



/*  box voice
=====================*/
body.voice .box-voice {
  width: 100%;
  background-color: #eee;
  position: relative;
}

body.voice .box-voice > dl {
  display: table;
  width: 100%;
  height: 64rem;
  table-layout: fixed;
}

body.voice .box-voice > dl.flx {
  height: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

body.voice .box-voice > dl > dt,
body.voice .box-voice > dl > dd {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}

body.voice .box-voice > dl > dt {
  padding-right: 18%;
}

body.voice .box-voice > dl > dd {
  padding-left: 18%;
}

body.voice .box-voice .block-image {
  width: 20%;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media (max-width: 480px) and (orientation: portrait) {
  body.voice .box-voice > dl {
    display: block;
    height: auto;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  body.voice .box-voice > dl > dt,
  body.voice .box-voice > dl > dd {
    display: block;
    padding-right: 0;
    padding-left: 36% !important;
  }

  body.voice .box-voice > dl > dd {
    margin-top: 1.6rem;
  }

  body.voice .box-voice .block-image {
    width: 36%;
    padding-left: 1%;
    padding-right: 1%;
    margin: 0;
    left: 0;
    right: auto;
  }
}



/*  nav voice
=====================*/
body.voice .nav-voice {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 12rem;
  position: relative;
}

body.voice .nav-voice > .button {
  padding-top: 5.6rem;
  padding-bottom: 5.6rem;
}

body.voice .nav-voice > .block-content {
  width: 100%;
  height: 48rem;
  position: relative;
}

body.voice .nav-voice .title-nav {
  color: #6467ce;
  font-weight: 300;
  letter-spacing: 0.16em;
  padding-top: 4.8rem;
}

body.voice .nav-voice .list-persons {
  width: 100%;
  text-align: center;
  font-size: 0;
  position: absolute;
  left: 0;
  bottom: 0;
}

body.voice .nav-voice .list-persons::after {
  content: "";
  display: block;
  width: 100%;
  height: 12rem;
  position: absolute;
  left: 0;
  bottom: -12rem;
  z-index: 2;
}

body.voice #footer-local .nav-voice .list-persons::after {
  border-bottom: 1px solid #eee;
}

body.voice .nav-voice .list-persons > li {
  display: inline-block;
  width: 10%;
  vertical-align: bottom;
}

body.voice .nav-voice .list-persons > li + li {
  margin-left: 2%;
}

body.voice .nav-voice .list-persons > li > a {
  display: inline-block;
  width: 100%;
  padding-bottom: 20%;
  position: relative;
  overflow: hidden;
}

body.voice .nav-voice .list-persons > li > a::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 1.6rem 1rem 1.6rem;
  border-color: transparent transparent #fff transparent;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transform: translateY(100%);
     -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
       -o-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
     -moz-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
      -ms-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
       -o-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

body.voice .nav-voice .list-persons > li > a:hover::before {
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}

body.voice .nav-voice .list-persons .box-profile {
  display: table;
  width: 100%;
  height: 12rem;
  position: absolute;
  left: 0;
  bottom: -12rem;
  opacity: 0;
  overflow: hidden;
  -webkit-transform: translateY(8%);
     -moz-transform: translateY(8%);
      -ms-transform: translateY(8%);
       -o-transform: translateY(8%);
          transform: translateY(8%);
  -webkit-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
     -moz-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
      -ms-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
       -o-transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
          transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

body.voice .nav-voice .list-persons > li > a:hover + .box-profile {
  opacity: 1;
  -webkit-transform: translateY(0);
     -moz-transform: translateY(0);
      -ms-transform: translateY(0);
       -o-transform: translateY(0);
          transform: translateY(0);
}

body.voice .nav-voice .list-persons .box-profile > dl {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

body.voice .nav-voice .list-persons .box-profile > dl > dt,
body.voice .nav-voice .list-persons .box-profile > dl > dd {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

body.voice .nav-voice .list-persons .box-profile > dl .text-career {
  padding: 0 4rem;
}

body.voice .nav-voice .block-image.bg {
  background-position: center 84%;
}

@media (max-width: 480px) and (orientation: portrait) {
  body.voice .nav-voice {
    margin-bottom: 0;
  }

  body.voice #footer-local .nav-voice {
    padding-left: 0;
    padding-right: 0;
  }

  body.voice .nav-voice > .button {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
  }

  body.voice .nav-voice > .button .btn.return {
    font-size: 1rem;
  }

  body.voice .nav-voice > .block-content {
    height: 16.8rem;
  }

  body.voice .nav-voice .title-nav {
    letter-spacing: 0.12em;
    padding-top: 1.6rem;
  }

  body.voice .nav-voice .list-persons::after {
    display: none;
  }

  body.voice .nav-voice .list-persons > li {
    width: 11.2%;
  }

  body.voice .nav-voice .list-persons > li + li {
    margin-left: 1.2%;
  }

  body.voice .nav-voice .list-persons > li > a {
    padding-bottom: 30%;
  }

  body.voice .nav-voice .list-persons > li > a::before {
    display: none;
  }

  body.voice .nav-voice .list-persons .box-profile {
    display: none;
  }
}




/*========================================
  voice top
========================================*/
/*  hero
=====================*/
#feature-voice-top #content-hero {
  text-align: center;
}

#feature-voice-top #content-hero .title-page {
  padding-top: 8rem;
}

#feature-voice-top #content-hero .title-page > strong {
  color: #6467ce;
  font-weight: 300;
  letter-spacing: 0.16em;
}

#feature-voice-top #content-hero .title-page > em {
  display: block;
  letter-spacing: 0.64em;
  margin-top: 0.8rem;
}

#feature-voice-top #content-hero .nav-voice {
  z-index: 2;
}

#feature-voice-top #content-hero .nav-voice .list-persons > li {
  width: 11%;
}

#feature-voice-top #content-hero .nav-voice .list-persons > li + li {
  margin-left: 1%;
}

#feature-voice-top #content-hero .nav-voice .list-persons > li > a {
  padding-bottom: 32%;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-voice-top #content-hero .title-page {
    padding-top: 3.2rem;
  }

  #feature-voice-top #content-hero .title-page > strong {
    letter-spacing: 0.08em;
  }

  #feature-voice-top #content-hero .title-page > em {
    letter-spacing: 0.4em;
    margin-top: 0.6rem;
  }

  #feature-voice-top #content-hero .nav-voice .list-persons > li {
    width: 13.2%;
  }

  #feature-voice-top #content-hero .nav-voice .list-persons > li + li {
    margin-left: 0;
  }
}




/*  head
=====================*/
#feature-voice-top #content-head {
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
}

#feature-voice-top #content-head > .block-letter {
  padding-top: 8.8rem;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

#feature-voice-top #content-head > .block-letter * {
  color: #fff;
}

#feature-voice-top #content-head > .block-image {
  position: relative;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-voice-top #content-head {
    padding-left: 0;
    padding-right: 0;
  }

  #feature-voice-top #content-head > .block-letter {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    height: auto;
    position: static;
  }

  #feature-voice-top #content-head > .block-letter * {
    color: #36388f;
  }

  #feature-voice-top #content-head > .block-image::after {
    display: none;
  }
}



/*  index
=====================*/
#feature-voice-top #content-index {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

#feature-voice-top #content-index .box-voice > dl > dt {
  text-align: center;
}

#feature-voice-top #content-index .box-voice .text-name > span {
  display: inline-block;
}

#feature-voice-top #content-index .box-voice .text-career > strong {
  font-size: 12rem;
  letter-spacing: 0;
  margin-right: 0.04em;
}

#feature-voice-top #content-index .box-voice .text-catch {
  margin-top: 2.4rem;
}

#feature-voice-top #content-index .box-voice a.btn.link {
  margin-top: 3.2rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-voice-top #content-index {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  #feature-voice-top #content-index .box-voice > dl > dt {
    text-align: left;
  }

  #feature-voice-top #content-index .box-voice .text-career > strong {
    font-size: 4.8rem;
  }

  #feature-voice-top #content-index .box-voice .text-catch {
    margin-top: 1.2rem;
  }

  #feature-voice-top #content-index .box-voice .text-catch > br {
    display: none;
  }

  #feature-voice-top #content-index .box-voice a.btn.link {
    margin-top: 1.6rem;
  }
}




/*========================================
  voice person
========================================*/
/*  hero
=====================*/
#feature-voice-person #content-hero .block-letter {
  width: 40rem;
  height: auto;
  background-color: #fff;
  padding: 2rem;
  top: 8rem;
}

#feature-voice-person #content-hero .block-letter.left {
  left: 0;
  right: auto;
}

#feature-voice-person #content-hero .block-letter.right {
  left: auto;
  right: 0;
}

#feature-voice-person #content-hero .block-letter.bottom {
  top: 33rem;
}

#feature-voice-person #content-hero .block-letter .text-catch {
  line-height: 2;
  letter-spacing: 0.2em;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-voice-person #content-hero .block-letter {
    width: 100%;
    text-align: center;
    padding: 0 0.8rem 1.6em ;
    position: static;
  }

  #feature-voice-person #content-hero .block-letter .text-catch {
    line-height: 1.7;
  }
}



/*  profile
=====================*/
#feature-voice-person #content-profile {
  height: 32rem;
}

#feature-voice-person #content-profile .box-content {
  text-align: left;
}

#feature-voice-person #content-profile .box-content:first-of-type {
  width: 20%;
}

#feature-voice-person #content-profile .box-content:last-of-type {
  width: 80%;
  padding: 0 2rem;
}

#feature-voice-person #content-profile .text-career > strong {
  font-size: 10rem;
}

#feature-voice-person #content-profile .text-name {
  display: inline-block;
  font-size: 2.4rem;
  margin-bottom: 2.4rem;
}

#feature-voice-person #content-profile .text-name > span {
  display: inline-block;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-voice-person #content-profile {
    height: 0;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  #feature-voice-person #content-profile .box-content:first-of-type {
    width: 36%;
  }

  #feature-voice-person #content-profile .box-content:last-of-type {
    width: 64%;
    padding: 0;
  }

  #feature-voice-person #content-profile .text-career > strong {
    font-size: 6.4rem;
  }

  #feature-voice-person #content-profile .text-name {
    font-size: 2rem;
    margin-bottom: 1.6rem;
  }

  #feature-voice-person #content-profile .text-name > span {
    margin-top: 0.6rem;
  }
}


/*  voice
=====================*/
#feature-voice-person #content-voice {
  padding-left: 2rem;
  padding-right: 2rem;
}

#feature-voice-person #content-voice .text-question {
  display: inline-block;
  color: #6467ce;
  padding-left: 5.6rem;
  position: relative;
}

#feature-voice-person #content-voice .text-question::before {
  content: "";
  display: inline-block;
  width: 3.6rem;
  height: 1px;
  vertical-align: middle;
  background-color: #6467ce;
  margin: auto 0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

#feature-voice-person .list-schedule {
  width: 100%;
}

#feature-voice-person .list-schedule > li {
  padding-top: 2rem;
  padding-bottom: 2.4rem;
}

#feature-voice-person .list-schedule > li + li {
  border-top: 1px solid #ddd;
}

#feature-voice-person .list-schedule .text-time {
  color: #6467ce;
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.1em;
}

#feature-voice-person .list-schedule .text-time > span {
  color: inherit;
  font-size: 75%;
  font-weight: inherit;
  line-height: inherit;
}

#feature-voice-person .list-schedule .text-action {
  font-size: 1.48rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin-top: 1rem;
}

#feature-voice-person .list-schedule .text-summary {
  line-height: 1.6;
  margin-top: 1rem;
}

@media (max-width: 480px) and (orientation: portrait) {
  #feature-voice-person #content-voice {
    padding-left: 0;
    padding-right: 0;
  }

  #feature-voice-person #content-voice .text-question {
    padding-left: 0;
  }

  #feature-voice-person #content-voice .text-question > br {
    display: none;
  }

  #feature-voice-person #content-voice .text-question::before {
    display: none;
  }

  #feature-voice-person .list-schedule > li {
    padding-top: 1.2rem;
    padding-bottom: 1.6rem;
  }

  #feature-voice-person .list-schedule .text-action {
    font-size: 1.32rem;
    letter-spacing: 0.08em;
    line-height: 1.5;
    margin-top: 0.8rem;
  }

  #feature-voice-person .list-schedule .text-summary {
    margin-top: 0.4rem;
  }

}