/* ============================================================
   横に並べて、めくって見る（カルーセル）
   元：02 デザイン・素材 のTOPページ

   ★仕組み★
   中身は普通の横並びです。JSが動かなくても、
   指やトラックパッドで横に流せます。
   矢印とドットが出ないだけで、中身は全部見られます。
   ============================================================ */
.cr{position:relative}

/* ★grid-template-columns を打ち消します★
   .tc-grid など、元のCSSに「列の作り方」が書いてあると、
   こちらの grid-auto-columns が使われません。
   none にして、はじめて横並びの指定が効きます。 */
.cr-track{
  display:grid;grid-auto-flow:column;
  grid-template-columns:none;
  grid-auto-columns:300px;   /* 既定。画面幅ごとに下で上書きします */
  gap:20px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  /* ★scroll-behavior は、ここでは指定しません（2026-08-30）★
     CSSに smooth を書くと、JSから位置を入れたときも
     「なめらかに動かす」扱いになります。
     ところが、動き出す前に別の処理が入る環境では
     アニメーションが始まらず、1pxも動かないことがあります。
     実際、矢印を押しても動かない状態になっていました。

     なめらかに動かすかどうかは、JS側で決めます。 */
  /* 影が切れないように、上下に少し余白をとります */
  padding:4px 2px 10px;
  /* スクロールバーは出しません（矢印とドットで分かるため） */
  scrollbar-width:none;-ms-overflow-style:none;
}
.cr-track::-webkit-scrollbar{display:none}
.cr-track > *{scroll-snap-align:start;min-width:0}

/* 3枚見せ、4枚目が少し見切れる形。

   ★見切れさせるのが要点です★
   きっちり収めてしまうと「これで全部だ」と思われ、
   右にまだあることに気づいてもらえません。

   ★幅に calc(100% …) を使ってはいけません（2026-08-30）★
   はじめ calc((100% - 40px) / 3.15) と書いていました。
   ここでの 100% は「自分（枠）の幅」を指します。
   ところが、この枠は横に長い中身によって幅が決まる作りなので、
   「自分の幅を決めるために、自分の幅が要る」という
   ぐるぐる回りになり、<b>枠の幅が4pxになって</b>
   カードが1枚も見えなくなっていました。

   そこで、決まった大きさで指定します。
   画面の幅ごとに切り替えれば、見え方は同じです。 */
@media (min-width:1100px){
  .cr-track{grid-auto-columns:340px}
}
@media (min-width:768px) and (max-width:1099px){
  .cr-track{grid-auto-columns:320px}
}
/* ★スマホでも、次のカードを少し見せます★
   ぴったり1枚だけ見せると「これで終わり」と思われます。
   86%にして、右端に次のカードの頭を出します。 */
/* ★スマホでも、次のカードを少し見せます★
   ぴったり1枚だけ見せると「これで終わり」と思われます。
   画面の幅の80%にして、右端に次のカードの頭を出します。
   （ここも % ではなく vw を使います。理由は上と同じです） */
@media (max-width:767px){
  .cr-track{grid-auto-columns:min(290px, 66vw);gap:14px}
}

/* ---- 左右の矢印 ---- */
.cr-arrow{
  position:absolute;top:calc(50% - 22px);z-index:3;
  width:46px;height:46px;border-radius:50%;
  background:#fff;border:1px solid var(--line);color:var(--brand);
  display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--shadow);
  transition:background var(--ease),border-color var(--ease),opacity var(--ease)}
.cr-arrow.prev{left:-23px}
.cr-arrow.next{right:-23px}
.cr-arrow:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff}
.cr-arrow:disabled{opacity:.32;cursor:default}
.cr-arrow[hidden]{display:none}

/* 画面が狭いときは、枠の中へ寄せます（外に出すとはみ出すため） */
@media (max-width:1240px){
  .cr-arrow.prev{left:2px}
  .cr-arrow.next{right:2px}
}
/* スマホでは矢印を出しません。指で流すほうが速いためです。 */
@media (max-width:767px){
  .cr-arrow{display:none}
}

/* ---- 下のドット ---- */
.cr-dots{
  display:flex;justify-content:center;align-items:center;gap:0;
  margin-top:6px;min-height:44px}
.cr-dots[hidden]{display:none}
/* ★押せる範囲は44px、見た目は小さく★
   点そのものを9pxにすると、指では押しにくくなります。
   ボタンは44px角のまま透明にして、
   真ん中に点を描いています。これで見た目は変わらず、
   どこを押しても効きます。 */
.cr-dot{
  width:44px;height:44px;flex:none;padding:0;cursor:pointer;
  background:none;border:0;position:relative;
  display:grid;place-items:center}
.cr-dot::before{
  content:"";display:block;width:9px;height:9px;border-radius:50%;
  background:var(--line-strong);
  transition:background var(--ease),width var(--ease)}
.cr-dot.on::before{background:var(--brand);width:22px;border-radius:99px}

@media (prefers-reduced-motion:reduce){
  .cr-track{scroll-behavior:auto}
}