@charset "UTF-8";
/* basic layout */
/* 全体の設定
---------------------------------------------------------------------------*/
/* 基本設定
---------------------------------------------------------------------------*/
/* responsive */
/* サイズ */
/* flexbox */
/* フォント */
/* regular: 400, medium: 500, semibold: 600, bold: 700 */
/* regular: 400, medium: 500, bold: 700 */
/*@mixin font-hdl {
	font-family: fot-udkakugo-large-pr6n, sans-serif;
	font-style: normal;
	font-weight: 600;
}*/
/* regular: 500 */
/* regular: 400 */
/*@mixin font-deco {
	font-family: "dnp-shuei-nmincho-std", sans-serif;
	font-weight: 400;
	font-style: normal;
}*/
/* 色 */
/* グラデ背景色 */
/* 中央揃え */
/* objectfit */
/* ホバーアクション */
/* 角丸 */
/* ボタン */
/* ボタンの中のspan */
/* フォントサイズ */
/* padding margin */
/* 縦書き */
/* 内径 */
/* recog
---------------------------------------------------------------------------*/
.recog {
  margin-bottom: 192px; }
  @media screen and (max-width: 1300px) {
    .recog {
      margin-bottom: 14.7692307692vw; } }
  @media screen and (max-width: 480px) {
    .recog {
      margin-bottom: 25.6vw; } }
  .recog-ttl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: calc(-50vw - 540px);
    width: calc(50vw + 540px);
    gap: 50px; }
    @media screen and (max-width: 1300px) {
      .recog-ttl {
        gap: 3.8461538462vw; } }
    @media screen and (max-width: 480px) {
      .recog-ttl {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 0 6.6666666667vw;
        width: 100%;
        margin-bottom: 2.4em; } }
    .recog-ttl .ja {
      font-size: 30px; }
      @media screen and (max-width: 1300px) {
        .recog-ttl .ja {
          font-size: 2.3076923077vw; } }
      @media screen and (max-width: 480px) {
        .recog-ttl .ja {
          font-size: 8vw; } }
      @media screen and (max-width: 480px) {
        .recog-ttl .ja {
          width: 100%; } }
    .recog-ttl .en {
      font-size: 40px;
      background: linear-gradient(-90deg, #ffdc00 0%, #00c05e 36%, #0097ff 70%, #ff0020 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      opacity: .5;
      font-family: "Cormorant Garamond", serif;
      font-weight: 300;
      font-style: normal; }
      @media screen and (max-width: 1300px) {
        .recog-ttl .en {
          font-size: 3.0769230769vw; } }
      @media screen and (max-width: 480px) {
        .recog-ttl .en {
          font-size: 10.6666666667vw; } }
      @media screen and (max-width: 480px) {
        .recog-ttl .en {
          line-height: 1.1; } }
    .recog-ttl::after {
      content: "";
      height: 1px;
      flex-grow: 1;
      background: linear-gradient(90deg, #ffdc00 0%, #00c05e 36%, #0097ff 70%, #ff0020 100%); }
  .recog .media-ttl {
    position: relative;
    font-size: 24px;
    line-height: 1.25;
    padding-left: 36px;
    margin-bottom: 48px;
    width: 100%; }
    @media screen and (max-width: 1300px) {
      .recog .media-ttl {
        font-size: 1.8461538462vw; } }
    @media screen and (max-width: 480px) {
      .recog .media-ttl {
        font-size: 6.4vw; } }
    @media screen and (max-width: 1300px) {
      .recog .media-ttl {
        padding-left: 2.7692307692vw;
        margin-bottom: 3.6923076923vw; } }
    @media screen and (max-width: 480px) {
      .recog .media-ttl {
        padding-left: 9.6vw;
        margin-bottom: 8vw; } }
    .recog .media-ttl::before {
      position: absolute;
      content: "";
      width: 24px;
      height: 1px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(90deg, #ffdc00 0%, #00c05e 36%, #0097ff 70%, #ff0020 100%); }
      @media screen and (max-width: 1300px) {
        .recog .media-ttl::before {
          width: 1.8461538462vw; } }
      @media screen and (max-width: 480px) {
        .recog .media-ttl::before {
          width: 6.4vw; } }
  .recog-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 48px 24px; }
    @media screen and (max-width: 1300px) {
      .recog-box {
        gap: 3.6923076923vw 1.8461538462vw; } }
    @media screen and (max-width: 480px) {
      .recog-box {
        gap: 10.6666666667vw; } }
  .recog .media-box {
    position: relative;
    width: 252px;
    padding-bottom: 88px; }
    @media screen and (max-width: 1300px) {
      .recog .media-box {
        width: 19.3846153846vw;
        padding-bottom: 6.7692307692vw; } }
    @media screen and (max-width: 480px) {
      .recog .media-box {
        width: 100%;
        padding-bottom: 0; } }
    .recog .media-box + .media-ttl {
      margin-top: 96px; }
      @media screen and (max-width: 1300px) {
        .recog .media-box + .media-ttl {
          margin-top: 7.3846153846vw; } }
      @media screen and (max-width: 480px) {
        .recog .media-box + .media-ttl {
          margin-top: 12.8vw; } }
  .recog .media-img {
    margin-bottom: 30px; }
    @media screen and (max-width: 1300px) {
      .recog .media-img {
        margin-bottom: 2.3076923077vw; } }
    @media screen and (max-width: 480px) {
      .recog .media-img {
        margin-bottom: 5.3333333333vw; } }
    .recog .media-img .noimg {
      display: block;
      width: 100%;
      height: 100%; }
    .recog .media-img.img28 {
      height: 50px;
      padding: 0 10px; }
      @media screen and (max-width: 1300px) {
        .recog .media-img.img28 {
          height: 6.6666666667vw; } }
      @media screen and (max-width: 480px) {
        .recog .media-img.img28 {
          height: 12vw; } }
    .recog .media-img.img29 {
      height: 315px;
      background-color: #000F25; }
      @media screen and (max-width: 1300px) {
        .recog .media-img.img29 {
          height: 24.2307692308vw; } }
      @media screen and (max-width: 480px) {
        .recog .media-img.img29 {
          width: 56vw;
          height: 70vw;
          margin-left: auto;
          margin-right: auto; } }
    .recog .media-img.img30 {
      height: 50px;
      padding: 0 10px; }
      @media screen and (max-width: 1300px) {
        .recog .media-img.img30 {
          height: 6.6666666667vw; } }
      @media screen and (max-width: 480px) {
        .recog .media-img.img30 {
          height: 12vw; } }
    .recog .media-img img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      font-family: "object-fit: contain; object-position: center;"; }
  .recog .media-name {
    text-align: center;
    font-size: 16px;
    line-height: 2; }
    @media screen and (max-width: 1300px) {
      .recog .media-name {
        font-size: 1.2307692308vw; } }
    @media screen and (max-width: 480px) {
      .recog .media-name {
        font-size: 4.2666666667vw; } }
  .recog .media-link {
    position: absolute;
    left: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 60px;
    border-radius: 30px;
    border: 1px solid #000000;
    background-image: url(../img/recognition/blank.png);
    background-position: right 24px center;
    background-size: 18px auto;
    background-repeat: no-repeat; }
    @media screen and (max-width: 1300px) {
      .recog .media-link {
        background-position: right 1.8461538462vw center;
        background-size: 1.3846153846vw auto; } }
    @media screen and (max-width: 480px) {
      .recog .media-link {
        background-position: right 6vw center;
        background-size: 3.3333333333vw auto; } }
    @media screen and (max-width: 1300px) {
      .recog .media-link {
        height: 4.6153846154vw;
        border-radius: 2.3076923077vw; } }
    @media screen and (max-width: 480px) {
      .recog .media-link {
        position: relative;
        left: auto;
        bottom: auto;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        height: 12vw;
        border-radius: 6vw;
        margin-top: 1em; } }
    .recog .media-link span {
      position: relative;
      display: block;
      width: 100%;
      white-space: nowrap;
      text-align: center; }