/* ===== Case Study（Figma PC 14600:59141 1440×642 ／ SP 14600:69435 375×830）/ base3 =====
   PC: 左列（見出し＋ボタン）218px ＋ gap90 ＋ カード行（右端は画面外へはみ出す横スクロール）／ 下段にプログレスバー1000px ＋ 48px丸ボタン×2
   SP: 見出し → カード行（2枚見え・横スクロール）→ バー＋40px丸ボタン → ボタン
   動作は scroll-snap ＋ 前後ボタンの scrollBy（js/main.js の Case Study ブロック）。バーの青い部分はスクロール量に追従して移動 */
.casestudy{position:relative;display:grid;grid-template-columns:218px minmax(0,1fr);grid-template-areas:"side cards" "nav nav";column-gap:90px;width:100%;padding:80px var(--pad-side) 60px;background:var(--c-base3);overflow:hidden}
/* 左列: セクション見出し（gap6）＋ 80px下にボタン（行1の高さはカード行374に揃う） */
.casestudy__side{grid-area:side;display:flex;flex-direction:column;align-items:flex-start;gap:80px}
.casestudy__title{width:218px}
/* カード行: 横スクロール（スクロールバー非表示・スナップ）。右のセクション余白を打ち消して画面端まで伸ばす */
/* 右余白の打ち消しは vw で計算する（--pad-side は 100% を含むため、この要素で使うと 892px 基準になり 30px に潰れる） */
.casestudy__scroller{grid-area:cards;min-height:374px;margin-right:calc(-1 * max(30px, 50vw - 600px));overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.casestudy__scroller::-webkit-scrollbar{display:none}
.casestudy__list{display:flex;align-items:flex-start;gap:16px;width:max-content;padding-right:max(30px, 50vw - 600px);list-style:none}
.casestudy__item{flex:none;width:286px;scroll-snap-align:start}
.casestudy__item:nth-child(2){width:288px}
/* 下段: バー（1000×2 / 青い部分600）＋ 丸ボタン48×48 ×2 gap16 */
.casestudy__nav{grid-area:nav;display:flex;align-items:center;justify-content:space-between;margin-top:80px}
.casestudy__bar{position:relative;width:1000px;height:2px;background:var(--c-border);overflow:hidden}
.casestudy__bar-thumb{position:absolute;left:0;top:0;width:60%;height:100%;background:var(--c-main)}
.casestudy__arrows{display:flex;gap:16px}
.casestudy__arrow{display:block;width:48px;height:48px;padding:0}
.casestudy__arrow svg{width:100%;height:100%;overflow:visible}
.casestudy__arrow--prev svg{transform:scaleX(-1)}
.casestudy__arrow-ring{fill:var(--c-base3);stroke:var(--c-main)}
.casestudy__arrow-chev{fill:var(--c-main);stroke:#ebf8ff}
/* ホバー（あおさん指示 B-2 Case Study / Figma Frame 140・139）: 丸の中身を #1549A0、矢印を #FFFFFF に。往路 .35s quint */
.casestudy__arrow-ring,.casestudy__arrow-chev{transition:fill .35s var(--ease-out-quint),stroke .35s var(--ease-out-quint)}
@media (hover:hover){
  .casestudy__arrow:not([aria-disabled="true"]):hover .casestudy__arrow-ring{fill:var(--c-main)}
  .casestudy__arrow:not([aria-disabled="true"]):hover .casestudy__arrow-chev{fill:#fff;stroke:#fff}
}
.casestudy__arrow:focus-visible .casestudy__arrow-ring{fill:var(--c-main)}
.casestudy__arrow:focus-visible .casestudy__arrow-chev{fill:#fff;stroke:#fff}
@media (prefers-reduced-motion:reduce){
  .casestudy__arrow-ring,.casestudy__arrow-chev{transition:none!important}
}
/* 端まで送ったら押しても動かないので、見た目でも無効と分かるようにする（tabindex は main.js が外す） */
.casestudy__arrow[aria-disabled="true"]{opacity:.35;cursor:default}
/* 端に達したボタンは aria-disabled=true になる（見た目はFigmaどおり据え置き。薄くするなら animation.css 側で） */
/* カード（casestudy 14578:55559 系）: w286 / px10 pb20 / gap16 / border-b / r5 */
.case-card{display:flex;flex-direction:column;gap:16px;padding:0 10px 20px;border-bottom:1px solid var(--c-border);border-radius:var(--r-m)}
.case-card__img{position:relative;height:180px;border-radius:var(--r-m);overflow:hidden}
.case-card__img img{width:100%;height:100%;object-fit:cover}
.case-card__body{display:flex;flex-direction:column;gap:10px;padding:0 2px}
.case-card__tags{display:flex;gap:6px;list-style:none}
.case-card__tags li{padding:1px 8px 2px;border:1px solid var(--c-border-sub);border-radius:var(--r-s);font-size:13px;font-weight:500;line-height:1.6;letter-spacing:.13px;color:var(--c-text-sub);white-space:nowrap}
.case-card__main{display:flex;flex-direction:column;gap:10px}
.case-card__title{font-size:18px;font-weight:500;line-height:1.6;letter-spacing:.18px}
.case-card__foot{display:flex;align-items:flex-end;gap:12px}
.case-card__desc{flex:1 0 0;min-width:1px;font-size:var(--fs-body-s);font-weight:400;line-height:1.6;letter-spacing:.14px;color:var(--c-gray)}
.case-card__arrow{display:flex;flex:none;padding:10px;background:var(--c-main);border-radius:3px}
.case-card__arrow svg{width:14px;height:14px}
.case-card__arrow .ic-bar{fill:#b4e7ff}
.case-card__arrow .ic-chev{fill:none;stroke:#fff;stroke-width:1.5}
.casestudy__br-sp{display:none}

/* ===== SP（768px以下）: 縦積み。見出し → カード行（w266・gap16）→ バー＋40pxボタン → ボタン ===== */
@media (max-width:768px){
  .casestudy{display:flex;flex-direction:column;align-items:flex-start;padding:80px 24px 60px}
  /* 左列の箱を外し、見出し→カード→ナビ→ボタンの順に並べる */
  .casestudy__side{display:contents}
  .casestudy__title{width:auto;gap:4px}
  .casestudy__title .sec-title__label{gap:6px;letter-spacing:.16px}
  .casestudy__title .sec-title__label img{width:13px;height:9px}
  .casestudy__br-pc{display:none}
  .casestudy__scroller{order:2;width:calc(100% + 24px);min-height:0;margin:48px -24px 0 0}
  .casestudy__list{padding-right:24px}
  .casestudy__item,.casestudy__item:nth-child(2){width:266px}
  .casestudy__nav{order:3;flex-direction:column;align-items:flex-end;gap:16px;width:100%;margin-top:48px}
  .casestudy__bar{width:100%}
  .casestudy__bar-thumb{width:100px}
  .casestudy__arrows{gap:12px}
  .casestudy__arrow{width:40px;height:40px}
  /* SPボタン: w166 / pl20 pr12 py10 / gap24（ラベルは残り幅で中央寄せ） */
  .casestudy__btn{order:4;width:166px;gap:24px;margin-top:40px;padding:10px 12px 10px 20px}
  .casestudy__btn .btn__label{flex:1 0 0;min-width:1px}
  .case-card{padding:0 0 16px}
  .case-card__body{padding:0 4px}
  .case-card__tags li{padding:0 8px 2px;font-size:12px;letter-spacing:.12px}
  .case-card__title{font-size:16px;letter-spacing:.16px}
  .case-card__desc{letter-spacing:.12px}
}