/* =========================================================
   PS WORKS ソリューション詳細ページ共通スタイル
   (Auvik / Checkmk / Bright などのpage-{slug}.phpから読み込みます)
   ========================================================= */
.psw-solution{ font-family:var(--font-jp); color:var(--text); overflow-x:hidden; }
.psw-solution *{ box-sizing:border-box; }
.psw-solution a{ text-decoration:none; color:inherit; }
.psw-solution img{ max-width:100%; display:block; }
.psw-solution .inner{ max-width:1000px; margin:0 auto; padding:0 24px; }

/* ---------- タイトルバー ---------- */
/* ページごとに背景画像が微妙に異なるため、bg-{slug}修飾クラスで個別に指定する。
   画像が用意されていないページはbg-*クラスを付けなければ既定のheader_bk.pngが使われる。 */
.psw-solution-titlebar{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:20px 40px; min-height:110px; aspect-ratio:1280 / 383;
  color:#fff; font-weight:700; font-size:1.15rem;
  background-image:url('../images/header_bk.png');
  background-size:100% 100%;
  background-position:center bottom;
  background-repeat:no-repeat;
}
.psw-solution-titlebar.bg-auvik{ background-image:url('../images/header-bk-auvik.png'); }
.psw-solution-titlebar.bg-checkmk{ background-image:url('../images/header-bk-checkmk.png'); }
.psw-solution-titlebar.bg-bright{ background-image:url('../images/header-bk-bright.png'); }
.psw-solution-titlebar.bg-company{ background-image:url('../images/header-bk-company.png'); }
.psw-solution-titlebar.bg-news{ background-image:url('../images/header-bk-news.png'); }
.psw-solution-titlebar.bg-contact{ background-image:url('../images/header-bk-contact.png'); }
/* 下に階層(子ページ)を持たないページ(Company/News/Contactなど)は、
   「Digital Solution」のような区分キャプションを付けず、ページ名だけを大きな透かし文字で表示する */
.psw-solution-titlebar.solo{ justify-content:flex-end; }
.psw-solution-titlebar.solo .name{
  font-size:4.4rem; font-weight:800; opacity:.3; line-height:1; white-space:nowrap;

}

/* Auvik/checkmk/Brightの製品ページは、右下に「Digital Solution」を小さく、
   その背後に製品名を大きな透かし文字で重ねて表示する */
.psw-solution-titlebar.bg-auvik,
.psw-solution-titlebar.bg-checkmk,
.psw-solution-titlebar.bg-bright{ position:relative; }
.psw-solution-titlebar.bg-auvik .name,
.psw-solution-titlebar.bg-checkmk .name,
.psw-solution-titlebar.bg-bright .name{
  position:absolute; right:40px; bottom:46px;
  font-size:4.4rem; font-weight:800; opacity:.3; line-height:1; white-space:nowrap;
}
.psw-solution-titlebar.bg-auvik .cat,
.psw-solution-titlebar.bg-checkmk .cat,
.psw-solution-titlebar.bg-bright .cat{
  position:absolute; right:40px; bottom:20px; font-size:1.15rem;
}

/* aspect-ratioのままだと画面幅が広いほど高さが際限なく伸び、トップページのヒーロー(高さほぼ固定)と
   ズレて見えるため、1440px以降は高さを固定してトップページに近い高さに揃える。
   431pxは1440px幅時点のaspect-ratio計算値(1440*383/1280)でブレークポイント前後の高さが
   シームレスに繋がるように合わせている。 */
@media (min-width: 1440px){
  .psw-solution-titlebar{
    aspect-ratio:auto; height:431px;
    background-size:cover; background-position:center;
  }
}

/* ---------- ヒーロー ---------- */
.psw-solution-hero{ padding:70px 24px; text-align:center; }
.psw-solution-hero .logo{ max-height:56px; width:auto; margin:0 auto 28px; }
.psw-solution-hero .lead{ line-height:1.9; color:var(--text); margin:0 0 50px; }
.psw-solution-hero .hero-row{
  display:flex; align-items:center; gap:60px; text-align:left; margin-top:20px;
}
.psw-solution-hero .hero-text{ flex:1; }
.psw-solution-hero .hero-text h3{
  color:var(--navy); font-size:1.15rem; font-weight:800; margin:0 0 16px;
}
.psw-solution-hero .hero-text p{ line-height:1.9; margin:0; }
.psw-solution-hero .hero-image{ flex:1; }

/* ---------- 特徴(Feature) ---------- */
.psw-solution-features{ background:var(--lightblue-2); padding:70px 24px 90px; }
/* Figmaでは見出し(特徴/Feature)は項目グリッドの外側に独立した見出し行として配置されている。
   checkmkは項目が9個ちょうど3x3に収まるため、.features-tableの外に出して使う(page-checkmk.phpのみ使用)。
   Auvik/Brightは既存の見出しセル込みグリッド(.cell.head)のままなので影響なし。 */
.features-head{ margin-bottom:24px; }
.features-head .label{
  display:inline-block; color:var(--navy-dark); font-weight:700;
  border-bottom:2px solid var(--navy-dark); padding-bottom:6px; margin-bottom:8px;
}
.features-head h2{
  font-family:var(--font-round); color:var(--lightblue); font-size:3.2rem; font-weight:800; margin:0;
}
.features-table{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.features-table .cell{
  padding:26px 22px; text-align:center;
}
.features-table .cell:not(.head){
  background:#fff; border:2px solid #4a90c2; 
}
.features-table .cell.head{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-align:left;
}
.features-table .cell.head .label{ color:var(--navy-dark); font-weight:700; margin-bottom:6px; }
.features-table .cell.head h2{
  font-family:var(--font-round); color:var(--lightblue); font-size:3.2rem; font-weight:800; margin:0;
}
.features-table .cell img{ height:40px; width:auto; margin:0 auto 14px; }
.features-table .cell h3{ color:var(--navy); font-size:1rem; font-weight:800; margin:0 0 10px; line-height:1.5; }
.features-table .cell p{ font-size:.88rem; line-height:1.7; color:var(--text); margin:0; }

/* ---------- 導入効果(Benefits) ---------- */
.psw-solution-benefits{ background:#f6efe4; padding:70px 24px 90px; }
.psw-solution-benefits .label{ color:var(--pink); font-weight:700; letter-spacing:.05em; }
.psw-solution-benefits h2{
  color:var(--navy-dark); font-size:1.6rem; font-weight:800; margin:6px 0 14px;
  border-left:6px solid var(--yellow); padding-left:14px;
}
.psw-solution-benefits .sub{ color:var(--navy-dark); margin-bottom:32px; }
.benefits-card{
  background:#fff; border-radius:4px; padding:36px 44px; box-shadow:0 4px 14px rgba(20,60,80,.06);
}
.benefits-card ul{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px 60px;
}
.benefits-card li{ display:flex; align-items:center; gap:16px; font-weight:700; color:var(--navy-dark); }
.benefits-card li .badge{
  height:32px; width:32px; flex-shrink:0; box-sizing:border-box; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; line-height:1;
}
.benefits-card li.tone-blue .badge{ background:#e3f1fb; color:#1c7fc9; }
.benefits-card li.tone-red .badge{ background:#fbe4e1; color:#e0553a; }
.benefits-card li.tone-orange .badge{ background:#fbeed9; color:#c8850f; }

/* ---------- 会社紹介(Company Information) ---------- */
.psw-solution-company{ padding:80px 24px; }
.psw-solution-company .logo-small{ height:28px; width:auto; margin-bottom:18px; }
.psw-solution-company h2{
  color:var(--navy); font-size:1.5rem; font-weight:800; margin:0 0 22px;
  border-bottom:2px solid var(--navy); padding-bottom:14px;
}
.psw-solution-company .desc{ line-height:2; margin:0 0 36px; }
.company-shot{ margin:0 0 36px; }
.company-shot img{ width:100%; height:auto; border-radius:4px; }
.company-shot figcaption{ text-align:center; color:#8a99a1; font-size:.85rem; margin-top:10px; }
.company-cta{ display:flex; justify-content:center; gap:24px; flex-wrap:wrap; }
.company-cta a{
  font-weight:800; padding:14px 44px; border-radius:2px; font-size:1rem; letter-spacing:.08em;
}
.company-cta .detail{ background:var(--yellow); color:var(--navy-dark); }
.company-cta .contact{ background:var(--navy); color:#fff; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 880px){
  .psw-solution-hero .hero-row{ flex-direction:column; }
  .features-table{ grid-template-columns:1fr 1fr; }
  .benefits-card ul{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  .psw-solution-titlebar{ padding:16px 20px; font-size:1rem; }
  .psw-solution-titlebar.solo .name{ font-size:2.2rem; }
  .psw-solution-titlebar.bg-auvik .name,
  .psw-solution-titlebar.bg-checkmk .name,
  .psw-solution-titlebar.bg-bright .name{ right:20px; bottom:34px; font-size:2.2rem; }
  .psw-solution-titlebar.bg-auvik .cat,
  .psw-solution-titlebar.bg-checkmk .cat,
  .psw-solution-titlebar.bg-bright .cat{ right:20px; bottom:14px; font-size:.95rem; }
  .features-table{ grid-template-columns:1fr; }
  .benefits-card{ padding:28px 22px; }
  .company-cta a{ padding:14px 30px; font-size:.95rem; }
}