/* --- 基本設定 --- */
:root {
    --font-heading: 'Platypi', serif;
    --font-body: 'Source Serif Pro', serif;
    --color-text: #504C49;
    --color-heading: #201B18;
    --color-accent: #3E2513;
    --color-bg-light: #F7F3F0;
    --color-bg-card: #FFFFFF;
    --color-bg-card-light-gray: #F2F2F2;
    --color-bg-dark: #192248;
    --card-width: 1160px; 
    --anim-duration: 0.8s;
    --anim-delay: 0s;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg-light);
    line-height: 1.7;
    font-size: 18.5px; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); color: var(--color-heading); margin: 0 0 0.5em 0; font-weight: 500; line-height: 1.25; }
p { margin: 0 0 1em 0; }
p:last-child { margin-bottom: 0; }
a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; border-style: none; }
.caption, .card-caption { font-size: 0.8em; color: #888; text-align: left; margin: 0.5rem 0 0 0; }
.translation-link { font-size: 0.9em; text-align: right; margin-top: 1.5rem; }

/* --- レイアウトの根本構造 --- */
.page-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0; 
}
.page-container > header.card-section, .page-container > main {
    margin-top: 2rem;
}
.page-container > footer.site-footer {
    margin-bottom: 2rem;
}

.card-section {
    width: 100%;
    position: relative;
    padding: 0;
    box-sizing: border-box;
}

.card-wrapper {
    width: 100%;
    max-width: var(--card-width);
    margin: 0 auto;
    background-color: var(--color-bg-card);
    position: relative;
    overflow: hidden;
    z-index: 1; 
    padding: 0rem;
    box-sizing: border-box;
}
.card-section.bg-light-gray .card-wrapper { background-color: var(--color-bg-card-light-gray); }

.card-layout-grid { display: grid; grid-template-columns: 1fr; width: 100%; }
.card-image { width: 100%; height: 300px; grid-row: 1; grid-column: 1; }
.card-image img { width: 100%; height: 100%; object-fit: cover; }

/* ▼▼▼【修正点①】背景画像の表示方法を修正 ▼▼▼ */
#service-info::before,
#oriental-medicine::before,
#shuccho-shinryo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}
#service-info::before { background-image: url('images/D_bafH-kgsHBhq8fGyD1j.png'); }
#oriental-medicine::before { background-image: url('images/E3flHpftrLYvdljd6nNqC.png'); }
#shuccho-shinryo::before { background-image: url('images/2hzLgGTmQj0DG85pJ0kpK.png'); }
#service-info .card-wrapper,
#oriental-medicine .card-wrapper,
#shuccho-shinryo .card-wrapper {
    background-color: transparent;
}


.card-content { padding: 2rem 1.5rem; display: flex; flex-direction: column; justify-content: center; z-index: 1; grid-column: 1; grid-row: 2; }
.content-inner { width: 100%; margin: 0 auto; max-width: 100%; } 
.layout-full .card-content { grid-row: 1; }
.bg-dark-blue { background-color: var(--color-bg-dark); color: #fff; }
.bg-dark-blue h2, .bg-dark-blue h3, .bg-dark-blue h4 { color: #fff; }
.bg-dark-blue a { color: #fff; }
.bg-dark-blue .step-number { background-color: #fff; color: var(--color-accent); }

/* --- 各セクション --- */
.layout-left .content-inner, .layout-right .content-inner { max-width: 650px; }
header .content-inner > * { text-align: right; width: 100%; }
header .content-inner > p:not(.hero-sub-text):not(.translation-link) { text-align: left; }
.hero-text h1 { font-size: 2.8em; line-height: 1.2; }
.hero-text h2 { font-size: 1.1em; margin-bottom: 0 !important; }
.hero-text .hero-sub-text { font-size: 1.2em; margin-bottom: 1em; }
main .card-section h2 { font-size: 1.8em; margin-bottom: 2.5rem; }
.layout-full h2, .layout-behind .card-content h2 { text-align: left; }
#contact h2, #contact h4 { text-align: left; }
.two-columns, .four-columns, .two-columns-grid, .textbox-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.column h3, .column-card h4, .step-text h4, .bullets-layout h4, #contact h4 { font-size: 1.5em; }
.column-card { text-align: left; }
.column-card img { width: 100%; aspect-ratio: 1.618 / 1; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; }
.flow-steps { display: flex; flex-direction: column; gap: 1.5rem; }
.step { display: flex; align-items: flex-start; gap: 1rem; }
.step-number { flex-shrink: 0; width: 40px; height: 40px; background-color: var(--color-bg-light); color: var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.2em; }
.step-text p { margin-bottom: 0; }
.bullets-layout { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
.bullet-item { display: flex; align-items: flex-start; gap: 1rem; }
.bullet-number { flex-shrink: 0; width: 30px; height: 30px; background-color: var(--color-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; }
.bullet-text p { margin-bottom: 0; }
.textbox { background-color: rgba(0, 0, 0, 0.03); padding: 1.5rem; border-radius: 8px; }
.textbox-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.two-columns-grid .grid-item .textbox.light-bg { margin-bottom: 1rem; background-color: rgba(255, 255, 255, 0.85); }
.two-columns-grid h4 { color: var(--color-heading); }
.two-columns-grid p { color: var(--color-text); }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 2rem 0; }
.contact-card { background-color: #fff; padding: 1rem; border-radius: 8px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; }
.contact-card h5 { margin-bottom: 0.5rem; font-size: 1em; }
.qr-code { max-width: 100px; margin: 0.5rem auto; }
.payments img { max-width: 100%; margin: auto 0; }
.payments p { font-size: 0.8em; margin-top: 0.5rem; margin-bottom: 0; }
.email-link { font-size: 1em; word-break: break-all; }

/* フッター */
.site-footer { width: 100%; max-width: var(--card-width); padding: 2rem 1rem; box-sizing: border-box; text-align: center; font-size: 0.7em; color: #666; margin: 0 auto; }
.site-footer p { margin-bottom: 0.5em; }

/* アニメーション */
.anim-on-load { opacity: 0; transition: opacity 0.6s ease-out; }
.anim-on-load.is-visible { opacity: 1; }
.anim-on-load-child { opacity: 0; transform: translateY(20px); transition: opacity var(--anim-duration) ease-out, transform var(--anim-duration) ease-out; transition-delay: var(--anim-delay); }
.is-visible .anim-on-load-child { opacity: 1; transform: translateY(0); }
img[loading="lazy"] { opacity: 0; transition: opacity 0.5s; }
img.loaded { opacity: 1; }

/* --- レスポンシブ (PC >= 768px) --- */
@media screen and (min-width: 768px) {
    .card-wrapper { padding: 0; }
    .card-content { padding: 4rem; }
    .content-inner { padding: 0; }
    .layout-full .content-inner, .layout-behind .content-inner { padding: 0 0rem; }
    
    .layout-left, .layout-right { grid-template-columns: 37.5% 1fr; }
    .layout-right { grid-template-columns: 1fr 37.5%; }
    .card-image { grid-row: 1; grid-column: auto; height: auto; }
    .card-content { grid-row: 1; grid-column: auto; }
    .layout-right .card-image { grid-column: 2; }
    .layout-right .card-content { grid-column: 1; }
    .two-columns, .two-columns-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
    .four-columns { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
    .textbox-layout { grid-template-columns: 1fr 1fr; }
    .textbox.wide { grid-column: 1 / -1; }
    .contact-grid { grid-template-columns: repeat(3, 1fr); }
    
    .image-sejutsu { object-position: 13.74% 54.66%; }
    .image-yoyaku { object-position: 17.05% 49.65%; }

    .hero-text h1 { font-size: 2.5em !important; }
    .hero-text h2 { font-size: 1.5em !important; white-space: nowrap; margin-bottom: 0 !important; padding: 0 !important; }
    main .card-section h2 { font-size: 2em; }
    #contact h2 { text-align: left; }
    .email-link { font-size: 0.9em; word-break: normal; }
}