/* ======================================================
introduction.css
====================================================== */
.introduction-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 60px;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.introduction-list > li {
  list-style: none;
}

.introduction-list h4 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #003357;
  line-height: 1.5;
  border-bottom: 1px solid #0074D9;
  padding-bottom: 10px;
}

/* 本文説明 */
.introduction-list .list-desc {
  padding-left: 14px;
  line-height: 1.8;
}

/* サブリスト*/
.introduction-list .sub-list {
  list-style: none;
  padding-left: 0;
}

.introduction-list .sub-list li {
  position: relative;
  margin-bottom: 6px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: normal;
  padding-left: 18px;
}

.introduction-list .sub-list .circled-list,
.introduction-list .sub-list .subsidy-list{
  list-style: none;
  padding-left: 14px;
}

	.u-pcNone {
		display: none;
	}

/* ===== 2カラムレイアウト ===== */
.supFlow_sect {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.supFlow_sect > div {
  flex: 1;
}

.supFlow_col {
  flex: 1;
  min-width: 0;
}

.detail_head {
  position: relative;
  margin: 0 0 6px;
  padding-left: 15px;
  font-weight: 700;
}

.detail_head::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #008F65;
  left: 0;
  top: 0.9em;
  transform: translateY(-50%) rotate(45deg);
}

.detail_text {
  margin: 0;
}

.detail_item {
  margin-bottom: 30px;
}

.supFlow_col .detail_item:last-child {
  margin-bottom: 0;
}

.detail_bottom {
  margin-bottom: 30px;
}

.detail_bottom_last {
  margin-bottom: 0;
}

.logiOutline_cols {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.logiOutline_col {
  flex: 1;
  min-width: 0;
}

.logiOutline_table {
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0 11px;
}

.logiOutline_col-no1 {
  width: 350px;
  flex-shrink: 0;
}
.logiOutline_col-no2 {
  flex: 1;
  min-width: 0;
}

.logiOutline_table > tbody > tr > th {
	white-space: nowrap;
	text-align: left;
	vertical-align: top;
	font-weight: normal;
	color: #0074D9;
}

.logiOutline_table > tbody > tr > th > .-char2 {
	letter-spacing: 5em;
}
.logiOutline_table > tbody > tr > th > .-char3 {
	letter-spacing: 2em;
}
.logiOutline_table > tbody > tr > th > .-char4 {
	letter-spacing: 1em;
}
.logiOutline_table > tbody > tr > th > .-char5 {
	letter-spacing: 0.5em;
}
.logiOutline_table > tbody > tr > th > .-char6 {
	letter-spacing: 0.2em;
}

/* ==============================
▼ スマホ・タブレット対応
============================== */
@media screen and (max-width: 768px) {
* {
  box-sizing: border-box;
}

  .introduction-list {
    display: block; /* grid解除して縦並びに */
    width: 100%;
  }

  .introduction-list > li {
    display: block;
    margin-bottom: 16px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .introduction-list li span.li-text {
    display: inline;
  }

  .introduction-list .sub-list {
    padding-left: 16px;
  }

  .introduction-list .sub-list li {
    margin-bottom: 8px;
    line-height: 1.6;
  }

  .introduction-list .circled-list,
  .introduction-list .assignment-list {
    padding-left: 18px;
    margin-bottom: 6px;
  }

		.detail_first {
			margin-right: 0;
		}
  

  /* テーブル全体の幅を制限 */
  .logiOutline_table {
    width: 100%;
    table-layout: auto;
    border-spacing: 0 6px;
    overflow-wrap: break-word;
  }

  /* thを折り返し可能に */
  .logiOutline_table th {
    white-space: normal;
    padding-right: 6px;
  }

  /* tdのpaddingも縮める */
  .logiOutline_table td {
    padding-left: 4px;
    padding-right: 4px;
  }


  /* 左カラムの固定幅解除 */
  .logiOutline_col-no1 {
    width: 100%;
    flex-shrink: 1;
  }

  /* 2カラムも縦並び */
  .logiOutline_cols {
    flex-direction: column;
    gap: 16px;
  }

  /* リストの余白をスマホ向けに調整 */
  .introduction-list {
    gap: 16px 16px;
  }
  .introduction-list .sub-list li {
    padding-left: 12px;
  }
  .logiOutline_cols {
    flex-direction: column;
  }

	.u-pcNone {
		display: block;
	}

	.u-spNone {
		display: none;
	}

  /* supFlowセクションのカラム */
  .supFlow_sect {
    flex-direction: column;
    gap: 16px; /* 上下の余白 */
  }

  .supFlow_col {
    flex: 1 1 auto;
    min-width: 0;
  }

    /* detail_item の余白を縮める */
  .detail_item {
    margin-bottom: 16px;
  }
  .supFlow_col + .supFlow_col {
    margin-top: 0;
    padding-top: 20px;
  }
}