/* ヘッダー--------------------------------------- */

/* 全体のリセット（必要に応じて調整してください） */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: YakuHanJPs, "Noto Sans JP", "Hiragino Sans", "Hi ragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* ヘッダー全体のベース（白背景、下に薄い境界線） */
.dx-site-header {
      position: sticky;
    top: 0;
  background-color: #ffffff;
  width: 100%;
  border-bottom: 1px solid #e0e0e0;
  padding: 15px 24px;
  /* position: relative; */
  z-index: 100;
}

/* 内側のコンテナ（左右に綺麗に振り分け） */
.header-inner {
  display: flex;
  /* justify-content: space-between; */
  gap: 0 2%;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* --- 左側：画像エリア --- */
.header-logo-area a {
  display: block;
}
.header-logo-area{
  width: 180px;
  max-width: 20%;
}
.header-text{
  width: 628px;
     max-width: 68%;
}

.header-logo-area img {
  width: 100%;
  display: block;
}
.header_left{
  width:72%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
}
.header-nav{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 1em;
}
.header-nav li a{
  text-decoration: none;
  color: #333333;
  font-size: 18px;
  font-weight: bold;
}
.header-nav li a:hover{
  /* text-decoration: underline; */
  opacity: 0.5;
}
.header-nav li{
  margin-right: 15px;
  padding-right: 15px;
  border-right: 2px solid #192b72;
}
.header-nav li:last-child{
  margin: 0;
  padding: 0;
  border: none;
}
/* --- 右側：ツートン枠線ボタン --- */
.header-btn-area {
  width: 24%;
  max-width: 480px;
    margin-left: auto;

}
.slide-content-inner{
  /* display: flex; */
  gap: 10px; /* ボタン同士の間隔 */
      justify-content: flex-end;
}
header .cta-btn{
  margin-left: auto;
  width: 235px;
  max-width: 100%;
    /* max-width: 235px; */
    /* width: calc(50% - 5px); */
    box-shadow:none;
    background: linear-gradient(345deg, #e50020 50%, #209bdf 50%);
}
header .btn-inner{
    font-size: 20px;
        padding: 10px 5px;
}

/* ヘッダー--------------------------------------- */

/* KV------------------------------------------------ */

.kv-section{
    background-color: #f4f4f4;
}

.kv-section img{
    width: 100%;
}


/* NEWS--------------------------------------------------- */

/* セクション全体のコンテナ */
.event-news-section {
  background-color: #f4f4f4; /* 背景の薄いグレー */
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  background-image: url(../img/news_bg.png);
  background-size: 1630px auto;
  background-position: center 20px;
  background-repeat: no-repeat;
}
.event-news-section::after {
  pointer-events: none;
  content: "";
  position: absolute;
  width: 100%;
  height: 192px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 15%);
  background-image: url(../img/news_bg2.png);
  background-size: 1485px auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.event-news-section-bg{
    position: absolute;
    top: 0;
    left: -2.5%;
    width: 1630px;
    max-width: 105%;
    z-index: 0;
}
.news-block{
  max-width: 100%;
}

/* 内側のメインコンテンツエリア（四隅のL字装飾のベース） */
.news-inner {
  position: relative;
  width: 100%;
  max-width: 950px;
  padding: 80px 60px;
  /* background-color: #f4f4f4; */
  z-index: 2;
}

/* --- 四隅のL字装飾（CSS擬似要素で再現） --- */
/* 左上（赤）*/
.news-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-top: 6px solid #e50020;
  border-left: 6px solid #e50020;
  border-top-left-radius: 12px;
}

/* 右下（赤）*/
.news-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-bottom: 6px solid #e50020;
  border-right: 6px solid #e50020;
  border-bottom-right-radius: 12px;
}

/* 右上（青）と 左下（青）用にお知らせリストの親を利用 */
.news-list::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-top: 6px solid #209bdf;
  border-right: 6px solid #209bdf;
  border-top-right-radius: 12px;
}

.news-list::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-bottom: 6px solid #209bdf;
  border-left: 6px solid #209bdf;
  border-bottom-left-radius: 12px;
}

/* --- 見出し部分 --- */
.news-heading {
    width: 625px;
    max-width: 80%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -20%);
    top: 0;
}

.news-heading img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* --- ニュースリスト部分 --- */
.news-list {
  list-style: none;
}

.news-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 0;
}

/* 日付 */
.news-date {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  /* font-family: "Courier New", Courier, monospace;  */
  /* 等幅フォントで綺麗に揃えます */
  white-space: nowrap;
}

/* カテゴリラベルの共通設定 */
.news-label {
  display: inline-block;
  width: 85px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* ラベルの色分け */
.label-red { background-color: #e50020; }
.label-blue { background-color: #209bdf; }
.label-dark { background-color: #333333; }

/* 記事テキスト */
.news-text {
  font-size: 15px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 1行に収める場合。複数行にする場合は削除してください */
  flex: 1;
}
.news-text a{
  color: #333333;
}

/* --- すべてを見るボタン --- */
.news-more-wrap {
  text-align: center;
      position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 20px;
}

.news-more-btn {
  display: inline-block;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  text-decoration: none;
  padding: 0 5px 6px;
  /* ドットの下線 */
  border-bottom: 3px dotted #333333; 
  transition: opacity 0.2s ease;
  position: relative;
}

.news-more-btn:hover {
  opacity: 0.7;
}

.news-more-btn .arrow {
    display: inline-flex;
    align-items: center;
  margin-left: 8px;
    position: absolute;
  top: 50%;
  right: 0;
  transform: translate(150%, -50%);
}
.news-more-btn .arrow img {
    width: 15px;
}

/* NEWS--------------------------------------------------- */

/* プログラム------------------------------------------------- */


/* セクション全体の背景（画像に合わせた薄いグレー） */
.dx-program-section {
  background-color: #f4f4f4;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

/* メインコンテンツのコンテナ */
.dx-program-inner {
  width: 100%;
  max-width: 1000px; /* 画像の比率に合わせた最適な横幅 */
  text-align: center;
  z-index: 2;
  margin-top: 76px;
}

/* --- 見出しのスタイリング --- */
.dx-program-heading {
  color: #002b54; /* 特徴的な深いネイビー */
  font-weight: bold;
  line-height: 1.35;
  margin-bottom: 30px;
}

/* 1行目（小さめの文字） */
.dx-program-heading .sub-title {
  display: block;
  font-size: 40px;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

/* 2行目（大きめの文字） */
.dx-program-heading .main-title {
  display: block;
  font-size: 50px;
  letter-spacing: 0.04em;
}

/* --- 中央のメイン画像 --- */
.dx-program-image {
  width: 100%;
  margin-bottom: 30px;
}

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

/* --- 下部説明文のスタイリング --- */
.dx-program-desc {
  text-align: left; /* テキストは左寄せ */
  width: 100%;
}

.dx-program-desc p {
  font-size: 18px;
  font-weight: bold; /* 画像の雰囲気に合わせてやや太めのウエイトに設定 */
  color: #333333;
  line-height: 1.75;
  letter-spacing: 0.01em;
  /* 両端揃え（テキストの右端を綺麗に揃えます） */
  text-align: justify;

}



/* プログラム------------------------------------------------- */

/* DX---------------------------------------------------------- */


/* セクション全体の背景（白） */
.dx-support-section {
    width: 1470px;
    max-width: 100%;
    margin: 0 auto;
  background-color: #ffffff;
  padding: 93px 20px;
  display: flex;
  justify-content: center;
  background-image: url(../img/DX_bg.svg);
  background-size:1470px auto;
  background-position: 5% center;
  background-repeat: no-repeat;
}

/* メインコンテンツのコンテナ */
.dx-support-inner {
  width: 100%;
  max-width: 1050px; /* 図が綺麗に収まる最適な横幅 */
  text-align: center;
}

/* --- 見出しのスタイリング --- */
.dx-support-heading {
  font-size: 40px;
  color: #002b54; /* 前システムと統一感のある深いネイビー */
  font-weight: bold;
  letter-spacing: 0.03em;
  margin-bottom: 24px;
}

/* --- リード文のスタイリング --- */
.dx-support-lead {
  font-size: 24px;
  font-weight: bold; /* 画像の太めの文字に合わせます */
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.02em;
  max-width: 950px; /* テキストが広がりすぎないよう少し絞る */
  margin: 0 auto 40px; /* 中央揃え、下部に余白 */
  text-align: left; /* 左寄せ（画像準拠） */
}

/* --- 図（画像）のスタイリング --- */
.dx-support-diagram {
  /* width: 100%; */
  position: relative;
  width: 84%;
    margin: 0 auto;
}

.dx-support-diagram .dx-supplement{
  position: absolute;
      width: 40%;
    right: 0;
    top: 0;
    transform: translate(28%, -15%);
}
.dx-supplement:hover{
  opacity: 0.5;
}

.dx-support-diagram img {
  width: 100%;
  max-width: 1049px; /* 元の図のジャストなサイズ感に制限 */
  height: auto;
  display: inline-block;
  /* transform: translate(6%, 0); */
}


/* DX---------------------------------------------------------- */

/* DX表-------------------------------------------------------- */


/* セクション全体の背景 */
.dx-benefits-section {
  background-color: #ffffff;
  padding: 60px 20px 100px;
  display: flex;
  justify-content: center;
}

/* コンテナ */
.dx-container {
  width: 100%;
  max-width: 1100px;
  text-align: center;
}

/* --- 見出し共通のスタイリング --- */
.dx-title {
  font-size: 40px;
  color: #002b54;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}

.dx-lead {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 40px;
  line-height: normal;
}

/* --- メリット表（修正版） --- */
.benefits-table {
  width: 100%;
  margin-bottom: 60px;
}

.benefit-row {
  display: flex;
  margin-bottom: 8px;
  min-height: 75px;
}

.benefit-row:last-child {
  margin-bottom: 0;
}

/* 左側：clip-pathでパキッと斜めに分けるラベル */
.benefit-label {
  width: 32%;
  flex-shrink: 0;
  background-color: #1f89df; /* ① ベースとなる右下の濃い青 */
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  padding: 15px 20px;
  /* text-align: center; */
  line-height: 1.4;

  /* 重なり順とクリッピングのための設定 */
  position: relative;
  z-index: 1; /* 疑似要素が他の要素の裏に沈み込むのを防ぐ */
  overflow: hidden;
}

/* ② 左上の明るい青を重ねて切り抜く */
.benefit-label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #289be6; /* 左上の明るい青 */
  
  /* 【ここがポイント】
    左上(0 0) → 右上(100% 0) → 下辺の右端から45px内側(calc(100% - 45px) 100%) → 左下(0 100%)
    の4点を結ぶ多角形で切り抜いています。
  */
  clip-path:polygon(0 0, 100% 0, 0 100%);
  
  z-index: -1; /* 文字（テキスト）の後ろ、かつ親の背景の上に挟み込む */
}

/* 右側：説明テキスト */
.benefit-text {
  width: 68%;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-left: none;
  display: flex;
  align-items: center;
  padding: 15px 25px;
  text-align: left;
}

.benefit-text p {
  color: #333333;
  line-height: 1.6;
  font-weight: 500;
  text-align: justify;
}

/* --- 参加・支援の流れ（画像部分） --- */
.flow-title {
  margin-top: 50px;
  margin-bottom: 35px;
}

.flow-image-wrap {
  width: 100%;
}

.flow-image-wrap img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: inline-block;
}

/* DX表-------------------------------------------------------- */

/* 選べる2つの支援---------------------------------------------- */


/* セクション全体の背景（全体を覆う薄い水色） */
.dx-options-section {
  background-color: #dcf0fa;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.options-container {
  width: 100%;
  max-width: 1160px; /* ゆったり配置できる横幅 */
}

/* --- セクションタイトル --- */
.options-main-title {
  font-size: 40px;
  color: #002b54; /* 濃いネイビー */
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 50px;
}

.title-decor {
  font-size: 50px;
  margin: 0 10px;
  color: #002b54;
      position: relative;
    top: 5px;
}

/* --- カード全体の共通設定 --- */
.options-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.option-card {
  /* display: flex; */
  width: 100%;
  padding: 40px 45px;
  background-color: #ffffff;
  color: #ffffff;
  /* 画像通り角は丸めずシャープに */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: relative;
}
.option-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f00232;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    /* z-index: 0; */
}
.option-card.card-blue::before {
    background-color: #1d3285;
}

/* 色分け */
.card-red { background-color: #cf022b; }
.card-blue { background-color: #192b72; }

.card-wrap{
    display: flex;
    gap: 0 44px;
    z-index: 2;
    position: relative;
}

/* 左側：テキストエリア */
.card-content {
  width: 52%;
  
  text-align: left;
}

/* 右側：画像エリア */
.card-image {
  width: calc(48% - 44px);
  position: relative;
  margin: 30px 0 0;
}

.card-image img {
  width: 100%;
  /* height: 100%;
  object-fit: cover; 
  display: block; */
}

/* --- カード内各パーツのスタイリング --- */

/* キャッチコピー（下線付き） */
.card-catch {
  font-size: 24px;
  font-weight: bold;
  padding-bottom: 8px;
  border-bottom: 1px solid #fff;
  margin-bottom: 15px;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 2;
}

/* メインタイトル */
.card-title {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 30px;
  letter-spacing: 0.02em;
}

/* ディスクリプション */
.card-desc {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* 対象ボックス */
.card-target-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.target-label {
  display: inline-block;
  border: 1px solid #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 2px 10px;
  letter-spacing: 0.1em;
}

.target-text {
  font-size: 15px;
  font-weight: bold;
}

/* チェックリスト（CSSでチェックマーク☑を完全再現） */
.card-checklist {
  list-style: none;
  margin-bottom: 24px;
}

.card-checklist li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 5px;
}

.card-checklist li:last-child {
  margin-bottom: 0;
}

/* チェックの四角枠 */
.card-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  /* border: 1px solid #ffffff; */
  background-image: url(../img/check.svg);
}

/* チェックのレ点（白いL字を回転） */
/* .card-checklist li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
} */

/* 価格エリア（上下を白線でサンド） */
.card-price-box {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  padding: 14px 0;
  margin-bottom: 20px;
  width: 400px;
  max-width: 100%;
}

.price-notice {
  font-weight: bold;
  margin-bottom: 6px;
}

.price-detail {
  font-weight: bold;
  /* padding-left: 14px;  */
  /* 「●」のインデントに合わせる調整 */
}

/* 時間エリア */
.card-time-box {
  display: flex;
  align-items: center;
  gap: 12px;
      border-top: 1px solid #fff;
    padding-top: 24px;
}

.time-label {
  display: inline-block;
  background-color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 8px;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* ラベル内の文字色だけをそれぞれの背景色に合わせる */
.card-red .time-label { color: #f00232; }
.card-blue .time-label { color: #1d3285; }

.time-text {
  font-size: 14px;
  font-weight: bold;
}

.dx_note{
    text-align: left;
    font-size: 12px;
    margin-top: 25px;
    color: #192b72;
    font-weight: 500;
}


/* 選べる2つの支援---------------------------------------------- */

/* 課題別選択メニュー-------------------------------------------- */


/* セクション全体の背景（爽やかな薄い水色） */
.dx-menu-section {
  background-color: #dcf0fa;
  padding: 0 20px 60px;
  display: flex;
  justify-content: center;
}

.dx-menu-container {
  width: 100%;
  max-width: 1160px;
}

/* --- 上部ヘッダーのスタイリング --- */
.dx-menu-header {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* 人物イラストの下揃え用 */
  /* margin-bottom: 30px; */
  position: relative;
   gap: 0 34px;
}

/* 左右の人物写真エリア */
.header-person {
  width:100px;
  flex-shrink: 0;
}

.header-person img {
  width: 100%;
  height: auto;
  display: block;
}

/* 中央のテキスト・吹き出しエリア */
.header-center {
  /* flex: 1; */
  text-align: center;
  padding-bottom: 19px;
 
}

.header-balloon-img{
    width: 292px;
    max-width: 100%;
    margin: 0 auto 0;
}

/* CSSで再現する楕円吹き出し */
.header-balloon {
  position: relative;
  background: #ffffff;
  border: 2px solid #002b54;
  border-radius: 50px;
  padding: 10px 30px;
  display: inline-block;
  font-weight: bold;
  color: #002b54;
  font-size: 18px;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

/* 吹き出しの突起（外側の紺色の三角） */
.header-balloon::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 12px 8px 0;
  border-color: #002b54 transparent transparent;
  display: block;
}

/* 吹き出しの突起（内側の白い三角で線を打ち消す） */
.header-balloon::before {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 10px 7px 0;
  border-color: #ffffff transparent transparent;
  display: block;
  z-index: 1;
}

.header-title {
  font-size: 34px;
  color: #002b54;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* --- 下部メニュー（グループ構造） --- */
.dx-menu-groups {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* A+Bなどのひと塊のグループ */
.menu-group {
  display: flex;
  gap: 13px;
}

/* グループ内左側（課題リスト） */
.group-left {
  width: 74%;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* 各課題の行（アルファベットと中身の高さを揃えるためstretch） */
.menu-row {
  display: flex;
  align-items: stretch;
  gap: 15px;
}

/* アルファベットボックス */
.menu-letter {
  width: 75px;
  background-color: rgb(255 255 255 / 70%);
  border: 1px solid #cccccc;
  font-size: 36px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 課題内容テキストボックス */
.menu-content {
  background-color: rgb(255 255 255 / 70%);
  border: 1px solid #cccccc;
  padding: 20px 25px;
  text-align: left;
  flex: 1;
}

.content-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.content-desc {
  font-size: 18px;
  color: #333333;
  line-height: 1.5;
  font-weight: 500;
}

/* グループ内右側（結合された対応メニュー） */
.group-right {
  width: 26%;
  background-color: rgb(255 255 255 / 70%);
  border: 1px solid #cccccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}
.right-label-text_sp{
  display: none;
}

.right-label-text {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

/* --- テーマカラーの文字色定義 --- */
.text-red { color: #cf022b; }
.text-blue { color: #002850; }
.text-purple { color: #6633cc; }


/* 課題別選択メニュー-------------------------------------------- */

/* FAQ-------------------------------------------------------- */


/* セクション全体の背景（鮮やかなライトブルー） */
.dx-faq-section {
  background-color: #4babea;
  padding: 60px 20px 80px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.faq_bg{
    width: 322px;
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translate(-180%, 0);
}

.faq-container {
  width: 100%;
  max-width: 780px;
}

/* --- ヘッダー（タイトル周辺） --- */
.faq-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
  color: #002850;
    font-size:40px;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* 背景に溶け込む巨大な「FAQ」 */
.faq-bg-title {
  font-size: 130px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35); /* 白の不透明度を調整 */
  letter-spacing: -0.02em;
}

.faq-title-group {
  text-align: left;
}



.faq-subtitle {
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-align: center;
  color: #002850;
  margin: 37px 0 37px;
}

/* --- コンテンツレイアウト --- */
.faq-body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  position: relative;
}


.faq-illustration {
    height: 260px;
}
/* 左側イラスト */
.faq-item:not(.inversion) .faq-illustration {
  /* width: 15%; */
  max-width: 100px;
    margin-top: -40px;
    position: absolute;
    transform: translate(calc(-100% + -15px), 0);
  position: absolute;
  left: 0;
}

.faq-item.inversion .faq-illustration {
  /* width: 15%; */
  max-width: 100px;
    margin-top: -40px;
    position: absolute;
    transform: translate(calc(100% + 15px), 0);
  position: absolute;
  right: 0;
}

.faq-illustration img {
  max-width: 100px;
  height: 100%;
  /* height: auto; */
  display: block;
}

/* 右側Q&Aリスト */
.faq-list {
  flex: 1;
  
}

.faq-item {
  width: 100%;
  position: relative;
  margin: 0 0 40px;
}

/* --- 質問ボックス（吹き出し仕様） --- */
.faq-question {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 24px 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative; /* 吹き出しの突起用 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

/* CSSで作る吹き出しの左突起（三角） */
.faq-question::before {
      content: "";
  position: absolute;
  top: 35px; /* イラストの顔・口元付近に合わせる高さ調整 */
  border-style: solid;
  
  border-color: transparent #ffffff transparent transparent;
  display: block;
}

.faq-item:not(.inversion) .faq-question::before {
  left: -14px;
  border-width: 10px 14px 10px 0;
  
}
.faq-item.inversion .faq-question::before{
  right: -14px;
  border-width: 10px 0 10px 14px;
  border-color: transparent transparent transparent #ffffff;
}

/* Qのバッジ */
.badge-q {
  background-color: #147bc4;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 質問テキスト */
.q-text {
  font-size: 22px;
  color: #147bc4;
  font-weight: bold;
  text-align: left;
  flex: 1;
  line-height: 1.4;
}

/* 右端のアコーディオン矢印（CSSで表現） */
.faq-toggle-icon {
  width: 16px;
  height: 16px;
  border-top: 3px solid #147bc4;
  border-right: 3px solid #147bc4;
  transform: rotate(135deg); /* 最初から開いている(上向き)状態 */
  transition: transform 0.3s ease;
  margin-left: 10px;
  flex-shrink: 0;
}
.open .faq-toggle-icon{
    transform: rotate(-45deg);
}

/* --- 回答エリア --- */
.faq-answer {
  display: none;

}
.open .faq-answer {
    display: block;
}
.faq-answer-inner{
    display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px 30px 10px 30px; /* Qのボックスと位置を揃えるための余白 */
}

/* Aのバッジ */
.badge-a {
  background-color: #e5001f;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* 回答テキストコンテンツ */
.a-content {
  flex: 1;
  text-align: left;
  color: #002850;
  font-weight: 500; 
  /* 全体的に太めのフォントのため */
  line-height: 1.7;
  font-size: 15px;
}

.a-lead {
  /* margin-bottom: 15px; */
  line-height:2;
}

.a-detail-block {
  margin-bottom: 15px;
}

.detail-heading {
  color: #222222;
}

.detail-text {
  padding-left: 1em; /* 行頭の「■」から1文字分インデントを下げる処理 */
}



/* FAQ-------------------------------------------------------- */

/* コンタクト---------------------------------------------------------- */

/* セクション全体の背景（白） */
.dx-cta-section {
  background-color: #ffffff;
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* メイン枠（四隅のL字装飾のベース・赤） */
.cta-inner {
  position: relative;
  width: 100%;
  max-width: 850px;
   padding: 125px 80px 65px;
  text-align: center;
}

/* --- 四隅のL字装飾（赤と青） --- */
/* 左上（赤）*/
.cta-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-top: 6px solid #e50020;
  border-left: 6px solid #e50020;
  border-top-left-radius: 14px;
}

/* 右下（赤）*/
.cta-inner::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-bottom: 6px solid #e50020;
  border-right: 6px solid #e50020;
  border-bottom-right-radius: 14px;
}

/* 右上（青）*/
.cta-corner-blue::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-top: 6px solid #209bdf;
  border-right: 6px solid #209bdf;
  border-top-right-radius: 14px;
}

/* 左下（青）*/
.cta-corner-blue::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-bottom: 6px solid #209bdf;
  border-left: 6px solid #209bdf;
  border-bottom-left-radius: 14px;
}

/* --- テキストスタイリング --- */

.cta-title-wrap{
    position: absolute;
        left: 50%;
    transform: translate(-50%, -20%);
    top: 0;
    width: 100%;
}

.cta-title {
  font-size: 36px;
  color: #0f2b69; /* 深いネイビー */
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.cta-lead {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 45px;
}

/* --- 特徴的なツートンカラーボタン --- */
.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.cta-btn {
  display: block;
  width: 100%;
  max-width: 600px;
  text-decoration: none;
  padding: 3px; /* ←これが「外枠の線の太さ」になります */
  
  /* 斜め132度の角度で、赤と青を50%の境界でパキッと色分け */
  background: linear-gradient(350deg, #e50020 50%, #209bdf 50%);
  border-radius: 100px;
  
  /* ボタンの立体的なドロップシャドウ */
  box-shadow:   3px 5px 0px -1px #cccccc;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ホバー時に少し浮き上がる演出 */
.cta-btn:hover {
  transform: translateY(-3px);
  /* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); */
}

/* ボタンの内側の白いコンテンツ領域 */
.btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #333333;
  font-size: 35px;
  font-weight: bold;
  letter-spacing: 0.05em;
  padding: 16px 40px;
  border-radius: 100px; /* 親の角丸に綺麗に沿わせる */
  position: relative;
  width: 100%;
  height: 100%;
}

/* 右側の矢印記号 */
.btn-inner .arrow {
  position: absolute;
  right: 40px;
  color: #0f2b69;
  font-size: 20px;
  font-weight: normal;
  display: flex;
  align-items: center;
}
.btn-inner .arrow img{
    width: 18px;
}


/* コンタクト---------------------------------------------------------- */

/* フッター-------------------------------------------------------- */

/* 全体のリセット（必要に応じて調整してください） */


/* フッター全体のベース（画像に合わせたチャコールグレー） */
.dx-site-footer {
  background-color: #454545;
  color: #ffffff;
  padding: 30px 25px;
 
  line-height: 1.6;
}

/* 内側のコンテナ（左右の要素を両端に振り分け） */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items:center;
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto;
  gap: 40px;
}

/* --- 左側：ナビゲーションリンク --- */
.footer-links {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 画面が狭まったときに自動で折り返せるように */
}

.footer-links li {
  display: flex;
  align-items: center;
}

/* リンク間の区切り線（｜）をCSSでスマートに表現 */
.footer-links li:not(:last-child)::after {
  content: "|";
  margin: 0 12px;
  color: #ffffff;
  opacity: 0.8;
  font-weight: normal;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* --- 右側：注記・コピーライト --- */
.footer-info {
  text-align: right;
   font-size: 12px;
  max-width: 680px; /* 長文が左に広がりすぎないように制限 */
}

.footer-notice {
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.footer-copyright {
  letter-spacing: 0.03em;
}


/* フッター-------------------------------------------------------- */

/* プライバシーポリシー------------------------------------------ */

.inner_privacy-policy{
  width: 1010px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 95px;
}
.inner_privacy-policy h1{
  margin: 0 0 20px;
}
.inner_privacy-policy ol{
  padding-left: 1.3em;
}
.inner_privacy-policy ul{
  padding-left: 0.5em;
}
.inner_privacy-policy ul{
  list-style: none;
}
.inner_privacy-policy ul li{
  display: flex;
  gap: 0.8em;
}
.inner_privacy-policy ul li::before{
  display: block;
  content: "";
  width: 6px;
  height: 6px;
  background-color: #fa373d;
  margin-top: 0.6em;
}
.inner_privacy-policy h2{
  margin: 65px 0 20px ;
  font-size: 28px;
  font-weight: bold;

  /* gap: 0.4em; */
  padding-left: 0.5em;
  color: #002850;
  position: relative;
}
.inner_privacy-policy h2::before{
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0.1em;
  content: "";
  display: block;
  width: 4px;
  height: 95%;
   background: linear-gradient(180deg, #2aa0e0 0%, #2aa0e0 50%, #fa373d 50%, #fa373d 100%);
}
.inner_privacy-policy p{
  margin: 0 0 20px;
}
/* プライバシーポリシー------------------------------------------ */


/* h1------------------------------ */
.com_head{
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
}
h1{
padding: 60px 0 140px ;
    font-size:40px;
    text-align: center;
    color: #002850;
background-image: url(/img/h1_bg_pc.svg);
background-size: 1440px auto;
background-position: center center;
}
/* h1------------------------------ */


.sec_contact{
    width: 940px;
    max-width: 100%;
    background-color: #f2f2f2;
    padding: 25px;
    margin:  80px auto 95px;
}
.sec_contact div{
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec_contact h2{
    font-size: 18px;
}

.sec_contact p{
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 35px;
    margin-left: 35px;
    border-left: 1px solid #cccece;
}

/* お問い合わせ--------------------------------- */


/* PC only--------------------------------------------------
-------------------------------------------------- */
@media (width > 767px) {
    .sp{
     display: none!important;   
    }
}
/* PC only--------------------------------------------------
-------------------------------------------------- */

/* タブレット */
@media (767px < width <=1100px ) {
  header .btn-inner{
    font-size: 16px;
  }
}
/* タブレット */

/* SP--------------------------------------------------
-------------------------------------------------- */
@media (width <= 767px) {
    .pc{
        display: none!important;
    }

body {
  font-size: 14px;
}
/* ヘッダー-------------------------- */
.dx-site-header{
      padding: 5px 20px;
}
.header-btn-area{
  margin:  0 auto;
 width: auto;
    height: 0;                /* 最初は閉じておく */
  overflow: hidden;         /* はみ出た中身を隠す */
  transition: height 0.3s ease-out; /* ぬるっと動かす設定 */
  /* display: none; */
}
.slide-content-inner{
  padding: 10px 0;
  justify-content: center;
}
header .btn-inner{
  font-size: 16px;
}
.header-inner{
  display: block;
  position: relative;
}
.header-logo-area{
  width: 140px;
   max-width: none;
}
.header-logo-area img{
  width: 100%;
}
.header-text{
  width: auto;
  max-width: none;
  padding:  0 20px;
}
.header_left{
  display: block;
  width: auto;
}
.header-nav{
  gap: 10px 0;
  overflow: hidden;
  height: 0;
  margin: 20px 0 0;
}
.header-nav li{
  width: 50%;
  margin: 0;
  padding: 5px 10px;
  
}
.header-nav li:last-child{
   padding: 5px 10px;
}
.header-nav li:nth-child(2n){
  border: none;
}
.header-nav li a{
  font-size: 16px;
}

/* ボタン全体のベース（背景を透明にしてリセット） */
.hamburger-btn {
  position: absolute;
  top: 18px;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 27px;          /* メニュー全体の横幅 */
  height: 22px;         /* メニュー全体の高さ */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
}

/* 3本のバーの共通設定（特徴的な角丸カプセル型） */
.hamburger-btn .bar {
  display: block;
  width: 100%;
  height: 5px;          /* 線の太さ（画像に合わせて少し太め） */
  border-radius: 100px; /* 完全に両端を丸める */
  transition: transform 0.3s ease, opacity 0.3s ease; /* アニメーション用 */
}

/* --- 画像通りの配色 --- */
.bar-red {
  background-color: #ff0000;
}
.bar-yellow {
  background-color: #ffc224;
}
.bar-blue {
  background-color: #3399ff;
}

/* --- クリックされてアクティブ（✕）になった時の動き --- */
/* 赤い線（上）を斜め下に回転 */
.hamburger-btn.is-active .bar-red {
  transform: translateY(8.5px) rotate(45deg);
}

/* 黄色い線（真ん中）をフェードアウト */
.hamburger-btn.is-active .bar-yellow {
  opacity: 0;
}

/* 青い線（下）を斜め上に回転 */
.hamburger-btn.is-active .bar-blue {
  transform: translateY(-8.5px) rotate(-45deg);
}


/* ヘッダー-------------------------- */


/* ニュース-------------------------------- */
.event-news-section{
  width: 100%;
  background-image: url(../img/news_bg_sp.svg);
  background-size: 100% auto;
    background-position: center 20px;
    padding: 60px 0 80px;
}
.event-news-section::after{
  width: 361px;
  height: 130px;
  background-image: url(../img/news_bg_sp3.png);
  background-size: 361px auto;
      transform: translate(-60%, 56%);
}
.news-block{
  padding: 0 20px;
 max-width: 100%;
}
.news-heading{
      transform: translate(-50%, -100%);
      max-width: 100%;
}
.news-inner{
      padding: 48px 25px 40px;
}
.news-more-wrap{
  position: relative;
  transform: none;
  bottom: auto;
  left: auto;
  margin: 30px 0 0;
}
.news-item{
  padding: 0;
  margin: 0 0 24px;
      flex-wrap: wrap;
          gap: 5px 20px;
}
.news-text{
      width: 100%;
      flex: auto;
}

.news-list::after{
    width: 50px;
    height: 50px;
}
.news-list::before {
    width: 50px;
    height: 50px;
}
.news-inner::after{
      width: 50px;
    height: 50px;
}
.news-inner::before {
    width: 50px;
    height: 50px;
}
/* ニュース-------------------------------- */

/* 実践型人材育成プログラム-------------------- */
.dx-program-block{
    background-image: url(../img/news_bg_sp2.png);
  background-size: 100% auto;
    background-position: center 0;
    background-repeat: no-repeat;
    padding: 0 20px;
}
.dx-program-heading .sub-title{
  font-size: 22px;
}
.dx-program-heading .main-title{
  font-size: 40px;
}
.dx-program-heading{
  margin-bottom: 16px;
}
.dx-program-image{
  margin-bottom: 32px;
}

/* 実践型人材育成プログラム-------------------- */



/* アドバイザーの支援による“DX”の自走化--------------------- */
.dx-support-section{
      background-image: url(../img/DX_bg_sp.svg);
    background-size: 100% auto;
    background-position: center top;
        padding: 80px 20px;
}
.dx-support-heading{
  font-size: 32px;
}
.dx-support-lead{
  font-size: 18px;
}
.dx-support-diagram{
  width: auto;
}
/* アドバイザーの支援による“DX”の自走化--------------------- */

    /* DX化のメリット--------------------------- */
    .dx-benefits-section{
      padding: 0 20px 80px;
    }
    .dx-title{
      font-size: 32px;
      margin-bottom: 24px;
    }
    .dx-lead{
      font-size: 22px;
      text-align: left;
          margin-bottom: 24px;
    }
    .benefit-row{
      display: block;
      margin: 0 0 16px;
    }
    .benefit-label{
      width: auto;
      padding: 24px 16px;
    }
    .benefit-text{
      width: auto;
          border: 1px solid #cccccc;
          font-size: 16px;
              padding: 16px 16px;
    }
    .benefits-table{
      margin-bottom: 80px;
    }
        .flow-image-wrap{
      padding: 0 20px;
    }
    /* DX化のメリット--------------------------- */



/* あなたの状況に合わせて選べる2つの支援------------------ */
.options-main-title{
  font-size: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin:  0 0 20px;
  line-height: 1.2;
}
.title-decor{
  margin: 0;
  top: auto;
}
.title-decor img{
  width: 20px;
}
.options-cards-wrap{
  gap: 24px;
}
.option-card{
  padding: 24px 20px 24px;
}
.card-wrap{
  display: block;
}
.card-content{
  width: auto;
  margin: 0 0 24px;
}
.card-image{
  width: auto;
  margin: 0;
}
.card-title{
  font-size: 32px;
  margin: 0 0 24px;
}
.card-checklist{
  margin: 0 0 16px;
}
.card-catch{
  font-size: 20px;
}
.dx_note{
  text-align: left;
  margin: 16px 0 0;
  line-height: normal;
}
/* あなたの状況に合わせて選べる2つの支援------------------ */

 /* 国内企業が抱える課題------------------------------ */
 .dx-menu-header{
  display: block;
  position: relative;
    margin: 0 auto;
  max-width: 335px;
 }
 .header-center{
padding: 0 0 13px;
 }
 .header-balloon-img{
  margin: 0;
 }
 .person-right{
  display: none;
 }
 .person-left{
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 67px;
 }
 .menu-group{
  display: block;
 }
 .group-left{
  width: auto;
 }
 .group-right{
  display: none;
 }
 .menu-row{
  display: block;
 }
 .menu-letter{
  display: none;
 }
 .menu-content{
  width: auto;
 }

 .content-title{
  display: flex;
  align-items: center;
  
 }
 .menu-letter_sp{
  font-size: 40px;
 }
 .content-title_inner{
border-left: 1px #cccccc solid;
padding-left: 15px;
margin-left: 15px;
 }
 .right-label-text_sp{
  display: block;
  font-size: 22px;
  text-align: center;
  font-weight: bold;
  border-top: 1px #cccccc solid;
  padding-top: 16px;
  margin-top: 16px;
 }
 /* 国内企業が抱える課題------------------------------ */

 /* FAQ-------------------------------- */
 .dx-faq-section{
  padding: 115px 20px 80px;
 }
 .faq_bg{
  width: 255px;
  transform:none;
  left: 20px;
 }
 .faq-question{
  width: 70%;
 
  display: block;
 }
 .faq-header{
  font-size: 32px;
  margin: 0;
 }
  .faq-subtitle{
  font-size: 24px;
      margin: 48px 0 24px;
 }
 .faq-subtitle:first-child{
  margin-top: 40px;
 }
 .faq-item:last-child{
  margin: 0;
 }
 .faq-item:not(.inversion)  .faq-question{
 margin-left: 30%;
 }
 .faq-illustration{
  width: 22%;
 }
 .faq-illustration img{
  /* width: 100%; */
  max-width: 100%;
  height: auto;
  max-height: 190px;
 }
 .faq-item:not(.inversion) .faq-illustration{
    transform: translate(0, 0);
    margin: 0;
 }
 .faq-item.inversion .faq-illustration{
      transform: translate(0, 0);
    margin: 0;
 }
 .faq-toggle-icon{
  display: block;
  margin: 16px auto 0;
  border-width: 1px;
 }
 .faq-question{
  padding: 15px 20px 16px;
 }

 /* FAQ-------------------------------- */

 /* まずは説明会・ご相談から---------------------------- */
 .dx-cta-section{
  padding: 115px 20px 80px;
 }
 .cta-inner{
  padding: 170px 3px 64px;
 }
 .cta-title{
  font-size: 32px;
 }
 .cta-inner::before{
width: 50px;
    height: 50px;
 }
 .cta-inner::after{
width: 50px;
    height: 50px;
 }
 .cta-corner-blue::after{
width: 50px;
    height: 50px;
 }
 .cta-corner-blue::before {
width: 50px;
    height: 50px;
 }
 .cta-buttons{
  gap: 24px;
 }
 .btn-inner{
  font-size: 24px;
 }
 /* まずは説明会・ご相談から---------------------------- */

 /* フッター---------------------------------- */
 .dx-site-footer{
padding: 40px 20px 30px;
 }
 .footer-inner{
  display: block;
  
 }
 .footer-links{
  justify-content: center;
  margin: 0 0 20px;
 }
 .footer-notice{
  text-align: center;
  margin: 0 0 15px;
 }
 .footer-copyright{
  text-align: center;
 }
 /* フッター---------------------------------- */

 /* プライバシーポリシー---------------------------- */
 .inner_privacy-policy{
  padding: 0 20px;
 }
 .inner_privacy-policy h2{
  font-size: 22px;
      margin: 60px 0 20px;
 }
 /* プライバシーポリシー---------------------------- */
 
/* h1------------------------------ */
.com_head{

}
h1{
padding: 42px 0 60px ;
    font-size:32px;
    text-align: center;
    color: #002850;
background-image: url(/img/h1_bg_sp.svg);
background-size: 490px auto;
background-position: center -20px;
}
/* h1------------------------------ */

/* お問い合わせ--------------------------------- */
 .sec_contact{
    padding: 20px;
    margin: 64px 20px 80px;
    width: auto;
 }
 .sec_contact h2{
    text-align: center;
 }
 .sec_contact div{
    display: block;
 }
 .sec_contact p{
    padding: 15px 0 0;
    margin: 15px 0 0;
    border-left: none;
    border-top: 1px solid #cccece;
 }
/* お問い合わせ--------------------------------- */

}