/*
 * /about/ の想いと会社情報（デザイン案A「便箋」。運営者承認 2026-10-02）
 * 白いカードの中に入れず、生成りの地に「窓の形の便箋」と各節を並べる。
 * 左だけ太線の枠は使わない（運営者指示）。
 */
.card.prose:has(> .about-content) {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.about-content {
    --about-brown: #7a4a36;
    --about-paper: #fffdfa;
    --about-rule: #f1e6de;
    --about-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding-top: 8px;
}
.prose .about-content a { color: var(--rose-ink); text-underline-offset: .2em; }
.prose .about-content a:hover { color: var(--about-brown); }

/* ご挨拶：窓の形の便箋 */
.about-letter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 26px 32px;
    background: var(--about-paper);
    border: 1.5px solid var(--about-brown);
    border-radius: 175px 175px 18px 18px;
    border-radius: 50cqi 50cqi 18px 18px / 50cqi 50cqi 18px 18px;
}
.prose .about-letter__title {
    margin: 0;
    font-family: var(--about-mincho);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .4em;
    color: var(--rose-ink);
}
.about-letter__clover { display: block; margin-top: 16px; }
.prose .about-letter__dedication {
    margin: 22px 0 0;
    text-align: center;
    font-family: var(--about-mincho);
    font-size: 15.5px;
    line-height: 2.1;
}
.about-letter__dedication > span { display: block; }
.about-letter__dedication > span + span { margin-top: 8px; }
.about-letter__divider { width: 40px; height: 1px; margin: 36px 0 32px; background: #d9c6b8; }
.about-letter__body {
    align-self: stretch;
    font-family: var(--about-mincho);
    font-size: 15px;
    line-height: 32px;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--about-rule) 31px, var(--about-rule) 32px);
}
.prose .about-letter__body p { margin: 0 0 32px; line-height: 32px; }
.prose .about-letter__body p:last-child { margin-bottom: 0; }
.about-letter__body strong {
    font-weight: 700;
    background: linear-gradient(transparent 62%, var(--rose-tint) 62%);
}
.about-letter__seal { align-self: flex-end; width: 56px; height: 56px; margin-top: 20px; }

/* 各節の見出し：小さな窓のアイコン＋明朝 */
.about-section { display: flex; flex-direction: column; gap: 20px; }
.prose .about-section p { margin: 0; }
.prose .about-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--about-mincho);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .12em;
    color: var(--ink);
}
.about-heading__icon { color: var(--about-brown); }

/* 当サイトの目的 */
.prose .about-section__lead { font-family: var(--about-mincho); font-size: 17px; line-height: 2; }
.prose .about-principle {
    padding: 20px 20px 22px;
    border-radius: 16px;
    background: var(--rose-tint-weak);
}
.about-principle__head {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--rose-ink);
}

/* 情報の集め方：点線でつないだ3段 */
.prose .about-steps { list-style: none; margin: 0; padding: 0; }
.prose .about-steps__item { position: relative; display: flex; gap: 16px; margin: 0; padding-bottom: 28px; }
.prose .about-steps__item:last-child { padding-bottom: 0; }
.about-steps__item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 54px;
    bottom: 6px;
    left: 23px;
    border-left: 1.5px dashed #d9c6b8;
}
.about-steps__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border: 1.5px solid var(--about-brown);
    border-radius: 50%;
    background: var(--about-paper);
    color: var(--about-brown);
}
.about-steps__text { padding-top: 10px; }
.prose .about-steps__title { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.7; }
.about-steps__num { margin-right: 8px; color: var(--rose-ink); }
.prose .about-steps__desc { font-size: 14px; line-height: 1.85; color: var(--text-2); }

/* うさ飼いさんへ */
.prose .about-section__ask { text-align: center; font-family: var(--about-mincho); font-size: 16px; }
.about-requests { display: flex; flex-direction: column; gap: 14px; }
.about-request,
.about-note-card,
.about-period,
.about-company {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}
.about-request { padding: 22px 20px; }
.about-request__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.about-request__icon,
.about-note-card__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--rose-tint);
    color: var(--rose-ink);
}
.prose .about-request h3 { margin: 0; font-size: 16px; line-height: 1.6; color: var(--rose-ink); }
.prose .about-request p { font-size: 14.5px; }

/* 病院の方へ */
.about-note-card { display: flex; align-items: flex-start; gap: 14px; padding: 20px; }
.about-note-card__icon { background: #f3ece6; color: var(--about-brown); }
.prose .about-note-card p { font-size: 14.5px; }

/* 情報の更新について：有効期間の図 */
.about-period { margin: 0; padding: 20px 18px 18px; }
.about-period__bar { display: flex; align-items: center; }
.about-period__start { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--sage); }
.about-period__line { flex-grow: 1; height: 3px; background: var(--sage); }
.about-period__end {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 3px solid var(--stone);
    border-radius: 50%;
    background: var(--surface);
}
.about-period__labels {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.6;
    text-align: center;
}
.about-period__from { font-weight: 700; color: var(--sage-ink); }
.about-period__to { font-weight: 700; color: var(--stone-ink); }
.about-caution {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--amber-tint);
    color: var(--amber-ink);
}
.about-caution svg { flex-shrink: 0; margin-top: 4px; }
.prose .about-caution p { font-size: 14.5px; color: var(--ink); }
.about-caution strong { color: var(--amber-ink); }

/* 会社情報 */
.prose .about-company { margin: 0; padding: 4px 20px; }
.about-company > div { padding: 14px 0; }
.about-company > div + div { border-top: 1px solid var(--line); }
.about-company dt { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--rose-ink); }
.about-company dd { margin: 2px 0 0; }
.about-company__representative { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.prose .about-content .about-company__x {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    text-decoration: none;
}
.prose .about-content .about-company__x:hover { background: #333; color: #fff; }
.prose .about-content .about-company__x:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 3px; }
.prose .about-company ul { margin: 0; padding-left: 1.2em; font-size: 14.5px; }
.prose .about-company li:last-child { margin-bottom: 0; }

/* 免責 */
.prose .about-disclaimer {
    padding: 16px 18px;
    border-radius: 14px;
    background: #f4ece5;
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--text-2);
}