@charset "UTF-8";
/* ============================================================
   コア・ソリューションプラン 26年版　追加分
   ------------------------------------------------------------
   /resource/css/service/style.css（研修・動画外共通と同じもの）を
   読み込んだうえで、コア・ソリューションプランだけに必要な差分を
   ここに書く。style.css 側は変更しない。

   読み込み順
     1. package_plan_new.css   … 既存（左ナビ・p_faq・c_heading など）
     2. service/style.css      … 26年版の共通デザイン
     3. package_plan_2508.css  … このファイル
   ============================================================ */


/* ============================================================
   1. ヒーロー（TOP画像とタイトル）
   ============================================================ */

/* ---- 【旧ページ】サブタイトル・タイトル → 画像。全体を 10:3 に収める ----
   既存のTOP画像（730×150）を使う記事向け。
   テキストの残りの高さを画像が埋め、比率を崩さず中央を残して余りを切る。 */
.c_heading--primary.p_heroRatio {
  display: flex;
  flex-direction: column;
  /* aspect-ratio: 10 / 3; */
}
.c_heading--primary.p_heroRatio .c_heading__imgWrap {
  flex: 1;
  min-height: 0;
}
.c_heading--primary.p_heroRatio .c_heading__img {
  height: 100%;
  line-height: 0;
}
.c_heading--primary.p_heroRatio .c_heading__img img {
  width: 100%;
  height: 100%;
}

/* ---- 【新ページ】10:3 の画像に、サブタイトルとタイトルを重ねる ----
   パワポで作った 3300×990px の画像を使う記事向け（cf_top_image_10_3 に画像パスが入っている記事）。
   画像は切り取らず、幅いっぱいでそのまま表示する。 */
.c_heading--primary.p_heroOverlay {
  border-top: none;      /* 上の青線を出さない */
  padding-top: 0;
}
.c_heading--primary.p_heroOverlay .c_heading__imgWrap {
  position: relative;
}
.c_heading--primary.p_heroOverlay .c_heading__img {
  margin: 0;
  line-height: 0;
}
.c_heading--primary.p_heroOverlay .c_heading__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 画像に重ねる文字の枠。位置は画像に対する割合で固定してある。
     左右の余白 4% ／ 幅 44% ／ 上から 18% ／ 高さ 64%
   もっとも長いタイトル(33字)＋もっとも長いサブタイトル(35字)でも収まる大きさ。
   ※パワポ側のフォーマットもこの数値に合わせてある（3300×990 なら
     左132px ／ 上178px ／ 幅1452px ／ 高さ634px） */
.c_heading--primary.p_heroOverlay .p_heroText {
  position: absolute;
  top: 18%;
  height: 64%;
  width: 44%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #02024D;
}
.c_heading--primary.p_heroOverlay .p_heroText--left {
  left: 4%;
  align-items: flex-start;
  text-align: left;
}
.c_heading--primary.p_heroOverlay .p_heroText--right {
  right: 4%;
  align-items: flex-end;
  text-align: right;
}
.c_heading--primary.p_heroOverlay .c_heading__sub,
.c_heading--primary.p_heroOverlay .c_heading__ttl {
  /* 明朝体。Windows は游明朝、Mac はヒラギノ明朝。どちらも標準で入っている */
  font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "MS PMincho", "Noto Serif JP", serif;
  padding-left: 0;
  font-weight: 700;
}
.c_heading--primary.p_heroOverlay .c_heading__sub {
  margin-bottom: 6px;
  font-size: clamp(12px, 1.9vw, 15px);
  line-height: 1.5;
}
.c_heading--primary.p_heroOverlay .c_heading__ttl {
  margin-bottom: 0;
  font-size: clamp(17px, 2.9vw, 24px);
  line-height: 1.4;
}

/* 狭い画面では重ねずに、画像の下へ降ろす（文字が読めなくなるのを防ぐ） */
@media screen and (max-width: 599px) {
  .c_heading--primary.p_heroOverlay .p_heroText {
    position: static;
    width: 100%;
    height: auto;
    padding: 8px 0 0;
    align-items: flex-start;
    text-align: left;
  }
}

/* ---- タイトルの折り返しを、語の途中ではなく意味の切れ目にする ----
   テンプレート側でタイトルに <wbr>（折ってよい位置の印）を入れてある。
     keep-all      … 印のある場所でだけ折る
     overflow-wrap … 1文節が幅に収まらないときだけ効く保険
     text-wrap     … 各行の長さを均等に寄せる（非対応ブラウザでは無視されるだけ） */
.c_heading--primary .c_heading__ttl,
.c_heading--primary .c_heading__sub {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: balance;
}


/* ============================================================
   2. 対象階層タグ
   ※すでに他のCSSにこの定義がある場合は、このブロックを削除して
     二重定義を避けてください
   ============================================================ */
.p_targetTags {
  display: flex;
  flex-wrap: wrap;
}
.p_targetTags_item {
  flex: 0 1 auto;
  margin: 3px 0;
}
.c_targetTags {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 0;
  color: #333;
  display: block;
  font-size: 11px;
  margin: 0 1px;
  padding: 1px 5px;
  text-align: center;
}


/* ============================================================
   3. 本文の細かい調整
   ============================================================ */

/* ------------------------------------------------------------
   記事本文（cf_plan_contents）の中で使われている書き方への対応

   旧テンプレートは cf_plan_contents を <div class="c_section c_section--secondary">
   で囲っていたため、package_plan_new.css の
     .c_section--secondary h4 / h5 / a / .small / .dot / .ast / .num
   が効いていた。
   26年版は m_customFieldTxtbox で囲うので、同じ見た目を保つために
   必要な分だけここで引き継ぐ。
   （h3 は style.css の「えんじ色の左線」を使うので、◆は引き継がない）
   ------------------------------------------------------------ */

/* 小見出し */
.m_customFieldTxtbox h4 {
  margin-bottom: var(--space-xs, 8px);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.m_customFieldTxtbox h5 {
  margin-bottom: var(--space-xs, 8px);
  color: #11004d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

/* 本文中のリンク（記事側に class が無いものも拾う）
   見た目は style.css の .m_link + .m_hasIco--arrow と完全にそろえる。
   以前は色・太さ・アイコンの大きさが違っていて、他のリンクと見た目がずれていた。 */
.m_customFieldTxtbox a:not(.m_link):not(.num):not(.noIco) {
  position: relative;
  display: inline-block;
  padding-left: .8em;
  color: var(--color-link, #052674);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition, .2s);
}
.m_customFieldTxtbox a:not(.m_link):not(.num):not(.noIco):hover {
  color: var(--color-main, #8F1E35);
}
.m_customFieldTxtbox a:not(.m_link):not(.num):not(.noIco)::before {
  content: "\f105";
  position: absolute;
  left: 0;
  display: block;
  font-family: fontAwesome;
}
.m_customFieldTxtbox a.noIco {
  display: inline;
  color: #2c4b79;
}

/* 記事側で使われている補助クラス */
.m_customFieldTxtbox .small {
  font-size: 12px;
}
.m_customFieldTxtbox .num {
  position: relative;
  display: block;
  padding-left: 1.5em;
}
.m_customFieldTxtbox .num > span {
  position: absolute;
  left: 0;
  display: block;
}
.m_customFieldTxtbox .dot {
  position: relative;
  display: block;
  padding-left: 1em;
}
.m_customFieldTxtbox .dot::before {
  content: "・";
  position: absolute;
  left: 0;
  display: block;
}
.m_customFieldTxtbox .ast {
  position: relative;
  display: block;
  padding-left: 1.5em;
}
.m_customFieldTxtbox .ast::before {
  content: "※";
  position: absolute;
  left: 0;
  display: block;
}
.m_customFieldTxtbox .arrow {
  width: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0 !important;
  border-top: 24px solid #ccc;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

/* 記事に貼られた画像が本文幅を超えないようにする */
.m_customFieldTxtbox img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
  padding-top: 10px;
}

/* ai画像 */
#infoGraphic .m_onlyImg > img {
  width: 90%;
  display: block;
  margin: auto;
}

/* ---- 関連サービスの中のリンク ----
   cf_more_plan は記事に直接HTMLで書かれていて <a> にクラスが無い。
   記事を書き換えずに、セクション内のリンクをまとめて m_link と同じ見た目にする */
#link .m_customFieldTxtbox a {
  position: relative;
  display: inline-block;
  padding-left: .8em;
  color: var(--color-link, #052674);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--transition, .2s);
}
#link .m_customFieldTxtbox a:hover {
  color: var(--color-main, #8F1E35);
}
#link .m_customFieldTxtbox a::before {
  content: "\f105";
  font-family: fontAwesome;
  position: absolute;
  left: 0;
}

/* ---- ゴールイメージのリスト --------------------------------------------
   MTのテンプレートでは <ul> に class="m_list" を付けられない
   （属性の中に > を書くとMTがタグを読み違えて出力が止まるため）。
   代わりにここで .m_list と同じ見た目を当てる。 */
.m_goal .m_customFieldTxtbox ul,
.m_goal .m_customFieldTxtbox ol {
  list-style: none;
}
.m_goal .m_customFieldTxtbox ul > li,
.m_goal .m_customFieldTxtbox ol > li {
  font-size: 14px;
  line-height: 1.6;
}
.m_goal .m_customFieldTxtbox ul > li + li,
.m_goal .m_customFieldTxtbox ol > li + li {
  margin-top: var(--space-xs, 8px);
}

/* ---- Q&A --------------------------------------------*/
.p_faq__a a {
  color: #052674;
}
/* Q&Aの番号 */
#faq .p_faq__body {
  counter-reset: faqNum;
}
#faq .p_faq__q {
  counter-increment: faqNum;
}
#faq .p_faq__q::before {
  content: "Q" counter(faqNum);
}
/* Q&Aの左の余白を消す */
#faq .p_faq__body {
  padding-left: 0;
}
@media screen and (max-width: 768px) {
  #faq .p_faq__body {
    padding-left: 0;
  }
}

/* ---- 「ラインナップはこちら」ボタン---- */
.p_lineupBtn {
  display: flex;
  justify-content: center;
}
.p_lineupBtn__target {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 56px;
  padding: 12px 56px 12px 40px; /* 右側を広げて矢印のスペースを確保 */
  background: #fff;
  border: 2px solid #11004d;
  border-radius: 50px;
  color: #11004d;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.p_lineupBtn__target::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 29px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.p_lineupBtn__target:hover {
  background: #11004d;
  color: #fff;
  text-decoration: none;
}
@media screen and (max-width: 599px) {
  .p_lineupBtn__target {
    min-width: 0;
    width: 100%;
  }
}