*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#000;
--fg:#fff;
--muted:#b8b8b8;
--panel:#111;
--line:#2a2a2a;
--field:#fff;
--field-text:#000;
--radius:14px;
}
body{
background:
radial-gradient(circle at 50% 0,rgba(255,255,255,.10),transparent 34rem),
var(--bg);
color:var(--fg);
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-family:Inter,"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
padding:clamp(20px,5vw,56px);
}
a{color:inherit}
.top-nav{
position:fixed;
top:0;
left:0;
right:0;
z-index:10;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:14px clamp(16px,4vw,42px);
background:#fff;
color:#000;
border-bottom:1px solid #e4e4e4;
backdrop-filter:blur(14px);
}
.nav-brand{font-weight:900;text-decoration:none;font-size:22px;color:#000;line-height:1.2}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.hamburger{
display:none;
width:44px;
height:44px;
border:1px solid #000;
border-radius:12px;
align-items:center;
justify-content:center;
gap:5px;
flex-direction:column;
cursor:pointer;
}
.hamburger span{
display:block;
width:20px;
height:2px;
background:#000;
border-radius:999px;
}
.nav-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-actions a{
text-decoration:none;
border:1px solid #000;
border-radius:999px;
padding:9px 13px;
font-weight:800;
font-size:14px;
background:#000;
color:#fff;
}
.nav-actions a:hover{background:#fff;color:#000}
.hero{
width:min(100%,1040px);
margin-left:auto;
margin-right:auto;
text-align:center;
padding:clamp(118px,15vw,156px) clamp(16px,5vw,48px) clamp(28px,7vw,84px);
}
.service-label{
font-size:clamp(12px,2vw,18px);
font-weight:800;
letter-spacing:.32em;
color:var(--muted);
margin-bottom:14px;
}
.site-title{
font-size:clamp(52px,14vw,148px);
line-height:.92;
letter-spacing:0;
font-weight:900;
margin-bottom:clamp(14px,3vw,24px);
}
.lead{
color:var(--muted);
font-size:clamp(15px,2.8vw,20px);
line-height:1.7;
margin-bottom:clamp(26px,5vw,44px);
}
.shortener-form{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:12px;
justify-content:stretch;
justify-items:stretch;
width:min(100%,900px);
max-width:900px;
margin:0 auto;
padding:0;
background:transparent;
border:none;
border-radius:calc(var(--radius) + 8px);
}
.shortener-form input{
background:#fff;
color:#000;
border:none;
width:100% !important;
}
.shortener-form input::placeholder{color:#777}
.shortener-primary{
display:grid;
grid-template-columns:1fr;
gap:12px;
align-items:stretch;
width:100%;
max-width:100%;
}
.shortener-primary input{
display:block;
width:100% !important;
max-width:none;
min-width:0;
}
.shortener-primary button{
justify-self:stretch;
width:100%;
min-width:0;
}
.settings-open{
justify-self:center;
width:auto;
min-height:44px;
padding:0 18px;
border-radius:999px;
background:#fff;
color:#000;
font-size:14px;
}
.settings-modal{
position:fixed;
inset:0;
z-index:55;
display:none;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,.72);
}
.settings-modal.is-open{display:flex}
.settings-modal-panel{
width:min(100%,560px);
max-height:calc(100dvh - 40px);
overflow:auto;
display:grid;
align-content:start;
gap:14px;
background:#fff;
color:#000;
border:none;
border-radius:18px;
padding:clamp(24px,6vw,56px);
box-shadow:0 24px 80px rgba(0,0,0,.38);
}
.settings-modal-panel h2{
font-size:24px;
text-align:left;
}
.settings-modal-panel > #settings-modal-title,
.settings-modal-panel > .date-field-label{
display:none;
}
input[data-calendar-input]{
display:none !important;
}
.settings-visible-title{
font-size:clamp(24px,5vw,34px);
font-weight:900;
text-align:left;
line-height:1.25;
}
.inline-calendar{
width:min(100%,520px);
display:grid;
gap:12px;
}
.inline-calendar-head{
display:grid;
grid-template-columns:44px 1fr 44px;
align-items:center;
gap:10px;
}
.inline-calendar-head strong{
text-align:center;
font-size:20px;
}
.calendar-nav{
width:44px;
min-height:44px;
padding:0;
border-radius:999px;
background:#000;
color:#fff;
font-size:18px;
}
.inline-calendar-weekdays,
.inline-calendar-days{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
}
.inline-calendar-weekdays span{
text-align:center;
font-size:12px;
font-weight:900;
color:#555;
}
.calendar-day{
aspect-ratio:1;
min-height:auto;
padding:0;
border-radius:10px;
background:#f0f0f0;
color:#000;
font-size:14px;
font-weight:900;
}
.calendar-day.is-empty{
visibility:hidden;
pointer-events:none;
}
.calendar-day.is-selected{
background:#000;
color:#fff;
}
.calendar-clear{
width:100%;
min-height:48px;
border-radius:999px;
background:#ededed;
color:#000;
}
.settings-modal-panel input{
background:#fff;
color:#000;
border:1px solid #d8d8d8;
}
.settings-modal-panel input::placeholder{color:#777}
.settings-modal-panel .date-field-label{
display:grid;
gap:8px;
color:#000;
font-weight:900;
}
.settings-modal-panel .date-field-label span{
display:block;
position:static;
transform:none;
color:#000;
font-size:14px;
line-height:1.4;
pointer-events:auto;
}
.settings-modal-panel .date-field-label input{
height:auto;
background:#fff;
color:#000;
border:1px solid #d8d8d8;
caret-color:#000;
}
.settings-close{
width:100%;
min-height:52px;
border-radius:999px;
background:#000;
color:#fff;
}
.date-field-label{
position:relative;
display:block;
font-weight:400;
color:transparent;
}
.date-field-label span{
display:none;
pointer-events:none;
}
.date-field-label input{
height:100%;
}
input,button{
min-height:58px;
border:none;
border-radius:var(--radius);
background:var(--field);
color:var(--field-text);
padding:0 18px;
font-size:16px;
}
input{
width:100%;
outline:2px solid transparent;
outline-offset:2px;
background:#fff;
color:#000;
border:none;
}
input:focus{outline-color:#fff}
button{
cursor:pointer;
font-weight:900;
padding:0 28px;
white-space:nowrap;
}
button:hover{filter:brightness(.92)}
.limited-note{
position:fixed;
top:62px;
left:0;
right:0;
z-index:9;
width:100%;
margin:0;
padding:10px 16px;
background:#d40000;
color:#fff;
font-weight:800;
line-height:1.7;
text-align:center;
box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.link-card-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px;
width:min(100%,900px);
max-width:900px;
margin:18px auto 0;
}
.manual-card{
display:block;
border-radius:16px;
overflow:hidden;
background:#fff;
border:1px solid rgba(255,255,255,.18);
}
.manual-card img{
display:block;
width:100%;
height:auto;
}
.manual-card:hover{filter:brightness(.96)}
.result{
width:min(100%,900px);
margin:20px auto 0;
padding:16px 18px;
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
line-height:1.6;
overflow-wrap:anywhere;
}
.result a{font-weight:900}
.qr{width:180px;height:180px;margin-top:14px;background:#fff;border-radius:10px}
.result-url-tools{
justify-items:center;
margin-top:10px;
}
.result-url-tools .copy-url-button{
border-color:rgba(255,255,255,.24);
}
.result-qr-trigger{
width:auto;
margin-top:14px;
}
.result-qr-trigger .qr{
display:block;
margin-top:0;
}
.feature-list{
width:min(100%,900px);
margin:22px auto 0;
padding:18px;
border:1px solid var(--line);
border-radius:var(--radius);
background:rgba(255,255,255,.05);
text-align:left;
line-height:1.8;
}
.feature-list h2{margin-bottom:8px}
.auth-page,.panel-page{
width:min(100%,1120px);
margin:0 auto;
padding-top:96px;
}
.auth-card,.panel-head,.analytics{
background:#111;
border:1px solid var(--line);
border-radius:var(--radius);
padding:24px;
}
.auth-card{width:min(100%,900px);margin:0 auto;text-align:left;background:transparent;border:none}
.auth-card.wide{width:min(100%,720px)}
.auth-card{color:#fff}
.auth-card h1,.panel-head h1{font-size:clamp(28px,5vw,44px);margin-bottom:18px;color:#fff;text-align:left}
.auth-intro{
color:#fff;
line-height:1.8;
font-weight:700;
margin-bottom:22px;
}
.auth-benefits{
display:grid;
gap:12px;
margin:0 0 28px 1.2em;
color:#fff;
line-height:1.7;
}
.stack-form{display:grid;gap:22px;margin-top:26px}
.auth-card .stack-form{width:100%}
.auth-card input{background:#fff;color:#000;border:none;box-shadow:none;margin-top:8px}
.auth-card label{color:#fff;gap:10px}
label{display:grid;gap:7px;font-weight:800;color:var(--muted);text-align:left}
label.check{display:flex;align-items:center;gap:10px}
label.check input{width:auto;min-height:auto}
.auth-switch{margin-top:28px;color:#fff;line-height:1.7}
.auth-switch a{font-weight:900;color:#fff}
.error{background:#3b0d0d;border:1px solid #7f1d1d;color:#fff;padding:12px;border-radius:10px;margin-top:12px}
.search-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin:18px 0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#0f0f0f}
table{width:100%;border-collapse:collapse;min-width:780px}
th,td{padding:13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{color:#ddd;background:#151515}
.url-cell{max-width:360px;overflow-wrap:anywhere}
.short-url-tools{
display:grid;
gap:8px;
align-items:start;
}
.copy-url-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-width:0;
min-height:30px;
padding:0 10px;
border-radius:999px;
background:#fff;
color:#000;
border:1px solid rgba(255,255,255,.24);
font-size:12px;
font-weight:900;
line-height:1;
}
.qr-small{width:64px;height:64px;background:#fff;border-radius:8px}
.qr-trigger{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-height:auto;
padding:0;
background:transparent;
border:none;
border-radius:8px;
cursor:pointer;
}
.qr-trigger:hover{filter:brightness(.92)}
.qr-modal{
position:fixed;
inset:0;
z-index:50;
display:none;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,.72);
}
.qr-modal.is-open{display:flex}
.qr-modal-panel{
width:min(100%,420px);
background:#fff;
color:#000;
border-radius:16px;
padding:24px;
text-align:center;
box-shadow:0 24px 80px rgba(0,0,0,.38);
}
.qr-modal-panel h2{
font-size:24px;
margin-bottom:16px;
}
.qr-modal-image{
width:min(100%,260px);
height:auto;
background:#fff;
border-radius:12px;
margin-bottom:18px;
}
.qr-modal-download,.qr-modal-close{
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
border-radius:999px;
font-weight:900;
text-decoration:none;
}
.qr-modal-download{
background:#000;
color:#fff;
margin-bottom:12px;
}
.qr-modal-close{
border:none;
background:#f0f0f0;
color:#000;
cursor:pointer;
}
.actions{display:flex;gap:10px;align-items:center}
.actions form{display:inline}
.actions a,.actions button,.pager a{
display:inline-flex;
align-items:center;
min-height:36px;
padding:0 12px;
border:1px solid rgba(255,255,255,.24);
border-radius:999px;
background:#fff;
color:#000;
font-weight:900;
text-decoration:none;
}
.pager{display:flex;gap:8px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.pager a.active{background:#000;color:#fff;border-color:#fff}
.analytics{margin-top:24px;line-height:1.8}
.mypage-page .panel-head,.mypage-page .table-wrap{
background:transparent;
border:none;
}
.mypage-page .panel-head{
padding-left:0;
padding-right:0;
}
.privacy-head{
width:min(100%,900px);
margin:0 auto;
background:transparent;
border:none;
padding-left:0;
padding-right:0;
}
.privacy-head p{line-height:1.8;color:#fff;font-weight:700}
.privacy-content{
width:min(100%,900px);
margin:20px auto 0;
display:grid;
gap:18px;
}
.privacy-content article{
background:transparent;
border:none;
border-radius:var(--radius);
padding:0;
}
.privacy-content h2{
font-size:clamp(20px,4vw,28px);
margin-bottom:8px;
color:#fff;
}
.privacy-content p{
line-height:1.85;
color:#fff;
}
.empty-state{text-align:center;color:var(--muted);font-weight:800}
.site-footer{
width:100vw;
margin:40px calc(50% - 50vw) calc(-1 * clamp(20px,5vw,56px));
padding:18px 20px;
background:#fff;
color:#000;
text-align:center;
font-weight:900;
font-size:14px;
line-height:1.5;
}
@media(max-width:820px){
body{align-items:flex-start}
.shortener-form{width:100%}
.shortener-primary{grid-template-columns:1fr}
.settings-open{width:100%}
.settings-modal{
align-items:center;
overflow:auto;
}
.settings-modal-panel{
max-height:calc(100dvh - 28px);
padding-top:calc(24px + env(safe-area-inset-top));
padding-left:18px;
padding-right:18px;
}
.inline-calendar{
width:100%;
}
.calendar-day{
border-radius:8px;
font-size:13px;
}
.date-field-label span{
display:block;
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
z-index:1;
color:#777;
font-size:15px;
line-height:1;
}
.date-field-label input{
position:relative;
z-index:2;
background:#fff;
color:transparent;
caret-color:#000;
}
.date-field-label input:focus,.date-field-label.has-value input{
background:#fff;
color:#000;
}
.date-field-label.has-value span,.date-field-label:focus-within span{
display:none;
}
.settings-modal-panel .date-field-label span{
display:block;
position:static;
transform:none;
color:#000;
}
.settings-modal-panel .date-field-label input,
.settings-modal-panel .date-field-label input:focus,
.settings-modal-panel .date-field-label.has-value input{
background:#fff;
color:#000;
border:1px solid #d8d8d8;
}
.settings-modal-panel .date-field-label.has-value span,
.settings-modal-panel .date-field-label:focus-within span{
display:block;
}
.search-row{grid-template-columns:1fr}
button{width:100%}
.top-nav{
position:fixed;
height:64px;
padding:10px 14px;
flex-direction:row;
align-items:center;
flex-wrap:nowrap;
}
.limited-note{top:64px;font-size:13px;padding:9px 12px}
.nav-brand{font-size:16px;line-height:1.2;max-width:calc(100% - 58px);overflow-wrap:anywhere}
.hamburger{display:flex;margin-left:auto;flex:0 0 44px}
.nav-actions{
display:none;
position:absolute;
top:calc(100% + 8px);
left:14px;
right:14px;
width:auto;
background:#fff;
color:#000;
border-radius:16px;
padding:12px;
box-shadow:0 20px 50px rgba(0,0,0,.28);
justify-content:stretch;
align-items:stretch;
}
.nav-actions a{
display:flex;
width:100%;
box-sizing:border-box;
justify-content:center;
border-color:#000;
color:#fff;
background:#000;
}
.nav-actions a:hover{background:#000;color:#fff}
.nav-toggle:checked ~ .nav-actions{display:grid;gap:10px}
.nav-toggle:checked + .hamburger{background:#000}
.nav-toggle:checked + .hamburger span{background:#fff}
.hero{padding-top:96px}
.auth-page,.panel-page{padding-top:96px}
.site-footer{margin-top:32px;font-size:13px}
.link-card-grid{grid-template-columns:1fr;gap:12px}
.auth-card{padding:22px}
.auth-intro,.auth-benefits,.auth-switch{font-size:14px}
.auth-benefits{gap:9px;margin-bottom:22px}
.stack-form{gap:18px;margin-top:22px}
.mypage-table{overflow-x:visible}
.mypage-table table,.mypage-table thead,.mypage-table tbody,.mypage-table tr,.mypage-table th,.mypage-table td{display:block}
.mypage-table table{min-width:0}
.mypage-table thead{display:none}
.mypage-table tr{
margin:0 0 14px;
padding:14px;
border-bottom:1px solid var(--line);
background:#111;
}
.mypage-table tr:last-child{margin-bottom:0}
.mypage-table td{
display:grid;
grid-template-columns:96px minmax(0,1fr);
gap:10px;
align-items:center;
border-bottom:0;
padding:8px 0;
overflow-wrap:anywhere;
}
.mypage-table td::before{
content:attr(data-label);
font-weight:900;
color:#cfcfcf;
}
.mypage-table .empty-state{
display:block;
padding:18px 0;
}
.mypage-table .empty-state::before{content:''}
.mypage-table .actions{
display:grid;
grid-template-columns:1fr;
gap:8px;
align-items:stretch;
}
.mypage-table .actions a,.mypage-table .actions button{
width:100%;
justify-content:center;
box-sizing:border-box;
}
.mypage-table .actions form{display:block}
.mypage-table .short-url-tools{
gap:10px;
justify-items:start;
}
.mypage-table .copy-url-button{
width:auto;
min-width:0;
box-sizing:border-box;
}
}
@media(max-width:480px){
.hero{padding-top:92px}
.service-label{letter-spacing:.22em}
input,button{min-height:54px;font-size:15px}
.auth-card h1{font-size:28px;margin-bottom:14px}
.auth-intro,.auth-benefits,.auth-switch{font-size:13px;line-height:1.65}
.auth-card input{margin-top:7px}
.manual-card{border-radius:12px}
}