@charset "Shift_JIS";

/* --------------------------------------------------------------------
HBブランド：「ECCウェルネス」トップ（PC・SP）
--------------------------------------------------------------------- */

/* --------------------------------------------------------------------
【PC】
--------------------------------------------------------------------- */

/* イベント情報（.about_event）
--------------------------------- */
.mainframe_ #beauty_wrap .about .about_event {
  margin-top: 30px;
}

.mainframe_ #beauty_wrap .about .about_event .inner {
  position: relative;
  width: 620px;
  margin: auto;
  padding: 20px 50px;
  background: #fffdfb;
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, rgb(164, 114, 55, 100%) 0%, rgb(237, 215, 192) 30%, rgb(164, 114, 55, 100%) 100%) 1;
  color: #020202;
}

.mainframe_ #beauty_wrap .about .about_event .lead_txt {
  margin-bottom: 10px;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

.mainframe_ #beauty_wrap .about .about_event .desc {
  text-align: center;
}

.mainframe_ #beauty_wrap .about .about_event dl {
  display: grid;
  justify-content: center;
  gap: 5px 10px;
  grid-template-columns: 35% 65%;
  margin-top: 10px;
  line-height: 1.4;
  text-align: left;
}

.mainframe_ #beauty_wrap .about .about_event dl dt {
  font-weight: bold;
  text-align: right;
}

.mainframe_ #beauty_wrap .about .about_event dl dd {
  margin: 0;
}


/* リンク */
.mainframe_ #beauty_wrap .about .about_event .link:has(> a) {
  padding: 10px 0;
  text-align: center;
}

.mainframe_ #beauty_wrap .about .about_event .link a {
  position: relative;
  font-family: "メイリオ", Meiryo, Quicksand, "游ゴシック体", 'Yu Gothic', YuGothic, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.8;
  color: #1a0dab;
}

.mainframe_ #beauty_wrap .about .about_event .link a::after {
  content: '（外部サイトへ移動します）';
  position: absolute;
  right: 50%;
  bottom: -1.6em;
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  color: #555;
  white-space: nowrap;
  transform: translate(50%, -50%);
}

/* --------------------------------------------------------------------
【SP】
--------------------------------------------------------------------- */

/* イベント情報（.about_event）
--------------------------------- */
.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event {
  margin-top: 20px;
}

.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event .inner {
  position: relative;
  margin: 0 3%;
  padding: 20px 0;
  background: #fffdfb;
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, rgb(164, 114, 55, 100%) 0%, rgb(237, 215, 192) 30%, rgb(164, 114, 55, 100%) 100%) 1;
  font-size: 1.6rem;
  color: #020202;
}

.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event .lead_txt {
  margin-bottom: 10px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event .desc {
  line-height: 1.6;
  text-align: center;
}

.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event dl {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 10px;
  line-height: 1.4;
  text-align: center;
}

.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event dl dt {
  font-weight: bold;
}

.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event dl dt + dd + dt {
  margin-top: 5px;
}

.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event dl dd {
  margin: 0;
}

/* リンク */
.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event .link {
  padding: 10px 0;
  text-align: center;
}

.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event .link a {
  position: relative;
  font-family: "メイリオ", Meiryo, Quicksand, "游ゴシック体", 'Yu Gothic', YuGothic, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.8;
  color: #1a0dab;
}

/* 外部サイト */
.wrapper_:not(:has(.mainframe_)) #sp_beauty_news .about .about_event .link a::after {
  content: '（外部サイトへ移動します）';
  position: absolute;
  right: 50%;
  bottom: -1.6em;
  font-size: 1.1rem;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  color: #555;
  white-space: nowrap;
  transform: translate(50%, -50%);
}