* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--background); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; font-size: 1rem; line-height: 1.7; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--text); outline-offset: 5px; }
.skip { position: absolute; left: 1rem; top: -8rem; padding: .7rem; background: var(--background); z-index: 2; }
.skip:focus { top: 1rem; }
.shell { max-width: 34rem; margin: 0 auto; padding: 2rem clamp(16px, 5vw, 24px) max(2rem, env(safe-area-inset-bottom)); }
.card { border-top: 4px solid var(--primary); padding-top: 1.75rem; }
.identity { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; margin-bottom: 1.2rem; }
.portrait { width: clamp(64px, 4.5rem, 96px); height: clamp(64px, 4.5rem, 96px); object-fit: cover; border-radius: var(--radius); flex: 0 0 auto; }
.identity-text { min-width: 0; flex: 1 1 10rem; }
h1 { margin: 0; font-size: clamp(1.6rem, 6.2vw, 2.1rem); line-height: 1.4; letter-spacing: .035em; overflow-wrap: anywhere; }
.company { margin: 0 0 .3rem; font-size: .875rem; overflow-wrap: anywhere; }
.role { margin: .5rem 0 0; font-size: .875rem; overflow-wrap: anywhere; }
.description { margin: 0 0 1.8rem; white-space: pre-line; overflow-wrap: anywhere; }
section { margin-top: 1.5rem; }
h2 { font-size: .875rem; font-weight: 600; margin: 0 0 .75rem; letter-spacing: .06em; }
ul { list-style: none; margin: 0; padding: 0; }
.links { display: grid; gap: .75rem; }
.link { display: flex; align-items: center; gap: clamp(8px, 2.5vw, 14px); min-height: 3.5rem; padding: .85rem clamp(12px, 4vw, 16px); border-radius: var(--radius); text-decoration: none; border: 1px solid var(--text); line-height: 1.5; }
.link .label { min-width: 0; overflow-wrap: anywhere; }
.primary .link { color: var(--primary-text); background: var(--primary); border-color: var(--primary); font-weight: 700; min-height: 3.75rem; }
.arrow { margin-left: auto; flex: 0 0 auto; }
.icon { width: clamp(20px, 1.35rem, 28px); height: clamp(20px, 1.35rem, 28px); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social { margin-top: 1.8rem; }
.social .links { display: flex; flex-wrap: wrap; gap: .4rem .75rem; }
.social li { max-width: 100%; }
.social .link { border: 0; border-radius: var(--radius); padding: .65rem .25rem; min-height: 2.75rem; font-size: .875rem; gap: .5rem; }
.sample { margin: 1.5rem 0 0; font-size: .875rem; }
@media (hover: hover) { .link:hover .label { text-decoration: underline; text-underline-offset: .2em; } }
@media (min-width: 640px) { .shell { padding-top: 4rem; } .card { padding-top: 2rem; } }
@media (forced-colors: active) { .link { border: 1px solid ButtonText; } .primary .link { color: LinkText; } }

/* ボタン数に合わせて並び替える。空URL・hiddenは表示しない。 */
[hidden],a[href=""] { display: none !important; }
.social .links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.social .link { min-height: 48px; padding: 10px 2px; }
.primary .icon { filter: brightness(0) invert(1); }
.primary .line { background: var(--line); border-color: var(--line); }
@media (max-width: 359px) { .social .links { grid-template-columns: 1fr; } }
@media (forced-colors: active) { .primary .icon { filter: none; } }
/* A案：プロフィール→LINE 36px、LINE→メール32px、次のSNS40px */
.shell { padding: 40px 24px max(40px, env(safe-area-inset-bottom)); }
.card { border: 0; padding: 0; }
.identity { margin-bottom: 0; }
.company { margin-bottom: 8px; }
h1 { font-size: clamp(28px, 6.2vw, 34px); }
.role { margin-top: 8px; }
.description { margin: 20px 0 0; }
#contact { margin-top: 36px; }
#contact > section { margin-top: 40px; }
#contact > section:first-child { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.primary .link { min-height: 56px; }
.email-panel { min-width: 0; }
.links > .email-panel:not(:first-child), .links > .email-panel + .link { margin-top: 20px; }
.email-panel h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1rem; line-height: 1.5; }
.primary .email-panel .icon { filter: none; }
.email-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: 12px; }
.email-row:not(:has(.email-copy:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.email-address { min-width: 0; font-size: 1rem; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.email-copy { min-height: 44px; width: 88px; padding: 8px 4px; border: 1px solid var(--text); border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: .875rem; cursor: pointer; }
.email-copy:disabled { cursor: wait; }
.email-copy:hover { background: #e9eef2; }
.email-copy:focus-visible, .email-address:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
.email-status { margin: 0; font-size: .875rem; line-height: 1.65; overflow-wrap: anywhere; }
.email-status:not(:empty) { margin-top: 10px; }
.social h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .875rem; }
.social .links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.social .link { gap: 12px; padding: 10px 0; min-height: 48px; font-size: .9375rem; }
.social-arrow { margin-left: auto; width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 359px) { .shell { padding-left: 20px; padding-right: 20px; } }
@media (forced-colors: active) { .email-copy { border-color: ButtonText; } }