@charset "utf-8";
/* =========================================================
   おじどうさん 導入事例ページ専用CSS
   /ojidosan/common/css/case.css

   ・DiSCUS /discus/common/css/style.css から事例関連ルールを抽出
   ・配色を おじどうさんレッド系(#df1f3d) に差し替え
   ・全ルールを body#case 配下にスコープ（$type = "case" 時のみ適用）
   ========================================================= */


/* ---------------------------------------------------------
   カラー変数
   --------------------------------------------------------- */
:root {
  --case-key:       #df1f3d; /* キーカラー（旧 #009de1） */
  --case-key-hover: #ffe1e1; /* ホバー背景（旧 #d1f1ff） */
  --case-key-bg:    #fff5f5; /* 淡い背景（旧 #ebf4fa） */
  --case-gray-bg:   #f8f8f8;
  --case-gray-line: #eeeeee;
  --case-card-line: #eeeeee; /* 事例カードを囲む薄い線。濃さはここだけ変えれば全カードに反映 */
  --case-logo-h: 200px;      /* 会社概要のロゴパネルの最低高さ */
  --case-logo-ratio: 1 / 1;  /* ヘッダーのロゴ台紙の縦横比。ロゴの比率によらずこの形で固定される */
  --case-fig-w:     420px; /* インタビュー写真の幅。ここだけ変えれば全箇所に反映 */
  --case-fig-deco:  #ececec; /* 写真の背面に敷く飾りの四角 */
  --case-fig-gap:   40px;    /* 飾りの四角のずらし量 */
}


/* ---------------------------------------------------------
   汎用ユーティリティ（DiSCUS側に無く補完したもの）
   --------------------------------------------------------- */
#case .mb60 { margin-bottom: 60px; }
#case .mb40 { margin-bottom: 40px; }
#case .mb20 { margin-bottom: 20px; }

#case .taC { text-align: center; }
#case .taR { text-align: right; }
#case .taL { text-align: left; }

#case .header-image { display: block; }


/* ---------------------------------------------------------
   事例詳細：ヘッダーエリア
   --------------------------------------------------------- */
#case .case-header-box {
  background-color: var(--case-gray-bg);
  margin-bottom: 30px;
}

#case .case-header-box .header-image {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 15px;
}

#case .case-header-box .header-image img {
  width: 100%;
  margin: 0 auto;
}

#case .case-main-box {
  display: block;
  background-color: var(--case-gray-bg);
  margin: 0 auto;
  height: auto;
}

#case .case-main-box div {
  display: flex;
}

/* ロゴ台紙。会社概要のパネルと同じ作りで、横幅いっぱいの白い台紙の中に
   ロゴを contain で中央配置する。aspect-ratio で台紙の形を固定しているので、
   ロゴが正方形でも横長でも台紙の大きさと位置は変わらない */
#case .case-main-box .logo-box {
  margin-top: -100px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start; /* 親の flex に引き伸ばされると aspect-ratio が無効になるため */
  flex: none;
  width: 25%;
  aspect-ratio: var(--case-logo-ratio);
  margin-right: 5.5%;
  padding: 20px;
  background: #fff;
  position: relative;
  box-sizing: border-box;
}

#case .case-main-box .logo-box img {
  vertical-align: bottom;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#case .case-main-box .lead-box {
  font-size: 1.6rem;
  line-height: 3.0rem;
  font-weight: bold;
  color: var(--case-key);
  padding: 40px;
  display: block;
  width: 69.5%;
  margin-right: 0;
  position: relative;
}

#case .c-container {
  max-width: 1180px;
  margin: 0 auto 60px;
  padding: 0 15px;
}


/* ---------------------------------------------------------
   事例詳細：導入目的・課題・効果ボックス
   --------------------------------------------------------- */
#case .case-box,
#case .company-box {
  display: flex;
  width: 100%;
  margin: 0 auto;
}

#case .case-box ul,
#case .case-box dl {
  margin-bottom: 0;
}

#case .case-box dd {
  border-left: 7px solid var(--case-key);
  padding: 0 20px;
  margin-bottom: 40px;
}

/* 「・」はHTML側に <span class="dot"> として入れている */
#case .case-box ul.dotList {
  display: block;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* 「・」とテキストを横並びにして、折り返し行を頭揃えにする */
#case .case-box ul.dotList li {
  display: flex;
  align-items: flex-start;
  padding-left: 0;
  text-indent: 0;
  margin-bottom: .4em;
}

#case .case-box ul.dotList li .dot {
  flex: none;
  width: 1.2em;
}

#case .case-box ul.dotList li .txt {
  flex: 1;
  min-width: 0;
}

#case .case-box ul.dotList li:last-child {
  margin-bottom: 0;
}

#case .case-body h3 {
  font-weight: bold;
  font-size: 2.0rem;
  color: var(--case-key);
  letter-spacing: .15em;
  margin-bottom: 1em;
  line-height: 1.4;
  text-align: left;
}


/* ---------------------------------------------------------
   事例詳細：インタビュー2カラム
   --------------------------------------------------------- */
/* インタビュー：写真を float させ、写真の高さを超えた本文は
   自動で横幅いっぱいに回り込む（KnowledgeSuite事例ページと同方式）
   ・写真サイズは --case-fig-w で一括変更できる
   ・左右幅は 1180px 固定。画面を広げても端に張り付かない */
#case .case-wrap,
#case .case-wrap2 {
  width: 100%;
  margin-bottom: 60px;
}

#case .case-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 15px;
}

#case .case-inner::after {
  content: "";
  display: block;
  clear: both;
}

#case .case-fig {
  width: var(--case-fig-w);
  position: relative;
}

/* 写真の背面に灰色の四角を敷いてずらす（写真自体の位置は動かさない） */
#case .case-fig::before {
  content: "";
  position: absolute;
  top: var(--case-fig-gap);
  width: 100%;
  height: 100%;
  background: var(--case-fig-deco);
  z-index: 0;
}

/* 写真が左 → 四角は左下 */
#case .case-wrap2 .case-fig::before {
  left: calc(var(--case-fig-gap) * -1);
}

/* 写真が右 → 四角は右下 */
#case .case-wrap .case-fig::before {
  right: calc(var(--case-fig-gap) * -1);
}

#case .case-fig img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* case-wrap  … 写真が右 */
#case .case-wrap .case-fig {
  float: right;
  margin: 0 0 70px 40px;
}

/* case-wrap2 … 写真が左 */
#case .case-wrap2 .case-fig {
  float: left;
  margin: 0 40px 70px 0;
}

#case .case-body .answer {
  margin: 20px 0;
}

#case .c-hr {
  width: 100%;
  max-width: 1180px;
  margin: 35px auto;
  border: none;
  border-top: 1px solid var(--case-gray-line);
}

#case .c-inner {
  max-width: none;
}

#case .c-inner.mod-990 {
  max-width: 990px;
  margin: 0 auto;
}

#case .c-section {
  margin-top: 70px;
}


/* ---------------------------------------------------------
   事例詳細：会社概要エリア
   --------------------------------------------------------- */
/* グレー地は画面幅いっぱい、中身だけ 1180px に収める */
#case .case-wrap.company-box {
  max-width: none;
  width: 100%;
  margin: 0;
}

#case .company-box {
  background-color: var(--case-gray-line);
}

/* インタビュー部を float 化した際に .case-wrap ul の flex を外したため、
   会社概要ブロックだけ 2カラムを個別に復活させている
   （幅は指定せず、元どおり画像の実サイズに任せる） */
/* グレー地の内側。ここで幅と上下余白を持つ */
#case .company-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 50px 15px;
  box-sizing: border-box;
}

/* ロゴと概要の2カラム。高さを揃える */
#case .company-box ul {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ロゴ左端を本文カラム（1180px）の左端に揃えるため padding-left は 0 */
/* 白パネル。絶対配置にして li.left いっぱいに広げる。
   こうするとパネルの高さが右の表だけで決まり、
   正方形ロゴでもパネルだけ背が高くなることがない */
#case .company-box .logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

/* 白い台紙は img 自体。高さ（＝右の表の高さ）を一辺とする正方形にすることで、
   ロゴの上下左右の余白が同じ 20px になる */
#case .company-box .logo img {
  height: 100%;
  width: auto;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  padding: 20px;
  background: #fff;
  object-fit: contain;
  box-sizing: border-box;
}

#case .company-box li.left {
  flex: none;
  width: 300px;
  display: flex;
  position: relative;
  min-height: var(--case-logo-h);
}

#case .company-box li.right {
  flex: 1;
  min-width: 0;
  padding-left: 50px;
}

#case .company-box .text {
  display: block;
  height: auto;
}

#case .company-box .text p {
  display: table-cell;
  vertical-align: middle;
}

/* 全幅の見出し。会社名が長くても折り返して対応 */
#case .company-title {
  margin: 0 0 25px;
  font-size: 2.0rem;
  font-weight: bold;
  color: var(--case-key);
  letter-spacing: .1em;
  line-height: 1.5;
  text-align: left;
}

#case .company-box1,
#case .company-box2 {
  display: inline;
}

#case .created {
  font-size: 1.3rem;
  color: #888;
  margin-top: 20px;
}

#case .mini {
  font-size: 75%;
}


/* ---------------------------------------------------------
   事例一覧ページ
   --------------------------------------------------------- */
#case .case_index {
  padding: 60px;
  background: #fff;
  margin: 30px -60px;
}

#case .case_index_bg {
  padding-bottom: 60px;
}

#case .case_index .fig {
  padding: 0 20px 0 0;
  width: 40%;
}

#case .case_index .fig img {
  border-radius: 8px;
}

#case .case_index h2 {
  color: var(--case-key);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.4;
  margin-bottom: 1.0em;
}

#case .case_index h2 a {
  color: var(--case-key);
}

#case .case_index p {
  margin-bottom: 1.0em;
}

#case .c-hover {
  transition: opacity .3s;
}

#case .c-hover:hover {
  opacity: .8;
}


/* ---------------------------------------------------------
   PC / SP 出し分け
   ※ .view-pc / .view-sp は /ojidosan/common/css/style.css に定義済み
   ※ .c-pc / .c-sp は未定義のため、ここで補完
   --------------------------------------------------------- */
#case .c-pc,
#case .view-pc { display: none; }
#case .c-sp,
#case .view-sp { display: block; }

@media screen and (min-width: 768px) {
  #case .c-pc,
  #case .view-pc { display: block; }
  #case .c-sp,
  #case .view-sp { display: none; }
}


/* ---------------------------------------------------------
   SP調整
   --------------------------------------------------------- */
@media screen and (max-width: 767px) {

  #case .case-main-box div {
    display: block;
  }

  /* SPではロゴ台紙を画像に重ねず、画像の下に中央配置する */
  #case .case-main-box .logo-box {
    margin: 20px auto 0;
    width: 60%;
  }

  #case .case-main-box .lead-box {
    font-size: 1.4rem;
    line-height: 2.4rem;
    padding: 20px;
    width: 100%;
  }

  #case .c-container {
    padding: 0 20px;
    margin-bottom: 40px;
  }

  #case .case-box,
  #case .company-box {
    display: block;
  }

  #case .case-box dd {
    border-left-width: 5px;
    padding: 0 15px;
    margin-bottom: 30px;
  }

  #case .case-body h3 {
    font-size: 1.8rem;
  }

  #case .case-wrap,
  #case .case-wrap2 {
    width: 100%;
    margin-bottom: 40px;
  }

  #case .case-inner {
    padding: 0 20px;
  }

  /* SPでは回り込みを解除して縦積み。四角は画面外に出ないよう内側へ */
  #case .case-wrap .case-fig,
  #case .case-wrap2 .case-fig {
    float: none;
    width: 100%;
    margin: 0 0 30px;
  }

  #case .case-fig::before {
    top: 10px;
  }

  #case .case-wrap2 .case-fig::before {
    left: 0;
  }

  #case .case-wrap .case-fig::before {
    right: 0;
  }

  #case .company-inner {
    padding: 30px 20px;
  }

  #case .company-box ul {
    display: block;
  }

  #case .company-box li.left {
    width: 100%;
    display: block;
    min-height: 0;
    margin-bottom: 20px;
  }

  #case .company-box li.right {
    padding-left: 0;
  }

  #case .company-box .logo {
    position: static;
    inset: auto;
    justify-content: center;
  }

  #case .company-box .logo img {
    width: 200px;
    height: 200px;
    max-width: 100%;
  }

  #case .company-title {
    margin: 0 0 18px;
    font-size: 1.7rem;
  }

  #case .company-box .logo img {
    max-width: 200px;
  }

  #case .company-box .text {
    padding: 0;
  }

  #case .case_index {
    padding: 20px;
    margin: 20px 0;
  }

  #case .case_index .fig {
    padding: 0 0 15px;
    width: 100%;
  }

  #case .case_index h2 {
    font-size: 1.8rem;
  }

  #case .mb60 { margin-bottom: 40px; }
}


/* ---------------------------------------------------------
   ページ下部：他の導入事例カードリスト
   /ojidosan/inc/footer_case.php が出力
   ※ DiSCUS は owl-carousel(JS) だが、件数が少ないため
     JS不要のグリッド表示に置き換えている
   --------------------------------------------------------- */
#case .c-case-card-ttl {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  color: #252525;
  letter-spacing: .1em;
  margin-bottom: 10px;
}

#case .c-case-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 15px;
}

#case .c-case-card-item {
  display: flex;
  width: calc(33.333% - 24px);
  margin: 24px 12px 0;
  padding: 0;
  background: #fff;
}

#case .c-case-card-link {
  color: #1d2a4d;
  display: block;
  text-decoration: none;
  width: 100%;
  border: 1px solid #e6d5d8;
  box-sizing: border-box;
  transition: .3s;
}

#case .c-case-card-item a:hover {
  background: var(--case-key-hover);
}

#case .c-case-index-pic {
  border-bottom: 1px solid var(--case-gray-line);
}

#case .c-case-index-pic img {
  display: block;
  width: 100%;
}

#case .c-case-index-body {
  padding: 25px;
}

#case .c-case-index-ttl {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 10px;
}

#case .c-case-index-name {
  font-size: 1.4rem;
  color: #666;
}

#case .c-case-card-btn {
  text-align: center;
  margin-top: 50px;
}

@media screen and (max-width: 767px) {

  #case .c-case-card-ttl {
    font-size: 1.8rem;
  }

  #case .c-case-card {
    display: block;
    padding: 0 20px;
  }

  #case .c-case-card-item {
    width: 100%;
    margin: 20px 0 0;
  }

  #case .c-case-index-body {
    padding: 15px;
  }

  #case .c-case-card-btn {
    margin-top: 30px;
  }
}

/* ---------------------------------------------------------
   事例資料ダウンロード誘導（詳細ページ下部）
   ※ ボタンはヘッダー右上と同じ .btn-outline.gradient-red を流用
   --------------------------------------------------------- */
#case #c-case-download {
  padding: 60px 0;
  text-align: center;
}

#case #c-case-card + #c-case-download {
  padding-top: 40px;
}

#case .c-case-dl-ttl {
  font-size: 2.0rem;
  font-weight: bold;
  color: #252525;
  letter-spacing: .1em;
  line-height: 1.6;
  margin-bottom: 25px;
}

#case .c-case-dl-list {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

#case .c-case-dl-list .btn-outline {
  min-width: 320px;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
}

#case .c-case-dl-list .btn-outline a {
  display: block;
  padding: 16px 20px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}

#case .c-case-dl-list .btn-outline a:hover {
  color: #fff;
  text-decoration: none;
  opacity: .8;
}

@media screen and (max-width: 767px) {

  #case #c-case-download {
    padding: 40px 20px;
  }

  #case .c-case-dl-ttl {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }

  #case .c-case-dl-list .btn-outline {
    min-width: 0;
    width: 100%;
  }

  #case .c-case-dl-list .btn-outline a {
    padding: 14px 15px;
    font-size: 1.5rem;
  }
}


/* =========================================================
   事例一覧ページ（DiSCUS /discus/common/css/style.css 準拠）
   数値はDiSCUSそのまま、配色のみレッド系に置換
   ========================================================= */

/* --- セクション見出し（DiSCUS の #case h3 と同一） --- */
#case #c-case > .contents > .inner > h3,
#case #c-case-card .c-inner > h3 {
  color: var(--case-key);
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: 0.5em;
  margin-bottom: 20px;
  text-align: center;
  padding: 0;
}

/* --- 新着事例：薄ピンク地に白カード --- */
#case #c-case {
  padding-top: 100px;
  background: var(--case-key-bg);
}

#case #c-case .case_index_bg {
  padding-bottom: 60px;
}

#case #c-case .case_index {
  padding: 60px;
  background: #fff;
  margin: 30px -60px;
}

#case #c-case .case_index .fig {
  padding: 0 20px 0 0;
  width: 40%;
}

#case #c-case .case_index .fig img {
  border-radius: 8px;
}

#case #c-case .case_index h2 {
  color: var(--case-key);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.4;
  margin-bottom: 1.0em;
}

#case #c-case .case_index h2 a {
  color: var(--case-key);
  text-decoration: none;
}

#case #c-case .case_index h2 a:hover {
  text-decoration: none;
}

#case #c-case .case_index .fig a {
  text-decoration: none;
}

#case #c-case .case_index p {
  margin-bottom: 1.0em;
}

/* テキスト側の各要素の上下マージンを統一する
   間隔を変えたい場合はこの1行だけ差し替える */
:root {
  --case-index-gap: 20px;
}

#case #c-case .case_index ul > li:last-child > * {
  margin-top: 0 !important;
  margin-bottom: var(--case-index-gap) !important;
}

#case #c-case .case_index ul > li:last-child > *:last-child {
  margin-bottom: 0 !important;
}

#case #c-case .case_index hr {
  height: 0;
  border: none;
  border-top: 1px solid #ddd;
}

/* 会社名（タイトル直下の1つ目の p） */
#case #c-case .case_index h2 + p {
  font-size: 1.8rem;
  font-weight: bold;
  color: #252525;
  line-height: 1.5;
}

/* --- 事例一覧：背景白 --- */
#case #c-case-card {
  padding: 100px 0;
  background: #fff;
}

#case #c-case-card .c-case-index {
  display: block;
  height: 100%;
}

#case #c-case-card .c-case-card-item {
  background: #fff;
  border: 1px solid var(--case-card-line);
  box-sizing: border-box;
}

/* ロゴ枠。高さを固定し、中でロゴを縮小して中央に置く
   高さを変えたい場合は --case-card-logo-h の1行だけ差し替える
   （スライダー側と共通） */
:root {
  --case-card-logo-h: 180px;
}

#case #c-case-card .c-case-index-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--case-card-logo-h);
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid var(--case-gray-line);
}

#case #c-case-card .c-case-index-pic img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#case #c-case-card .c-case-index-body {
  padding: 25px;
}

#case #c-case-card .c-case-card-item a:hover {
  background: var(--case-key-hover);
}

#case #c-case-card .c-case-index-ttl {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 12px;
  color: #252525;
  text-align: left;
  letter-spacing: 0;
}

#case #c-case-card .c-case-index-name {
  font-size: 1.4rem;
}


@media screen and (max-width: 767px) {

  #case #c-case > .contents > .inner > h3,
  #case #c-case-card .c-inner > h3 {
    font-size: 2.2rem;
    letter-spacing: .3em;
  }

  #case #c-case {
    padding-top: 40px;
  }

  #case #c-case .case_index {
    padding: 20px;
    margin: 20px 0;
  }

  #case #c-case .case_index .fig {
    padding: 0 0 15px;
    width: 100%;
  }

  #case #c-case .case_index h2 {
    font-size: 1.8rem;
  }

  #case #c-case .case_index h2 + p {
    font-size: 1.6rem;
  }

  #case #c-case-card {
    padding: 50px 0;
  }

  #case #c-case-card .c-case-index-pic,
  #case #case-carousel .c-case-index-pic {
    height: 140px;
    padding: 10px;
  }

  #case #c-case-card .c-case-index-ttl,
  #case #case-carousel .c-case-index-ttl {
    font-size: 1.5rem;
  }
}

/* ---------------------------------------------------------
   ページヘッド（DiSCUS /discus/common/css/style.css 準拠）
   数値はDiSCUSそのまま
   --------------------------------------------------------- */
@media screen and (min-width: 768px) {

  /* 赤帯の高さ。数値を変えれば下の余白が増減する */
  #case #pageHead {
    height: 440px;
  }

  /* 右のPC画像を about ページと同じサイズ・位置に
     （既定は max-width:680px / right:-40px。about は下記で上書きしている） */
  #case #pageHead .fig {
    max-width: 718px;
    right: 0;
  }

  /* テキストの縦位置は padding-top の数値で調整する。
     赤帯 440px に対しテキスト塊が約 160px なので 140px でほぼ中央。
     上下位置を動かしたい場合はこの数値だけ変える */
  #case #pageHead .copy {
    padding-top: 140px;
    max-width: 540px;
  }

  /* h1「導入事例」と h2「CASE STUDY」を横並びに */
  #case #pageHead .copy h1,
  #case #pageHead .copy h2 {
    display: inline-block;
    vertical-align: baseline;
    margin-bottom: 3.0rem;
  }

  #case #pageHead .copy h1 {
    line-height: 1;
    font-size: 4.2rem;
    font-weight: 500;
    margin-right: 2rem;
  }

  #case #pageHead .copy h2 {
    line-height: 1;
    font-size: 2.0rem;
    font-weight: 500;
    letter-spacing: 0.15em;
  }
}

@media screen and (max-width: 767px) {

  #case #pageHead .copy h1,
  #case #pageHead .copy h2 {
    display: inline-block;
    vertical-align: baseline;
    margin-bottom: 1.5rem;
  }

  #case #pageHead .copy h1 {
    line-height: 1.2;
    font-size: 2.8rem;
    font-weight: 500;
    margin-right: 1rem;
  }

  #case #pageHead .copy h2 {
    line-height: 1.2;
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.15em;
  }
}


/* =========================================================
   導入事例ダウンロードページ（サンクスページ）
   /ojidosan/case/ePjAzvYnRZRY/
   ========================================================= */
#case #caseDownloadBody {
  padding: 80px 0 100px;
  background: var(--case-key-bg);
}

#case .list-case {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* カード本体 */
#case .list-case .c-case-card-item {
  display: block;
  width: calc(33.333% - 24px);
  margin: 24px 12px 0;
  padding: 25px;
  background: #fff;
  border: 1px solid #e6d5d8;
  border-radius: 6px;
  box-sizing: border-box;
}

/* 1件だけのときは中央、2件目以降は左から並ぶ */
#case .list-case .c-case-card-item:only-child {
  margin-left: auto;
  margin-right: auto;
}

#case .list-case .c-case-card-item h3 {
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.4;
  color: #252525;
  text-align: center;
  letter-spacing: 0;
  margin: 0 0 15px;
  padding: 0;
}

#case .list-case figure {
  margin: 0 0 20px;
}

#case .list-case figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--case-gray-line);
}

#case .list-case figure a {
  display: block;
  transition: opacity .3s;
}

#case .list-case figure a:hover {
  opacity: .8;
}

/* ダウンロードボタン
   ※ 共通CSSの .bBtn が上下60pxの余白を持つため打ち消している */
#case .list-case .bBtn {
  text-align: center;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

#case .list-case .btn-c {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 7px 30px 7px 20px !important;
  position: relative;
  background: var(--case-key);
  border-radius: 4px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: .3s;
}

#case .list-case .btn-c:hover {
  color: #fff;
  text-decoration: none;
  opacity: .8;
}

#case .list-case .btn-c::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

#case .list-case .taC {
  font-size: 1.2rem;
  color: #888;
  text-align: center;
  margin: 0;
}

@media screen and (max-width: 767px) {

  #case #caseDownloadBody {
    padding: 45px 0 50px;
  }

  #case .list-case {
    display: block;
    padding: 0 20px;
  }

  #case .list-case .c-case-card-item {
    width: 100%;
    margin: 20px 0 0;
    padding: 20px;
  }

  #case .list-case .c-case-card-item h3 {
    font-size: 1.8rem;
  }
}


/* ---------------------------------------------------------
   サンクスページの pageHead
   （画像なし・薄ピンク背景・中央揃え）
   --------------------------------------------------------- */
#case #pageHead.dl {
  background: var(--case-key-bg) !important;
  background-color: var(--case-key-bg) !important;
  color: inherit !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 100px 0 10px !important;
}

#case #pageHead.dl .contents,
#case #pageHead.dl .inner {
  display: block !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  float: none !important;
  position: static !important;
  text-align: center !important;
}

/* flex で子要素を確実に中央寄せ（幅計算に依存しない） */
#case #pageHead.dl .copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: static !important;
  text-align: center !important;
}

#case #pageHead.dl .copy h1 {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  color: var(--case-key) !important;
  font-size: 3.2rem !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
  letter-spacing: .1em !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: center !important;
}

#case #pageHead.dl .copy p {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  color: #333 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

/* 直下のダウンロード一覧と背景が連続するので上余白を詰める */
#case #pageHead.dl + #caseDownloadBody {
  padding-top: 20px;
}

@media screen and (max-width: 767px) {

  #case #pageHead.dl {
    padding: 40px 0 30px !important;
  }

  #case #pageHead.dl .contents,
  #case #pageHead.dl .inner,
  #case #pageHead.dl .copy {
    padding: 0 20px !important;
  }

  #case #pageHead.dl .copy h1 {
    font-size: 2.2rem !important;
    margin-bottom: 15px !important;
  }
}


/* ---------------------------------------------------------
   外部リンクアイコン
   ※ DiSCUS は incircle-common.css で定義しているが
     おじどうさんでは読み込まないため、ここで再現
   --------------------------------------------------------- */
#case .c-link {
  color: #252525;
  text-decoration: underline;
  transition: opacity .3s;
}

#case .c-link:hover {
  opacity: .7;
}

#case .c-icon-blank::after {
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-left: .4em;
  vertical-align: -.05em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 9.6v3.6a1 1 0 0 1-1 1H2.8a1 1 0 0 1-1-1V3.8a1 1 0 0 1 1-1h3.6'/%3E%3Cpath d='M9.8 2.2h4v4'/%3E%3Cpath d='M13.8 2.2 7.4 8.6'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 9.6v3.6a1 1 0 0 1-1 1H2.8a1 1 0 0 1-1-1V3.8a1 1 0 0 1 1-1h3.6'/%3E%3Cpath d='M9.8 2.2h4v4'/%3E%3Cpath d='M13.8 2.2 7.4 8.6'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}


/* ---------------------------------------------------------
   事例一覧：業種タグ
   --------------------------------------------------------- */
/* タグの色を変えたい場合はこの1行だけ差し替える
   例）ネイビー #23304D ／ ダークグレー #4A4A4A */
:root {
  --case-tag-bg: #333333;
}

#case .case-tag {
  display: flex;
  flex-direction: row;      /* 横並び */
  flex-wrap: wrap;
  justify-content: flex-start;  /* 中央揃えにしたい場合は center */
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0 0 1.0em;
  padding: 0;
  width: 100%;
}

#case .case-tag li {
  display: inline-block;
  flex: 0 0 auto;           /* 文字数ぶんの幅。伸縮させない */
  width: auto;
  padding: 6px 22px;        /* 左右のゆとり */
  background: var(--case-tag-bg);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: .05em;
  text-align: center;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {

  #case .case-tag {
    gap: 8px;
    margin-bottom: .8em;
  }

  #case .case-tag li {
    padding: 5px 16px;
    font-size: 1.3rem;
  }
}


/* ---------------------------------------------------------
   会社概要：スペック表
   --------------------------------------------------------- */
#case .company-spec {
  margin: 0;
  padding: 0;
  border-top: 1px solid #ddd;
}

#case .company-spec .row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #ddd;
}

#case .company-spec dt {
  flex: 0 0 auto;
  width: 130px;
  padding: 14px 16px;
  background: #f3f3f3;
  color: #555;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.6;
}

#case .company-spec dd {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 14px 20px;
  color: #252525;
  font-size: 1.4rem;
  line-height: 1.6;
  word-break: break-all;
}

#case .company-spec dd a {
  word-break: break-all;
}

@media screen and (max-width: 767px) {

  #case .company-spec dt {
    width: 100px;
    padding: 10px 12px;
    font-size: 1.3rem;
  }

  #case .company-spec dd {
    padding: 10px 14px;
    font-size: 1.3rem;
  }
}


/* ---------------------------------------------------------
   事例スライダー（slick）
   カードの見た目は一覧ページの #c-case-card と統一。
   slick 本体CSSはCDNから読み込むため複製不要
   --------------------------------------------------------- */
#case #case-carousel {
  padding: 70px 0 0;
}

#case #case-carousel .c-case-card-ttl {
  margin-bottom: 40px;
}

#case #case-carousel .slider {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- カード外枠（一覧グリッドと同じ） --- */
#case #case-carousel .slider .slick-slide {
  width: 343px;
  height: auto;
  margin: 0 12px;
  position: relative;
  background: #fff;
  border: 1px solid var(--case-card-line);
  box-sizing: border-box;
}

#case #case-carousel .c-case-card-link {
  color: #1d2a4d;
  display: block;
  text-decoration: none;
  width: 100%;
  border: none;
  box-sizing: border-box;
  transition: .3s;
}

#case #case-carousel .slider .slick-slide a:hover,
#case #case-carousel .c-case-card-item a:hover {
  background: var(--case-key-hover);
}

#case #case-carousel .c-case-index {
  display: block;
  height: 100%;
}

/* --- ロゴ枠（一覧グリッドと共通） --- */
#case #case-carousel .c-case-index-pic {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--case-card-logo-h);
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid var(--case-gray-line);
}

#case #case-carousel .c-case-index-pic img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- テキスト（一覧グリッドと同じ） --- */
#case #case-carousel .c-case-index-body {
  padding: 25px;
}

#case #case-carousel .c-case-index-ttl {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 12px;
  color: #252525;
  text-align: left;
  letter-spacing: 0;
}

#case #case-carousel .c-case-index-name {
  font-size: 1.4rem;
}

/* --- 矢印・ドット --- */
#case #case-carousel .slider .slick-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 0;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  z-index: 1;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

#case #case-carousel .slider .slick-arrow::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  border: 1px solid #09000d;
  border-width: 3px 3px 0 0;
  position: absolute;
  top: 9px;
  transform: rotate(45deg);
}

#case #case-carousel .slider .slick-next {
  right: -20px;
}

#case #case-carousel .slider .slick-prev {
  left: -40px;
}

#case #case-carousel .slider .slick-next::before {
  left: 9px;
}

#case #case-carousel .slider .slick-prev::before {
  border-width: 0 0 3px 3px;
  right: 9px;
}

#case #case-carousel .dots-2 .slick-dots {
  text-align: center;
}

#case #case-carousel .dots-2 .slick-dots li {
  display: inline-block;
}

#case #case-carousel .dots-2 .slick-dots button {
  display: block;
  width: 10px;
  height: 10px;
  margin: 6px;
  font-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
  background: #bcbcbc;
  border-radius: 50%;
}

#case #case-carousel .dots-2 .slick-dots .slick-active button {
  background: var(--case-key);
}

/* --- 件数が少なくスライダー化しない場合のグリッド表示 --- */
#case #case-carousel .c-case-card {
  margin: 0 auto;
  padding: 0;
}

#case #case-carousel .c-case-card-item {
  margin-top: 0;
  background: #fff;
  border: 1px solid var(--case-card-line);
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {

  #case #case-carousel {
    padding: 45px 0 0;
  }

  #case #case-carousel .slider .slick-slide {
    width: 280px;
    margin: 0 8px;
  }

  #case #case-carousel .c-case-index-body {
    padding: 15px;
  }

  #case #case-carousel .slider .slick-prev {
    left: 0;
  }

  #case #case-carousel .slider .slick-next {
    right: 0;
  }
}

/* =========================================================
   事例タイトルのメインコピー／サブコピー分割
   .case-ttl-main … メインコピー
   .case-ttl-sub  … サブコピー（1段小さくして下に置く）
   新着事例（#c-case）・事例一覧（#c-case-card）・
   スライダー（#case-carousel）で共通のマークアップ
   ========================================================= */

#case .case-ttl-main,
#case .case-ttl-sub {
  display: block;
}

/* サブコピーは新着事例・カードともにキーカラー */
#case .case-ttl-sub {
  color: var(--case-key);
}

/* --- 新着事例 --- */
#case #c-case .case_index h2 a {
  display: block;
}

#case #c-case .case_index h2 .case-ttl-sub {
  margin-top: 0.4em;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
}

/* --- 事例一覧・スライダーのカード --- */
#case #c-case-card .c-case-index-ttl .case-ttl-sub,
#case #case-carousel .c-case-index-ttl .case-ttl-sub {
  margin-top: 0.3em;
  font-size: 1.35rem;
  font-weight: normal;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {

  #case #c-case .case_index h2 .case-ttl-sub {
    font-size: 1.5rem;
  }

  #case #c-case-card .c-case-index-ttl .case-ttl-sub,
  #case #case-carousel .c-case-index-ttl .case-ttl-sub {
    font-size: 1.3rem;
  }
}

/* =========================================================
   新着事例カードのレイアウト調整とカード全体リンク
   ========================================================= */

/* カード枠の左右を .inner（max-width:1180px）に揃える。
   従来の margin:30px -60px による左右の食い出しを解除し、
   ページ内の他の要素と同じ左右マージンにする */
#case #c-case .case_index {
  margin: 30px 0;
  position: relative; /* カード全体リンクの位置基準 */
}

/* テキスト列を右端まで使う。
   写真が40%＋列間の余白があるため 58% ＋ flex-grow で残りを吸収し、
   カード内の左右パディング（60px）が揃うようにする。
   ※ .case-tag の li に当たらないよう、直下の ul に限定すること */
#case #c-case .case_index > ul > li:last-child {
  width: 58%;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}

/* --- カード全体をリンクにする ---
   .case_index-link をカード全面に敷く。position:absolute なので
   レイアウトには影響しない */
#case #c-case .case_index-link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  opacity: 0;
  transition: opacity .3s;
}

/* ホバー時はカード全体が白く沈む。
   強さを変えたい場合は opacity の数値だけ差し替える
   （従来の .c-hover は opacity:.8＝白20%相当） */
#case #c-case .case_index-link:hover {
  opacity: .35;
}

/* 白カードの四隅を写真と同じ 8px で丸める。
   ホバー用のリンクにも同じ値を当てないと、角だけ白く残る */
#case #c-case .case_index,
#case #c-case .case_index-link {
  border-radius: 8px;
}

@media screen and (max-width: 767px) {

  #case #c-case .case_index > ul > li:last-child {
    width: 100%;
  }
}