.vm-company {
  background: #f6f6f6;
  color: #111;
  line-height: 1.7;
}

.vm-company-hero {
  padding: 12px 0 80px;
  background: linear-gradient(140deg, #ffffff 0%, #f3f3f3 60%, #f8f8f8 100%);
}

.vm-company-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: center;
}

.vm-company-hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--vm-accent, #b000ff);
  margin-bottom: 10px;
}

.vm-company-hero__title {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: 1.25;
  margin: 0 0 14px;
}

.vm-company-hero__lead {
  font-size: 1.05rem;
  color: #444;
  margin: 0 0 14px;
}

.vm-company-hero__text {
  margin: 0;
  color: #555;
}

.vm-company-hero__panel {
  background: #fff;
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
}

.vm-company-section {
  padding: 72px 0;
}

.vm-company-section__head {
  max-width: 720px;
  margin-bottom: 28px;
}

.vm-company-section__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vm-accent, #b000ff);
  margin-bottom: 8px;
}

.vm-company-section__title {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  margin: 0 0 10px;
}

.vm-company-section__lead {
  margin: 0;
  color: #555;
}

.vm-company-editor__content {
  background: #fff;
  border-radius: 20px;
  padding: 26px 28px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
}

.vm-company-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.vm-company-value {
  background: #fff;
  border-radius: 20px;
  padding: 20px 22px;
  border: 1px solid #eee;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.05);
}

.vm-company-value__title {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.vm-company-value__text {
  margin: 0;
  color: #555;
}

.vm-company-profile {
  background: #fff;
  border-radius: 24px;
  padding: 28px 30px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
}

.vm-company-profile__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.vm-company-profile__row:last-child {
  border-bottom: none;
}

.vm-company-profile__label {
  font-weight: 600;
  color: #333;
}

.vm-company-profile__value {
  margin: 0;
  color: #555;
}

.vm-company-access {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: stretch;
}

.vm-company-access__card {
  background: #fff;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid #eee;
}

.vm-company-access__note {
  margin: 8px 0 0;
  color: #555;
}

.vm-company-access__placeholder {
  border-radius: 20px;
  background: linear-gradient(135deg, #efefef, #f7f7f7);
  border: 1px dashed #ddd;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 0.95rem;
}

.vm-company-history {
  display: grid;
  gap: 14px;
}

.vm-company-history__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.05);
}

.vm-company-history__year {
  font-weight: 700;
  color: #333;
}

.vm-company-history__desc {
  margin: 0;
  color: #555;
}

@media (max-width: 960px) {
  .vm-company-hero__inner {
    grid-template-columns: 1fr;
  }

  .vm-company-values {
    grid-template-columns: 1fr;
  }

  .vm-company-access {
    grid-template-columns: 1fr;
  }

  .vm-company-profile__row {
    grid-template-columns: 1fr;
  }

  .vm-company-history__item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .vm-company-section {
    padding: 60px 0;
  }

  .vm-company-hero {
    padding: 80px 0 64px;
  }

  .vm-company-profile {
    padding: 24px;
  }
}

.vm-company-representative {
  display: grid;
  gap: 32px;
}

.vm-company-representative__main {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  background: #fff;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
}

.vm-company-representative__image-wrap {
  width: 100%;
}

.vm-company-representative__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  background: #efefef;
}

.vm-company-representative__body {
  min-width: 0;
}

.vm-company-representative__role {
  margin: 0 0 8px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vm-accent, #b000ff);
  font-weight: 700;
}

.vm-company-representative__name {
  margin: 0 0 6px;
  font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
  line-height: 1.2;
}

.vm-company-representative__title {
  margin: 0 0 20px;
  color: #666;
  font-weight: 600;
}

.vm-company-representative__intro {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}

.vm-company-representative__intro p {
  margin: 0;
  color: #555;
}

.vm-company-representative__meta {
  display: grid;
  gap: 0;
  margin: 0;
}

.vm-company-representative__meta-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid #eee;
}

.vm-company-representative__meta-row:first-child {
  border-top: 1px solid #eee;
}

.vm-company-representative__meta-row dt {
  font-weight: 700;
  color: #333;
}

.vm-company-representative__meta-row dd {
  margin: 0;
  color: #555;
}

.vm-company-representative__links {
  background: #fff;
  border-radius: 24px;
  padding: 28px 30px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
}

.vm-company-representative__links-block + .vm-company-representative__links-block {
  margin-top: 24px;
}

.vm-company-representative__subheading {
  margin: 0 0 14px;
  font-size: 1.1rem;
}

.vm-company-representative__linklist {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 10px;
}

.vm-company-representative__linklist li {
  color: #555;
}

.vm-company-representative__linklist a {
  color: #222;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vm-company-representative__linklist a:hover {
  opacity: 0.75;
}

.vm-company-representative__history {
  display: grid;
  gap: 20px;
}

.vm-company-representative__history-head {
  margin-bottom: 0;
}

.vm-company-representative__history-title {
  margin-bottom: 8px;
}

@media (max-width: 960px) {
  .vm-company-representative__main {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .vm-company-representative__image-wrap {
    max-width: 320px;
  }

  .vm-company-representative__meta-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .vm-company-representative__links {
    padding: 24px;
  }
}

@media (max-width: 640px) {
  .vm-company-representative__main {
    gap: 24px;
  }

  .vm-company-representative__image-wrap {
    max-width: 100%;
  }

  .vm-company-representative__links {
    padding: 22px;
  }
}

.vm-company-representative__main {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
}

.vm-company-representative__image-wrap {
  width: 220px;
}

.vm-company-representative__image {
  display: block;
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
  background: #efefef;
}

@media (max-width: 960px) {
  .vm-company-representative__main {
    grid-template-columns: 1fr;
    padding: 24px;
    text-align: center;
  }

  .vm-company-representative__image-wrap {
    width: 220px;
    margin: 0 auto;
  }

  .vm-company-representative__meta-row {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: left;
  }

  .vm-company-representative__links {
    padding: 24px;
  }
}

/* =========================================================
   事業者情報ページ 調整用
   このブロックは company.css の一番下に追記
   ========================================================= */

/* ---------------------------------------------------------
   1) 各セクションの「上余白 / 下余白」
   この数値を小さくすると、各見出し同士の距離が詰まります
   --------------------------------------------------------- */
.vm-company-section {
  /* PC時の上下余白。小さくするとプロフィール/沿革/掲載受賞/事業者情報が詰まる */
  padding: 52px 0;
}

/* ---------------------------------------------------------
   2) 見出し下の余白
   「Profile」「History」などの見出しと本文の距離
   小さくすると本文が上に近づきます
   --------------------------------------------------------- */
.vm-company-section__head {
  margin-bottom: 18px;
}

/* ---------------------------------------------------------
   3) プロフィールセクションだけ、上側をさらに詰めたい時用
   数値を小さくすると「ABOUT/事業者情報」とプロフィールが近づく
   --------------------------------------------------------- */
.vm-company-representative-section {
  padding-top: 28px;
}

/* ---------------------------------------------------------
   4) プロフィール本体の見た目
   画像と本文のカード部分
   --------------------------------------------------------- */
.vm-company-representative__main {
  /* PC時のカード内余白 */
  padding: 28px;

  /* 画像と本文の間隔。小さくすると近づく */
  gap: 28px;

  /* 画像と本文の上下位置。center のままで自然 */
  align-items: center;
}

/* ---------------------------------------------------------
   5) プロフィール本文全体を左寄せ
   これで中央揃えっぽさを消します
   --------------------------------------------------------- */
.vm-company-representative__body {
  text-align: left;
}

/* ---------------------------------------------------------
   6) 「VirtualMoment 代表」
   肩書きの文字サイズや下余白
   --------------------------------------------------------- */
.vm-company-representative__title {
  /* 代表の文字サイズ */
  font-size: 0.98rem;

  /* 名前との距離。小さくすると名前が上に近づく */
  margin: 0 0 10px;

  color: #666;
  font-weight: 600;
}

/* ---------------------------------------------------------
   7) 名前「蜂須 瞬」
   この数値をいじると名前が大きく/小さくなります
   --------------------------------------------------------- */
.vm-company-representative__name {
  /* 名前の下余白。本文を上に近づけたいなら小さくする */
  margin: 0 0 18px;
}

/* ---------------------------------------------------------
   8) プロフィール本文の段落間隔
   小さくすると文章同士が詰まる
   --------------------------------------------------------- */
.vm-company-representative__intro {
  gap: 12px;
  margin-bottom: 0;
}

.vm-company-representative__intro p {
  line-height: 1.9;
}

/* ---------------------------------------------------------
   9) 沿革の年表
   年月と本文の左右バランス
   --------------------------------------------------------- */
.vm-company-history__item {
  /* 左の年月と右の本文の横幅バランス */
  grid-template-columns: 110px 1fr;
}

/* 左側の年月。幅を広げると右本文が少し右に寄る */
.vm-company-history__year {
  white-space: nowrap;
}

/* ---------------------------------------------------------
   10) 掲載・受賞の折りたたみUI
   details / summary を見やすくする
   --------------------------------------------------------- */
.vm-company-achievements {
  width: 100%;
}

.vm-company-achievements__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: #222;
}

.vm-company-achievements__summary::-webkit-details-marker {
  display: none;
}

/* summary の上下余白。大きくするとボタンっぽくなる */
.vm-company-achievements__summary-text {
  font-size: 1rem;
}

.vm-company-achievements__summary-icon {
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.vm-company-achievements[open] .vm-company-achievements__summary-icon {
  transform: rotate(180deg);
}

/* 折りたたみの中身。上の余白 */
.vm-company-achievements .vm-company-representative__linklist {
  margin-top: 16px;
}

/* 最初は3件だけ見せて、開いたら全部表示 */
.vm-company-achievements:not([open]) .vm-company-representative__linklist li:nth-child(n + 4) {
  display: none;
}

/* ---------------------------------------------------------
   11) 事業者情報の行
   SPでも横並びを維持したいので、ここで再指定
   --------------------------------------------------------- */
.vm-company-profile__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: start;
}

.vm-company-profile__label {
  font-weight: 600;
  color: #333;
}

.vm-company-profile__value {
  margin: 0;
  color: #555;
}

/* ---------------------------------------------------------
   12) スマホ用調整
   PCとSPで余白を別々にいじれるように分離
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .vm-company-section {
    /* SP時の上下余白。小さくすると各ブロックが詰まる */
    padding: 36px 0;
  }

  .vm-company-section__head {
    /* SP時の見出し下余白 */
    margin-bottom: 14px;
  }

  .vm-company-representative-section {
    /* SPで「ABOUT/事業者情報」とプロフィールをさらに近づけたい時はここを下げる */
    padding-top: 18px;
  }

  .vm-company-representative__main {
    grid-template-columns: 1fr;
    /* SPカード内余白 */
    padding: 22px;
    gap: 20px;
    text-align: left;
  }

  .vm-company-representative__image-wrap {
    width: 220px;
    margin: 0 auto;
  }

  .vm-company-representative__body {
    text-align: left;
  }

  .vm-company-representative__title {
    margin-bottom: 8px;
  }

  .vm-company-representative__name {
    margin-bottom: 14px;
  }

  .vm-company-history__item {
    /* SPでも年月と本文を横並びのまま維持 */
    grid-template-columns: 92px 1fr;

    /* 項目内の余白 */
    padding: 12px 14px;
    gap: 12px;
  }

  .vm-company-profile {
    /* 事業者情報カード全体の内側余白 */
    padding: 22px 18px;
  }

  .vm-company-profile__row {
    /* SPでも「項目名 | 値」を横並び維持 */
    grid-template-columns: 108px 1fr;

    /* 項目名と値の距離 */
    gap: 10px;
  }

  .vm-company-profile__label {
    /* SPの左列ラベルの文字サイズ。小さくしたいならここ */
    font-size: 0.92rem;
  }

  .vm-company-profile__value {
    /* SPの右列値の文字サイズ。小さくしたいならここ */
    font-size: 0.92rem;
  }
}
/* =========================================================
   事業者情報ページ 微調整
   company.css の一番下に追記
   ========================================================= */

/* ---------------------------------------------------------
   A. 全体の文字サイズを少し小さくする
   ここを小さくすると、本文・沿革・事業者情報が全体的に少し締まる
   --------------------------------------------------------- */
.vm-company {
  /* 全体基準の文字サイズ。通常は 0.94rem〜1rem くらいで調整 */
  font-size: 0.95rem;
}

/* ---------------------------------------------------------
   B. 各セクションの上下余白
   数値を小さくすると、プロフィール/沿革/掲載受賞/事業者情報の間が詰まる
   --------------------------------------------------------- */
.vm-company-section {
  /* PC時の上下余白 */
  padding: 48px 0;
}

/* 見出しとその下の本文カードの距離 */
.vm-company-section__head {
  margin-bottom: 16px;
}

/* 「ABOUT/事業者情報」とプロフィールの距離だけさらに詰めたい時 */
.vm-company-representative-section {
  /* 小さくするとプロフィール全体が少し上に上がる */
  padding-top: 24px;
}

/* ---------------------------------------------------------
   C. プロフィールの2カラム
   左に写真、右に肩書き・名前・本文
   --------------------------------------------------------- */
.vm-company-representative__main {
  /* 左を少し広め、右を本文領域にする */
  grid-template-columns: minmax(220px, 38%) minmax(0, 1fr);

  /* 画像と本文の間の距離。小さくすると近づく */
  gap: 24px;

  /* カード内余白 */
  padding: 26px;

  /* 上揃えにすると、写真が左上寄りになりやすい */
  align-items: start;
}

/* 写真枠。左に寄せたいので auto margin を消す */
.vm-company-representative__image-wrap {
  width: 220px;
  margin: 0;
}

/* プロフィール本文は左寄せ */
.vm-company-representative__body {
  text-align: left;
  min-width: 0;
}

/* 「VirtualMoment 代表」
   数値を上げると肩書きが大きくなる */
.vm-company-representative__title {
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: #666;
  font-weight: 600;
}

/* 名前「蜂須 瞬」
   margin-bottom を小さくすると、下の本文が近づく */
.vm-company-representative__name {
  margin: 0 0 14px;
}

/* 本文の段落間隔。小さくすると段落同士が詰まる */
.vm-company-representative__intro {
  gap: 10px;
  margin-bottom: 0;
}

/* プロフィール本文そのものの文字サイズ
   小さくしたい時は 0.92rem 〜 0.96rem あたりで調整 */
.vm-company-representative__intro p {
  font-size: 0.95rem;
  line-height: 1.85;
}

/* ---------------------------------------------------------
   D. 沿革の見た目
   左の年月列を薄紫にして、表っぽさを少し出す
   --------------------------------------------------------- */
.vm-company-history__item {
  /* 左：年月 / 右：説明 の幅バランス */
  grid-template-columns: 110px 1fr;

  /* カード内余白 */
  padding: 12px 14px;
  gap: 14px;
}

/* 年月セル
   背景色を変えるとアクセントが付く */
.vm-company-history__year {
  background: #f4ecfb; /* 薄い紫 */
  border: 1px solid #eadcf7;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
  font-size: 0.92rem;
}

/* 沿革本文の文字サイズ */
.vm-company-history__desc {
  font-size: 0.94rem;
}

/* ---------------------------------------------------------
   E. 掲載・受賞
   最初の3件は常時表示、残りは「詳しく見る」で展開
   --------------------------------------------------------- */

/* 最初の3件リスト */
.vm-company-achievements__list--visible {
  margin-bottom: 10px;
}

/* 「詳しく見る」ボタン */
.vm-company-achievements__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: #7f35b2;
  font-weight: 700;
  font-size: 0.92rem;
  user-select: none;
}

.vm-company-achievements__summary::-webkit-details-marker {
  display: none;
}

/* ボタンっぽく見せる */
.vm-company-achievements__summary-text {
  background: #f4ecfb;          /* 薄紫 */
  border: 1px solid #e4d3f4;
  border-radius: 999px;
  padding: 8px 12px;
}

/* 下矢印 */
.vm-company-achievements__summary-icon {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

/* 開いた時に矢印を回転 */
.vm-company-achievements[open] .vm-company-achievements__summary-icon {
  transform: rotate(180deg);
}

/* 詳細側リスト */
.vm-company-achievements .vm-company-representative__linklist {
  margin-top: 12px;
}

/* 掲載・受賞の文字サイズを少し小さく */
.vm-company-representative__linklist li,
.vm-company-representative__linklist a {
  font-size: 0.93rem;
}

/* ---------------------------------------------------------
   F. 事業者情報を「表」に寄せる
   左の項目名セルだけ薄紫、右は白
   --------------------------------------------------------- */
.vm-company-profile {
  padding: 0;        /* テーブル感を出すため内側余白を外す */
  overflow: hidden;  /* 角丸を保つ */
}

/* 1行ごとの表現 */
.vm-company-profile__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid #eadcf7;
}

/* 左セル：項目名 */
.vm-company-profile__label {
  background: #f4ecfb;         /* 薄紫 */
  color: #5d347d;
  font-weight: 700;
  padding: 14px 16px;
  border-right: 1px solid #eadcf7;
  font-size: 0.92rem;
}

/* 右セル：値 */
.vm-company-profile__value {
  background: #fff;
  color: #555;
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.75;
}

/* ---------------------------------------------------------
   G. スマホ用
   PCとSPで余白・サイズを別々に調整しやすくする
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .vm-company {
    /* スマホ全体の文字サイズ */
    font-size: 0.92rem;
  }

  .vm-company-section {
    /* スマホの各セクション上下余白 */
    padding: 34px 0;
  }

  .vm-company-section__head {
    /* スマホで見出しと本文の距離 */
    margin-bottom: 12px;
  }

  .vm-company-representative-section {
    /* スマホでプロフィール全体を上に寄せる */
    padding-top: 14px;
  }

  .vm-company-representative__main {
    /* スマホでは1カラム。ただし本文は左寄せのまま */
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
    text-align: left;
  }

  .vm-company-representative__image-wrap {
    /* スマホで写真を左寄せ気味に見せたい時は margin を 0 に */
    width: 180px;
    margin: 0;
  }

  .vm-company-representative__image {
    width: 180px;
    height: 180px;
  }

  .vm-company-representative__title {
    font-size: 0.92rem;
    margin-bottom: 6px;
  }

  .vm-company-representative__name {
    margin-bottom: 12px;
  }

  .vm-company-representative__intro p {
    font-size: 0.92rem;
  }

  .vm-company-history__item {
    /* スマホでも年月と本文を横並び維持 */
    grid-template-columns: 88px 1fr;
    gap: 10px;
    padding: 10px 12px;
  }

  .vm-company-history__year {
    font-size: 0.86rem;
    padding: 7px 8px;
  }

  .vm-company-history__desc {
    font-size: 0.9rem;
  }

  .vm-company-representative__linklist li,
  .vm-company-representative__linklist a {
    font-size: 0.9rem;
  }

  .vm-company-profile__row {
    /* スマホでも「項目名 | 値」を横並び維持 */
    grid-template-columns: 100px 1fr;
  }

  .vm-company-profile__label {
    font-size: 0.86rem;
    padding: 12px 10px;
  }

  .vm-company-profile__value {
    font-size: 0.88rem;
    padding: 12px 10px;
  }
}
/* =========================================================
   事業者情報ページ 追加調整
   company.css の一番下に追記
   ========================================================= */

/* ---------------------------------------------------------
   1) 全体の文字サイズ
   数値を小さくすると、本文・沿革・表の文字が全体的に小さくなる
   --------------------------------------------------------- */
.vm-company {
  font-size: 0.94rem;
}

/* ---------------------------------------------------------
   2) プロフィール本体
   左に写真、右に肩書き・名前・本文を置く
   --------------------------------------------------------- */
.vm-company-representative__main {
  /* 左列=写真 / 右列=本文
     左の 180px を小さくすると写真が小さくなる */
  grid-template-columns: 180px 1fr;

  /* 写真と本文の間隔
     小さくすると近づく */
  gap: 22px;

  /* カード内余白
     小さくすると全体が締まる */
  padding: 24px;

  /* 上揃え */
  align-items: start;
}

/* 写真枠サイズ
   ここを小さくすると写真が小さくなる */
.vm-company-representative__image-wrap {
  width: 180px;
  margin: 0;
}

/* 写真サイズ
   width / height を同時に変えると正円のまま大きさ変更できる */
.vm-company-representative__image {
  width: 180px;
  height: 180px;
}

/* 本文エリアは左寄せ固定 */
.vm-company-representative__body {
  text-align: left;
  min-width: 0;
}

/* 肩書き「VirtualMoment 代表」
   font-size を上げると大きくなる */
.vm-company-representative__title {
  font-size: 0.92rem;
  margin: 0 0 6px;
  color: #58657a;
  font-weight: 600;
}

/* 名前「蜂須 瞬」
   margin-bottom を小さくすると本文が近づく */
.vm-company-representative__name {
  margin: 0 0 12px;
}

/* プロフィール本文
   font-size を小さくすると本文だけ小さくなる */
.vm-company-representative__intro p {
  font-size: 0.93rem;
  line-height: 1.82;
}

/* ---------------------------------------------------------
   3) 沿革
   紫背景をやめて、すっきりしたグレー系に戻す
   --------------------------------------------------------- */
.vm-company-history__item {
  grid-template-columns: 108px 1fr;
  gap: 14px;
  padding: 12px 14px;
}

.vm-company-history__year {
  background: #f3f6fa;      /* 背景色。グレー寄りの青 */
  border: 1px solid #dde6f0;
  color: #405066;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
  font-size: 0.9rem;
}

.vm-company-history__desc {
  font-size: 0.92rem;
}

/* ---------------------------------------------------------
   4) 掲載・受賞
   最初の3件はそのまま表示、ボタンは青系に
   --------------------------------------------------------- */
.vm-company-achievements__list--visible {
  margin-bottom: 10px;
}

.vm-company-representative__linklist li,
.vm-company-representative__linklist a {
  font-size: 0.92rem;
}

/* 詳しく見る / 閉じる ボタン
   background を変えるとボタン色が変わる */
.vm-company-achievements__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 14px;
  border: 1px solid #cfe0f2;
  border-radius: 999px;
  background: #eef6ff;  /* ボタン背景色 */
  color: #2f6fa8;       /* ボタン文字色 */
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vm-company-achievements__toggle:hover {
  opacity: 0.85;
}

.vm-company-achievements__toggle-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}

/* JSで open クラスが付いた時に矢印を回す */
.vm-company-achievements__toggle.is-open .vm-company-achievements__toggle-icon {
  transform: rotate(180deg);
}

/* 非表示領域の上余白 */
.vm-company-achievements__more {
  margin-top: 2px;
}

/* ---------------------------------------------------------
   5) 事業者情報テーブル
   左セルを青灰色系に変更して、紫の野暮ったさを消す
   --------------------------------------------------------- */
.vm-company-profile {
  padding: 0;
  overflow: hidden;
}

.vm-company-profile__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid #dde6f0;
}

/* 左セルの背景色
   background を変えると雰囲気が変わる */
.vm-company-profile__label {
  background: #f1f6fb;   /* 薄い青グレー */
  color: #496077;
  border-right: 1px solid #dde6f0;
  padding: 14px 16px;
  font-size: 0.9rem;
  font-weight: 700;
}

/* 右セル
   font-size を変えると値側だけ大きさ変更できる */
.vm-company-profile__value {
  background: #fff;
  color: #555;
  padding: 14px 16px;
  font-size: 0.9rem;
  line-height: 1.72;
}

/* ---------------------------------------------------------
   6) スマホ用
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .vm-company {
    font-size: 0.91rem;
  }

  .vm-company-representative__main {
    /* スマホでも写真を上、本文を下ではなく、
       ここは1カラムにするが本文は左寄せ維持 */
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }

  .vm-company-representative__image-wrap {
    /* スマホ写真サイズ */
    width: 150px;
    margin: 0;
  }

  .vm-company-representative__image {
    width: 150px;
    height: 150px;
  }

  .vm-company-representative__title {
    font-size: 0.9rem;
  }

  .vm-company-representative__intro p {
    font-size: 0.9rem;
  }

  .vm-company-history__item {
    grid-template-columns: 84px 1fr;
    gap: 10px;
    padding: 10px 12px;
  }

  .vm-company-history__year {
    font-size: 0.84rem;
    padding: 7px 8px;
  }

  .vm-company-history__desc {
    font-size: 0.88rem;
  }

  .vm-company-profile__row {
    /* スマホでも横並び維持 */
    grid-template-columns: 100px 1fr;
  }

  .vm-company-profile__label {
    font-size: 0.84rem;
    padding: 12px 10px;
  }

  .vm-company-profile__value {
    font-size: 0.86rem;
    padding: 12px 10px;
  }
}
/* =========================================================
   事業者情報ページ 追加調整
   company.css の一番下に追記
   ========================================================= */

/* ---------------------------------------------------------
   1) プロフィール本体
   PCでもSPでも「写真左 / 右に肩書き・名前・本文」に寄せる
   --------------------------------------------------------- */
.vm-company-representative__main {
  /* 左の写真幅 / 右の本文幅
     左の 160px を小さくすると写真がさらに小さくなる */
  grid-template-columns: 160px 1fr;

  /* 写真と本文の距離 */
  gap: 20px;

  /* カード内余白 */
  padding: 22px;

  /* 写真と本文を上揃え */
  align-items: start;
}

/* 写真枠サイズ
   width を変えると写真の大きさが変わる */
.vm-company-representative__image-wrap {
  width: 160px;
  margin: 0;
}

/* 実際の写真サイズ
   width / height を同じ値で変えると正円のまま拡大縮小できる */
.vm-company-representative__image {
  width: 160px;
  height: 160px;
}

/* 本文側は左寄せ固定 */
.vm-company-representative__body {
  text-align: left;
  min-width: 0;
}

/* 肩書き「VirtualMoment 代表」 */
.vm-company-representative__title {
  font-size: 0.92rem;
  margin: 0 0 6px;
  color: #5c6778;
  font-weight: 600;
}

/* 名前 */
.vm-company-representative__name {
  margin: 0 0 12px;
}

/* 本文サイズ */
.vm-company-representative__intro p {
  font-size: 0.92rem;
  line-height: 1.8;
}

/* ---------------------------------------------------------
   2) 沿革の年月セル
   紫をやめて、すっきりした青グレー系にする
   --------------------------------------------------------- */
.vm-company-history__year {
  background: #f3f6fa;
  border: 1px solid #dbe5ef;
  color: #42546b;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  white-space: nowrap;
  font-size: 0.88rem;
}

.vm-company-history__desc {
  font-size: 0.9rem;
}

/* ---------------------------------------------------------
   3) 掲載・受賞ボタン
   サービスページの「詳しく見る」ボタン風に寄せる
   元ネタ:
   .vm-service-card__button
   --------------------------------------------------------- */
.vm-company-achievements__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;

  /* ボタンサイズ */
  min-width: 180px;
  padding: 13px 20px;

  border: 0;
  border-radius: 999px;

  /* サービスページ風グラデーション */
  background: linear-gradient(135deg, #8200ff 0%, #de00ff 100%);
  color: #fff;

  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 14px 28px rgba(130, 0, 255, 0.22);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.vm-company-achievements__toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(130, 0, 255, 0.28);
  opacity: 0.96;
}

/* ボタン内の矢印 */
.vm-company-achievements__toggle-icon {
  display: inline-flex;
  font-size: 0.95em;
  transition: transform 0.2s ease;
}

/* 開いた時に矢印を上向きっぽく見せる */
.vm-company-achievements__toggle.is-open .vm-company-achievements__toggle-icon {
  transform: rotate(-180deg);
}

/* リンク一覧の文字サイズ */
.vm-company-representative__linklist li,
.vm-company-representative__linklist a {
  font-size: 0.92rem;
}

/* ---------------------------------------------------------
   4) 事業者情報テーブル
   紫系をやめて青グレー系にする
   --------------------------------------------------------- */
.vm-company-profile__row {
  border-bottom: 1px solid #dbe5ef;
}

.vm-company-profile__label {
  background: #f2f7fb;
  color: #4e637b;
  border-right: 1px solid #dbe5ef;
  padding: 14px 16px;
  font-size: 0.89rem;
  font-weight: 700;
}

.vm-company-profile__value {
  background: #fff;
  color: #555;
  padding: 14px 16px;
  font-size: 0.89rem;
  line-height: 1.72;
}

/* ---------------------------------------------------------
   5) スマホ
   スマホでも「写真左 / 右に肩書き・名前」を維持する
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .vm-company-representative__main {
    /* スマホでも2カラムを維持 */
    grid-template-columns: 120px 1fr;

    /* 写真と本文の距離 */
    gap: 14px;

    /* カード内余白 */
    padding: 18px;
  }

  .vm-company-representative__image-wrap {
    width: 120px;
    margin: 0;
  }

  .vm-company-representative__image {
    width: 120px;
    height: 120px;
  }

  .vm-company-representative__title {
    font-size: 0.88rem;
    margin-bottom: 4px;
  }

  .vm-company-representative__name {
    margin-bottom: 10px;
  }

  .vm-company-representative__intro p {
    font-size: 0.88rem;
  }

  .vm-company-achievements__toggle {
    width: 100%;
    min-width: 0;
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  .vm-company-profile__row {
    grid-template-columns: 96px 1fr;
  }

  .vm-company-profile__label {
    font-size: 0.82rem;
    padding: 12px 10px;
  }

  .vm-company-profile__value {
    font-size: 0.85rem;
    padding: 12px 10px;
  }
}
/* =========================================================
   プロフィールレイアウト最終調整
   上段：左に写真 / 右に肩書き・名前
   下段：文章を全幅
   company.css の一番下に追記
   ========================================================= */

/* プロフィール全体を1カラムにして、
   上段と下段を分けやすくする */
.vm-company-representative__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

/* 上段だけを2カラムにする
   左=写真、右=肩書きと名前 */
.vm-company-representative__head {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
}

/* 写真サイズ
   この width を変えると写真が大きく/小さくなる */
.vm-company-representative__image-wrap {
  width: 150px;
  margin: 0;
}

.vm-company-representative__image {
  width: 150px;
  height: 150px;
}

/* 右側の肩書き・名前ブロック
   中央寄りに見せたいので縦方向中央に寄せる */
.vm-company-representative__heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* 肩書き */
.vm-company-representative__title {
  margin: 0 0 6px;
}

/* 名前 */
.vm-company-representative__name {
  margin: 0;
}

/* 下段の文章は全幅 */
.vm-company-representative__intro {
  display: grid;
  gap: 10px;
  margin: 0;
}

.vm-company-representative__intro p {
  margin: 0;
}

/* アチーブメントのボタンは矢印なし前提 */
.vm-company-achievements__toggle {
  gap: 0;
}

/* 万一HTMLに残っていても非表示にする */
.vm-company-achievements__toggle-icon {
  display: none !important;
}

/* スマホでも「写真左 / 右に肩書き・名前」を維持 */
@media (max-width: 768px) {
  .vm-company-representative__head {
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: center;
  }

  .vm-company-representative__image-wrap {
    width: 110px;
  }

  .vm-company-representative__image {
    width: 110px;
    height: 110px;
  }
}