.page-title .large { font-size: 200%; padding: 5px; }

.intro { position: relative; z-index: 2; }

.header-image .cap.in { bottom: 10%; }

#image-illust { margin-top: -4%; position: relative; z-index: 1; }
#image-illust .img .cap { background-color: rgba(74, 73, 74, 0.88); padding: 2px 4px; }
#image-illust .img .cap.in { right: 0; bottom: 0; }

#flat .contents-wrap { padding-bottom: 0; }
#flat .section-title { grid-column: span 2; font-size: clamp(16px, calc(15px + 0.6vw), 22px); display: flex; gap: 10px; align-items: center; justify-content: center; letter-spacing: 0.1em; position: relative; z-index: 2; }
#flat .section-title::before, #flat .section-title::after { display: block; content: ''; width: 50px; height: 10px; border-style: solid; border-color: #c87f52; }
#flat .section-title::before { border-width: 1px 0 1px 1px; }
#flat .section-title::after { border-width: 1px 1px 1px 0; }
#flat .image { position: relative; z-index: 1; }
#flat .image .img .cap.in { bottom: 5%; }

#life-information .contents-wrap { display: grid; gap: 60px; }
#life-information .category-header { position: relative; }
#life-information .category-header::after { display: block; content: ''; width: 100%; height: 5px; }
#life-information .category-header img { width: 100%; height: auto; }
#life-information .category-header .icon { position: absolute; left: calc((8/1040)*100%); top: 48%; transform: translateY(-50%); z-index: 1; width: calc((62/1040)*100%); max-width: 62px; }
#life-information .category-header .title { width: calc((244/1040)*100%); max-width: 244px; }
#life-information .category-header .catch { width: calc(100% - ((256/1040)*100%)); text-align: left; position: absolute; left: calc((256/1040)*100%); top: 0; font-size: clamp(16px, calc(12.7444px + 0.6015vw), 20px); padding-bottom: 5px; }
#life-information .facility-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; align-items: flex-start; margin-top: 10px; }
#life-information .data { text-align: right; margin-top: 5px; }
#life-information .data .name { font-size: clamp(12px, 1vw, 14px); line-height: 1.2; }
#life-information .data .distance { font-size: clamp(10px, 0.9vw, 12px); }
#life-information .facility:has(.photo) { grid-row: span 6; }
#life-information .facility.txt-only { padding: 0.25rem 0.5rem 0.5rem; align-self: stretch; display: flex; align-items: center; justify-content: center; }
#life-information .facility.txt-only .data { text-align: center; }
#life-information .shopping .category-header::after { background-color: #cc6875; }
#life-information .shopping .facility-list .facility.txt-only { background-color: #f3e1e1; }
#life-information .gourmet .category-header::after { background-color: #969f64; }
#life-information .gourmet .facility-list .facility.txt-only { background-color: #d4dacd; }
#life-information .sports .category-header::after { background-color: #4c94b5; }
#life-information .sports .facility-list .facility.txt-only { background-color: #cce3f6; }
#life-information .hospital .category-header::after { background-color: #a7628f; }
#life-information .hospital .facility-list .facility.txt-only { background-color: #e9e2eb; }
#life-information .finance .category-header::after { background-color: #a6873b; }
#life-information .finance .facility-list .facility.txt-only { background-color: #eee6d9; }

#merit .en-title, #value .en-title { font-family: "Barlow Condensed", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; font-feature-settings: 'palt'; font-weight: 500; color: #c87f52; font-size: clamp(26px, calc(22.6165px + 0.9023vw), 32px); letter-spacing: 0.15em; margin-top: -5rem; text-align: center; }
#merit .jp-title, #value .jp-title { text-align: center; font-size: clamp(24px, calc(21.7444px + 0.6015vw), 28px); line-height: 1.6; letter-spacing: 0.1em; margin-top: 5px; }
#merit .catch-copy, #value .catch-copy { text-align: center; font-size: clamp(18px, calc(16.8722px + 0.3008vw), 20px); line-height: 1.6; letter-spacing: 0.1em; margin-top: 10px; }

#merit .list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 3rem; }

#value { background-color: #47403b; color: #fff; }
#value .header-image .cap2 .icon { display: inline-block; width: calc((240/1040)*100%); max-width: 72px; vertical-align: text-bottom; }
#value .header-image .cap2.in { right: 10px; bottom: 32%; }
#value .block { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 60px; align-items: center; margin-top: 4rem; }
#value .block .lead { text-align: left; }
#value .block01 { margin-top: 2rem; max-width: 800px; grid-template-columns: 0.7fr 1fr; gap: 30px; margin-inline: auto; }
#value .block02 .img .cap { margin-top: 10px; }
#value .block-title { grid-column: span 2; text-align: center; font-size: clamp(20px, calc(17.7444px + 0.6015vw), 24px); letter-spacing: 0.1em; padding: 6px 0; border: 1px solid #c87f52; border-width: 1px 0; }

@media screen and (max-width: 1024px) { #life-information .contents-wrap { grid-template-columns: 1fr; gap: 25px; }
  #life-information .category-header .catch { top: 50%; translate: 0 -50%; font-size: 26px; } }
@media screen and (max-width: 768px) { #life-information .category-header .icon { left: calc((8/628)*100%); width: calc((62/628)*100%); }
  #life-information .category-header .title { width: calc((244/628)*100%); }
  #life-information .category-header .catch { width: calc(100% - ((256/628)*100%)); left: calc((256/628)*100%); font-size: clamp(13px, calc(10.1805px + 0.7519vw), 18px); }
  #life-information .facility-list { margin-top: 12px; margin-bottom: 12px; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  #merit .en-title, #value .en-title { margin-top: -3rem; }
  #merit .list { grid-template-columns: 1fr; gap: 10px; margin-top: 2rem; }
  #value .block { grid-template-columns: 1fr; gap: 25px; }
  #value .block01 .lead { text-align: center; }
  #value .block-title { grid-column: span 1; } }
@media screen and (max-width: 560px) { #flat { container-type: inline-size; }
  #flat .section-title { gap: 8px; }
  #flat .section-title::before, #flat .section-title::after { width: 20px; }
  #flat .image { margin-inline: calc(50% - 50cqi); }
  #flat .image .img .cap.in { bottom: 0; }
  #value .header-image .cap2 .icon { max-width: 24px; vertical-align: middle; line-height: 0; } }
