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

/*メイン*/
#m_top {
  position: relative;
  background-image: url("../img/about/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; }

#answer {
  width: 100%; }
  #answer ul li {
    width: 100%;
    margin: 5em 0 0;
    height: 500px;
    position: relative; }
    #answer ul li:nth-child(1) figure {
      position: absolute;
      bottom: 0;
      right: 20%;
      width: 750px;
      z-index: 2; }
    #answer ul li:nth-child(2) figure {
      position: absolute;
      bottom: 0;
      left: 20%;
      width: 700px;
      z-index: 2; }
    #answer ul li #inner_left {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 90%;
      height: 300px;
      clip-path: polygon(0 0%, 90% 0%, 100% 100%, 0% 100%);
      background-color: #232584; }
      #answer ul li #inner_left p {
        width: 80%;
        font-size: 250%;
        font-weight: bold;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%); }
    #answer ul li #inner_right {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 300px;
      clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 10% 100%);
      background-color: #232584; }
      #answer ul li #inner_right p {
        width: 80%;
        font-size: 200%;
        text-align: right;
        font-weight: bold;
        color: #fff;
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%); }
        #answer ul li #inner_right p span {
          font-size: 150%; }

#back01 {
  background-image: url("../img/about/back01.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  height: 1200px; }

#specialist {
  width: 80%;
  margin: 5em auto 0; }
  #specialist h2 {
    font-size: 200%;
    text-align: center;
    color: #232584; }
    #specialist h2 span {
      display: block;
      font-size: 150%; }

#voice {
  width: 100%; }
  #voice h2 {
    color: #fff;
    font-size: 200%;
    background-color: #232584;
    padding: 0.75em 0;
    text-align: center; }
  #voice ul {
    width: 80%;
    margin: 2em auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }
    #voice ul li {
      width: 31.333%; }
      #voice ul li p {
        margin: 1em 0 0; }
        #voice ul li p span {
          display: block;
          width: 150px;
          padding: 0.25em 10px;
          text-align: center;
          color: #fff;
          background-color: #000;
          font-size: 87%; }
        #voice ul li p a {
          color: #000;
          font-weight: bold;
          font-size: 120%;
          text-decoration: none; }
          #voice ul li p a:hover, #voice ul li p a:active {
            color: #000;
            text-decoration: underline; }

#back02 {
  width: 100%;
  margin: 5em 0 0;
  background-color: #355691;
  padding: 3em 0; }

#good_point {
  width: 80%;
  margin: 0 auto;
  color: #fff; }
  #good_point h2 {
    font-size: 200%; }
  #good_point #g_inner {
    width: 100%;
    margin: 2em 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }
    #good_point #g_inner figure {
      width: 48%; }
    #good_point #g_inner dl {
      width: 48%; }
      #good_point #g_inner dl dt {
        font-size: 187%;
        font-weight: bold; }
      #good_point #g_inner dl dd {
        margin: 1em 0 0; }

/*フッター*/
/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1300px) {
  /*ヘッダー*/
  /*メイン*/
  /*フッター*/ }
/* tablet1 */
@media only screen and (min-width: 1024px) and (max-width: 1299px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #answer {
    width: 100%; }
    #answer ul li {
      height: 300px; }
      #answer ul li:nth-child(1) figure {
        right: 10%;
        width: 450px; }
      #answer ul li:nth-child(2) figure {
        left: 8%;
        width: 500px; }
      #answer ul li #inner_left {
        width: 96%;
        height: 300px; }
        #answer ul li #inner_left p {
          width: 80%;
          font-size: 250%; }
      #answer ul li #inner_right {
        width: 100%;
        height: 300px;
        clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 4% 100%); }
        #answer ul li #inner_right p {
          width: 80%;
          font-size: 200%; }

  #back01 {
    height: 800px; }

  /*フッター*/ }
/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #answer {
    width: 100%; }
    #answer ul li {
      height: 300px;
      margin: 0; }
      #answer ul li:nth-child(1) figure {
        right: 3%;
        width: 350px; }
      #answer ul li:nth-child(2) figure {
        left: 6%;
        width: 350px; }
      #answer ul li #inner_left {
        width: 96%;
        height: 250px; }
        #answer ul li #inner_left p {
          width: 80%; }
      #answer ul li #inner_right {
        width: 100%;
        height: 250px;
        clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 4% 100%); }
        #answer ul li #inner_right p {
          width: 80%; }

  #back01 {
    height: 600px; }

  #good_point #g_inner figure {
    width: 38%; }
  #good_point #g_inner dl {
    width: 58%; }

  /*フッター*/ }
/* tablet3  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  /*ヘッダー*/
  /*メイン*/
  #m_top h1 img {
    width: 200px; }

  #answer {
    width: 100%; }
    #answer ul li {
      width: 100%;
      margin: 2.5em 0 0;
      height: 300px;
      position: relative; }
      #answer ul li:nth-child(1) figure {
        display: none; }
      #answer ul li:nth-child(2) figure {
        display: none; }
      #answer ul li #inner_left {
        width: 90%;
        height: 300px;
        clip-path: none; }
        #answer ul li #inner_left p {
          width: 80%;
          font-size: 200%; }
          #answer ul li #inner_left p br {
            display: none; }
      #answer ul li #inner_right {
        width: 90%;
        height: 300px;
        clip-path: none; }
        #answer ul li #inner_right p {
          width: 80%;
          font-size: 187%; }
          #answer ul li #inner_right p br {
            display: none; }
          #answer ul li #inner_right p span {
            font-size: 150%;
            display: block; }

  #back01 {
    height: 300px; }

  #specialist {
    width: 80%;
    margin: 5em auto 0; }
    #specialist h2 {
      font-size: 156%;
      text-align: center;
      color: #232584; }
      #specialist h2 span {
        display: block;
        font-size: 120%; }

  #voice h2 {
    font-size: 187%; }
  #voice ul {
    width: 90%;
    flex-direction: column; }
    #voice ul li {
      width: 100%; }
      #voice ul li:nth-child(n+2) {
        margin: 1em 0 0; }

  #back02 {
    width: 100%;
    margin: 2.5em 0 0;
    background-color: #355691;
    padding: 1.5em 0; }

  #good_point {
    width: 90%;
    margin: 0 auto;
    color: #fff; }
    #good_point h2 {
      font-size: 187%; }
    #good_point #g_inner {
      flex-direction: column; }
      #good_point #g_inner figure {
        width: 100%; }
      #good_point #g_inner dl {
        width: 100%;
        margin: 1em 0 0; }
        #good_point #g_inner dl dt {
          font-size: 187%;
          font-weight: bold; }
        #good_point #g_inner dl dd {
          margin: 1em 0 0; }

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