/*
 * Shinfulife components — CSS only (no JavaScript, no React).
 * Recreated from shinfulife.com style.css. Every class is prefixed `sf-` so it can sit
 * beside the store's own CSS (`az-`, `sl-`, `fs-`) without clashing. The source selector
 * each rule recreates is named in its comment. Values are the store's; rem values were
 * converted to px (the store sets html { font-size: 62.5% }).
 * Requires tokens.css (the design system's generated custom properties).
 */

/* ---------- shared ---------- */
.sf-scope {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: var(--lineHeight--primary, 1.65);
  color: var(--color-text__body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keyboard focus (added — the store has none for links/buttons): solid 2px brown-dark ring, 15:1 on white. */
.sf-btn:focus-visible,
.sf-card-row:focus-visible,
.sf-keywords a:focus-visible,
a.sf-tag:focus-visible {
  outline: 2px solid var(--color-brown--dark);
  outline-offset: 2px;
}

/* ---------- Button  (.btn_primary / .FS2_memberOnlyLoginLink; --primary added) ---------- */
.sf-btn {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 30px auto;
  padding: var(--gutter) var(--gutter--l);
  text-align: center;
  text-decoration: none;
  color: var(--color-text--strong);
  border: 1px solid var(--color-text--strong);
  background: var(--color-white);
  cursor: pointer;
}
.sf-btn:hover { text-decoration: none; }
.sf-btn::before {
  position: absolute;
  top: calc(50% - 4px);
  right: var(--gutter);
  width: 8px;
  height: 8px;
  content: '';
  transform: rotate(45deg);
  border-top: 1px solid var(--color-text--strong);
  border-right: 1px solid var(--color-text--strong);
}
/* primary (added): color-primary fill, color-on-primary label (white) */
.sf-btn--primary {
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.sf-btn--primary::before {
  border-top-color: var(--color-on-primary);
  border-right-color: var(--color-on-primary);
}
.sf-btn--accent {
  font-size: 18px;
  padding: var(--gutter--s) 0;
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius--s);
  background: var(--color-red--price);
}
.sf-btn--accent::before { display: none; }
@media screen and (min-width: 768px) {
  .sf-btn { transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out; }
  .sf-btn:hover { opacity: var(--opacity-hover); }
}

/* ---------- Heading ---------- */
/* .page_ttl */
.sf-heading--page {
  font-size: 24px;
  font-weight: bold;
  width: 100%;
  margin: 0;
  text-align: center;
  margin-block-end: var(--gutter--l);
}
/* .list_ttl */
.sf-heading--list {
  font-size: 18px;
  font-weight: normal;
  width: 100%;
  margin: 0;
  padding: var(--gutter--s) 0;
  text-align: center;
  border-top: 2px solid var(--color-border--title);
  border-bottom: 2px solid var(--color-border--title);
  margin-block-end: var(--gutter--l);
}
/* .az-c-heading--primary / h2.CrossHead */
.sf-heading--primary {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin: 24px 0 24px 0;
  padding: 4px 0 4px 16px;
  border-bottom: 1px solid var(--color-border--primary);
  border-left: 4px solid var(--color-beige);
}
/* .az-c-heading--secondary */
.sf-heading--secondary {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 var(--gutter--l);
  padding: var(--gutter--s) var(--gutter);
  background-color: var(--color-beige--light);
}
/* .az-c-heading--tertiary */
.sf-heading--tertiary {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 var(--gutter--l);
  padding: 0 0 var(--gutter--s);
  border-bottom: 1px solid var(--color-beige);
}
/* .pageTitle_sp / .FS2_PageTitle (bg #f8f6e9 in the store = color-beige--light) */
.sf-heading--band {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  margin: var(--gutter--s) 0;
  padding: 7px var(--gutter--xs) var(--gutter--xs);
  color: var(--color-text--strong);
  border-top: 2px solid var(--color-beige);
  border-bottom: 1px dotted var(--color-border--tertiary);
  background: var(--color-beige--light);
}
/* .Definition_sp */
.sf-heading--definition {
  font-size: 16px;
  font-weight: bold;
  line-height: 170%;
  position: relative;
  margin: var(--gutter) 0 var(--gutter--xs) 0;
  padding: var(--gutter--xs) 0 var(--gutter--xs) var(--gutter--l);
  border-bottom: 1px dotted var(--color-beige);
}
.sf-heading--definition::before {
  position: absolute;
  top: 9px;
  left: 5px;
  display: block;
  width: var(--gutter--s);
  height: var(--gutter--s);
  content: '';
  border-radius: 30px;
  background-color: var(--color-beige);
  box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.2) inset;
}
/* .fontMin section title (size not in style.css — see README) */
.sf-heading--serif {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 var(--gutter);
  text-align: center;
}
.sf-heading--serif small {
  font-family: var(--font-sans);
  font-size: 11px;
  display: block;
  line-height: 2.1;
}

/* ---------- ArticleHeading  (記事ページ .lecture_blk / .lecture_h3 / .lecture_h4) ---------- */
.sf-article-block {
  margin: 0 0 var(--gutter) 0;
  padding: var(--gutter--s);
  background-color: var(--color-gray--block);
}
.sf-article-h3 {
  font-size: 14px;
  font-weight: 500;
  position: relative;
  margin: 0 0 var(--gutter--s) 0;
  padding: 8px var(--gutter--xs) 8px var(--gutter--s);
  color: var(--color-white);
  border: 1px solid var(--color-beige);
  border-radius: var(--radius--xs);
  background: var(--color-beige);
}
.sf-article-h3::after {
  position: absolute;
  top: 100%;
  left: 30px;
  width: 0;
  height: 0;
  content: '';
  border: 8px solid rgba(0, 0, 0, 0);
  border-top: 8px solid var(--color-beige);
}
.sf-article-h4 {
  font-size: 13px;
  font-weight: bold;
  line-height: 18px;
  position: relative;
  margin: 0 0 var(--gutter--s) 0;
  padding: var(--gutter--xs) 0 var(--gutter--xs) 24px;
  border-bottom: 1px solid var(--color-border--primary);
}
.sf-article-h4::before {
  position: absolute;
  top: 9px;
  left: 5px;
  display: block;
  width: var(--gutter--s);
  height: var(--gutter--s);
  content: '';
  border-radius: 30px;
  background-color: var(--color-red--price);
  box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.2) inset;
}

/* ---------- PointBox  (.lecture_point) ---------- */
.sf-point {
  display: flow-root; /* added: contains the floated image */
  padding: var(--gutter--s);
  border: 1px dashed var(--color-beige);
  background-color: var(--color-white);
}
.sf-point__img {
  float: left;
  margin-right: var(--gutter--s);
}
.sf-point p { margin: 0; }

/* ---------- StaffVoice  (.staff_voice) ---------- */
.sf-staff {
  position: relative;
  clear: both;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0 auto var(--gutter);
  padding: var(--gutter--s);
  border: 1px dotted var(--color-beige);
  border-radius: var(--radius--m);
  background-color: var(--color-beige--thin);
}
.sf-staff__icon {
  float: left;
  width: auto;
  margin-right: var(--gutter--s);
  vertical-align: bottom;
}
.sf-staff__title {
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  color: var(--color-brown);
}
.sf-staff__subtitle {
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 var(--gutter--s);
}
.sf-staff p { margin: var(--gutter--s); }

/* ---------- SpeechBubble  (.container.bubble-1) ---------- */
.sf-bubble {
  display: flex;
  flex: 1;
  margin-top: 32px;
  margin-bottom: 32px;
}
.sf-bubble__avatar {
  width: 100px;
  min-width: 100px;
  display: flex;
  align-items: center;
}
.sf-bubble__avatar img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.sf-bubble__text {
  font-size: 80%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 8px 8px 32px 16px;
  padding: 8px 16px;
  border: solid 3px var(--color-border--bubble);
  border-radius: var(--radius--l);
  background: var(--color-white);
}
.sf-bubble__text a,
.sf-bubble__text a:link,
.sf-bubble__text a:visited { color: var(--color-link--content); }
.sf-bubble__text::before,
.sf-bubble__text::after {
  position: absolute;
  top: 40%;
  content: '';
}
.sf-bubble__text::before {
  z-index: 2;
  left: -24px;
  margin-top: -12px;
  border: 12px solid rgba(0, 0, 0, 0);
  border-right: 12px solid var(--color-white);
}
.sf-bubble__text::after {
  z-index: 1;
  left: -30px;
  margin-top: -14px;
  border: 14px solid rgba(0, 0, 0, 0);
  border-right: 14px solid var(--color-border--bubble);
}
@media screen and (min-width: 376px) {
  .sf-bubble__avatar { width: 140px; min-width: 140px; }
  .sf-bubble__text { font-size: 100%; }
}

/* ---------- ArticleCard  (.theme_box_flex) ---------- */
.sf-card-row {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto var(--gutter--l);
  text-decoration: none;
  color: inherit;
}
.sf-card-row--boxed {
  padding: var(--gutter--s);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius--s);
}
.sf-card-row__img {
  display: inline-block;
  flex: 1;
  margin-right: var(--gutter--s);
}
.sf-card-row__img img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.sf-card-row__body {
  display: flex;
  flex: 2;
  flex-direction: column;
}
.sf-card-row__title {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.8;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0 0 var(--gutter--s);
  text-decoration: none;
  color: var(--color-black);
}
.sf-card-row__more {
  font-size: 11px;
  position: relative;
  align-self: end;
  margin: 0;
  color: var(--color-primary);
  padding-inline-end: var(--gutter);
}
.sf-card-row__more::after {
  position: absolute;
  top: calc(50% - 6px);
  right: 0;
  display: block;
  width: 8px;
  height: 8px;
  content: '';
  transform: rotate(45deg);
  border-top: 1px solid var(--color-primary);
  border-right: 1px solid var(--color-primary);
}
@media screen and (min-width: 768px) {
  .sf-card-row__img { margin-right: var(--gutter); }
  .sf-card-row__title { font-size: 18px; font-weight: bold; }
  .sf-card-row__more { font-size: 13px; }
  .sf-card-row { transition: opacity 0.3s ease-in-out; }
  .sf-card-row:hover { opacity: var(--opacity-hover); }
}

/* ---------- CardGrid  (.sl-container-grid / .sl-card) ---------- */
.sf-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 var(--gutter--l);
  padding: 0 var(--gutter--s);
}
.sf-grid__card {
  box-sizing: border-box;
  width: 48.5%;
  margin-bottom: var(--gutter--s);
}
.sf-grid__card > a { display: block; line-height: 0; text-decoration: none; }
.sf-grid__card img {
  display: block;
  width: 100%;
  margin: 0 0 var(--gutter--s);
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.sf-grid__caption {
  font-size: 11px;
  line-height: 2.1;
  margin: 0 0 var(--gutter--s);
  padding: 0;
}
@media screen and (min-width: 768px) {
  .sf-grid { justify-content: center; }
  .sf-grid__card { width: 23%; margin: 0 1%; }
}
.sf-grid--3col {
  display: grid;
  margin: 0 auto var(--gutter--l);
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.sf-grid--3col > .sf-grid__card { width: 100%; margin: 0; }

/* ---------- TagList  (.az-c-list--tag / .az-c-list--subCategory) ---------- */
.sf-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.sf-tags--center { justify-content: center; }
.sf-tags > li { margin: 0 var(--gutter) var(--gutter) 0; }
.sf-tag {
  font-size: 12px;
  line-height: 1.65;
  display: inline-block;
  padding: 4px var(--gutter);
  text-decoration: none;
  color: var(--color-text--primary);
  border: 1px solid var(--color-gray--light);
  border-radius: var(--radius--m);
  background-color: var(--color-beige--thin);
}
a.sf-tag:active { color: var(--color-white); background-color: var(--color-gray); }

/* ---------- RelatedKeywords  (.sl_related_keywords) ---------- */
.sf-keywords {
  box-sizing: border-box;
  width: 96%;
  margin: 40px auto;
  padding: var(--gutter);
  border: solid 1px var(--color-border--light);
  border-radius: var(--radius--s);
  background: var(--color-white);
}
.sf-keywords__title {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 var(--gutter--s);
  padding: 0;
  text-align: center;
}
.sf-keywords ul { margin: 0; padding: 0; list-style: none; text-align: center; }
.sf-keywords li {
  display: inline;
  margin-right: var(--gutter--xs);
  margin-bottom: var(--gutter--s);
  text-align: center;
  word-break: keep-all;
}
.sf-keywords li::after {
  display: inline-block;
  margin: 0 0 0 var(--gutter--xs);
  content: '|';
  color: var(--color-border--light);
}
.sf-keywords li:last-child::after { display: none; }
.sf-keywords a,
.sf-keywords a:link {
  font-size: 13px;
  text-decoration: underline;
  color: var(--color-text--strong);
}

/* ---------- Table  (.style_table / table.tg) ---------- */
.sf-table {
  width: 96%;
  margin: 0 auto;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
  text-align: left;
}
.sf-table th {
  font-size: 14px;
  font-weight: bold;
  padding: 4% 2%;
  border: 1px solid var(--color-border--primary);
  background-color: var(--color-beige--thin);
}
.sf-table td {
  font-size: 14px;
  overflow: hidden;
  width: 96%;
  padding: 4% 2%;
  word-wrap: break-word;
  border: 1px solid var(--color-border--primary);
  background-color: var(--color-white);
}

/* ---------- Marker  (.theme_text_highlight / .theme_h3 / .text-bg--* / .text_red) ---------- */
.sf-marker--pink {
  display: inline-block;
  background-color: var(--color-marker--pink);
}
.sf-marker--band {
  font-size: 16px;
  padding: 2px;
  background-color: var(--color-marker--yellow);
}
.sf-text-bg {
  position: relative;
  z-index: 0;
  display: inline-block;
}
.sf-text-bg::before {
  position: absolute;
  z-index: -1;
  top: -5px; /* store: calc(0.5rem * -1) at a 62.5% root */
  left: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 2px;
  content: '';
  opacity: 0.25;
  background: var(--color-white);
}
.sf-text-bg--yellow::before { background: var(--color-bg--yellow); }
.sf-text-bg--pink::before { background: var(--color-bg--pink); }
.sf-text-bg--blue::before { background: var(--color-bg--blue); }
.sf-text-bg--green::before { background: var(--color-bg--green); }
.sf-text--red { color: var(--color-red--text); }
.sf-text--bold { font-weight: bold; }