@charset "UTF-8";
/* --- H1 スタイル (.section-title) --- */
.section-title {
  /* SP版の仕様 */
  font-size: 18px;
  font-weight: bold;
  border-left: 6px solid #615AFF; /* SP版のボーダー */
  padding-left: 12px; /* ボーダーとテキストの隙間 */
  margin-top: 80px;
  margin-bottom: 16px; /* SP版の下余白 */
}

.kv-container {
  width: 100%;
}

.banner-link {
  display: block;
  position: relative;
  text-decoration: none;
  overflow: hidden;
  /* 右側にグレーの帯が入るスペースを確保 */
  padding-right: 16px;
  background-color: #f5f5f5; /* 帯の背景色と揃えるときれいです */
}

.banner-link img {
  /* paddingを除いた幅いっぱいに表示 */
  width: 100%;
  display: block;
  transition: opacity 0.3s;
}

/* 右端のグレー帯 */
.banner-link::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 16px; /* 確保したpaddingと同じ幅 */
  height: 100%;
  background-color: #7C33F2;
  z-index: 1;
}

/* 矢印（三角形） */
.banner-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
  z-index: 2;
  transition: right 0.2s ease;
}

/* ホバー時の挙動 */
.banner-link:hover img {
  opacity: 0.8;
}

.banner-link:hover::after {
  right: 1px;
}

/* --- 募集中の案件 スタイル (.recruitment-status) --- */
.recruitment-status {
  /* SP版の仕様 */
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/* アイコンコンテナ */
.accordion-toggle-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0; /* アイコンの幅を固定 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
}

/* アイコン画像共通スタイル */
.accordion-toggle-icon img {
  position: absolute; /* 親要素内で重ねるため絶対配置 */
  /* SVGの色はCSSでは変更できないため、ここではサイズのみ制御 */
}

/* 初期状態：マイナスアイコンは非表示 */
.icon-minus-img {
  display: none;
}

/* 展開時（aria-expanded="true"）のアイコン制御 */
.accordion-header[aria-expanded=true] .icon-plus-img {
  display: none; /* プラスアイコンを非表示 */
}

.accordion-header[aria-expanded=true] .icon-minus-img {
  display: block; /* マイナスアイコンを表示 */
}

.accordion-title-wrapper {
  display: flex;
  flex-direction: column; /* SP版では縦並び */
  gap: 4px;
  flex-grow: 1;
}

.accordion-title {
  font-size: 14px; /* SP版のフォントサイズ */
  font-weight: bold;
  border-bottom: 1px solid #fff;
  border-right: none;
  padding-bottom: 8px;
  padding-right: 0;
}

.recruitment-period {
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  line-height: 1.4;
}

.accordion-content {
  border-top: 1px solid #333;
  padding: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.accordion-content-inner {
  padding: 16px;
}

.dummy-text {
  font-size: 14px;
  color: #ccc;
}

.bold-underline {
  font-weight: bold;
  text-decoration: underline;
}

/* --- ボタンエリア スタイル --- */
.button-area {
  margin-bottom: 80px;
}

.button-group {
  display: flex;
  flex-direction: column; /* SP版は縦並び */
  align-items: center;
  gap: 16px; /* SP版のボタン間隔 */
}

.button-block {
  width: 100%;
  max-width: 450px; /* PCでのボタン+テキストのブロックの最大幅 */
  text-align: center;
}

.info-text {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: bold;
}

.app-info-text {
  font-size: 14px;
  margin-bottom: 8px;
  font-weight: bold;
}

/* --- ボタン共通スタイル --- */
.btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border-radius: 9999px;
  font-size: 16px; /* PC/SP共通のフォントサイズ */
  font-weight: bold;
  color: #fff;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

.btn:hover {
  filter: brightness(1.1);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* 青系グラデーション */
.btn-blue {
  background: linear-gradient(90deg, #20D6DE, #004875);
}

/* ピンク系グラデーション */
.btn-pink {
  background: linear-gradient(90deg, #7C33F2, #E040B7);
}

.new-cta-area {
  margin-bottom: 80px;
}

/* ヘッダー部分（バンザイアイコンとキャッチテキスト） */
.cta-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; /* アイコンとテキストの間の余白 */
}

/* キャッチテキスト */
.highlight {
  font-size: 24px; /* 指定された24px */
  font-weight: bold; /* 指定されたbold */
  margin: 0;
}

/* バンザイアイコンの調整 */
.banzai-icon {
  /* 適切なサイズに調整（画像から類推） */
  height: 22px;
  width: auto;
  display: block;
}

/* --- 新しい緑のグラデーションボタン --- */
.btn-green {
  background: #0DC754;
}

/* --- グリッドコンテナ --- */
.grid-container {
  display: grid;
  /* SP版: 1列、行間隔 16px */
  grid-template-columns: 1fr;
  gap: 16px;
}

/* --- グリッドアイテム（ボタン） --- */
.grid-item {
  display: flex;
  justify-content: space-between; /* テキストとアイコンを左右に配置 */
  align-items: center;
  /* SP版のパディング 16px */
  padding: 16px;
  /* SP/PC共通のフォントサイズ 14px */
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  border-radius: 8px; /* 角丸 */
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s, transform 0.1s;
  background: #615AFF;
}

.grid-item:hover {
  filter: brightness(1.1);
  text-decoration: none;
}

.grid-item:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* --- 矢印アイコン --- */
.item-icon {
  /* 指定されたサイズ 20px (W) x 12px (H) */
  width: 20px;
  height: 12px;
  flex-shrink: 0; /* アイコンが縮まないように固定 */
  margin-left: 12px; /* テキストとの隙間 */
}

/* --- コンテンツ行の共通スタイル --- */
.content-row {
  display: flex;
  flex-direction: column; /* SPでは縦並び */
  gap: 16px; /* SPの画像と本文の隙間 */
  margin-bottom: 24px; /* SPの2行間の余白 */
}

/* 2行目の上部余白は1行目の margin-bottom で担保されます。
 ここでは2行目以降の余白指定を適用します。 */
.content-row:last-child {
  margin-bottom: 40px; /* セクション下部の余白調整用 */
}

/* --- テキストスタイル --- */
.section-heading {
  /* PC/SP共通 */
  font-size: 18px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 16px; /* 見出しの下に少し余白 */
}

.main-text {
  /* PC/SP共通 */
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 16px;
}

.main-text:last-child {
  margin-bottom: 0;
}

/* --- 画像ブロック --- */
.image-block {
  width: 100%; /* SPでは全幅 */
  /* 画像を覆うグレーの背景として機能させる */
  background-color: #ddd;
  border-radius: 8px;
  /* 画像の代わりに高さを確保するための最小値 */
  min-height: 250px;
  overflow: hidden;
}

.image-block img {
  width: 100%;
  height: auto;
  display: block;
  /* 実際の画像はパスが設定されていますが、ここではプレースホルダーとして振る舞う */
}

/* --- グリッドコンテナ（PC 3列 / SP 1列） --- */
.grid-3col {
  display: grid;
  /* SP版は1列 */
  grid-template-columns: 1fr;
  /* SPの項目間ギャップは画像から24px程度を想定 */
  gap: 24px;
}

/* --- 画像エリア（画像は/common/img/xxxx.pngを想定） --- */
.image-area {
  width: 100%;
  /* 画像の代わりに高さを確保するための最小値 (PC版の縦横比を想定して適当な高さを設定) */
  min-height: 200px;
  border-radius: 8px;
  margin-bottom: 16px; /* 画像と番号/見出しの間の余白を想定 */
  overflow: hidden;
}

.image-area img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 番号と見出しのヘッダー --- */
.content-header {
  display: flex;
  align-items: center; /* 番号と見出しを縦方向で中央に揃える */
  gap: 16px; /* 番号と見出しの間の隙間 */
  margin-bottom: 16px; /* ボーダー上部の余白 */
  padding-bottom: 16px; /* ボーダーと本文の間の余白 */
  border-bottom: 1px solid #B3B3B3; /* 指定されたボーダー */
}

/* --- 番号のスタイル (1, 2, 3) --- */
.item-number {
  /* サイズ 58px x 58px */
  width: 58px;
  height: 58px;
  flex-shrink: 0; /* 縮まないように固定 */
  /* フォントスタイル */
  font-size: 22px;
  font-weight: bold;
  color: #fff; /* 指定色 */
  /* 背景色と中央配置 */
  background-color: #222; /* 画像から類推した濃い色 */
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- 見出しのスタイル --- */
.item-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
}

.title-highlight {
  color: #615AFF; /* 指定された紫 */
}

/* --- 本文のスタイル --- */
.point-text {
  font-size: 16px; /* **修正: 16px** */
  margin-top: 16px; /* ボーダーと本文の間の余白 */
  margin-bottom: 0;
}

/* 1. ulタグ: 標準のマーカーを非表示にし、カスタム配置の基準点(position: relative)とする */
.custom-bullet-list {
  list-style: none; /* 標準の黒い点を非表示 */
  padding-left: 0; /* 標準のパディングをリセット */
  margin: 20px 0; /* 上下の余白 */
}

/* 2. liタグ: 擬似要素のためのスペースを確保し、flexでテキストとカスタムマーカーを整列 */
.custom-bullet-list li {
  display: flex;
  align-items: flex-start; /* テキストの先頭に点を合わせる */
  margin-bottom: 12px; /* 各リストアイテムの下余白 */
  font-size: 16px; /* 本文フォントサイズを適用 */
  padding-left: 26px; /* カスタムマーカーの幅と余白を考慮したパディング */
  position: relative; /* li要素を基準に擬似要素を配置 */
}

/* 3. 擬似要素 (紫のカスタムマーカー) */
.custom-bullet-list li::before {
  content: ""; /* 擬似要素には必須 */
  /* サイズ 10px x 10px */
  width: 10px;
  height: 10px;
  /* 色と形状 */
  background-color: #615AFF; /* 指定された紫 */
  border-radius: 50%; /* 完全な円形 */
  /* 配置 */
  position: absolute;
  left: 0; /* liの左端に配置 */
  top: 10px; /* テキストのベースラインに合わせて調整 */
  /* 本文との間の余白 8px */
  margin-right: 8px; /* この擬似要素の左右の隙間は li の padding-left で確保しています */
}

/* 画像ラッパー */
.online-process-image-wrapper {
  /* PCの画像幅を中央寄せにするための設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  overflow: hidden; /* 画像がはみ出さないように */
}

/* 画像スタイル */
.online-process-image {
  width: 100%;
  object-fit: cover; /* 画像がコンテナに収まるようにトリミング */
  border-radius: 8px; /* 画像に角丸を適用 (画像から類推) */
}

/* Q&Aアイテム */
.qa-item {
  margin-bottom: 32px; /* Q&A項目間の間隔 32px */
}

/* Qスタイル */
.qa-question {
  font-size: 18px; /* PC/SP共通 18px */
  font-weight: bold; /* Qはbold */
  margin: 0 0 16px 0; /* QとAの間隔 16px */
}

/* Aスタイル */
.qa-answer {
  font-size: 16px; /* PC/SP共通 18px */
  margin: 0;
}

/* ------------------------------------------- */
/* --- ボタンのCSS --- */
/* ------------------------------------------- */
/* ボタンラッパー（中央寄せと上余白） */
.sub-button-wrapper {
  margin-top: 32px; /* Q&Aとボタンの間の余白 32px */
  text-align: center; /* ボタンを中央寄せ */
}

/* ボタン本体 */
.sub-btn {
  display: inline-block; /* 幅指定のためにinline-block */
  width: 100%;
  max-width: 320px; /* ボタンの最大幅 320px */
  padding: 16px 24px;
  border-radius: 9999px;
  font-size: 16px; /* フォントサイズ 16px */
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-align: center;
  /* 色とシャドウ */
  background-color: #615AFF; /* 指定された紫 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: 0.3s;
}

.sub-btn:hover {
  filter: brightness(1.1);
  text-decoration: none;
}

.sub-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* --- PC版（768px以上）のスタイル --- */
@media (min-width: 768px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }
  /* H1 */
  .section-title {
    font-size: 22px; /* PC版のフォントサイズ */
    border-left-width: 10px; /* PC版のボーダー幅 */
    padding-left: 16px; /* PC版のパディング調整 */
    margin-bottom: 32px; /* PC版の下余白 */
  }
  /* 募集中の案件 */
  .recruitment-status {
    font-size: 18px; /* PC版のフォントサイズ */
  }
  .banner {
    height: 200px; /* PC/SP共通の高さ */
    margin-bottom: 80px; /* SP版の下余白 */
  }
  /* ボタンエリア */
  .button-area {
    margin-bottom: 80px; /* PC版のページ下部の余白を広げる */
  }
  .button-group {
    flex-direction: row; /* PC版は横並び */
    justify-content: center;
    gap: 32px; /* PC版のボタン間隔 */
  }
  .button-block {
    /* 1000pxのコンテナ内で2つのブロックが並ぶ */
    width: 50%;
    max-width: 484px; /* (1000px - 32px) / 2 = 484px */
  }
  /* --- コンテンツ行の共通スタイル --- */
  .content-row {
    flex-direction: row; /* PCでは横並び */
    justify-content: space-between;
    gap: 40px; /* PCの画像と本文の隙間 */
    margin-bottom: 40px; /* PCの2行間の余白 */
  }
  /* 各ブロックを1:1で配置 */
  .image-block {
    width: 30%;
    height: 224px;
    min-height: 0;
  }
  .text-block {
    width: 70%;
  }
  /* 1行目: テキスト(左) / 画像(右) */
  .content-row:nth-child(1) {
    flex-direction: row;
  }
  /* 2行目: 画像(左) / テキスト(右) */
  .content-row.second-row {
    flex-direction: row-reverse; /* row-reverseで画像が左に移動 */
  }
  /* 2行目の画像ブロックの順序を修正 */
  .content-row.second-row .image-block {
    order: -1; /* 画像ブロックを左端へ移動 */
  }
  .content-row.second-row .text-block {
    order: 1; /* テキストブロックを右端へ移動 */
  }
  /* PC版での見出しの余白調整 */
  .section-heading {
    margin-bottom: 20px;
  }
  /* PC版: 3列、列間隔 24px */
  .grid-3col {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; /* 3colのgapは24px */
  }
  /* PC版: 3列、列間隔 32px、行間隔 24px */
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px; /* 列間隔 */
    row-gap: 24px; /* 行間隔 */
  }
  .online-process-image {
    width: 100%; /* PCは700px幅 */
  }
  .sub-btn {
    /* スマホ画面の幅が320pxより小さい場合でもボタンがはみ出ないように調整 */
    max-width: 320px;
  }
  /* ...既存のPC用スタイル... */
  .banner-link {
    /* PCでは帯の幅を広げる */
    padding-right: 24px;
  }
  .banner-link::before {
    width: 24px;
  }
  .banner-link::after {
    right: 4px;
    border-width: 8px 0 8px 10px;
  }
  .banner-link:hover::after {
    right: 2px;
  }
}/*# sourceMappingURL=securitytoken.css.map */