/* =========================================================
   導入事例 詳細ページ共通
   （case-sagamino.html / case-fcsagami.html）
   デザイン・フォント・画像の使い方は
   hitachi-solutions.co.jp/okta/case06/ を実CSSから実測して再現。
   実測値: コンテナ995(左右15) / フォント "Hitachi Sans","Noto Sans JP"
   → Noto Sans JP で再現 / 見出し帯は S-passoブルー var(--blue) に変更（指示）
   （参考サイトは #bb000b）/ 強調・リンク #c00
   / 見出し下線 #899ab6 / 課題#8998B5 効果#DF946A
   / 課題地#F2F5FA 効果地#FFF2DF / 矢印#DB0835
   / アンカーアイコン #0068B7 / 関連事例カード #dce3ed
   ※参考ページの「概要図」ブロックは指示により不採用。
   ========================================================= */
.cs-body{background:#fff;}
.cs{background:#fff;color:#333;
  font-family:"Noto Sans JP","Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:16px;line-height:1.7142857143;font-weight:400;letter-spacing:0;
  padding-top:clamp(80px,9.5vw,110px);padding-bottom:2.5rem;}
.cs__wrap{width:100%;max-width:995px;margin-inline:auto;padding-inline:.9375rem;}
.cs a{color:#c00;text-decoration:underline;}
.cs a:hover{text-decoration:none;}
.cs p{margin:0 0 1em;}

/* ---- パンくず ---- */
.cs-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;
  font-size:.8125rem;color:#333;line-height:1.7;padding:.4rem 0 1rem;}
.cs-crumb a{color:#333;text-decoration:underline;}
.cs-crumb a:hover{color:#c00;}
.cs-crumb span{color:#333;text-decoration:none;}
.cs-crumb em{font-style:normal;color:#333;}

/* ---- ページタイトル（赤帯＋グレー帯） ---- */
.cs-head{margin-bottom:1.5625rem;}
.cs-head h1{margin:0;font-size:1rem;line-height:1.6;}
.cs-head__title{display:block;background:var(--blue);color:#fff;font-weight:600;
  font-size:1rem;padding:.5em 1em;}
.cs-head__name{display:block;background:#f6f6f6;color:#333;font-weight:600;
  font-size:1.5rem;padding:.6em 1em;}

/* ---- セクション ---- */
.cs-sec{margin-bottom:2.5rem;}

/* ---- キャッチ ---- */
.cs-catch{font-size:1.8rem;font-weight:400;line-height:1.6;margin-bottom:1em;color:#333;}
.cs-catch span{color:#c00;}
.cs-catch sup{font-size:.6em;vertical-align:super;}

/* ---- リード ---- */
.cs-lead{margin-bottom:1.2em;line-height:1.7142857143;font-size:1rem;}
.cs-lead sup{font-size:.68em;vertical-align:super;}
.cs-ref{display:block;font-size:.9em;color:#666;margin-top:.4em;clear:both;}

/* ---- メイン画像（左ロゴ／右写真の合成枠） ---- */
.cs-main{display:grid;grid-template-columns:35.6% 64.4%;
  margin:1em 0 2em;border:1px solid #d1d1d1;background:#fff;}
.cs-main__logo{display:grid;place-items:center;padding:1.4rem;}
.cs-main__logo img{width:min(90%,300px);height:auto;}
.cs-main__photo{overflow:hidden;background:#fff;}
.cs-main__photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---- アンカーリスト ---- */
.cs-anchor{display:block;list-style:none;margin:0 0 2rem;padding:0;}
.cs-anchor li{display:inline-block;margin-right:20px;}
.cs-anchor a{display:inline-block;padding-left:20px;padding-top:2px;
  font-size:90%;line-height:140%;color:#333;text-decoration:none;
  background-repeat:no-repeat;background-size:14px auto;background-position:left 4px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Crect width='28' height='26' fill='%230068B7'/%3E%3Cpath d='M7 10l7 7 7-7' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E");}
.cs-anchor a:hover{color:#899ab6;text-decoration:none;}

/* ---- 関連サービスボックス ---- */
.cs-rel{margin-bottom:2rem;background:#f6f8fb;border:1px solid #d1d1d1;
  padding:1.25rem 1.4rem;}
.cs-rel__title{font-weight:600;margin:0 0 .6em;color:#333;}
.cs-rel__list{list-style:none;margin:0;padding-left:1.6em;}
.cs-rel__list li{position:relative;line-height:1.9;margin-bottom:.2em;}
.cs-rel__list li::before{content:"›";position:absolute;left:-1em;top:0;color:#c00;}
.cs-rel__list a{color:#c00;text-decoration:underline;}
.cs-rel__list a:hover{text-decoration:none;}
.cs-rel__desc{display:block;font-size:.9rem;color:#333;margin-top:.1em;}

/* ---- 課題 → 効果 ---- */
.cs-ba{clear:both;margin:2em 0;}
.cs-ba__label{margin-bottom:.5em;display:flex;justify-content:space-between;}
.cs-ba__label--before,.cs-ba__label--after{width:45%;text-align:center;color:#fff;
  padding:.6em;font-weight:400;}
.cs-ba__label--before{background:#8998B5;}
.cs-ba__label--after{background:#DF946A;}
.cs-ba__item{margin-bottom:.5em;display:flex;justify-content:space-between;align-items:stretch;position:relative;}
.cs-ba__before,.cs-ba__after{width:45%;padding:.8em 1.6em;display:flex;align-items:center;}
.cs-ba__before{background:#F2F5FA;}
.cs-ba__after{background:#FFF2DF;font-weight:bold;}
.cs-ba__item::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:34px;height:16px;background:#DB0835;
  clip-path:polygon(0 30%,58% 30%,58% 0,100% 50%,58% 100%,58% 70%,0 70%);}

/* ---- 記事セクション ---- */
.cs-art::after{content:"";display:block;clear:both;}
.cs-art__title{clear:both;background:var(--blue);color:#fff;font-weight:600;
  font-size:1rem;line-height:100%;padding:.7em 1em;margin:0 0 1.6em;scroll-margin-top:96px;}
.cs-art__lead{padding:.5em 0;margin:0 0 1em;line-height:1.2;
  font-size:1.5rem;font-weight:bold;color:#333;
  border-bottom:.25rem solid #899ab6;}
.cs-art__sub{padding:.5em 0;margin:1.6em 0 1em;line-height:1.2;
  font-size:1.12rem;font-weight:bold;color:#333;
  border-bottom:.1rem solid #899ab6;}
.cs-art p{line-height:1.7142857143;}
.cs-art__fig{float:right;width:140px;margin-left:2.2em;margin-bottom:1.6em;}
.cs-art__fig img{width:140px;height:auto;display:block;}
.cs-art__fig--crop img{height:158px;object-fit:cover;object-position:50% 22%;}
.cs-art__figname{background:#F2F5FA;display:block;font-size:80%;
  padding:.8em;line-height:1.6;color:#333;}

/* ---- CTA（中間・赤ピル） ---- */
.cs-cta{margin:2.5rem 0;}
.cs-cta__btn{position:relative;display:block;width:60%;margin-inline:auto;
  padding:1.5625rem;border-radius:3.125rem;text-align:center;
  font-weight:600;font-size:1.125rem;background:#c00;color:#fff !important;
  text-decoration:none !important;transition:background .2s;}
.cs-cta__btn::after{content:"";position:absolute;top:50%;right:20%;
  width:.7rem;height:.7rem;margin-top:-.35rem;
  border-top:.125rem solid #fff;border-right:.125rem solid #fff;transform:rotate(45deg);}
.cs-cta__btn:hover{background:#a94657;}

/* ---- お客様プロフィール ---- */
.cs-company{background:#f2f5fa;padding:1.25rem;margin-bottom:1rem;}
.cs-company__title{font-weight:600;font-size:140%;color:#333;margin:0 0 .3em;scroll-margin-top:96px;}
.cs-company__sub{background:#899AB6;color:#fff;font-size:.8rem;display:inline-block;
  padding:.3rem .8rem;border-radius:1rem;margin-bottom:.8rem;}
.cs-company__desc{margin:0 0 .6em;}
.cs-company__info{margin-top:1em;width:100%;border-collapse:collapse;background:#fff;}
.cs-company__info th,.cs-company__info td{border:1px solid #d1d1d1;
  padding:.7em 1em;font-size:.9375rem;line-height:1.7;text-align:left;vertical-align:middle;}
.cs-company__info th{width:120px;background:#f6f6f6;font-weight:600;white-space:nowrap;}
.cs-company__photo{text-align:center;width:34%;}
.cs-company__photo img{display:inline-block;max-width:100%;height:auto;margin:.4em 0;}

/* ---- 導入事例ダウンロード風の帯（未使用時は無害） ---- */
.cs-dl__title{background:#899AB6;color:#fff;padding:.6em 1.6em;margin:0 0 1em;
  font-size:1rem;font-weight:400;}

/* ---- 注記 ---- */
.cs-notice{font-size:80%;color:#333;}

/* ---- CTA（大・リード付き赤ピル） ---- */
.cs-ctaL{margin:2.5rem 0;}
.cs-ctaL__btn{position:relative;display:block;width:60%;margin-inline:auto;
  padding:1.25rem 3rem;border-radius:3.125rem;text-align:center;
  font-weight:600;font-size:1.125rem;background:#c00;color:#fff !important;
  text-decoration:none !important;transition:background .2s;}
.cs-ctaL__btn::after{content:"";position:absolute;top:50%;right:12%;
  width:.7rem;height:.7rem;margin-top:-.35rem;
  border-top:.125rem solid #fff;border-right:.125rem solid #fff;transform:rotate(45deg);}
.cs-ctaL__btn:hover{background:#a94657;}
.cs-ctaL__lead{display:block;font-size:.8125rem;font-weight:400;margin-bottom:.2em;}

/* ---- 関連する導入事例 ---- */
.cs-list__title{padding:.5em 0;margin:0 0 1em;line-height:1.2;
  font-size:1.25rem;font-weight:bold;color:#333;border-bottom:.25rem solid #899ab6;}
.cs-list__grid{display:flex;flex-wrap:wrap;gap:0 2rem;}
.cs-list__item{display:block;width:290px;margin-bottom:2rem;}
.cs-list__link{display:block;background:#dce3ed;border:1px solid #dce3ed;
  color:#0c0c0c !important;text-decoration:none !important;transition:all .3s ease;}
.cs-list__link:hover{background:#ccd6e7;border-color:#ccd6e7;
  box-shadow:0 0 5px rgba(0,0,0,.2);}
.cs-list__img{display:block;background:#fff;}
.cs-list__img img{width:288px;height:174px;object-fit:cover;display:block;}
.cs-list__cap{display:block;padding:1rem;font-size:95%;line-height:1.6;color:#0c0c0c;}
.cs-list__name{display:block;margin-top:.5rem;font-weight:bold;}
.cs-list__link:hover .cs-list__cap,.cs-list__link:hover .cs-list__name{color:#c00;}
.cs-list__desc{display:block;padding:0 1rem 1rem;font-size:80%;position:relative;}
.cs-list__desc::before{content:"";position:absolute;left:50%;top:-2px;width:260px;height:1px;
  transform:translateX(-50%);background:#fff;}

/* =========================================================
   case-fcsagami.html で使うブロック
   （このページも同じ導入事例フォーマットだが、下記のクラスは
     ここに定義が無く、素のまま表示されていたので補う）
   ========================================================= */
/* ---- S-passoで行ったこと（小見出し＋本文の3項目） ---- */
.cs-do{margin:0 0 1.6em;}
.cs-do__ttl{margin:0 0 .5em;padding-left:.7em;border-left:.25rem solid var(--blue);
  font-size:1.06rem;font-weight:600;line-height:1.6;color:#333;}
.cs-do p{margin:0;}

/* ---- 記事内の写真（2枚並び／幅いっぱい） ---- */
.cs-figs{clear:both;display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.6em 0 2em;}
.cs-figs figure,.cs-figw{margin:0;background:#F2F5FA;}
.cs-figw{clear:both;margin:1.6em 0 2em;}
.cs-figs img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.cs-figw img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.cs-figs figcaption,.cs-figw figcaption{padding:.8em;font-size:80%;line-height:1.6;color:#333;}

/* ---- お客様プロフィール：表＋ロゴを横並びにする器 ---- */
.cs-company__title span{display:block;margin-top:.25em;font-size:.62em;font-weight:600;color:#666;}
.cs-company__row{display:flex;align-items:stretch;margin-top:1em;background:#fff;}
.cs-company__row .cs-company__info{flex:1 1 62%;margin-top:0;}
.cs-company__media{flex:0 0 38%;display:flex;align-items:center;justify-content:center;
  padding:1rem;border:1px solid #d1d1d1;border-left:0;}
.cs-company__media img{width:100%;height:auto;display:block;}
.cs-company__mark{width:min(86%,220px);}

/* ---- 関連する導入事例の器 ---- */
.cs-list{clear:both;}

/* ---- 矢印は CTA ボタン側の ::after で描いているので、
        本文中に置かれた「›」は二重になる。出さない。 ---- */
.cs-ctaL__arw,.cs-cta__btn > span[aria-hidden="true"]{display:none;}

/* ---- タブレット～スマホ（767px＝参考と同じ折返し点） ---- */
@media (max-width:767px){
  /* 写真2枚並びとプロフィール欄は、スマホでは縦積みにする */
  .cs-figs{grid-template-columns:1fr;gap:.9rem;}
  .cs-company__row{display:block;}
  .cs-company__media{border:1px solid #d1d1d1;border-top:0;padding:1.2rem;}
  .cs-company__mark{width:min(74%,200px);}
  /* 社名は途中で折り返すと「フットボ／ール」「相模原／様」のように
     語の途中や1文字だけで切れる。390px幅で最長の社名
     「合同会社フットボールクラブ相模原様」（17文字）が1行に収まるよう
     幅に連動させ、320px でも 1行に収まるところまで下げる。
     ※以前ここはコメントの閉じ忘れ（余分な "*／" 行）で下の1行ごと無効化されていた。 */
  .cs-head__name{font-size:min(1.1rem,4.7vw);}
  .cs-company__title{font-size:min(1.1rem,4.5vw);}
  .cs-catch{font-size:1.2rem;}
  /* 記事の大見出しは文節が見つかりにくいので行の長さを均す */
  .cs-art__lead,.cs-art__sub{word-break:normal;text-wrap:balance;}
  .cs-main{grid-template-columns:1fr;}
  .cs-main__logo{padding:1.4rem 1rem;}
  .cs-main__logo img{width:min(72%,240px);}
  .cs-anchor li{display:block;margin:0 0 .35em;}
  .cs-ba__label{display:none;}
  .cs-ba__item{display:block;margin-bottom:1.6em;}
  .cs-ba__item::after{display:none;}
  .cs-ba__before,.cs-ba__after{display:block;width:100%;position:relative;
    padding:2.6em 1.2em .9em;}
  .cs-ba__before{margin-bottom:2.2em;}
  .cs-ba__before::before,.cs-ba__after::before{content:"課題";position:absolute;
    left:0;top:0;right:0;text-align:center;color:#fff;padding:.3em;background:#8998B5;}
  .cs-ba__after::before{content:"効果";background:#DF946A;}
  .cs-ba__before::after{content:"";position:absolute;left:50%;top:calc(100% + .5em);
    transform:translateX(-50%) rotate(90deg);width:34px;height:16px;background:#DB0835;
    clip-path:polygon(0 30%,58% 30%,58% 0,100% 50%,58% 100%,58% 70%,0 70%);}
  .cs-art__lead{font-size:1.2rem;border-bottom-width:.125rem;}
  .cs-art__fig{float:none;margin:0 0 1.6em;}
  .cs-cta__btn,.cs-ctaL__btn{width:100%;}
  .cs-cta__btn::after,.cs-ctaL__btn::after{right:1.25rem;}
  .cs-company__info,.cs-company__info tbody,.cs-company__info tr{display:block;}
  .cs-company__info th,.cs-company__info td{display:block;width:100%;margin-bottom:-1px;}
  .cs-company__info th{margin-top:10px;}
  .cs-company__photo{width:100%;}
  .cs-notice{text-align:center;font-size:70%;}
  .cs-list__item{width:100%;}
  .cs-list__img img{width:100%;height:150px;}
}