@charset "UTF-8";
/* ============================================================================
   custom.css

   JSOL 様（および AI ツール）が、見た目の調整を書き足すためのファイルです。
   5ページ（index / finance / cycle / download / cpq）すべてで読み込まれます。

   custom.css は、ほかの CSS の後に読み込まれます。
   同じ場所に、同じ強さ・同じ画面幅の条件で指定した場合は、後に書いた指定が優先されます。
   ただし、既存の指定に !important が付いている場合や、
   より細かく場所を限定した指定がある場合などは、後に書くだけでは変更できません。


   ■ ルール（作業の前に必ず読んでください。AI ツールにも守らせてください）

   1. 既存の見た目だけを調整する場合、編集してよいのは、このファイル（css/custom.css）だけです。
      例外として、5ページの HTML にある「custom.css?ver=…」のバージョン番号だけは変更して構いません。
      それ以外の head 内の記述、HTML 本文、既存の class・id の名前、共通 CSS・JavaScript は
      変更しないでください。
      文言変更・セクション追加・復旧の場合は、「サイトの構造と編集のルール」と、
      その作業用プロンプトに書かれた範囲で HTML も編集できます。
      既存の class・id の名前は変更しませんが、新しいセクションには専用の class を追加できます。
        共通 CSS ＝ style.css / cpq.css / reset.css / swiper-bundle.min.css
        JavaScript ＝ js フォルダの中のファイル

   2. 追加する前に、同じ場所・同じ画面幅の条件への指定がすでにないか確認します。
      色・文字の大きさ・余白・そのほかの、すべての区分を確認します。

   3. すでにあれば、その指定を修正します（新しく足しません）。

   4. 作業が終わったら、同じ場所・同じ画面幅の条件への指定が、2回以上出ていないか確認します。
      ・同じセレクタが、通常の指定とスマホ用の指定に分かれていることは重複ではありません。
        （セレクタ ＝ 「どこに効かせるか」を書く部分です。例： .footer__title ）
      ・コメント内の例も重複確認の対象外です。
      ・条件や並び順で効き方が変わる指定を、機械的に一つへまとめないでください。
        整理する場合は、既存の変更内容と表示が保たれることを確認します。

   5. おかしくなったら、まず直前に変更した指定だけを元に戻します。
      どの変更か分からない場合は、作業前に保存したコピーへ戻します。
      custom.css による調整をすべて取り消したい場合は、このファイルの中身を全部消します。
      これまでの正常な調整もすべて消えるため、消す前にコピーを保存してください。
      HTML も変更した場合は、このファイルを空にするだけでは元に戻りません。
      直前の作業を取り消す場合は、その作業で変更した HTML も戻します。
      CSS による調整をすべて取り消す場合は、HTML を自動的に戻さず、
      追加済みセクションなどへの影響を確認します。
      HTML の対応が必要な場合は、先に影響と対応案を報告してください。
      （作業の前に、変更するファイルのコピーを保存しておきます。
        コピーがない場合は、推測で戻さず報告してください。
        ファイルそのものは削除しません）


   ■ 書き方

   A. 現在効いている指定を探す
      変えたい場所について、style.css と、製造見積LP の場合は cpq.css も確認します。
      現在その場所に効いている指定を探します。

   B. その指定を基に書く
      その指定を基に、変える項目だけ custom.css へ書きます。
      同じ場所への指定が複数ある場合は、最初に見つけたものだけで判断せず、
      後ろの指定や画面幅ごとの指定も確認します。

      例：製造見積LP では、.c-cta__text より、.c-cta--cpq .c-cta__text の指定が
          優先される項目があります。.c-cta__text だけを写しても変更できない場合があるため、
          cpq.css も確認します。
          ・文字の大きさ（font-size）が、その一つです。
            製造見積LP で変えるときは、cpq.css の .c-cta--cpq .c-cta__text を基にします。
          ・cpq.css には、この場所の 767px 以下の指定が2か所あり、後ろにある指定が効いています。

   C. 画面幅ごとの指定を確認する
      変える項目について、現在その場所に効いている画面幅ごとの指定も確認します。
      このサイトには、1280px・767px 以外の条件や、一定の幅だけに効く条件もあります。
      関連する指定は、元の画面幅の条件と順番を確認して書きます。
      別の書き方で同じ場所を指定している場合や、margin・padding・background など、
      まとめて指定している場合も確認してください。

      PC 用の指定を条件なしで追加すると、スマホ用の指定も上書きする場合があります。
      変更しない画面幅では、現在の表示が保たれるようにしてください。

      画面幅の条件は「@media ( … ) { }」で書かれています。このサイトで使われている条件：
        max-width: 1280px / 1200px / 1140px / 767px / 374px  … その幅以下のとき
        min-width: 768px / 1281px / 1441px                   … その幅以上のとき
        min-width: 768px と max-width: 1280px の組み合わせ    … その間の幅だけ
        min-width: 768px と max-width: 1024px の組み合わせ    … その間の幅だけ（cpq.css）
      767px 以下がスマホです。1140px 以下では、メニューがスマホ用に切り替わります。

   D. 1ページだけ変える場合
      1ページだけ変える場合は、そのページだけに効く指定にします。
      カンマで複数の指定を並べている場合は、一つずつページを限定します。
      画面幅ごとの指定にも、同じ限定を付けます。
      限定しないと、同じ部品を使っているすべてのページが変わります
      （ヘッダー・フッター・お問い合わせの帯などは、5ページ共通の部品です）。

      ページの名前（各ページの body に付いている class です）
        TOP（index.html）                  class がありません。body:not(.page) と書きます
        金融業向け（finance.html）          .p-finance
        製造業向け（cycle.html）            .p-cycle
        資料ダウンロード（download.html）   .p-download
        製造見積LP（cpq.html）            .p-cpq

      例：カンマで並んでいる指定を、金融業向けのページだけに効かせる
        元の指定：
          .footer__link,
          .footer__block:last-child .footer__title
        金融業向けページだけに効かせる指定：
          .p-finance .footer__link,
          .p-finance .footer__block:last-child .footer__title
        最初の指定だけに .p-finance を付けると、
        カンマの後ろの指定はほかのページにも効いてしまいます。

      例外：
        body や html、:root、* の指定には、ページの名前を単純に前へ付けないでください。
        ページの名前がすでに付いている指定にも、重ねて付けないでください。
        実際の HTML に合う書き方を確認します。
        ・TOP の body そのものを指定する場合：
            body:not(.page)
        ・TOP の body 内にあるフッター見出しを指定する場合：
            body:not(.page) .footer__title
        ・「body:not(.page) body」という書き方は、対象に一致しないため使いません
          （body の中に、もう一つ body はありません）。
          同じ理由で、金融業向けの body そのものは「body.p-finance」と書きます
          （「.p-finance body」は一致しません）。
        ・style.css の「.page .c-section-header」のように、すでに body の class で始まっている指定に、
          「.p-finance .page .c-section-header」と重ねても、一致しません
          （page と p-finance は、同じ body に付いているためです）。
          「.p-finance .c-section-header」のように、実際の HTML に合う形にします。
        ・html・:root・* をページ限定で変更する必要がある場合は、機械的に書き換えず、
          影響範囲と書き方を説明して、確認を求めてください。

   E. !important について
      !important は原則として付けません。
      変更が効かない場合は、現在効いている指定、画面幅の条件、既存の !important、
      HTML や JavaScript からの指定を確認します。
      それでも !important が必要な場合は、対象の項目・理由・影響範囲を先に報告し、
      確認を受けてから使用します。
      効かないという理由だけで、自動的に付けないでください。

      メニューや開け閉めなど、動きに関係する display・height・opacity・visibility・transform には、
      今回の更新ルールでは !important を付けません。
      これらに必要だと判断した場合は、作業を止めて相談してください。

   F. バージョン番号を上げる
      このファイルを書き換えたら、5ページの HTML にある読み込みの行「custom.css?ver=1.0.0」の
      番号を、5ページすべて同じ新しい番号に変更します（例：1.0.0 → 1.0.1）。
      上げないと、古い内容がブラウザに残り、変更が見えないことがあります。

   G. 確認する
      PC とスマホの両方を確認します。
      画面幅の条件を変更した場合は、その境界の前後も確認します。
      変更したページだけでなく、変更しないページへの影響も確認します。


   ■ 例の使い方

   下の区分ごとに、書き方の例を入れてあります。
   例は「例ここから」「例ここまで」の行で囲んであり、このままでは効きません
   （コメントの中にあるので、ルール 4 の重複確認の対象外です）。
   使うときは、その2行を消し、A〜G のとおりに、場所と値を書き換えてください。
   使わない例は、消しても、そのままでも構いません。
============================================================================ */


/* ============================================================================
   色
   文字の色・背景の色・線の色は、ここに書きます。
============================================================================ */

/* 例1：お問い合わせの帯のボタンの、文字の色を変える（5ページすべてが変わります）
        現在効いている指定は、style.css の「.c-cta__contact-text」の color です。
        この場所の color は、画面幅ごとの指定にも、cpq.css にもありません。 */

/* 例ここから（使うときは、この行を消す）
.c-cta__contact-text {
  color: #ffe9a8;
}
例ここまで（使うときは、この行を消す） */

/* 例2：同じ場所を、金融業向けのページだけ変える
        ページの名前（.p-finance）で、金融業向けのページだけに限定しています。 */

/* 例ここから（使うときは、この行を消す）
.p-finance .c-cta__contact-text {
  color: #ffe9a8;
}
例ここまで（使うときは、この行を消す） */


/* ============================================================================
   文字の大きさ
   font-size は、ここに書きます。
============================================================================ */

/* 例：フッターの見出し（「Salesforce x JSOL」「業種別詳細」など）を、PC で 20px → 22px にする
       （5ページすべてが変わります）
       この場所の font-size は、style.css の3か所（条件なし・1280px 以下・767px 以下）で
       指定されています。cpq.css には指定がありません。3か所とも書いています。
       ・条件なし：20px を 22px に変えています
       ・1280px 以下：style.css の式の「20」を「22」に変えています
       ・767px 以下（スマホ）：style.css と同じ値のまま書いています（スマホの表示を変えないため） */

/* 例ここから（使うときは、この行を消す）
.footer__title {
  font-size: 22px;
}

@media screen and (max-width: 1280px) {
  .footer__title {
    font-size: max(calc(22 / 1280 * 100vw), 16px);
  }
}

@media screen and (max-width: 767px) {
  .footer__title {
    font-size: 24px;
  }
}
例ここまで（使うときは、この行を消す） */


/* ============================================================================
   余白
   margin（外側の余白）・padding（内側の余白）は、ここに書きます。
============================================================================ */

/* 例：TOP の「提供できるソリューション」の、各カードの見出しの下の余白を、PC で 24px → 40px にする
       この場所の下の余白は、style.css の3か所で指定されています。
       条件なしの指定は「margin: 0px 0px 24px 0px」と、上下左右をまとめて書いてあります
       （下の余白が 24px）。ここでは margin-bottom だけを書いて、下の余白だけを変えています。
       ・条件なし：下の余白を 40px にしています
       ・1280px 以下：style.css の式の「24」を「40」に変えています
       ・767px 以下（スマホ）：style.css と同じ値のまま書いています（スマホの表示を変えないため） */

/* 例ここから（使うときは、この行を消す）
.index-solution__title {
  margin-bottom: 40px;
}

@media screen and (max-width: 1280px) {
  .index-solution__title {
    margin-bottom: calc(40 / 1280 * 100vw);
  }
}

@media screen and (max-width: 767px) {
  .index-solution__title {
    margin-bottom: 24px;
  }
}
例ここまで（使うときは、この行を消す） */


/* ============================================================================
   そのほか
   角の丸み・線・影・幅や高さなど、上の3つに当てはまらないものは、ここに書きます。
   新しいセクションを足したときの指定も、ここに「セクションの名前」の見出しを付けてまとめます。
============================================================================ */

/* 例：ヘッダーの「資料請求」ボタンの、角の丸みを小さくする（5ページすべてが変わります）
       現在効いている指定は、style.css の「.header__nav-item--contact」の border-radius です。
       この場所の border-radius は、画面幅ごとの指定にも、cpq.css にもありません。
       （このボタンは、PC 用のメニューの中にあります。1140px 以下では表示されません） */

/* 例ここから（使うときは、この行を消す）
.header__nav-item--contact {
  border-radius: 8px;
}
例ここまで（使うときは、この行を消す） */