@charset "UTF-8";

/* ==========================================================================
   導入実績・導入事例カード
   TOP（index.html）と 制作実績一覧（works.html）の両方で使うため、
   ページ固有CSSではなくコンポーネントとして切り出している。
   ========================================================================== */

.works__logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 36px;
}@media (min-width: 768px) {
  .works__logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
  }
}/* 0923修正：白い枠をやめ、ロゴをむき出しで並べる（ロゴを大きく見せるため） */
.works__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 8px;
}@media (min-width: 768px) {
  .works__logo { height: 96px; }
}.works__logo img {
  width: auto;
  max-width: 100%;
  max-height: 62px;
  object-fit: contain;
}

/* 縦長のロゴ（ACTIVIS・fisc）は枠いっぱいまで使う */
.works__logo--tall img { max-height: 100%; }.works__case {
  margin-top: 28px;
}@media (min-width: 768px) {
  .works__case { margin-top: 36px; }
}.case-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}.case-card__tag-item {
  padding: 6px 14px;
  border-radius: 999px;
  background: #f2f8fd;
  font-size: 11px;
  font-weight: 700;
  color: #1786b8;
}@media (min-width: 900px) {
  .works__case { overflow: visible; }

  .case-card__visual {
    overflow: visible;
    border-radius: 24px 0 0 24px;
    align-items: flex-end;
  }

  .case-card__img {
    position: relative;
    z-index: 2;
    height: 540px;
    margin-left: -46px;
    margin-bottom: -26px;
    filter: drop-shadow(0 26px 42px rgba(30, 70, 150, 0.28));
  }

  .case-card__tag { z-index: 3; }
}@media (min-width: 768px) {
  .metric { padding: 24px 26px 22px; }

  .metric__value { font-size: 58px; }

  .metric__unit { font-size: 20px; }

  

  
}@media (min-width: 900px) {
  /* 事例カードのキャラは絶対配置で上下左に突き抜けさせる */
  .case-card__visual {
    position: relative;
    min-height: 560px;
    justify-content: flex-start;
  }

  .case-card__img {
    position: absolute;
    left: -54px;
    bottom: -34px;
    z-index: 2;
    height: 690px;
    margin: 0;
    filter: drop-shadow(0 30px 48px rgba(30, 70, 150, 0.30));
  }

  /* ステップの文言が2行で割れないよう詰める */
  
  
  
}.case-card__tag {
  position: static;
  display: inline-block;
  margin-bottom: 16px;
}@media (min-width: 768px) {
  .case-card__tag { margin-bottom: 18px; }
}.works {
  background: linear-gradient(180deg, #ffffff 0%, #f0f7fd 42%, #e9f2fb 100%);
}.works__case {
  background: linear-gradient(115deg, #eaf4fd 0%, #ffffff 46%, #ffffff 100%);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 56px rgba(40, 90, 160, 0.14);
}@media (min-width: 900px) {
  /* キャラ側の面を斜めに切って動きを出す */
  .case-card__visual {
    flex-basis: 380px;
    background: linear-gradient(160deg, #dceffb 0%, #ece4fb 55%, #fbe7f2 100%);
    clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
  }

  /* キャラはさらに外へ */
  .case-card__img {
    left: -76px;
    bottom: -38px;
    height: 700px;
  }

  .case-card__body { padding: 44px 48px 40px; }
}.metric {
  background: #ffffff;
  border: 1px solid #e6eef8;
  box-shadow: 0 6px 18px rgba(40, 90, 160, 0.06);
}@media (min-width: 768px) {
  .metric { padding: 22px 26px 20px; }

  .metric__value {
    font-size: 76px;
    letter-spacing: -0.02em;
  }

  .metric__unit { font-size: 24px; }
}@media (min-width: 1200px) {
  .metric__value { font-size: 84px; }
}.voice {
  background: rgba(255, 255, 255, 0.7);
  border-color: #e8eff7;
}@media (min-width: 768px) {
  .voice__text { font-size: 12.5px; line-height: 1.95; }
}.case-card__tags {
  justify-content: flex-end;
}.case-card__tag-item {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dfeaf6;
}@media (min-width: 900px) {
  .case-card__visual {
    background: none;
    clip-path: none;
    overflow: visible;
  }

  /* 斜めに切った色面を背面に敷く */
  .case-card__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 24px 0 0 24px;
    background: linear-gradient(160deg, #dceffb 0%, #ece4fb 55%, #fbe7f2 100%);
    clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
  }

  /* キャラは色面より前、カードの外へ自由にはみ出す */
  .case-card__img {
    z-index: 2;
    left: -86px;
  }
}@media (max-width: 767px) {

  /* ---- FV ---- */
  /* PC用の <br> は狭い画面で不自然な位置に割れるため、自然改行に任せる */
  

  

  

  /* ボタンは全幅で押しやすく */
  
  

  /* キャラを配信ウィンドウの上へ出す */
  

  /* ウィンドウと重なるので消す（スクロールできることは自明） */
  

  /* ミュートはタイトルバーの右端へ */
  

  

  /* ---- 実績バンド：3つを横に並べる ---- */
  

  

  

  
  
  

  

  /* ---- プロデュースVTuber ---- */
  /* 見出しと「すべて見る」は縦に積む */
  

  /* カードを大きく、キャラを枠の上へ */
  

  

  

  

  

  

  /* ---- 解決策 ---- */
  

  /* ---- 導入事例 ---- */
  /* キャラをカードの上へ少し出す */
  .case-card__visual { overflow: visible; }

  .case-card__img {
    position: relative;
    z-index: 2;
    height: 330px;
    margin-top: -34px;
  }

  .works__case { overflow: visible; }

  /* 署名の「様」だけが次行に落ちないように */
  .voice__name {
    text-align: left;
    line-height: 1.8;
  }

  /* ハッシュタグは左寄せに戻す */
  .case-card__tags { justify-content: flex-start; }
}


/* ---- 事例カード：ラベル2つ・デフォルメキャラ・名前ロゴ（2026-09 追加） ---- */
.case-card__body { position: relative; }

.case-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding-right: 84px;
}

.case-card__labels .case-card__tag { margin-bottom: 0; }

/* 右上のデフォルメキャラ */
.case-card__chibi {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 80px;
  height: auto;
  pointer-events: none;
}

@media (min-width: 768px) {
  .case-card__labels { padding-right: 170px; margin-bottom: 18px; }
  .case-card__chibi { top: 18px; right: 30px; width: 160px; }
}

/* 1003修正：デフォルメの代わりに社員の集合写真を置く（元画像が小さいので大きくは出さない） */
.case-card__photo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 16px; /* 1007修正：SPは名前ロゴと揃えて中央寄せ */
  border: 4px solid #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(30, 60, 120, 0.16);
}

@media (min-width: 768px) {
  .case-card__photo {
    position: absolute;
    top: 18px;
    right: 30px;
    width: 200px;
    margin-bottom: 0;
  }

  .case-card__photo ~ .case-card__labels { padding-right: 220px; }
}

/* 1007修正：SPは写真に合わせてラベルと見出しも中央寄せ */
@media (max-width: 767px) {
  .case-card__photo ~ .case-card__labels {
    justify-content: center;
    padding-right: 0;
  }

  .case-card__photo ~ .case-card__title { text-align: center; }
}

/* キャラの足元に名前ロゴ */
.case-card__visual { position: relative; }

/* 0923修正：SPでは左寄せだと収まりが悪いため中央に置く（PCは従来どおり左へ逃がす） */
.case-card__logo {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 3;
  width: 72%;
  max-width: 300px;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 12px rgba(30, 60, 120, 0.2));
}

@media (min-width: 900px) {
  .case-card__logo { left: -20px; bottom: 18px; width: 340px; max-width: none; transform: none; }
}


/* ---- 行政・教育機関での実績（TOP／制作実績一覧で共用） ---- */
.trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 36px;
}@media (min-width: 768px) {
  .trust__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 44px;
  }
}.trust__badges {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 36px;
}@media (min-width: 768px) {
  .trust__badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 44px;
  }
}

/* 1007修正：あわら市を追加して4つ横並び（タブレットは2×2） */
@media (min-width: 900px) {
  .trust__badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 1003修正：公式キャラ2体はロゴ帯の下に別の行として中央寄せで並べる */
/* 背景棒がキャラの右へ張り出すので、SPは右に余白を取って画面からはみ出さないようにする */
.trust__charas {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin-top: 24px;
  padding-right: 24px;
}

@media (min-width: 768px) {
  .trust__charas { gap: 72px; margin-top: 28px; padding-right: 0; }
}

.trust__charas + .trust__grid { margin-top: 36px; }

@media (min-width: 768px) {
  .trust__charas + .trust__grid { margin-top: 48px; }
}

/* 0923修正：ロゴ帯をカードの上段に置いたときの間隔 */
.trust__badges + .trust__grid { margin-top: 28px; }

@media (min-width: 768px) {
  .trust__badges + .trust__grid { margin-top: 36px; }
}