.din-200 {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 200; }

.din-400 {
  font-family: "din-2014-narrow", sans-serif;
  font-weight: 400; }

@keyframes hoverin {
  0% {
    transform: translateX(-101%);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes hoverout {
  0% {
    transform: translateX(0);
    left: 0;
    opacity: 1; }
  100% {
    transform: translateX(0);
    left: 101%;
    opacity: 1; } }
@keyframes hoverinreverse {
  0% {
    transform: translateX(101%);
    opacity: 1; }
  100% {
    transform: translateX(0);
    opacity: 1; } }
@keyframes hoveroutreverse {
  0% {
    transform: translateX(0);
    left: 0;
    opacity: 1; }
  100% {
    transform: translateX(0);
    left: -101%;
    opacity: 1; } }
@keyframes hoverupout {
  0% {
    transform: translateY(0);
    opacity: 1;
    top: 0; }
  100% {
    transform: translateY(0);
    opacity: 1;
    top: -100%; } }
@keyframes hoverupin {
  0% {
    transform: translateY(101%);
    opacity: 1; }
  100% {
    transform: translateY(0);
    opacity: 1; } }
.company {
  background: #f0f0f0; }
  .company p, .company dt, .company dd {
    transform: rotate(0.05deg); }
  .company .page-header {
    margin: 85px auto 0;
    /*margin: 85px auto 97px;*/ }
  .company .sec h2, .company .sec-overview h2, .company .sec-introduction h2, .company .sec-access h2 {
    font-size: 35px;
    font-weight: 300;
    text-align: center;
    margin: 0 0 50px;
    letter-spacing: 0.1em; }
  .company .sec .wrap, .company .sec-overview .wrap, .company .sec-introduction .wrap, .company .sec-access .wrap {
    background: #fff; }
  .company .sec-overview {
    padding-top: 97px;
    width: 1000px;
    margin: 0 auto; }
    .company .sec-overview .wrap {
      padding: 90px 40px; }
      .company .sec-overview .wrap dl {
        overflow: hidden;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.93; }
        .company .sec-overview .wrap dl dt {
          width: 220px;
          background: #efefef;
          padding: 6px 10px 6px 27px;
          float: left;
          font-weight: 500; }
          .company .sec-overview .wrap dl dt:nth-of-type(n + 2) {
            margin-top: 36px; }
        .company .sec-overview .wrap dl dd {
          width: 100%;
          padding: 5px 10px 10px  247px; }
          .company .sec-overview .wrap dl dd:nth-of-type(n + 2) {
            margin-top: 36px; }
          .company .sec-overview .wrap dl dd .inner p {
            display: flex; }
            .company .sec-overview .wrap dl dd .inner p span {
              display: block; }
              .company .sec-overview .wrap dl dd .inner p span:nth-child(1) {
                width: 103px; }
          .company .sec-overview .wrap dl dd a {
            text-decoration: underline; }
            .company .sec-overview .wrap dl dd a:hover {
              text-decoration: none; }
  .company .sec-introduction {
    padding-top: 120px; }
    .company .sec-introduction .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0 -20px; }
      .company .sec-introduction .list .inner {
        width: 530px;
        height: 340px;
        background: #fff;
        display: flex;
        margin: 0 20px 40px; }
        .company .sec-introduction .list .inner .text {
          width: 277px;
          padding: 35px; }
          .company .sec-introduction .list .inner .text p.position {
            background-color: #8effc6;
            font-size: 15px;
            display: inline-block;
            padding: 5px 12px 5px;
            font-weight: 400; }
          .company .sec-introduction .list .inner .text .name {
            font-size: 25px;
            font-weight: bold;
            margin: 11px 0 25px;
            letter-spacing: 0.1em; }
            .company .sec-introduction .list .inner .text .name + p {
              font-size: 14px;
              font-weight: 400;
              line-height: 1.67;
              letter-spacing: 0.1em; }
        .company .sec-introduction .list .inner .img {
          width: 253px;
          background-position: center top;
          background-size: cover;
          background-repeat: no-repeat; }
        .company .sec-introduction .list .inner:nth-of-type(1) .img {
          background-image: url("/images/company/member01.jpg"); }
        .company .sec-introduction .list .inner:nth-of-type(2) .img {
          background-image: url("/images/company/member02.jpg"); }
        .company .sec-introduction .list .inner:nth-of-type(3) .img {
          background-image: url("/images/company/member03.jpg"); }
        .company .sec-introduction .list .inner:nth-of-type(4) .img {
          background-image: url("/images/company/member04.jpg"); }
        .company .sec-introduction .list .inner:nth-of-type(5) .img {
          background-image: url("/images/company/member05.jpg"); }
    .company .sec-introduction .note {
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      margin-top: -10px; }
  .company .sec-access {
    padding-top: 150px; }
    .company .sec-access h3 {
      font-size: 28px;
      font-weight: bold;
      padding: 0 60px;
      margin-bottom: 40px;
      letter-spacing: 0.1em; }
    .company .sec-access .wrap {
      padding: 53px 0; }
    .company .sec-access .detail {
      display: flex;
      align-items: flex-end;
      padding: 0 54px 0 64px; }
    .company .sec-access .address {
      width: 440px; }
      .company .sec-access .address p {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.06em;
        padding-top: 2px;
        line-height: 1.7; }
      .company .sec-access .address p + div {
        display: flex;
        font-size: 12px;
        margin: 11px 0 0; }
      .company .sec-access .address h4 {
        background-color: #f0f0f0;
        padding: 5px 9px 6px;
        display: inline;
        font-size: 14px;
        letter-spacing: 0.1em;
        width: 50px;
        align-self: flex-start;
        text-align: center;
        font-weight: 400; }
        .company .sec-access .address h4 + p {
          padding-left: 11px;
          width: calc(100% - 50px); }
      .company .sec-access .address .map {
        margin: 26px 0 6px; }
      .company .sec-access .address .btn-map {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 42px;
        color: #fff;
        text-align: center;
        background: #000;
        font-size: 12px;
        transition: opacity 0.3s;
        letter-spacing: 0.1em; }
        .company .sec-access .address .btn-map:hover {
          opacity: 0.7; }
        .company .sec-access .address .btn-map i {
          display: block;
          width: 21px;
          height: 14px;
          background: url("/images/common/icon-window.png") no-repeat left top/contain;
          margin-right: 15px; }
        .company .sec-access .address .btn-map i, .company .sec-access .address .btn-map span {
          backface-visibility: hidden; }
    .company .sec-access .gallery {
      width: calc(100% - 440px);
      padding: 0 0 0 20px;
      margin: -7px 0 0; }
      .company .sec-access .gallery ul {
        display: flex;
        flex-wrap: wrap;
        padding-top: 4px; }
        .company .sec-access .gallery ul li {
          width: 50%;
          padding: 10px 5px 0; }
          .company .sec-access .gallery ul li img {
            display: block;
            width: 100%; }
    .company .sec-access .wrap + .wrap {
      margin: 20px 0 0; }

@media (max-width: 768px) {
  .company .page-header {
    margin: 0 auto 0; }
  .company .sec h2, .company .sec-overview h2, .company .sec-introduction h2, .company .sec-access h2 {
    font-size: 5.859vw;
    margin: 0 0 6.543vw; }
  .company .sec-overview {
    padding-top: 15.234vw;
    width: auto; }
    .company .sec-overview .wrap {
      padding: 9.766vw 7.617vw; }
      .company .sec-overview .wrap dl {
        font-size: 2.93vw;
        line-height: 1.93;
        letter-spacing: 0.1em; }
        .company .sec-overview .wrap dl dt {
          width: 56.641vw;
          padding: 1.7vw 2.93vw;
          float: inherit;
          text-align: center;
          margin: 0 auto; }
          .company .sec-overview .wrap dl dt:nth-of-type(n + 2) {
            margin-top: 9.766vw; }
        .company .sec-overview .wrap dl dd {
          width: 100%;
          padding: 5.371vw 1.953vw 0;
          text-align: center; }
          .company .sec-overview .wrap dl dd:nth-of-type(n + 2) {
            margin-top: 0; }
          .company .sec-overview .wrap dl dd.sp-text-left {
            text-align: left;
            padding: 5.371vw 5.859vw 0; }
            .company .sec-overview .wrap dl dd.sp-text-left span {
              display: block;
              padding-left: 6.152vw; }
          .company .sec-overview .wrap dl dd .inner p {
            display: flex; }
            .company .sec-overview .wrap dl dd .inner p span {
              display: block;
              width: 50%; }
              .company .sec-overview .wrap dl dd .inner p span:nth-child(1) {
                width: 50%;
                padding-right: 2.441vw;
                text-align: right; }
              .company .sec-overview .wrap dl dd .inner p span:nth-child(2) {
                padding-left: 4.395vw;
                text-align: left; }
  .company .sec-introduction {
    padding-top: 120px; }
    .company .sec-introduction .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0; }
      .company .sec-introduction .list .inner {
        width: 100%;
        height: auto;
        margin: 0 0 6.836vw; }
        .company .sec-introduction .list .inner .text {
          width: 50%;
          padding: 6.8vw 3.906vw 4.883vw 5.836vw; }
          .company .sec-introduction .list .inner .text p.position {
            font-size: 2.832vw;
            padding: 1.172vw 2.172vw 1vw; }
          .company .sec-introduction .list .inner .text .name {
            font-size: 4.688vw;
            margin: 1.953vw 0 3.93vw; }
            .company .sec-introduction .list .inner .text .name + p {
              font-size: 2.93vw;
              line-height: 1.92; }
        .company .sec-introduction .list .inner .img {
          width: 50%;
          min-height: 69.727vw; }
          .company .sec-introduction .list .inner .img img {
            width: 100%; }
    .company .sec-introduction .note {
      font-size: 2.832vw;
      margin-top: 0; }
  .company .sec-access {
    padding-top: 14.648vw; }
    .company .sec-access h3 {
      font-size: 3.906vw;
      padding: 0 7.617vw;
      margin-bottom: 5.859vw; }
    .company .sec-access .wrap {
      padding: 9.766vw 0; }
    .company .sec-access .detail {
      padding: 0 7.617vw;
      display: block; }
    .company .sec-access .address {
      width: 100%; }
      .company .sec-access .address p {
        font-size: 2.93vw;
        padding-top: 0.195vw;
        letter-spacing: 0.05em; }
      .company .sec-access .address p + div {
        font-size: 2.93vw;
        align-items: center;
        margin: 2.637vw 0 4.906vw; }
      .company .sec-access .address h4 {
        padding: 1.27vw 0.977vw;
        font-size: 2.93vw;
        margin: 0;
        letter-spacing: 0.05em;
        width: 10.254vw; }
        .company .sec-access .address h4 + p {
          width: calc(100% - 10.254vw);
          padding-left: 3.125vw; }
      .company .sec-access .address .map {
        margin: 0;
        width: 100%;
        height: 41.016vw;
        overflow: hidden; }
        .company .sec-access .address .map iframe {
          width: 100% !important;
          height: 100% !important; }
      .company .sec-access .address .btn-map {
        height: 8.594vw;
        font-size: 2.734vw;
        margin-top: 2.441vw;
        padding-right: 6vw; }
        .company .sec-access .address .btn-map:hover {
          opacity: 1; }
        .company .sec-access .address .btn-map i {
          display: block;
          width: 4.688vw;
          height: 3.027vw;
          margin-right: 3.418vw; }
        .company .sec-access .address .btn-map i, .company .sec-access .address .btn-map span {
          backface-visibility: hidden; }
    .company .sec-access .gallery {
      width: 100%;
      padding: 0;
      margin: 4.883vw 0 0; }
      .company .sec-access .gallery ul {
        display: flex;
        flex-wrap: wrap;
        padding-top: 0; }
        .company .sec-access .gallery ul li {
          padding: 0; }
          .company .sec-access .gallery ul li img {
            display: block;
            width: 100%; }
          .company .sec-access .gallery ul li:nth-of-type(even) {
            padding: 1.172vw 0 1.172vw 1.172vw; }
          .company .sec-access .gallery ul li:nth-of-type(odd) {
            padding: 1.172vw 1.172vw 1.172vw 0; }
    .company .sec-access .wrap + .wrap {
      margin: 6.836vw 0 0; } }