:root { --navy:#12253f; --navy-deep:#09182b; --canvas:#f3f6f8; --paper:#ffffff; --ink:#16283b; --muted:#627184; --line:#d9e1e8; --danger:#b3263a; }
* { box-sizing:border-box; } [hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 90% -5%,#dceef7 0,transparent 32%),var(--canvas); font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; line-height:1.6; }
button,input { font:inherit; } button { cursor:pointer; } .site-header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1160px)/2)); background:rgba(255,255,255,.92); border-bottom:1px solid rgba(18,37,63,.08); backdrop-filter:blur(14px); } #account { display:flex; align-items:center; min-width:0; }
.brand { color:var(--navy); font-family:Georgia,serif; font-weight:bold; font-size:24px; text-decoration:none; letter-spacing:-.05em; }.flag { display:inline-grid; place-items:center; width:29px; height:29px; margin-right:8px; border-radius:50%; background:var(--navy); color:#f0a136; font-size:17px; }.text-button { margin-left:16px; border:0; border-bottom:1px solid currentColor; padding:2px; color:var(--muted); background:none; font-size:13px; }
main { width:min(1160px,calc(100% - 40px)); margin:0 auto; }.login-shell { min-height:calc(100vh - 76px); display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:clamp(42px,9vw,140px); }.hero-copy { position:relative; }.hero-copy::before { content:""; position:absolute; z-index:-1; width:330px; height:330px; top:-100px; left:-90px; border-radius:50%; background:#d9eee4; filter:blur(2px); }.hero-copy h1 { margin:9px 0 17px; font-family:Georgia,"Times New Roman",serif; color:var(--navy); font-size:clamp(45px,5.5vw,74px); line-height:1.06; letter-spacing:-.065em; }.hero-copy>p:last-child { max-width:390px; color:var(--muted); font-size:17px; }.overline { margin:0; color:#ad6500; font-size:11px; font-weight:800; letter-spacing:.17em; }
.login-card,.calendar-card,.common-card { border:1px solid rgba(18,37,63,.1); box-shadow:0 18px 48px rgba(24,48,70,.09); }.login-card { padding:clamp(27px,4vw,44px); background:var(--paper); border-radius:18px; }.login-card h2,.common-card h2 { margin:5px 0; font-family:Georgia,serif; color:var(--navy); font-size:30px; letter-spacing:-.04em; }.login-card>p { margin:0; color:var(--muted); font-size:14px; } label { display:block; margin:22px 0 14px; color:var(--ink); font-size:13px; font-weight:800; } input { display:block; width:100%; margin-top:6px; padding:12px 13px; border:1px solid #bac7d3; border-radius:8px; background:#fff; color:var(--ink); outline-color:#17715e; } button:not(.text-button):not(.month-button) { border:0; border-radius:8px; padding:12px 18px; background:var(--navy); color:#fff; font-weight:800; box-shadow:0 3px 0 var(--navy-deep); } button:not(.text-button):not(.month-button):hover { background:#1c3c62; }.button-row { display:flex; gap:8px; }.button-quiet { background:#e6edf2 !important; color:var(--navy) !important; box-shadow:0 3px 0 #c8d3dd !important; }.message { min-height:1.5em; margin:13px 0 0; color:var(--danger); font-size:13px; font-weight:bold; }.message.ok { color:#08755c; }
.app-shell { padding:58px 0 88px; }.intro { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:28px; }.intro h1 { margin:3px 0 4px; font-family:Georgia,serif; color:var(--navy); font-size:43px; letter-spacing:-.055em; }.intro p:not(.overline) { margin:0; color:var(--muted); font-size:14px; }.legend { display:flex; max-width:460px; flex-wrap:wrap; gap:8px 15px; justify-content:flex-end; }.legend-item { display:flex; align-items:center; gap:6px; color:#42556b; font-size:12px; font-weight:700; }.dot { display:inline-block; flex:0 0 auto; width:12px; height:12px; border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px rgba(18,37,63,.24); }
.member-heading { margin-bottom:22px; }.member-heading h1 { margin:3px 0; color:var(--navy); font-family:Georgia,serif; font-size:43px; letter-spacing:-.055em; }.member-heading p:not(.overline) { margin:0; color:var(--muted); font-size:14px; }.member-layout { grid-template-columns:minmax(0,1fr) 300px; }.member-layout .calendar-card { box-shadow:0 10px 28px rgba(24,48,70,.06); }.member-layout .confirmed-card { padding:25px; border:1px solid var(--line); background:#fff; box-shadow:none; }.member-layout .confirmed-card .overline { color:#08755c; }.member-layout .confirmed-card h2 { color:var(--navy); font-size:26px; }.member-layout .confirmed-card .muted { color:var(--muted); }.member-layout .confirmed-dates li { border-color:var(--line); color:var(--ink); }.member-layout .confirmed-dates time { color:#08755c; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 295px; gap:24px; align-items:start; }.calendar-card { padding:clamp(16px,3vw,31px); background:var(--paper); border-radius:18px; }.calendar-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }.calendar-top h2 { margin:0; color:var(--navy); font-family:Georgia,serif; font-size:26px; letter-spacing:-.035em; }.month-button { width:37px; height:37px; border:1px solid #ccd8e2; border-radius:10px; background:#f7fafb; color:var(--navy); font-size:28px; line-height:25px; }.month-button:hover { border-color:#8da4b5; background:#e8f2ee; }.weekdays,.calendar { display:grid; grid-template-columns:repeat(7,1fr); }.weekdays { margin-bottom:7px; }.weekdays span { text-align:center; color:#8a99a7; font-size:11px; font-weight:800; }.calendar { gap:5px; }.day { position:relative; aspect-ratio:1/1; min-height:72px; padding:8px; border:1px solid transparent; border-radius:12px; background:#fff; color:var(--ink); text-align:left; transition:border-color .15s,transform .15s,box-shadow .15s; }.day:not(.empty):hover { border-color:#95b9ad; box-shadow:0 3px 9px rgba(18,37,63,.08); transform:translateY(-1px); }.day.empty { background:transparent; pointer-events:none; }.day:disabled { cursor:not-allowed; color:#b5c0ca; background:#f7f9fa; }.day:disabled:hover { border-color:transparent; box-shadow:none; transform:none; }.day.today .date-number { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--navy); color:#fff; }.day.selected { border-color:#efa63a; box-shadow:inset 0 0 0 1px #efa63a; }.date-number { display:inline-block; font-size:13px; font-weight:700; }.availability-dots { position:absolute; right:8px; bottom:8px; left:8px; display:flex; flex-wrap:wrap; gap:5px; max-width:calc(100% - 16px); }.availability-dots .dot { width:16px; height:16px; border-width:2px; box-shadow:0 0 0 1px rgba(18,37,63,.28),0 1px 2px rgba(18,37,63,.18); }
.schedule-side { display:grid; gap:16px; }.common-card { padding:30px; border:0; border-radius:18px; background:linear-gradient(150deg,#163457,#0c233f); color:#fff; box-shadow:0 18px 38px rgba(16,42,72,.2); }.common-card .overline { color:#f6bd5d; }.common-card h2 { color:#fff; font-size:30px; line-height:1.2; }.common-card .muted { margin:14px 0; color:#c6d4df; font-size:13px; }.common-dates,.confirmed-dates { margin:0; padding:0; list-style:none; }.common-dates li,.confirmed-dates li { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:12px 0; border-top:1px solid rgba(255,255,255,.2); font-weight:800; font-size:14px; }.common-dates time,.confirmed-dates time { display:block; color:#f7c66e; font-size:11px; letter-spacing:.04em; }.confirm-date,.remove-confirmed { flex:0 0 auto; padding:7px 9px !important; border:1px solid rgba(255,255,255,.4) !important; border-radius:7px !important; background:#f6bd5d !important; color:#173456 !important; box-shadow:none !important; font-size:11px !important; }.confirm-date:disabled { cursor:default; opacity:.65; }.confirmed-card { padding:23px 25px; border:1px solid #cce1d9; border-radius:18px; background:#ebf7f1; }.confirmed-card .overline { color:#08755c; }.confirmed-card h2 { margin:3px 0; color:#123d39; font-family:Georgia,serif; font-size:25px; letter-spacing:-.04em; }.confirmed-card .muted { margin:5px 0 12px; color:#55736a; font-size:13px; }.confirmed-dates li { border-color:#c5e2d6; color:#18463d; }.confirmed-dates time { color:#08755c; }.remove-confirmed { background:#fff !important; border-color:#a7cfc0 !important; color:#175043 !important; }
.color-picker { margin:22px 0; padding:0; border:0; }.color-picker legend { margin-bottom:9px; color:var(--ink); font-size:13px; font-weight:800; }.color-options { display:flex; flex-wrap:wrap; gap:10px; }.color-options .color-option { width:31px; height:31px; padding:0; border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 1px #bdc9d3 !important; }.color-options .color-option[aria-pressed="true"] { box-shadow:0 0 0 3px var(--navy),0 0 0 5px #d9e7ee !important; transform:scale(1.08); }.color-options .color-option:hover { filter:brightness(.93); }
.confirmed-dates .confirmed-item { display:block; }.confirmed-item > div:first-child { margin-bottom:8px; }.approval-stats { display:block; margin-top:4px; color:#55736a; font-weight:700; }.response-actions,.course-form { display:flex; gap:7px; margin:8px 0; }.response-button,.finalize-date,.save-course,.notify-members { padding:7px 9px !important; border:1px solid #9ccdc0 !important; border-radius:7px !important; background:#fff !important; color:#175043 !important; box-shadow:none !important; font-size:11px !important; }.response-button.active { background:#0a755d !important; color:#fff !important; }.response-button.decline.active { background:#a34352 !important; border-color:#a34352 !important; }.finalize-date { background:#123d39 !important; color:#fff !important; }.finalize-date:disabled { cursor:not-allowed; opacity:.45; }.course-name { margin:8px 0; color:#0a5f4d; font-weight:800; }.course-form input { min-width:0; margin:0; padding:7px 8px; font-size:12px; }.notify-members { width:100%; margin-top:3px; background:#f0a136 !important; border-color:#f0a136 !important; color:#173456 !important; }.confirmed-item.proposed { border-left:3px solid #e8b04b; padding-left:10px; }.confirmed-item.final { border-left:3px solid #0a755d; padding-left:10px; }
.schedule-date { display:grid; gap:2px; }.schedule-status { width:max-content; padding:2px 7px; border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.04em; }.schedule-status.request { background:#fff2d6; color:#8a5600; }.schedule-status.confirmed { background:#dff4ec; color:#08755c; }.my-response { margin:6px 0 0; color:#55736a; font-size:12px; font-weight:700; }.my-response.declined { color:#9c4350; }.course-label { margin:8px 0 0; color:#55736a; font-size:11px; font-weight:800; }
.day.schedule-locked { border:2px solid #08755c; background:#edf8f2; }.day.schedule-locked::after { content:'🔒 固定'; position:absolute; top:5px; right:5px; padding:2px 5px; border-radius:999px; background:#08755c; color:#fff; font-size:10px; font-weight:800; line-height:1.25; }
.response-button:disabled { cursor:default; opacity:.72; }.response-button.active:disabled { opacity:1; }
.member-layout .request-card { border-color:#ead3a1; background:#fffaf0; }.member-layout .request-card .overline { color:#9b6500; }.member-layout .request-card h2 { color:#6e4b0d; }.member-layout .request-card .muted { color:#786440; }.member-layout .request-card .confirmed-dates li { border-color:#eadfbe; }.member-layout .request-card .confirmed-dates time { color:#9b6500; }.member-layout .final-card { border-color:#b9dccd; background:#f2faf6; }.member-layout .final-card .overline { color:#08755c; }.member-layout .final-card h2 { color:#123d39; }.member-layout .final-card .confirmed-dates li { border-color:#cce6da; }.member-layout .final-card .confirmed-dates time { color:#08755c; }
dialog { width:min(460px,calc(100% - 32px)); border:0; padding:0; background:transparent; } dialog::backdrop { background:rgba(8,24,43,.64); }.name-card { padding:36px; background:var(--paper); border-radius:18px; box-shadow:0 22px 60px rgba(0,0,0,.24); }.name-card h2 { margin:5px 0; color:var(--navy); font-family:Georgia,serif; font-size:30px; letter-spacing:-.04em; }.name-card p:not(.overline) { margin:0; color:var(--muted); font-size:14px; }
@media (max-width:760px) { .login-shell { grid-template-columns:1fr; align-content:center; padding:44px 0; gap:30px; }.hero-copy h1 { font-size:49px; }.app-shell { padding-top:35px; }.intro { display:block; }.legend { justify-content:start; margin-top:17px; }.layout,.member-layout { grid-template-columns:1fr; }.common-card { order:-1; padding:24px; }.common-card h2 br { display:none; }.member-heading h1 { font-size:36px; }.member-layout .confirmed-card { padding:21px; }.day { min-height:51px; padding:6px; border-radius:9px; }.availability-dots { right:6px; bottom:6px; left:6px; gap:3px; }.availability-dots .dot { width:14px; height:14px; }.site-header { height:64px; } main { width:min(100% - 28px,1160px); } }
@media (max-width:480px) { body { background:var(--canvas); }.site-header { padding:0 14px; }.brand { font-size:20px; }.flag { width:25px; height:25px; margin-right:4px; }.text-button { margin-left:9px; font-size:11px; }.text-button:first-of-type { margin-left:10px; } #user-name { max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.app-shell { padding:25px 0 48px; }.intro h1 { font-size:34px; }.intro p:not(.overline) { font-size:13px; }.legend { gap:7px 10px; }.calendar-card { padding:13px 10px; border-radius:13px; }.calendar-top { margin:0 4px 13px; }.calendar-top h2 { font-size:22px; }.month-button { width:36px; height:36px; }.weekdays span { font-size:10px; }.calendar { gap:2px; }.day { min-height:46px; padding:4px; border-radius:7px; }.date-number { font-size:12px; }.day.today .date-number { width:22px; height:22px; }.availability-dots { right:4px; bottom:4px; left:4px; gap:2px; }.availability-dots .dot { width:13px; height:13px; }.common-card { border-radius:13px; }.common-card h2 { font-size:26px; }.name-card { padding:28px 22px; border-radius:14px; }.button-row button { flex:1; padding:12px 8px !important; } }
.help-shell { width:min(760px,calc(100% - 40px)); margin:0 auto; padding:60px 0 90px; }.help-shell h1 { margin:4px 0 8px; color:var(--navy); font-family:Georgia,serif; font-size:48px; letter-spacing:-.06em; }.help-lead { margin:0 0 34px; color:var(--muted); font-size:16px; }.help-steps { display:grid; gap:14px; margin:0; padding:0; list-style:none; }.help-steps li { display:grid; grid-template-columns:42px 1fr; gap:16px; padding:22px; border:1px solid var(--line); border-radius:14px; background:#fff; }.help-steps li>span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#e3f1eb; color:#08755c; font-weight:800; }.help-steps h2,.help-note h2 { margin:0 0 4px; color:var(--navy); font-size:18px; }.help-steps p,.help-note p { margin:0; color:var(--muted); font-size:14px; }.help-note { margin-top:20px; padding:24px; border-left:4px solid #f0a136; background:#fff9ec; }.help-note h2 { font-family:Georgia,serif; } @media(max-width:480px) { .help-shell { width:min(100% - 28px,760px); padding:36px 0 55px; }.help-shell h1 { font-size:40px; }.help-steps li { grid-template-columns:34px 1fr; gap:11px; padding:17px; } }
.help-screen{display:grid;gap:8px;width:min(100%,390px);margin-top:14px;padding:15px;border:1px solid #d9e1e8;border-radius:11px;background:#f8fafb;box-shadow:0 5px 15px rgba(18,37,63,.06)}.help-screen small{color:#08755c;font-size:10px;font-weight:800;letter-spacing:.12em}.help-screen>b{color:var(--navy);font-size:16px}.help-screen strong{color:#174c43;font-size:17px}.demo-input{padding:8px 10px;border:1px solid #c5d1dc;border-radius:6px;background:#fff;color:#647488;font-size:12px}.help-screen button{padding:8px 11px!important;border-radius:6px!important;font-size:11px!important;box-shadow:none!important}.profile-demo .demo-colors{display:flex;gap:9px}.demo-colors i{width:22px;height:22px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #98a9b8}.demo-colors i:nth-child(1){background:#e4512a}.demo-colors i:nth-child(2){background:#7c3aed}.demo-colors i:nth-child(3){background:#00866b}.demo-colors i:nth-child(4){background:#1769aa}.demo-calendar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.demo-calendar b{position:relative;min-height:52px;padding:7px;border-radius:7px;background:#fff;color:var(--ink);font-size:13px}.demo-calendar .chosen{border:2px solid #efa63a}.demo-calendar .chosen span{position:absolute;right:7px;bottom:5px;color:#7c3aed}.demo-calendar .locked{border:2px solid #08755c;background:#edf8f2}.demo-calendar em{position:absolute;top:5px;right:4px;padding:2px 4px;border-radius:6px;background:#08755c;color:#fff;font-size:8px;font-style:normal}.calendar-demo>p{font-size:11px}.demo-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#7c3aed}.demo-lock{color:#08755c;font-weight:800}.request-demo{background:#fffaf0;border-color:#ead3a1}.request-demo small{color:#9b6500}.request-demo>div{display:flex;gap:7px}.request-demo .demo-decline{background:#fff!important;border:1px solid #bd7a84!important;color:#9d3448!important}.final-demo{background:#f2faf6;border-color:#b9dccd}.final-demo p{font-size:12px}.final-demo p>b{color:#08755c}