/* ===================================================
   MHシステム株式会社 コーポレートサイト
   works.css - 実績紹介ページ専用スタイル
   （Header / Contact / Footer 等の共通パーツは style.css を参照。
    このファイルには works.html だけで使うスタイルのみを置く）
--------------------------------------------------- */

/* ---------------------------------------------------
   Page Header（下層ページ共通の見出し帯。他の下層ページでも使い回す想定）
--------------------------------------------------- */
.mh-pagehead{
  background:#eef0f2;
  padding:64px 40px 56px;
}
.mh-pagehead__inner{max-width:1200px;margin:0 auto;}
.mh-breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--mh-sub);margin:0 0 20px;
}
.mh-breadcrumb a{color:var(--mh-sub);}
.mh-breadcrumb a:hover{color:var(--mh-blue);}
.mh-breadcrumb .cur{color:var(--mh-blue);font-weight:700;}
.mh-pagehead__title{
  font-family:"Inter",sans-serif;font-weight:900;font-size:clamp(38px,5vw,56px);
  letter-spacing:-1px;margin:0 0 16px;
}
.mh-pagehead__lead{font-size:15.5px;color:var(--mh-sub);margin:0 0 32px;max-width:640px;}

/* カテゴリタブ（ページ内アンカー） */
.mh-cattabs{display:flex;gap:12px;flex-wrap:wrap;}
.mh-cattabs a{
  display:inline-flex;align-items:center;
  background:#fff;color:var(--mh-text);
  font-size:clamp(12px,3vw,14px);
  font-weight:700;
  white-space:nowrap; /* 改行させない */
  padding:12px 22px;border-radius:999px;
  border:1px solid #dcdfe4;
  transition:.2s;
}
.mh-cattabs a:hover{background:var(--mh-blue);color:#fff;border-color:var(--mh-blue);}

/* ---------------------------------------------------
   Works Category Section（1ページに2セクション）
--------------------------------------------------- */
.mh-worksec{
  padding:90px 40px;
  scroll-margin-top:90px; /* ヘッダー分のオフセットを確保してアンカー移動 */
}
/* .mh-worksec--altは使用停止。カードの影(box-shadow)が下方向にぼかしながら消えていくところに、
   セクション背景色の切り替わり(白→#fbfaf9)という「パキッとした境界線」が重なると、影が
   そこで急に途切れたように見えてしまうため、隣接する2セクションは同じ白背景に統一した。 */
.mh-worksec__inner{max-width:1200px;margin:0 auto;}
.mh-worksec__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:48px;flex-wrap:wrap;gap:16px;
}
.mh-worksec__title{
  font-family:"Inter",sans-serif;font-weight:900;font-size:clamp(28px,3.4vw,40px);
  letter-spacing:-.5px;margin:0 0 12px;color:var(--mh-text);
}
.mh-worksec__desc{
  font-size:14.5px;
  color:var(--mh-sub);
  margin:0;
  max-width:720px;
}

/* ---------------------------------------------------
   カルーセル（ホームページ制作の実績カード用）
   矢印クリックでカード1枚分ずつスライドする。
   表示枚数はシステム開発と同じブレークポイントで揃え、
   PC=3枚・タブレット=2枚・スマホ=1枚とする。

   カード群は.mh-portgrid--carousel自体にmax-width:1200pxを持たせ、
   システム開発セクションの.mh-worksec__inner(同じく1200px)と
   カードサイズを完全に一致させる。矢印はそのカード群の外側に
   position:absoluteで配置する。

   ビューポート幅によっては「1200px+矢印の外側余白」が収まらない
   ことがある。この場合にだけ、JS(site.js)が実際の余白を測定して
   .mh-carousel--tightクラスを付与し、矢印をカード群の内側
   オーバーレイ表示に切り替える（下のオーバーライドで対応）。
   これにより、カードは可能な限り1200pxを維持しつつ、
   どんな画面幅でも矢印が画面外にはみ出すことは無くなる。
--------------------------------------------------- */
.mh-carousel{
  position:relative; /* 矢印(position:absolute)の基準にする */
}
.mh-carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  flex:none;
  width:44px;
  height:44px;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  transition:transform .2s, opacity .2s;
}
.mh-carousel__arrow-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.mh-carousel__arrow--prev{ right:100%; margin-right:20px; } /* カード群(1200px)の左外側 */
.mh-carousel__arrow--next{ left:100%; margin-left:20px; }   /* カード群(1200px)の右外側 */
.mh-carousel__arrow:hover{opacity:.7;}
.mh-carousel__arrow:disabled{opacity:.35;cursor:default;}

/* 余白が足りない時にJSが付与する「窮屈モード」。矢印をカード群の内側へ */
.mh-carousel--tight .mh-carousel__arrow{
  width:34px;
  height:34px;
  background:rgba(255,255,255,.85);
  border-radius:50%;
  box-shadow:0 2px 8px rgba(20,30,50,.15);
  padding:5px;
  box-sizing:border-box;
}
.mh-carousel--tight .mh-carousel__arrow--prev{ right:auto; left:8px; margin-right:0; }
.mh-carousel--tight .mh-carousel__arrow--next{ left:auto; right:8px; margin-left:0; }

.mh-portgrid.mh-portgrid--carousel{
  display:block;       /* .mh-portgridのdisplay:gridを上書き。このdivは中身をクリップする
                           「窓(ビューポート)」としてのみ機能させる */
  overflow:hidden;
  max-width:1200px;    /* システム開発セクションの.mh-worksec__innerと同じ幅に揃える */
  margin:-24px auto;   /* margin:-24px 0(打ち消し用) と margin:0 auto(中央寄せ) を両立 */
  gap:0;                /* .mh-portgridのgap:28pxを打ち消す(gapは内側の.mh-carousel__trackで持つ) */
  padding:24px 0;       /* overflow:hiddenの境界がカードの高さぴったりだと、カードのbox-shadow
                            (下に約14px分にじみ出る)がそこでスパッと切られ、角のあたりに不自然な
                            線として見えてしまっていた。上下に余白を持たせ、影が完全にフェード
                            アウトしてからクリップされるようにする。 */
}
.mh-carousel__track{
  display:flex;
  flex-wrap:nowrap;
  gap:28px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.mh-carousel__track .mh-portcard{
  /* システム開発セクションの.mh-portgrid(3列・gap28px、同じ1200px基準)と
     同じ計算式にして、カードサイズを完全に一致させる。 */
  flex:0 0 calc((100% - 2 * 28px) / 3);
}
@media (max-width:960px){
  .mh-carousel__track .mh-portcard{flex:0 0 calc((100% - 28px) / 2);}
}
@media (max-width:640px){
  .mh-carousel__track .mh-portcard{flex:0 0 100%;}
}

@media (max-width:640px){
  /* スマホ幅ではカルーセル(横スライド)をやめ、カードを縦に並べて表示する。
     .mh-carouselはposition:relativeのブロック要素なので、矢印を
     display:noneで消せば、カード群→もっと見るボタンの順に自然に
     縦積みされる(特別なflex指定は不要)。
     3枚目までを表示し、4枚目以降は「もっと見る」ボタンで展開する方式にする
     （カルーセルは見落とされやすく、スマホでは片手操作とも相性が悪いため）。
     ※このブロックは上のカルーセル基本スタイルより後ろに置くこと
       （同じセレクタ.mh-portgrid.mh-portgrid--carousel等が上にもあり、
       後方のルールが優先されるため、順序を間違えると上書きされない）。 */
  .mh-carousel__arrow{display:none !important;}

  .mh-portgrid.mh-portgrid--carousel{
    overflow:visible;
    padding:0;
    margin:0;
  }
  .mh-carousel__track{
    display:flex !important;         /* JSがinline transformを付けても向きは崩れないようflexは維持 */
    flex-direction:column !important;
    gap:20px;
    transform:none !important;        /* JSが付ける横スライド用transformを無効化 */
    transition:none !important;
  }
  .mh-carousel__track .mh-portcard{
    flex:0 0 auto !important;         /* PC用の3分割flex-basisを解除 */
    width:100%;
  }
  /* JS(site.js)が無限ループ用に複製するクローンカード(aria-hidden)は
     縦並び表示では不要なので非表示にする */
  .mh-carousel__track [aria-hidden="true"]{display:none !important;}

  /* 4枚目以降は初期状態で非表示。「もっと見る」タップで.is-expandedが付き表示される */
  .mh-carousel__track [data-card-index="4"]{display:none;}
  .mh-carousel.is-expanded .mh-carousel__track [data-card-index="4"]{display:flex;}
}

.mh-carousel__more{
  display:none !important; /* PC/タブレットでは非表示。640px以下でのみ表示する。
                               !important: SWELLのCSSがwp_head()経由で後から読み込まれ、
                               displayを上書きしてPC幅でもボタンが見えてしまう
                               不具合があったため付与 */
}
@media (max-width:640px){
  .mh-carousel__more{
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    margin-top:20px;
    padding:14px;
    background:#fff;
    border:1px solid #dcdfe4;
    border-radius:8px;
    font-size:14px;
    font-weight:700;
    color:var(--mh-text);
    cursor:pointer;
  }
  .mh-carousel__more svg{width:16px;height:16px;transition:transform .2s;}
  .mh-carousel.is-expanded .mh-carousel__more svg{transform:rotate(180deg);}
}

/* --- 実績カード --- */
.mh-portgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.mh-portcard{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(20,30,50,.06); /* 元は 0 12px 30px で、隣接カードとの隙間(28px)の
                                                中で両側の影が重なりグレーの帯が見えてしまっていた。
                                                ぼかし半径を縮小し、隙間に滲み出さない範囲に収める。 */
  display:flex;flex-direction:column;
}
.mh-portcard__img{
  aspect-ratio:4/3;
  object-fit:cover;
  background:var(--mh-ph-bg); /* 画像読み込み前のフォールバック */
  cursor:zoom-in; /* クリックで拡大できることを示す */
}
.mh-portcard__body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;}
.mh-portcard__tag{
  font-size:11.5px;font-weight:800;letter-spacing:.5px;color:var(--mh-blue);
  background:#eef3ff;display:inline-block;padding:5px 12px;border-radius:4px;
  margin:0 0 14px;width:fit-content;
}
.mh-portcard__title{
  font-size:17px;
  font-weight:800;
  margin:0 0 10px;
  line-height:1.5;
  color:#000;
}
.mh-portcard__desc{
  font-size:13.5px;
  line-height:1.8;
  color:var(--mh-sub);
  margin:0;
  height:180px;      /* 158pxだと最長の文章(7行)の最後の1行が見切れていたため拡大。
                         13.5px×1.8×7行=約170pxに余裕を足した値 */
  overflow:hidden;
}
.mh-portcard__product{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid var(--mh-line);
}
.mh-portcard__product-label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--mh-text);
  margin:0 0 10px;
}
/* アイコン行そのもの(.mh-product-icons)は page-top.css で共通定義 */

@media (max-width:960px){
  .mh-portgrid{grid-template-columns:repeat(2,1fr);}
  .mh-portcard__desc{
    /* タブレット幅(2カラム)ではカード幅が狭くなり、同じ文章でも折り返し行数が
       増える。180px固定のままだと最後の行が見切れてしまうため、960px以下では
       固定を解除し、文章の長さに合わせて自然に下へ伸びるようにする。 */
    height:auto;
    overflow:visible;
  }
}
@media (max-width:640px){
  .mh-pagehead{padding:48px 24px 40px;}
  .mh-worksec{padding:64px 24px;}
  .mh-portgrid{grid-template-columns:1fr;}
}

/* ---------------------------------------------------
   実績画像のライトボックス（クリックで拡大表示）
--------------------------------------------------- */
.mh-lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  z-index:200;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.mh-lightbox.is-open{display:flex;}
.mh-lightbox img{
  max-width:90vw;
  max-height:90vh;
  object-fit:contain;
  border-radius:6px;
}
.mh-lightbox__close{
  position:absolute;
  top:24px;right:24px;
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}