.mab40 {
  margin-bottom: 40px;
}

.u-list-projects .u-list-projects__items {
  margin-bottom: 20px;
}
.u-list-projects .u-list-projects__items .u-list-projects__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding-bottom: 20px;
  border-bottom: #000 solid 1px;
  align-items: center;
  letter-spacing: 0.03em;
  line-height: 1.5;
  position: relative;
  color: #000;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.u-list-projects .u-list-projects__items .u-list-projects__item::before {
  content: "";
  background-color: #00a651;
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  bottom: -1.5px;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: scaleX(0.25);
          transform: scaleX(0.25);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media print, screen and (min-width: 768px) {
  .u-list-projects .u-list-projects__items .u-list-projects__item::before {
    -webkit-transform: scaleX(0.25);
            transform: scaleX(0.25);
  }
}
.u-list-projects .u-list-projects__items .u-list-projects__item.is-active {
  color: #00a651;
}
.u-list-projects .u-list-projects__items .u-list-projects__item.is-active::before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.u-list-projects .u-list-projects__items .u-list-projects__item .u-list-projects__txt {
  display: block;
  position: relative;
  padding-right: 20px;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.u-list-projects .u-list-projects__items .u-list-projects__item .u-list-projects__txt:before {
  content: "";
  background: url(../../svg/i_btn_arrow_hov.svg) center no-repeat;
  background-size: 100% auto;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  height: 15px;
  display: block;
  margin: auto;
  position: absolute;
}
.u-list-projects .u-list-projects__items .u-list-projects__item:hover {
  color: #00a651;
}
.u-list-projects .u-list-projects__items .u-list-projects__item:hover::before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.u-box-projects__thumbnail {
  position: relative;
  overflow: hidden;
}
.u-box-projects__thumbnail .u-box-projects__text {
  position: absolute;
  color: #000;
  background-color: #00a651;
  padding: 10px 16px;
  z-index: 10;
}
.u-box-projects__thumbnail .u-box-projects__text::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 25px;
  height: 100%;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, #00a651), color-stop(50%, transparent));
  background: linear-gradient(to right bottom, #00a651 50%, transparent 50%);
}
.u-box-projects__thumbnail .u-box-projects__text-end {
  position: absolute;
  color: #fff;
  background-color: #A5A5AF;
  padding: 10px 16px;
  z-index: 10;
}
.u-box-projects__thumbnail .u-box-projects__text-end::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 25px;
  height: 100%;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, #A5A5AF), color-stop(50%, transparent));
  background: linear-gradient(to right bottom, #A5A5AF 50%, transparent 50%);
}
.u-box-projects__thumbnail .u-box-projects__image {
  width: 100%;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  height: 450px; /* 高さを調整 */
  object-fit: cover;
  object-position: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.u-box-point .u-box-point__item {
  margin-bottom: 40px;
}
@media print, screen and (min-width: 1160px) {
  .u-box-point .u-box-point__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .u-box-point .u-box-point__item:nth-child(2n+1) {
    margin-right: 230px;
  }
  .u-box-point .u-box-point__item:nth-child(2n) {
    margin-left: 230px;
  }
}
.u-box-point .u-box-point__item .u-box-point__img {
  margin-bottom: 20px;
  text-align: center;
}
.u-box-point .u-box-point__item .u-box-point__img > img {
  width: 70%;
}
@media screen and (min-width: 768px) and (max-width: 1160px) {
  .u-box-point .u-box-point__item .u-box-point__img > img {
    width: 60%;
  }
}
@media print, screen and (min-width: 1160px) {
  .u-box-point .u-box-point__item .u-box-point__img > img {
    width: 100%;
  }
}
@media print, screen and (min-width: 1160px) {
  .u-box-point .u-box-point__item .u-box-point__img {
    -webkit-flex-basis: 30%;
        -ms-flex-preferred-size: 30%;
            flex-basis: 30%;
    margin-bottom: 0;
  }
}
@media print, screen and (min-width: 1160px) {
  .u-box-point .u-box-point__item .u-box-point__content {
    -webkit-flex-basis: 70%;
        -ms-flex-preferred-size: 70%;
            flex-basis: 70%;
  }
}
.u-box-point .u-box-point__item .u-box-point__content .u-box-point__ttl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media print, screen and (min-width: 1160px) {
  .u-box-point .u-box-point__item .u-box-point__content .u-box-point__ttl {
    display: block;
  }
}
.u-box-point .u-box-point__item .u-box-point__content .u-box-point__ttl .u-box-point__ttl-num {
  font-family: "Roboto";
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.23;
  color: #00a651;
  letter-spacing: 2px;
  margin-right: 10px;
}
@media print, screen and (min-width: 768px) {
  .u-box-point .u-box-point__item .u-box-point__content .u-box-point__ttl .u-box-point__ttl-num {
    font-size: 5rem;
  }
}
.u-box-point .u-box-point__item .u-box-point__content .u-box-point__ttl .u-box-point__ttl-txt {
  font-weight: 500;
  font-size: 1.6rem;
}
@media print, screen and (min-width: 768px) {
  .u-box-point .u-box-point__item .u-box-point__content .u-box-point__ttl .u-box-point__ttl-txt {
    font-size: 2rem;
  }
}

.story-image-container {
  margin: 20px 0;
  text-align: center; /*画像を中央寄せにする場合*/
}

.story-image-container img {
  max-width: 100%; /* 親要素の幅を超えるのを防ぐ */
  height: auto;
  border: 1px solid #ddd;
  margin-bottom: 10px; /* 複数の画像がある場合の下マージン */
}

/* 特定のコンテナ内の画像を小さく表示するためのスタイル */
.story-image-container--small {
  display: flex;
  flex-wrap: wrap; /* 折り返しを許可 */
  justify-content: space-around; /* 画像を均等に配置 */
  gap: 10px; /* 画像間のスペース */
}

.story-image-container--small img {
  max-width: 48%; /* 2列表示のため、gapを考慮して50%より少し小さく */
  height: auto;
  /* display: inline-block; から変更するため、margin-right は不要になることが多い */
}

/* .story-image-container--small img:last-child の margin-right: 0; は flexbox と gap を使う場合、不要になることが多いので削除またはコメントアウトを検討 */

.project-image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 1.5em;
}

.project-image-container img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  margin-bottom: 10px; /* 主に縦に並ぶ場合や、flex-wrapされた場合のマージン */
}

/* インラインスタイルで指定したwidthを尊重しつつ、レスポンシブ対応や追加調整が必要な場合は以下に記述 */
/* 例:
.project-image-container img.half-width {
  width: calc(50% - 5px);
}
.project-image-container img.third-width {
  width: calc(33.333% - 7px);
}
*/

.u-box-projects__image-gallery {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px; /* 画像間のスペース */
  margin-top: 20px; /* 上の要素とのスペース */
  margin-bottom: 20px; /* 下の要素とのスペース */
}

.u-box-projects__image-gallery .u-box-projects__image {
  width: calc(50% - 10px); /* 2列表示のため、gapを考慮 */
  height: auto;
  object-fit: cover;
  border: 1px solid #ddd; /* 必要に応じて枠線を追加 */
}

.u-box-projects__image-container {
  margin: 20px 0; /* 上下のマージン */
  text-align: center; /* 画像を中央寄せにする場合 */
}

.u-box-projects__image_inserted {
  max-width: 100%; /* 親要素の幅を超えるのを防ぐ */
  height: auto; /* 高さを自動調整 */
  border: 1px solid #ddd; /* 枠線 */
  margin-bottom: 10px; /* 下マージン */
}

/* Project08 画像ギャラリー調整 */
.content-inner .image-gallery { /* 親クラスを追加して詳細度を上げる */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 画像間のスペースを均等に */
  gap: 1em; /* 画像間の縦横のスペース */
  margin-top: 2em; /* 上の要素とのスペース */
  margin-bottom: 2em; /* 下の要素とのスペース */
}

.content-inner .image-gallery figure { /* 親クラスを追加して詳細度を上げる */
  flex-basis: calc(50% - 0.5em); /* 2列表示のため、gapを考慮 */
  margin: 0;
  /* display: flex; を削除 */
  /* justify-content: center; を削除 */
  /* align-items: center; を削除 */
  overflow: hidden; /* object-fit: cover のためにはみ出しを隠す */
  box-sizing: border-box; /* paddingとborderを幅と高さに含める */
}

.content-inner .image-gallery figure img { /* 親クラスを追加して詳細度を上げる */
  width: 100%; /* figure要素の幅に合わせる */
  height: auto; /* 高さを自動に設定し、アスペクト比を維持 */
  /* object-fit: cover; を削除 */
  border: 1px solid #ccc; /* 既存のスタイルを維持 */
  display: block; /* 画像がインライン要素として扱われることによる予期せぬスペースを防ぐ */
}

/* 概要テーブル内のリストマーカー表示 (project08専用) */
.page-project08 .m-table-summary__txt ul {
  list-style-type: disc;
  margin-left: 20px;
  padding-left: 0;
}

.page-project08 .m-table-summary__txt ul li {
  list-style-type: disc;
}

/* Project08 画像ギャラリー調整 の既存スタイルの後に追加 */

.content-inner .image-gallery .image-single,
.content-inner .image-gallery .image-group-vertical {
  flex-basis: calc(50% - 0.5em); /* それぞれがギャラリーの約半分の幅を持つ */
  box-sizing: border-box;
}

.content-inner .image-gallery .image-group-vertical {
  display: flex;
  flex-direction: column; /* グループ内の画像を縦に並べる */
  gap: 0.5em; /* image6とimage8の間の隙間 */
}

.content-inner .image-gallery .image-group-vertical p {
  margin: 0; /* pタグのデフォルトマージンをリセット */
}

/* .image-group-vertical 内の figure は親要素の幅に追従するように調整 */
.content-inner .image-gallery .image-group-vertical figure {
  flex-basis: auto; /* figure自体のflex-basisはリセット */
  width: 100%; /* グループ内で全幅を使用 */
  /* 既存の figure スタイルから margin, overflow, box-sizing は継承されるか、必要なら再指定 */
}

/* ストーリーセクション内の画像用マージン */
.content-inner section .u-box-projects__image {
  margin-top: 20px;
  margin-bottom: 20px;
  display: block; /* 中央揃えや幅指定のため */
  margin-left: auto; /* 中央揃え */
  margin-right: auto; /* 中央揃え */
  max-width: 100%; /* 幅が親要素を超えないように */
  height: auto; /* アスペクト比を維持 */
  border: 1px solid #ddd; /* 枠線 */
}

/* 画像を横並びにするためのコンテナ */
.image-row-2, .image-row-3 {
    display: flex;
    gap: 15px; /* 画像間の隙間 */
    margin-top: 20px;
    margin-bottom: 20px;
    align-items: flex-start; /* 上揃え */
}

.image-row-2 > *, .image-row-3 > * { /* imgだけでなくfigureも対象 */
    border: 1px solid #ddd; /* 枠線 */
    box-sizing: border-box; /* paddingとborderを幅に含める */
}

.image-row-2 > * {
    flex-basis: calc(50% - 7.5px); /* 2列の場合 (gapを考慮) */
}

.image-row-3 > * {
    flex-basis: calc(33.333% - 10px); /* 3列の場合 (gapを考慮) */
}

/* 横並びコンテナ内の画像スタイル */
.image-row-2 img, .image-row-3 img {
    width: 100%;
    height: auto;
    display: block; /* figure内で中央揃えにしやすくするため */
    object-fit: cover; /* アスペクト比を保ちつつ要素を埋める */
}

/* キャプション付き画像用のスタイル */
.image-with-caption {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center; /* 画像とキャプションを中央揃え */
}
.image-with-caption img { /* u-box-projects__imageクラスが既に適用されている想定 */
    margin-bottom: 10px; /* 画像とキャプションの間のスペース */
    /* borderは .u-box-projects__image で指定済み */
}
.image-with-caption figcaption {
    font-size: 0.9em;
    color: #555;
    line-height: 1.6;
    text-align: left; /* キャプションのテキストは左揃え */
    display: inline-block; /* 中央揃えのため */
    padding: 0 10px; /* 左右に少しパディング */
    margin-top: 5px;
}

/* 3列表示のfigure内のスタイル調整 */
.image-row-3 figure {
    margin: 0;
    text-align: center;
    display: flex; /* 画像とキャプションを縦に並べる */
    flex-direction: column;
    align-items: center; /* 中央揃え */
}
.image-row-3 figure img {
    margin-bottom: 8px; /* 画像とキャプションの間のスペース */
}
.image-row-3 figure figcaption {
    font-size: 0.85em;
    color: #555;
    line-height: 1.4;
}

/* 特定の横並び画像コンテナの幅を制限するためのクラス */
.image-row-narrower {
  /* max-width: 680px;  一旦削除して親要素に追従させる */
  margin-left: 0; /* 左寄せにする */
  margin-right: 0; /* 右側のautoマージンをリセット */
  /* display: flex や gap, margin-top, margin-bottom などは .image-row-2 クラスから継承されます */
}

/* image-row-narrower 内の要素の幅を調整して画像を小さくする */
.image-row-narrower > * {
    flex-basis: calc(45% - 7.5px); /* さらに小さくする */
    /* border と box-sizing は .image-row-2 > * から継承される想定だが、念のため再確認 */
    /* もし継承されない場合は、ここに border や box-sizing の指定を追加 */
}

.text-indented {
  text-indent: 1em; /* 全角スペース1文字分のインデント */
}