@charset "utf-8";

/* ロゴと会社名の固定配置 */
.fixed-logo {
  position: fixed;        /* スクロールしても固定表示 */
  top: 20px;              /* 上からの距離 */
  left: 20px;             /* 左からの距離 */
  z-index: 1000;          /* 最前面に表示 */
}

.logo-link {
  display: flex;          /* フレックスボックス */
  flex-direction: column; /* 縦方向に並べる */
  align-items: center;    /* 中央揃え */
  text-decoration: none;  /* リンクの下線を消す */
}

/* ロゴ画像 */
.company-logo {
  width: 60px;            /* ロゴサイズ */
  height: auto;
}

/* 会社名 */
.company-name {
  margin-top: 4px;        /* ロゴと文字の間に余白 */
  font-size: 12px;      /* 見やすいサイズ */
  font-weight: bold;
  color: #929090;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* ▼スマホ対応 */
@media (max-width: 600px) {
  html, body {
    overflow-x: hidden;
  }

  .fixed-logo {
    position: fixed;
    top: 20px;           /* PCと同じ上余白 */
    left: 10px;          /* PCと同じ左余白 */
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center; /* ロゴ下の会社名は中央揃え */
    transform: none;     /* 中央寄せ用の移動を解除 */
    width: auto;         /* 内容幅に合わせる */
  }

  .company-logo {
    width: 42px;         /* スマホ向けサイズ */
    height: auto;
    margin-left: -35%;

  }

  .company-name {
    margin-top: 4px;
    font-size: 9px;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap; /* 改行せずに全部表示 */
    width: auto;         /* 親幅いっぱいにならないように */
  }
}