@charset "UTF-8";
@import url("base.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
/*メイン*/
#m_top {
  width: 100%;
  position: relative; }
  #m_top #main_text {
    width: 470px;
    position: absolute;
    top: 20em;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background-color: #fff;
    padding: 2em 35px;
    border: 1px solid #000;
    text-align: center;
    line-height: 2; }
  #m_top .top_img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    /* この一行を追加するだけ！ */ }

.g_back {
  background-color: #f9f9f9;
  padding: 3em 0;
  margin: 32em 0 0;
  width: 100%; }

#history {
  margin: 2em auto; }
  #history h2 {
    font-size: 200%;
    text-align: center; }
    #history h2 span {
      font-size: 50%;
      font-weight: normal !important;
      display: block; }
  #history table {
    width: 540px;
    margin: 2em auto 0; }
    #history table tr:nth-child(n+2) {
      border-top: 1px solid #000; }
    #history table th {
      width: 26%;
      padding: 2em 2% 2em 0;
      vertical-align: top;
      text-align: left; }
    #history table td {
      width: 70%;
      padding: 2em 0 2em 2%; }
  #history #management {
    margin: 3em auto 0;
    padding: 3em 0 0;
    border-top: 1px solid #d8d8d8; }
    #history #management p {
      margin: 3em auto 0;
      text-align: center;
      font-weight: bold; }

#comcept_inner {
  margin: 4em auto 0; }
  #comcept_inner h2 {
    font-size: 200%;
    text-align: center; }
    #comcept_inner h2 span {
      font-size: 50%;
      font-weight: normal !important;
      display: block; }
  #comcept_inner li {
    width: 80%;
    margin: 0 auto;
    position: relative;
    height: 500px;
    background-image: url(../img/company/photo01.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: 60% auto; }
    #comcept_inner li dl {
      position: absolute;
      top: 50%;
      left: 0%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      width: 46%;
      background-color: #fff;
      padding: 2em 2%;
      border: 1px solid #000;
      box-sizing: border-box; }
      #comcept_inner li dl dt {
        text-align: center;
        font-weight: bold;
        margin: 0 0 1em; }
        #comcept_inner li dl dt span {
          font-size: 50%;
          font-weight: normal !important;
          display: block; }
      #comcept_inner li dl dd table {
        width: 100%;
        margin: 2em 0 0; }
        #comcept_inner li dl dd table tr:nth-child(n+2) {
          border-top: 1px solid #000; }
        #comcept_inner li dl dd table th {
          width: 26%;
          padding: 1em 2% 1em 0;
          vertical-align: top;
          text-align: left; }
        #comcept_inner li dl dd table td {
          width: 70%;
          padding: 1em 0 1em 2%; }
          #comcept_inner li dl dd table td a {
            color: #000;
            text-decoration: none; }
            #comcept_inner li dl dd table td a:hover, #comcept_inner li dl dd table td a:active {
              color: #000;
              text-decoration: underline; }

/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1000px) {
  /*メイン*/
  #history, #comcept_inner {
    width: 980px; }

  #comcept_inner li figure {
    display: none; } }
/* tablet以下共通 ------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 999px) {
  /*メイン*/
  #history, #comcept_inner {
    width: 96%; }

  .reform_contact {
    width: 88%; } }
/* tablet以下共通ここまで ------------------------------------------------------------------------------------------*/
/* tablet1  */
@media only screen and (min-width: 768px) and (max-width: 999px) {
  #m_top #main_text {
    top: 24em; }

  #comcept_inner {
    margin: 4em auto 0; }
    #comcept_inner li {
      height: 400px;
      margin: 2em auto 0; }
      #comcept_inner li figure {
        display: none; } }
/* tablet2  */
@media only screen and (max-width: 767px) {
  /*メイン*/
  #m_top {
    margin: 0 0 30em; }
    #m_top #main_text {
      width: 80%;
      padding: 2em 2%; }

  .g_back {
    background-color: #f9f9f9;
    margin: 3em 0 0; }

  #history {
    margin: 2em auto; }
    #history h2 {
      font-size: 180%; }
    #history table {
      width: 96%; }
      #history table tr:nth-child(n+2) {
        border-top: 1px solid #000; }
      #history table th {
        width: 98%;
        padding: 1em 2% 0 0;
        display: block; }
      #history table td {
        display: block;
        width: 98%;
        padding: 0 0 1em 2%; }
    #history #management {
      margin: 3em auto 0;
      padding: 3em 0 0;
      border-top: 1px solid #d8d8d8; }
      #history #management p {
        margin: 3em auto 0;
        text-align: center;
        font-weight: bold; }

  #comcept_inner {
    width: 100%;
    margin: 4em 0 0; }
    #comcept_inner h2 {
      font-size: 180%; }
    #comcept_inner li {
      width: 100%;
      margin: 0;
      position: static;
      height: initial;
      background-image: none; }
      #comcept_inner li dl {
        position: static;
        top: 0%;
        left: 0%;
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        width: 80%;
        margin: 0 10%;
        border: none; }
        #comcept_inner li dl dt {
          font-size: 140%; } }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*メイン*/
  #m_top {
    margin: 0 0 30em; } }
/* smartPhone1 */
@media only screen and (max-width: 400px) {
  /*メイン*/
  #m_top {
    margin: 0 0 40em; } }