:root { --navy:#10293d; --navy-2:#183c58; --ink:#15202a; --cream:#f7f5ee; --paper:#fffefa; --line:#dbe1de; --green:#1e7a56; --orange:#e9823d; --muted:#5c6871; --radius:1.25rem; --shadow:0 12px 32px rgba(16,41,61,.1); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif; font-size:16px; line-height:1.65; } a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { line-height:1.3; } .page { max-width:1160px; padding:0 1.25rem; margin:0 auto; } .site-header { max-width:1160px; margin:0 auto; padding:1rem 1.25rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; } .brand { display:inline-flex; align-items:center; gap:.55rem; font-weight:800; font-size:1rem; color:var(--navy); white-space:nowrap; } .brand-mark { display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:50%; background:var(--navy); color:#fff; font-family:Georgia,serif; } nav { display:flex; align-items:center; gap:.85rem; font-size:.84rem; font-weight:700; } .nav-reserve { background:var(--navy); color:#fff; padding:.52rem .76rem; border-radius:.55rem; } .hero { border-radius:0 0 2rem 2rem; min-height:510px; color:#fff; background:linear-gradient(90deg,rgba(7,26,42,.96) 0%,rgba(7,26,42,.72) 44%,rgba(7,26,42,.12) 76%),url("assets/hero-groceries.png") center/cover; display:flex; align-items:end; } .hero-content { max-width:1160px; width:100%; margin:0 auto; padding:4.8rem 1.25rem 3rem; } .eyebrow { color:var(--green); font-size:.75rem; line-height:1.3; margin-bottom:.7rem; font-weight:800; letter-spacing:.08em; } .hero .eyebrow { color:#aedbbf; } .hero h1 { font-size:clamp(2.25rem,8vw,4.75rem); max-width:700px; letter-spacing:-.04em; margin-bottom:1rem; } .hero-copy { max-width:490px; font-size:1.05rem; color:#edf4f4; } .hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.6rem; } .button { display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:.7rem; min-height:3.15rem; padding:.7rem 1rem; font-weight:800; cursor:pointer; font:inherit; } .button-primary { background:var(--orange); color:#241407; } .button-secondary { background:#fff; color:var(--navy); } .button-line { background:#19a74b; color:#fff; } .section { padding:4.5rem 0; } .section-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:1.4rem; } .section-heading h2 { font-size:clamp(1.65rem,4vw,2.5rem); margin:0; letter-spacing:-.03em; } .text-link { color:var(--navy); text-decoration:underline; font-weight:800; } .product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .product-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s,box-shadow .2s; } .product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); } .product-card-link { display:block; height:100%; } .product-placeholder,.product-detail-image { min-height:150px; display:flex; align-items:end; padding:1rem; color:#fff; font-weight:800; font-size:.85rem; background:linear-gradient(145deg,#477675,#1c4c55); } .product-placeholder.食品,.product-detail-image.食品 { background:linear-gradient(145deg,#aa6d39,#593d2d); } .product-placeholder.日用品,.product-detail-image.日用品 { background:linear-gradient(145deg,#486b9b,#273f61); } .product-card-body { padding:1rem; } .product-card-body .eyebrow { margin-bottom:.35rem; } .product-card h3 { font-size:1rem; margin-bottom:.4rem; } .product-unit { color:var(--muted); font-size:.82rem; min-height:2.7em; margin-bottom:.85rem; } .product-bottom { display:flex; justify-content:space-between; align-items:center; gap:.5rem; } .product-bottom strong { color:var(--navy); } .stock { padding:.15rem .45rem; background:#e1f2e8; color:#176643; border-radius:99px; font-size:.7rem; font-weight:800; white-space:nowrap; } .stock.low { background:#fff0df; color:#a95315; } .info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .info-card { border-top:3px solid var(--orange); padding:1.2rem; background:var(--paper); border-radius:0 0 var(--radius) var(--radius); } .info-card h3 { font-size:1rem; margin-bottom:.45rem; } .info-card p { margin:0; color:var(--muted); font-size:.91rem; } .line-cta { background:var(--navy); color:#fff; padding:2rem; border-radius:var(--radius); display:flex; justify-content:space-between; gap:1.5rem; align-items:center; } .line-cta .eyebrow { color:#92d3ad; } .line-cta h2 { margin-bottom:.4rem; font-size:1.45rem; } .line-cta p:not(.eyebrow) { margin:0; color:#d8e4ea; max-width:550px; } .site-footer { max-width:1160px; margin:0 auto; padding:2.5rem 1.25rem 3rem; border-top:1px solid var(--line); display:grid; grid-template-columns:2fr 1fr; gap:1rem; color:var(--muted); font-size:.85rem; } .site-footer strong { color:var(--navy); } .site-footer p { margin:.25rem 0; } .site-footer a { display:block; margin-bottom:.25rem; text-decoration:underline; } .site-footer small { grid-column:1/-1; padding-top:1rem; } .page-intro { padding:3.8rem 0 1rem; } .page-intro h1 { font-size:clamp(2.1rem,6vw,3.6rem); margin-bottom:.7rem; letter-spacing:-.04em; } .page-intro p { max-width:640px; color:var(--muted); } .breadcrumbs { font-size:.82rem; color:var(--muted); padding:2rem 0 1.2rem; } .breadcrumbs a { text-decoration:underline; } .breadcrumbs span { margin-right:.3rem; } .product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,5vw,4rem); align-items:start; padding-bottom:4rem; } .product-detail-image { min-height:430px; border-radius:var(--radius); font-size:1rem; } .detail-price { font-size:2rem; color:var(--navy); font-weight:900; margin-bottom:1.1rem; } .detail-price small { display:block; color:var(--muted); font-size:.9rem; font-weight:400; } .detail-description { font-size:1.05rem; } .notice { background:#edf3ef; border-radius:.8rem; padding:1rem; margin:1.5rem 0; } .notice strong { color:var(--green); font-size:.9rem; } .notice p { margin:.2rem 0 0; font-size:.88rem; } .button-wide { width:100%; } .reservation-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:1.5rem; padding:1.8rem 0 4rem; } .form-card,.aside-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.2rem,4vw,2rem); } label { display:block; margin:1.05rem 0 .4rem; font-size:.9rem; font-weight:800; } input,select,textarea { width:100%; padding:.8rem .85rem; font:inherit; color:var(--ink); background:#fff; border:1px solid #bfc9c4; border-radius:.55rem; } textarea { resize:vertical; } input:focus,select:focus,textarea:focus { outline:3px solid #b8dbc9; border-color:var(--green); } .required { color:#b84422; font-size:.75rem; } .endpoint-note { background:#fff2dc; border-left:4px solid var(--orange); padding:.85rem 1rem; font-size:.85rem; margin-bottom:1.2rem; } .form-status { min-height:1.6em; font-size:.9rem; margin:1rem 0 0; } .is-success { color:#176643; font-weight:800; } .is-error { color:#ae3232; font-weight:800; } .is-warning { color:#925015; font-weight:800; } .aside-card { height:max-content; background:#eaf2ee; } .aside-card h2 { font-size:1.15rem; } .aside-card ul { padding-left:1.25rem; font-size:.89rem; } .faq-list { max-width:820px; padding-bottom:4.5rem; } details { background:var(--paper); border:1px solid var(--line); border-radius:.8rem; padding:1rem 1.1rem; margin-bottom:.75rem; } summary { cursor:pointer; font-weight:800; padding-right:1rem; } details p { color:var(--muted); margin:1rem 0 0; }
@media (max-width:760px) { .site-header { padding-top:.75rem; } nav a:not(.nav-reserve) { display:none; } .hero { min-height:560px; background-position:58% center; } .hero-content { padding-top:5rem; } .product-grid { grid-template-columns:repeat(2,1fr); } .product-placeholder { min-height:115px; } .info-grid,.product-detail-grid,.reservation-layout { grid-template-columns:1fr; } .line-cta { align-items:stretch; flex-direction:column; } .line-cta .button { width:100%; } .site-footer { grid-template-columns:1fr 1fr; } }
@media (max-width:390px) { .brand { font-size:.9rem; } .product-card-body { padding:.8rem; } .product-card h3 { font-size:.92rem; } .product-bottom { flex-direction:column; align-items:start; } }
.hero { background-image:linear-gradient(90deg,rgba(7,26,42,.96) 0%,rgba(7,26,42,.72) 44%,rgba(7,26,42,.12) 76%),url("assets/hero-groceries.png?v=1"); }