/* The light-green palette uses pale surfaces and deep-green reading/action colors. */
body { background-color: var(--background); background-image: radial-gradient(ellipse at 0 0, var(--sage) 0%, var(--sage-soft) 40%, transparent 74%); background-size: 100% 780px; color: var(--foreground); }
::selection { color: var(--foreground); background: var(--sage); }
.mainvisual_inner, .mainvisual .slide_wrap .slick-slide, .page_title::after { border-radius: 32px 0 0 32px; }
.news { border-radius: 22px 0 0 22px; box-shadow: 0 14px 40px var(--shadow); }
.message .box_text_inner::before { background-color: var(--background); border-radius: var(--radius); }
.mainvisual::before { background-image: linear-gradient(120deg, var(--sage-soft), var(--sage)); }
.btn_border a, .btn_border::after { border-radius: 16px; }
.btn_border a { color: var(--primary); }
.btn_border.btn_solid a { color: var(--primary-foreground); }
.btn_border a .arrow { background-image: none !important; background-color: currentColor; mask: url(../img/common/ico_arrow_blue.png) center / contain no-repeat; -webkit-mask: url(../img/common/ico_arrow_blue.png) center / contain no-repeat; }
header .header_normal .btn_contact { border-radius: 0 0 0 28px; }
.service .box_text_inner { color: var(--foreground); background: linear-gradient(130deg, var(--sage-soft), var(--sage)); border: 1px solid var(--sage-mid); border-radius: 28px; box-shadow: 0 20px 60px var(--shadow); }
.staff .staff_title { border-radius: 24px 24px 0 0; }
.staff .box_img img, .footer_content_access li .img img { border-radius: 22px; }
.contact-before-service .cmn_contact { padding: 48px 36px; border: 1px solid var(--sage-mid); border-radius: 28px; background: var(--sage); }
.message { margin-bottom: 32px; }
.contact-before-service .footer_top { padding-top: 48px; }
.cmn_contact_item .icon::before, .cmn_contact_item .icon::after { background-image: repeating-linear-gradient(to bottom, var(--sage-mid) 0 2px, transparent 2px 6px); }
.illustrated-banner { color: var(--primary); background: var(--background); }
.illustrated-banner--attend { color: var(--primary); }
.illustrated-banner__action, .illustrated-banner--attend .illustrated-banner__action { background: linear-gradient(100deg, var(--primary), var(--foreground)); }
.footer_bnr_item a, .footer_bnr_item::after { border-radius: 18px; }
.footer_content { background: linear-gradient(180deg, var(--sage-soft), var(--sage)); }
.footer_content_inner { color: var(--foreground); }
.footer_content_access li .term span { background: var(--surface); color: var(--primary); border: 1px solid var(--sage-mid); border-radius: 999px; }
.footer_content_nav_inner, .footer_content_nav_list .list_item { border-color: var(--sage-mid); }

/* Color only interface artwork and ornament layers, preserving paper and neutral ink. */
.replace_img,
header .header_normal > .logo::after,
.mainvisual_copy img,
.message .box_text .title img,
.staff .staff_title .title img,
.cmn_contact_title .en img,
.cmn_contact_item .box_text .title img,
.message::before,
.service .img::after,
.service .box_text_inner::before,
.staff::before,
.staff .staff_title .title::after,
.footer_top::before,
header .btn_nav::before,
:where(#service-details) .detail-message::before,
:where(#service-details) img:not(.handdrawn-image) { filter: url(#theme-sage); }

/* These titles were white on cyan panels; give them dark ink on the new pale panels. */
.service .box_text .title img,
.footer_content_title .en img,
.footer_content_access h3 img,
.footer_content_info .logo img,
.footer_content_info .sns_item a,
:where(#service-details) .use_title .title img { filter: url(#theme-ink); }
.replace_img:focus-visible, .footer_content_info .sns_item a:focus-visible { outline-offset: -4px; }

:where(#service-details) .care,
:where(#service-details) .use_insurance_tab .box_img { background: var(--sage-soft); border: 1px solid var(--sage); border-radius: 24px; }
:where(#service-details) .care_list li { border: 1px solid var(--sage); border-radius: 18px; }
:where(#service-details) .use,
:where(#service-details) .use::before,
:where(#service-details) .use_inner::before,
:where(#service-details) .use_inner::after { background-color: var(--sage); }
:where(#service-details) .use::before { border-radius: 28px 28px 0 0; }
:where(#service-details) .use_title .en,
:where(#service-details) .use_intro { color: var(--foreground); }
:where(#service-details) .use_intro .box_text .intro_title .title span { background-image: linear-gradient(var(--primary), var(--primary)); }
:where(#service-details) .use_insurance_tab { border-radius: 0 0 24px 24px; }
:where(#service-details) .use_insurance_nav_item { border-radius: 16px 16px 0 0; }
:where(#service-details) .visit { background-image: radial-gradient(ellipse at 50% 30%, var(--sage-soft), transparent 72%); background-size: 100% 100%; }
:where(#service-details) .visit_case_item .img img { border-radius: 22px; }

@media (min-width: 801px) {
  .btn_border a:hover { color: var(--primary-foreground); }
  .btn_border.btn_solid a:hover { color: var(--primary); }
}
@media (max-width: 1100px) {
  .contact-before-service .cmn_contact { padding: 40px 28px; }
}
@media (max-width: 800px) {
  body { background-size: 100% 560px; background-position: center top; }
  .mainvisual_inner, .mainvisual .slide_wrap .slick-slide, .page_title::after { border-radius: 22px 0 0 22px; }
  .news { background: transparent; box-shadow: none; border-radius: 0; }
  .service { background: var(--sage-soft); }
  .service .img { border-radius: 22px; }
  .service .box_text_inner { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
  .contact-before-service .cmn_contact { padding: 32px 20px; border-radius: 22px; }
  .message { margin-bottom: 24px; }
  .contact-before-service .footer_top { padding-top: 32px; }
  .contact-before-service .cmn_contact_item .icon { width: 62px; }
  .contact-before-service .cmn_contact_item .box_text { width: calc(100% - 80px); }
  .contact-before-service .cmn_contact_tel .num { font-size: clamp(19px, 5.3vw, 26px); }
  .contact-before-service .cmn_contact_tel .note { line-height: 1.7; }
  .footer_content { background: linear-gradient(180deg, var(--sage-soft), var(--sage)); }
  :where(#service-details) .use_insurance_tab { border-radius: 0 0 18px 18px; }
  :where(#service-details) .use_insurance_tab .box_img { background: var(--sage-soft); border-radius: 18px; }
}