/* 在宅輸血ページ用（既存 layout.css に追加する想定） */
#transfusion .txttitle { text-align: center; color: #35B597; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.2em; line-height: 1.4; }
#transfusion .txttitle:before { content: ""; display: block; width: 0; height: 50px; margin: 0 auto 20px; border-left: 2px dotted #35B597; }
#transfusion .start .catch { color: #fff; font-size: 1.75rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.05em; text-align: center; }
#transfusion .start .catch em { font-style: normal; font-size: 130%; color: #FFF6C9; border-bottom: 4px solid #F9C158; padding: 0 0.1em; }
#transfusion .start .badge { display: table; margin: 1.25em auto 2em; padding: 0.4em 1.6em; background: #fff; color: #35B597; border-radius: 999px; font-weight: 500; font-size: 1rem; line-height: 1.6; }
#transfusion .start .badge:before { content: "✓"; color: #F9C158; font-weight: 700; margin-right: 0.5em; }

#transfusion .tf-sec { padding: 70px 0 0; }
#transfusion .tf-sec:last-of-type { padding-bottom: 90px; }
#transfusion .tf-two { display: flex; justify-content: space-between; gap: 30px; }
#transfusion .tf-two dl { width: calc((99.9% - 30px) / 2); padding: 35px; }
#transfusion .border10 dd { position: relative; padding: 0.9em 0 0.9em 1.6em; border-top: 1px dashed #C9CACA; line-height: 1.7em; }
#transfusion .border10 dd:before { position: absolute; left: 0; top: 0.9em; font-weight: 700; }
#transfusion .tf-merit dd:before { content: "○"; color: #35B597; }
#transfusion .tf-caution { border-color: #FEF3DE; }
#transfusion .tf-caution dt { color: #E3A12F; }
#transfusion .tf-caution dd:before { content: "！"; color: #F9C158; }

#transfusion .tf-h3 { text-align: center; color: #35B597; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.15em; margin-bottom: 40px; }
#transfusion .tf-h3:after { content: ""; display: block; width: 40px; height: 3px; margin: 14px auto 0; background: #F9C158; border-radius: 2px; }
#transfusion .tf-flowsec { margin-top: 70px; background: #EBF8F5; padding: 70px 0; }
#transfusion .tf-flowwrap { display: flex; gap: 40px; align-items: flex-start; }
#transfusion .tf-flow { flex: 1; list-style: none; margin: 0; padding: 0; }
#transfusion .tf-flow li { position: relative; display: flex; gap: 20px; background: #fff; border-radius: 10px; padding: 22px 25px; margin-bottom: 28px; }
#transfusion .tf-flow li:not(:last-child):after { content: ""; position: absolute; left: 50px; bottom: -22px; border: 9px solid transparent; border-top: 11px solid #35B597; }
#transfusion .tf-flow b { flex: 0 0 52px; height: 52px; border-radius: 50%; background: #35B597; color: #fff; font-family: 'Lato', sans-serif; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; }
#transfusion .tf-flow h4 { color: #35B597; font-weight: 500; font-size: 1.1rem; margin-bottom: 0.35em; }
#transfusion .tf-flow p { line-height: 1.75em; font-size: 0.95rem; }
#transfusion .tf-photo { flex: 0 0 38%; margin: 0; }
#transfusion .tf-photo img { width: 100%; height: auto; border-radius: 10px; display: block; }
#transfusion .tf-photo img + img { margin-top: 20px; }

#transfusion .tf-list { display: flex; flex-wrap: wrap; column-gap: 30px; }
#transfusion .tf-list dt { width: 100%; }
#transfusion .tf-list dd { width: calc((99.9% - 60px) / 3); }
#transfusion .tf-list dd:before { content: "☑"; color: #35B597; font-weight: 400; }
#transfusion .tf-note { margin-top: 1em; font-size: 0.875rem; color: #717071; }

#transfusion .tf-contact .inner { border: 2px solid #F9C158; border-radius: 10px; padding: 45px 40px; text-align: center; }
#transfusion .tf-contact .tf-h3 { margin-bottom: 25px; }
#transfusion .tf-contact p { line-height: 1.8em; }
#transfusion .tf-tel { margin: 25px 0; display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 10px 35px; }
#transfusion .tf-tel a { display: inline; color: #35B597; font-family: 'Lato', sans-serif; font-size: 2.2rem; }
#transfusion .tf-tel span { color: #717071; font-family: 'Lato', sans-serif; font-size: 1.2rem; }
#transfusion .tf-tel i { font-style: normal; font-family: 'Noto Sans JP', sans-serif; font-size: 0.875rem; margin-right: 0.6em; color: #717071; }
#transfusion .tf-btns { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; list-style: none; padding: 0; }
#transfusion .tf-btns a { display: block; min-width: 230px; padding: 1em; border-radius: 999px; background: #35B597; color: #fff; font-size: 0.95rem; }
#transfusion .tf-btns li:last-child a { background: #F9C158; }

@media (max-width: 959px) {
  #transfusion .tf-two, #transfusion .tf-flowwrap { flex-direction: column; }
  #transfusion .tf-two dl { width: 100%; padding: 30px 5%; }
  #transfusion .tf-photo { flex: none; width: 100%; display: flex; gap: 15px; }
  #transfusion .tf-photo img { width: calc(50% - 8px); }
  #transfusion .tf-photo img + img { margin-top: 0; }
  #transfusion .tf-list dd { width: calc((99.9% - 30px) / 2); }
}
@media (max-width: 599px) {
  #transfusion .txttitle { font-size: 1.3rem; letter-spacing: 0.1em; }
  #transfusion .start .catch { font-size: 1.3rem; }
  #transfusion .tf-sec { padding-top: 50px; }
  #transfusion .tf-flowsec { padding: 50px 0; margin-top: 50px; }
  #transfusion .tf-flow li { padding: 18px 15px; gap: 14px; }
  #transfusion .tf-flow b { flex-basis: 42px; height: 42px; font-size: 1rem; }
  #transfusion .tf-flow li:not(:last-child):after { left: 36px; }
  #transfusion .tf-list { column-gap: 0; }
  #transfusion .tf-list dd { width: 100%; }
  #transfusion .tf-contact .inner { padding: 35px 5%; }
  #transfusion .tf-tel a { font-size: 1.8rem; }
  #transfusion .tf-btns a { min-width: 0; width: 100%; }
  #transfusion .tf-btns { flex-direction: column; }
}
#transfusion .start .tf-intro { margin: 0 auto; }