/*■■■■■ ↓消さないでください↓ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* type100-04 */

@import url("../../../../go/designtemplate/pc/type100-01/stylebase.css");
@import url("../../../../go/designtemplate/pc/type100-04/stylebasecolor.css");

/*■■■■■ ↑消さないでください↑ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/





/*■■■■■ ↓カスタムデザイン用スタイル記述エリア↓ ■■■■■■■■■■■■■■■■■■■■■■*/



 ■■■■■■■■■■■■■■■■■■■■■■*/

/* 〓 hero: 以前の案に合わせて高さとコピー配置を調整 */
.area_7 #riid_670 .topimage_area.textunderstyle {
  height: 340px !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
.area_7 #riid_670 .topimage_bk { display: none !important; }
.area_7 #riid_670 .topimage_img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}
.area_7 #riid_670 .topimage_img > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 48% !important;
}
.area_7 #riid_670 .topimage_area.textunderstyle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 43%, rgba(255,255,255,0) 78%);
}
.area_7 #riid_670 .topimage_text,
.area_7 #riid_670 .topimage_text:hover {
  position: absolute !important;
  z-index: 2 !important;
  left: 7% !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 510px !important;
  max-width: 80% !important;
  color: #394740 !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  white-space: normal !important;
}
.area_7 #riid_670 .topimage_text p { margin: 0; }
.area_7 #riid_670 .topimage_text p:first-child { color: #6c897d; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.area_7 #riid_670 .topimage_text p:nth-child(2) { margin: 7px 0 9px; color: #34483e; font-family: serif; font-size: clamp(25px, 3vw, 38px); font-weight: 600; line-height: 1.5; }
.area_7 #riid_670 .topimage_text p:nth-child(n+3) { color: #4d5954; font-size: 14px; font-weight: 400; line-height: 1.8; }
@media (max-width: 760px) {
  .area_7 #riid_670 .topimage_area.textunderstyle { height: 290px !important; }
  .area_7 #riid_670 .topimage_area.textunderstyle::before { background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 63%, rgba(255,255,255,.12) 100%); }
  .area_7 #riid_670 .topimage_img > img { object-position: 60% center !important; }
  .area_7 #riid_670 .topimage_text, .area_7 #riid_670 .topimage_text:hover { left: 6% !important; right: 5% !important; width: auto !important; max-width: 89% !important; }
  .area_7 #riid_670 .topimage_text p:first-child { font-size: 10px; }
  .area_7 #riid_670 .topimage_text p:nth-child(2) { font-size: 26px; }
  .area_7 #riid_670 .topimage_text p:nth-child(n+3) { font-size: 12px; }
}

@media (min-width: 761px) { #area_7 #riid_670 .topimage_area.textunderstyle { height: 340px !important; } }

@media (min-width: 761px) {
  #area_7 #riid_670 .topimage_area.textunderstyle { height: 340px !important; }
  #area_7 #riid_670 .topimage_text { margin: 0 !important; text-align: left !important; width: 620px !important; max-width: 80% !important; }
  #area_7 #riid_670 .topimage_text p:nth-child(2) { font-size: clamp(25px, 2.7vw, 34px) !important; }
}

#area_7 #riid_670 .topimage_area.textunderstyle::before { background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 43%, rgba(255,255,255,0) 78%) !important; }
@media (max-width: 760px) { #area_7 #riid_670 .topimage_area.textunderstyle::before { background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 63%, rgba(255,255,255,.12) 100%) !important; } }

/*■■■■■ ↑カスタムデザイン用スタイル記述エリア↑