@charset "UTF-8";
@import url("base.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
/*ヘッダー*/
.con {
  display: none; }

/*メイン*/
#m_top {
  position: relative;
  background-image: url("../img/voice/top_img.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh; }
  #m_top h1 {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    font-size: 200%;
    color: #fff; }
    #m_top h1 img {
      width: 256px;
      display: block; }

#namber01, #namber02, #namber03 {
  width: 80%;
  margin: 5em auto 0;
  border: 2px solid #bdc3c4; }
  #namber01 .t_inner, #namber02 .t_inner, #namber03 .t_inner {
    width: 96%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 1em 2%;
    background-color: #355691;
    margin: 0 0 2em; }
    #namber01 .t_inner figure, #namber02 .t_inner figure, #namber03 .t_inner figure {
      width: 58%; }
    #namber01 .t_inner .t_inner_right, #namber02 .t_inner .t_inner_right, #namber03 .t_inner .t_inner_right {
      width: 38%; }
      #namber01 .t_inner .t_inner_right h2, #namber02 .t_inner .t_inner_right h2, #namber03 .t_inner .t_inner_right h2 {
        font-size: 200%;
        color: #fff; }
        #namber01 .t_inner .t_inner_right h2 span, #namber02 .t_inner .t_inner_right h2 span, #namber03 .t_inner .t_inner_right h2 span {
          width: 180px;
          display: block; }
      #namber01 .t_inner .t_inner_right p, #namber02 .t_inner .t_inner_right p, #namber03 .t_inner .t_inner_right p {
        margin: 1em 0 0;
        font-size: 120%;
        color: #fff; }
        #namber01 .t_inner .t_inner_right p span, #namber02 .t_inner .t_inner_right p span, #namber03 .t_inner .t_inner_right p span {
          color: #000;
          font-size: 80%;
          display: inline-block;
          margin: 0 1em 0 0;
          padding: 0.5em 2%;
          background-color: #bdc3c4;
          vertical-align: middle; }
  #namber01 h3, #namber02 h3, #namber03 h3 {
    width: 96%;
    font-size: 187%;
    margin: 0 auto; }
  #namber01 p, #namber02 p, #namber03 p {
    width: 96%;
    margin: 1em auto 0; }
  #namber01 .line, #namber02 .line, #namber03 .line {
    border-bottom: 2px solid #122579;
    padding: 0 0 2em;
    margin: 1em auto 2em; }
  #namber01 .box01, #namber02 .box01, #namber03 .box01 {
    width: 96%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto; }
    #namber01 .box01 .box_inner, #namber02 .box01 .box_inner, #namber03 .box01 .box_inner {
      width: 48%; }
      #namber01 .box01 .box_inner h3, #namber02 .box01 .box_inner h3, #namber03 .box01 .box_inner h3 {
        margin: 0; }
      #namber01 .box01 .box_inner p, #namber02 .box01 .box_inner p, #namber03 .box01 .box_inner p {
        width: 100%; }
    #namber01 .box01 figure, #namber02 .box01 figure, #namber03 .box01 figure {
      width: 48%; }
  #namber01 .message, #namber02 .message, #namber03 .message {
    padding: 2em 2%;
    margin: 5em 0 0;
    background-color: rgba(53, 86, 145, 0.2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }
    #namber01 .message a img, #namber02 .message a img, #namber03 .message a img {
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
      transition: none; }
    #namber01 .message a:hover img, #namber02 .message a:hover img, #namber03 .message a:hover img {
      opacity: none;
      filter: alpha(opacity=0);
      -moz-opacity: none; }
    #namber01 .message .m_inner, #namber02 .message .m_inner, #namber03 .message .m_inner {
      width: 48%; }
    #namber01 .message .photo01, #namber02 .message .photo01, #namber03 .message .photo01 {
      width: 48%;
      background: url("../img/voice/photo03_lo.png");
      background-repeat: no-repeat;
      background-size: 100% auto; }
      #namber01 .message .photo01 a, #namber02 .message .photo01 a, #namber03 .message .photo01 a {
        display: inline-block; }
        #namber01 .message .photo01 a:hover, #namber02 .message .photo01 a:hover, #namber03 .message .photo01 a:hover {
          background-color: transparent; }
        #namber01 .message .photo01 a:hover img, #namber02 .message .photo01 a:hover img, #namber03 .message .photo01 a:hover img {
          visibility: hidden; }
    #namber01 .message .photo02, #namber02 .message .photo02, #namber03 .message .photo02 {
      width: 48%;
      background: url("../img/voice/photo08_lo.png");
      background-repeat: no-repeat;
      background-size: 100% auto; }
      #namber01 .message .photo02 a, #namber02 .message .photo02 a, #namber03 .message .photo02 a {
        display: inline-block; }
        #namber01 .message .photo02 a:hover, #namber02 .message .photo02 a:hover, #namber03 .message .photo02 a:hover {
          background-color: transparent; }
        #namber01 .message .photo02 a:hover img, #namber02 .message .photo02 a:hover img, #namber03 .message .photo02 a:hover img {
          visibility: hidden; }
    #namber01 .message .photo03, #namber02 .message .photo03, #namber03 .message .photo03 {
      width: 48%;
      background: url("../img/voice/photo11_lo.png");
      background-repeat: no-repeat;
      background-size: 100% auto; }
      #namber01 .message .photo03 a, #namber02 .message .photo03 a, #namber03 .message .photo03 a {
        display: inline-block; }
        #namber01 .message .photo03 a:hover, #namber02 .message .photo03 a:hover, #namber03 .message .photo03 a:hover {
          background-color: transparent; }
        #namber01 .message .photo03 a:hover img, #namber02 .message .photo03 a:hover img, #namber03 .message .photo03 a:hover img {
          visibility: hidden; }

/*フッター*/
/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1300px) {
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* tablet1 */
@media only screen and (min-width: 1024px) and (max-width: 1299px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #namber01 .t_inner figure, #namber02 .t_inner figure, #namber03 .t_inner figure {
    width: 58%; }
  #namber01 .t_inner .t_inner_right, #namber02 .t_inner .t_inner_right, #namber03 .t_inner .t_inner_right {
    width: 38%; }
    #namber01 .t_inner .t_inner_right p span, #namber02 .t_inner .t_inner_right p span, #namber03 .t_inner .t_inner_right p span {
      width: 70%;
      display: block; }
  #namber01 .box01, #namber02 .box01, #namber03 .box01 {
    flex-direction: column; }
    #namber01 .box01 .box_inner, #namber02 .box01 .box_inner, #namber03 .box01 .box_inner {
      width: 100%; }
    #namber01 .box01 figure, #namber02 .box01 figure, #namber03 .box01 figure {
      width: 80%;
      margin: 0 auto 2em; }

  /*フッター*/ }
/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #namber01 .t_inner, #namber02 .t_inner, #namber03 .t_inner {
    flex-direction: column; }
    #namber01 .t_inner figure, #namber02 .t_inner figure, #namber03 .t_inner figure {
      width: 80%;
      margin: 0 auto; }
    #namber01 .t_inner .t_inner_right, #namber02 .t_inner .t_inner_right, #namber03 .t_inner .t_inner_right {
      width: 80%;
      margin: 1em auto 0; }
      #namber01 .t_inner .t_inner_right h2 span, #namber02 .t_inner .t_inner_right h2 span, #namber03 .t_inner .t_inner_right h2 span {
        width: 130px;
        display: inline-block; }
      #namber01 .t_inner .t_inner_right p, #namber02 .t_inner .t_inner_right p, #namber03 .t_inner .t_inner_right p {
        margin: 1em 0 0;
        font-size: 120%;
        color: #fff; }
        #namber01 .t_inner .t_inner_right p span, #namber02 .t_inner .t_inner_right p span, #namber03 .t_inner .t_inner_right p span {
          color: #000;
          font-size: 80%;
          display: inline-block;
          margin: 0 1em 0 0;
          padding: 0.5em 2%;
          background-color: #bdc3c4;
          vertical-align: middle; }
  #namber01 .box01, #namber02 .box01, #namber03 .box01 {
    flex-direction: column; }
    #namber01 .box01 .box_inner, #namber02 .box01 .box_inner, #namber03 .box01 .box_inner {
      width: 100%; }
    #namber01 .box01 figure, #namber02 .box01 figure, #namber03 .box01 figure {
      width: 80%;
      margin: 0 auto 2em; }
  #namber01 .message, #namber02 .message, #namber03 .message {
    flex-direction: column-reverse; }
    #namber01 .message .m_inner, #namber02 .message .m_inner, #namber03 .message .m_inner {
      width: 100%; }
    #namber01 .message figure, #namber02 .message figure, #namber03 .message figure {
      width: 80%;
      margin: 0 auto 2em; }

  /*フッター*/ }
/* tablet3  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #namber01, #namber02, #namber03 {
    margin: 2.5em auto 0;
    width: 90%; }
    #namber01 .t_inner, #namber02 .t_inner, #namber03 .t_inner {
      flex-direction: column; }
      #namber01 .t_inner figure, #namber02 .t_inner figure, #namber03 .t_inner figure {
        width: 80%;
        margin: 0 auto; }
      #namber01 .t_inner .t_inner_right, #namber02 .t_inner .t_inner_right, #namber03 .t_inner .t_inner_right {
        width: 80%;
        margin: 1em auto 0; }
        #namber01 .t_inner .t_inner_right h2 span, #namber02 .t_inner .t_inner_right h2 span, #namber03 .t_inner .t_inner_right h2 span {
          width: 120px;
          display: block; }
        #namber01 .t_inner .t_inner_right p span, #namber02 .t_inner .t_inner_right p span, #namber03 .t_inner .t_inner_right p span {
          display: block; }
    #namber01 h3, #namber02 h3, #namber03 h3 {
      font-size: 156%; }
    #namber01 .box01, #namber02 .box01, #namber03 .box01 {
      flex-direction: column; }
      #namber01 .box01 .box_inner, #namber02 .box01 .box_inner, #namber03 .box01 .box_inner {
        width: 100%; }
      #namber01 .box01 figure, #namber02 .box01 figure, #namber03 .box01 figure {
        width: 80%;
        margin: 0 auto 2em; }
    #namber01 .message, #namber02 .message, #namber03 .message {
      flex-direction: column-reverse; }
      #namber01 .message .m_inner, #namber02 .message .m_inner, #namber03 .message .m_inner {
        width: 100%; }
      #namber01 .message figure, #namber02 .message figure, #namber03 .message figure {
        width: 90%;
        margin: 0 auto 2em; }

  /*フッター*/ }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }