/* features-th29.css — ベースライン(自動読込・module-base.css前提)。編集せず上書きで調整。 */
@charset "UTF-8";

._th29_module_wrap {
  background: #fff;
  position: relative;
  padding: 0;
}
._th29_module_wrap:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  top: 0;
  left: 0;
  height: 351px;
  background: url(images/th29-bg-1.webp) no-repeat center top/cover;
}
._th29_module_wrap .container {
  padding: 351px 0 60px;
}
._th29_module_wrap .container ._th29_module_block {
  position: relative;
  z-index: 2;
}
._th29_module_wrap .container ._th29_module_block .th29_img_block {
  width: 73.1%;
}
@media (min-width: 768px) {
  ._th29_module_wrap .container ._th29_module_block .th29_img_block {
    position: absolute;
    bottom: 0;
    left: -15.7%;
  }
}
@media (max-width: 767px) {
  ._th29_module_wrap .container ._th29_module_block .th29_img_block {
    width: 100%;
  }
}
._th29_module_wrap .container .th29_txt_block {
  line-height: 0;
  float: right;
  width: 42.5%;
  padding: 3em 0 0 3em;
}
@media (max-width: 767px) {
  ._th29_module_wrap .container .th29_txt_block {
    width: 100%;
    float: none;
  }
}
@media (min-width: 768px) {
  ._th29_module_wrap .container .th29_txt_block h3 {
    text-align: left;
  }
}
._th29_module_wrap .container .th29_txt_block h3:after {
  content: none;
}
._th29_module_wrap .container .th29_txt_block h3 span {
  display: block;
  font-size: 0.8125rem;
  line-height: 1;
  padding-bottom: 0.5em;
}
._th29_module_wrap .container .th29_txt_block h3 {
  font-size: 2.5rem;
  margin-bottom: 0.7em;
  padding: 0;
  line-height: 1;
}
._th29_module_wrap .container .th29_txt_block .more {
  margin-top: 2.5em;
}
._th29_module_wrap .container .th29_txt_block .more .add_arrow {
  border-radius: 0;
  min-width: 170px;
  line-height: 1;
  padding: 0.8em 5px;
  margin-left: 0;
  position: relative;
  background: #000;
  color: var(--color-on-primary);
  border-color: #000;
}
._th29_module_wrap .container .th29_txt_block .more .add_arrow:after {
  border-color: #fff;
}
._th29_module_wrap .container .th29_txt_block .more .add_arrow:hover {
  background: #000;
  border-color: #000;
  color: var(--color-on-primary);
}
._th29_module_wrap .container .th29_txt_block .more .add_arrow:hover:after {
  border-color: #fff;
}
@media (min-width: 768px) and (max-width: 1199px) {
  ._th29_module_wrap:after {
    height: 44%;
  }
  ._th29_module_wrap .container {
    padding: 23% 0 7%;
  }
  ._th29_module_wrap .container ._th29_module_block {
    background: #fff;
  }
  ._th29_module_wrap .container ._th29_module_block .th29_img_block {
    width: 65%;
    left: -16%;
  }
  ._th29_module_wrap .container ._th29_module_block .th29_txt_block {
    width: 51.3%;
    padding: 0.9em 1.4em 0 1.6em;
  }
  ._th29_module_wrap .container ._th29_module_block .th29_txt_block h3 {
    margin-bottom: 0.2em;
  }
  ._th29_module_wrap .container ._th29_module_block .th29_txt_block .more {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  ._th29_module_wrap:after {
    height: 36%;
  }
  ._th29_module_wrap .container {
    padding: 30% 15px 4%;
  }
  ._th29_module_wrap .container ._th29_module_block .th29_img_block {
    margin-bottom: 0;
  }
  ._th29_module_wrap .container ._th29_module_block .th29_txt_block {
    padding: 1.3em 0 0;
  }
  ._th29_module_wrap .container ._th29_module_block .th29_txt_block h3 {
    margin-bottom: 0.4em;
  }
  ._th29_module_wrap .container ._th29_module_block .th29_txt_block .more {
    margin-top: 1em;
    display: block;
  }
}

/* SM-FIX-20260819 */
/* 2026-08-19: 黒地に黒文字。MORE ボタンは background:#000 なのに文字が
   --color-on-primary（実サイトの大半で #111111）で、矢印だけ #fff だった＝白文字が正。 */
._th29_module_wrap .container .th29_txt_block .more .add_arrow,
._th29_module_wrap .container .th29_txt_block .more .add_arrow:hover{ color: #fff; }
/* 768px 以上で写真が見出しの下へ回り込み、器の背景が無いまま文字が写真に重なる。
   テキスト側に半透明の地色パネルを与えて必ず読めるようにする（features-mod-03 と同じ手当て）。 */
@media (min-width: 768px){
  ._th29_module_wrap .container .th29_txt_block{
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    padding: 3em 2em 2em 2em;
  }
}

/* SM-FIX5-20260819 */
/* 2026-08-19(2): 767px 以下でも見出しが写真に重なる配置になる。
   幅にかかわらずテキスト側に器を与える。 */
@media (max-width: 767px){
  ._th29_module_wrap .container .th29_txt_block{
    background: color-mix(in srgb, var(--color-bg) 90%, transparent);
    padding: 1.6em 1.2em;
  }
}