@charset "UTF-8";
/* 事例詳細（article.css と併用）: 理由カード ol.caseReason / お客様の声 .caseQa（.-img で右に画像）/ 担当コンサルタント .caseCons / 関連事例 .caseRelated（top.css の .topCase と同じ見た目） */
.article { padding-bottom: calc(154 / var(--screen-w) * 100vw); }

/* ===== 選んでいただいた理由 ===== */
.articleTtl + .caseReason { margin-top: calc(35 / var(--screen-w) * 100vw); }
.caseReason { counter-reset: reason; }
.caseReason li { position: relative; padding: calc(37 / var(--screen-w) * 100vw) calc(35 / var(--screen-w) * 100vw) calc(34 / var(--screen-w) * 100vw) calc(151 / var(--screen-w) * 100vw); border: 2px solid #d2d2d2; border-radius: calc(9 / var(--screen-w) * 100vw); counter-increment: reason; }
.caseReason li + li { margin-top: calc(12 / var(--screen-w) * 100vw); }
.caseReason li::before { content: counter(reason, decimal-leading-zero); position: absolute; top: calc(29 / var(--screen-w) * 100vw); left: calc(43 / var(--screen-w) * 100vw); color: var(--btn); font-family: var(--en); font-size: calc(54 / var(--fs-w) * 100vw); line-height: 1.2; }
.caseReason h3 { color: #323232; font-size: calc(24 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.caseReason p { margin-top: calc(12 / var(--screen-w) * 100vw); font-size: calc(16 / var(--fs-w) * 100vw); line-height: 2.31; }

/* ===== お客様の声 ===== */
.articleTtl + .caseQa { margin-top: calc(79 / var(--screen-w) * 100vw); }
.caseQa + .caseQa { margin-top: calc(53 / var(--screen-w) * 100vw); }
.caseQa.-img { display: grid; grid-template-columns: 1fr calc(307 / var(--screen-w) * 100vw); column-gap: calc(44 / var(--screen-w) * 100vw); align-items: start; }
.caseQa-q { color: var(--btn); font-size: calc(18 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.caseQa h3 { margin-top: calc(27 / var(--screen-w) * 100vw); color: #323232; font-size: calc(24 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.caseQa-txt > p:not(.caseQa-q) { margin-top: calc(8 / var(--screen-w) * 100vw); font-size: calc(16 / var(--fs-w) * 100vw); line-height: 2.31; }
.caseQa-img { aspect-ratio: 307 / 200; overflow: hidden; }
.caseQa-img img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 担当コンサルタント ===== */
.articleSec.caseVoiceSec { margin-top: calc(48 / var(--screen-w) * 100vw); }
.caseVoiceSec + .articleSec { margin-top: calc(61 / var(--screen-w) * 100vw); }
.articleTtl + .caseCons { margin-top: calc(53 / var(--screen-w) * 100vw); }
.caseCons { position: relative; padding: calc(23 / var(--screen-w) * 100vw) calc(42 / var(--screen-w) * 100vw) calc(48 / var(--screen-w) * 100vw) calc(32 / var(--screen-w) * 100vw); border: 2px solid #d2d2d2; border-radius: calc(9 / var(--screen-w) * 100vw); }
.caseCons-role { margin-left: calc(6 / var(--screen-w) * 100vw); font-size: calc(15 / var(--fs-w) * 100vw); line-height: 1.5; }
.caseCons-name { margin: calc(12 / var(--screen-w) * 100vw) 0 0 calc(9 / var(--screen-w) * 100vw); font-size: calc(34 / var(--fs-w) * 100vw); line-height: 1.5; }
.caseCons-name span { margin-left: calc(18 / var(--screen-w) * 100vw); color: var(--btn); font-family: var(--en); font-size: calc(14 / var(--fs-w) * 100vw); vertical-align: calc(4 / var(--screen-w) * 100vw); }
.caseCons-body { display: grid; grid-template-columns: calc(261 / var(--screen-w) * 100vw) 1fr; column-gap: calc(55 / var(--screen-w) * 100vw); align-items: start; margin-top: calc(32 / var(--screen-w) * 100vw); }
.caseCons-img img { width: 100%; aspect-ratio: 261 / 332; object-fit: cover; }
.caseCons-comment h3 { color: #808080; font-size: calc(14 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.caseCons-comment h3 span { margin-right: calc(8 / var(--screen-w) * 100vw); color: var(--btn); font-family: var(--en); font-size: calc(24 / var(--fs-w) * 100vw); font-weight: 400; line-height: 1.2; }
.caseCons-comment p { margin-top: calc(18 / var(--screen-w) * 100vw); font-size: calc(16 / var(--fs-w) * 100vw); line-height: 2.31; }
.caseCons-more { position: absolute; right: 0; bottom: 0; min-width: calc(361 / var(--screen-w) * 100vw); padding: calc(14 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw); border-radius: calc(14 / var(--screen-w) * 100vw) 0 calc(7 / var(--screen-w) * 100vw) 0; background: var(--btnD); color: #fff; font-size: calc(16 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }

/* ===== 関連事例（top.css .topCase と同じ見た目） ===== */
.caseRelated { width: calc(1274 / var(--screen-w) * 100vw); margin: calc(211 / var(--screen-w) * 100vw) 0 0 calc(-137 / var(--screen-w) * 100vw); }
.caseRelated-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(17 / var(--screen-w) * 100vw); }
.caseRelated figure { position: relative; }
.caseRelated figure img { width: 100%; height: calc(251 / var(--screen-w) * 100vw); object-fit: cover; border-radius: calc(5 / var(--screen-w) * 100vw); }
.caseRelated figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(231.7 / var(--screen-w) * 100vw); border-radius: 0 0 calc(5 / var(--screen-w) * 100vw) calc(5 / var(--screen-w) * 100vw); background: linear-gradient(to top, rgba(0, 59, 119, .82) 5.77%, rgba(113, 143, 173, .41) 32.9%, rgba(226, 226, 226, 0) 60%); }
.caseRelated .tagList { margin-top: calc(23 / var(--screen-w) * 100vw); }
.caseRelated h3 { margin-top: calc(20 / var(--screen-w) * 100vw); font-size: calc(22 / var(--fs-w) * 100vw); font-weight: 400; line-height: 1.5; }
.caseRelated-list p { margin-top: calc(20 / var(--screen-w) * 100vw); color: #5d5d5d; font-size: calc(14 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.3; }
.caseRelated + .articleBack { margin-top: calc(89 / var(--screen-w) * 100vw); }

/* ===== SP ===== */
@media (max-width: 900px) {
  .article { padding-bottom: calc(80 / var(--screen-w) * 100vw); }
  .articleTtl + .caseReason { margin-top: calc(16 / var(--screen-w) * 100vw); }
  .caseReason li { padding: calc(18 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(18 / var(--screen-w) * 100vw) calc(64 / var(--screen-w) * 100vw); border-width: 1px; }
  .caseReason li + li { margin-top: calc(10 / var(--screen-w) * 100vw); }
  .caseReason li::before { top: calc(14 / var(--screen-w) * 100vw); left: calc(16 / var(--screen-w) * 100vw); font-size: calc(30 / var(--fs-w) * 100vw); }
  .caseReason h3 { font-size: calc(17 / var(--fs-w) * 100vw); }
  .caseReason p { margin-top: calc(6 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); line-height: 1.9; }
  .articleTtl + .caseQa { margin-top: calc(24 / var(--screen-w) * 100vw); }
  .caseQa + .caseQa { margin-top: calc(32 / var(--screen-w) * 100vw); }
  .caseQa.-img { display: block; }
  .caseQa-q { font-size: calc(15 / var(--fs-w) * 100vw); }
  .caseQa h3 { margin-top: calc(10 / var(--screen-w) * 100vw); font-size: calc(18 / var(--fs-w) * 100vw); }
  .caseQa-txt > p:not(.caseQa-q) { margin-top: calc(6 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); line-height: 2; }
  .caseQa-img { margin-top: calc(16 / var(--screen-w) * 100vw); }
  .articleSec.caseVoiceSec, .caseVoiceSec + .articleSec { margin-top: calc(32 / var(--screen-w) * 100vw); }
  .articleTtl + .caseCons { margin-top: calc(16 / var(--screen-w) * 100vw); }
  .caseCons { padding: calc(18 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(70 / var(--screen-w) * 100vw); border-width: 1px; }
  .caseCons-role { margin: 0; font-size: calc(13 / var(--fs-w) * 100vw); }
  .caseCons-name { margin: calc(4 / var(--screen-w) * 100vw) 0 0; font-size: calc(24 / var(--fs-w) * 100vw); }
  .caseCons-name span { margin-left: calc(12 / var(--screen-w) * 100vw); font-size: calc(13 / var(--fs-w) * 100vw); vertical-align: calc(2 / var(--screen-w) * 100vw); }
  .caseCons-body { grid-template-columns: 1fr; row-gap: calc(18 / var(--screen-w) * 100vw); margin-top: calc(14 / var(--screen-w) * 100vw); }
  .caseCons-img { width: calc(160 / var(--screen-w) * 100vw); }
  .caseCons-comment h3 { font-size: calc(12 / var(--fs-w) * 100vw); }
  .caseCons-comment h3 span { font-size: calc(20 / var(--fs-w) * 100vw); }
  .caseCons-comment p { margin-top: calc(8 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); line-height: 2; }
  .caseCons-more { min-width: 0; padding: calc(12 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw); border-radius: calc(10 / var(--screen-w) * 100vw) 0 calc(7 / var(--screen-w) * 100vw) 0; font-size: calc(14 / var(--fs-w) * 100vw); }
  .caseRelated { width: auto; margin: calc(56 / var(--screen-w) * 100vw) 0 0; }
  .caseRelated-list { column-gap: calc(12 / var(--screen-w) * 100vw); }
  .caseRelated figure img { height: auto; aspect-ratio: 413 / 251; }
  .caseRelated figure::after { height: 92%; }
  .caseRelated .tagList { margin-top: calc(12 / var(--screen-w) * 100vw); gap: calc(4 / var(--screen-w) * 100vw); }
  .caseRelated .tagList li { font-size: calc(12 / var(--fs-w) * 100vw); }
  .caseRelated h3 { margin-top: calc(8 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); }
  .caseRelated-list p { margin-top: calc(6 / var(--screen-w) * 100vw); font-size: calc(12 / var(--fs-w) * 100vw); line-height: 1.5; }
  .caseRelated + .articleBack { margin-top: calc(56 / var(--screen-w) * 100vw); }
}
@media (max-width: 600px) {
  .caseRelated-list { grid-template-columns: 1fr; row-gap: calc(28 / var(--screen-w) * 100vw); }
  .caseRelated h3 { font-size: calc(16 / var(--fs-w) * 100vw); }
}