/* ことばの図鑑 — ポップ・レイヤー共通スタイル * 星図（夜）に対して、図鑑は昼。クリーム地×太い黒線×言語ごとのアクセント色。 * 記事ページはで色を渡す。 */ :root { --paper: #FFF7E8; --paper-2: #FFFFFF; --ink: #15162B; --ink-2: #4A4B66; --ink-3: #8C8DA6; --c: #FF5C5C; --c-soft: color-mix(in oklab, var(--c) 18%, #FFF7E8); --line: 3px solid var(--ink); --shadow: 6px 6px 0 var(--ink); --r: 22px; --head: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif; --body: "Zen Kaku Gothic New", sans-serif; --mono: "Rubik Mono One", "Zen Kaku Gothic New", sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--body); font-weight: 400; line-height: 1.95; letter-spacing: 0.02em; overflow-x: hidden; background-image: radial-gradient(rgba(21,22,43,0.08) 1.2px, transparent 1.3px); background-size: 22px 22px; } a { color: inherit; } em { font-style: normal; background: linear-gradient(transparent 55%, var(--c-soft) 55%); padding: 0 2px; font-weight: 700; } strong { font-weight: 700; } /* ---------- header ---------- */ .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 22px; background: var(--paper); border-bottom: var(--line); } .top .logo { font-family: var(--head); font-weight: 900; font-size: 15px; letter-spacing: 0.08em; color: #fff; background: var(--ink); text-decoration: none; padding: 7px 16px; border-radius: 999px; } .top .logo b { color: #FFD9A0; margin-right: 6px; } .top nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } .top nav a { font-family: var(--head); font-weight: 700; font-size: 13px; text-decoration: none; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; transition: transform 0.15s, background 0.15s; } .top nav a:hover, .top nav a.on { background: var(--c); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); } .wrap { max-width: 880px; margin: 0 auto; padding: 40px 22px 100px; } /* ---------- article hero ---------- */ .hero { position: relative; background: var(--c); border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 48px 40px 40px; overflow: hidden; } .hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,0.35); } .hero .kicker { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; background: var(--ink); color: #fff; padding: 5px 12px; border-radius: 6px; margin-bottom: 20px; position: relative; z-index: 1; } .hero .native { font-family: var(--head); font-weight: 900; font-size: clamp(44px, 9vw, 92px); line-height: 1.05; letter-spacing: -0.01em; word-break: break-word; position: relative; z-index: 1; } .hero h1 { font-family: var(--head); font-weight: 900; font-size: clamp(22px, 4vw, 32px); line-height: 1.5; margin-top: 18px; position: relative; z-index: 1; } .hero .lead { margin-top: 18px; font-size: 15px; line-height: 2; max-width: 600px; position: relative; z-index: 1; font-weight: 500; } .hero .meta { margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.8; position: relative; z-index: 1; } /* sticker */ .sticker { position: absolute; right: 26px; bottom: 26px; z-index: 2; background: #fff; border: var(--line); border-radius: 18px; padding: 12px 20px; transform: rotate(-6deg); box-shadow: 4px 4px 0 var(--ink); text-align: center; cursor: pointer; transition: transform 0.15s; font-family: var(--head); } .sticker:hover { transform: rotate(-4deg) scale(1.04); } .sticker .w { font-weight: 900; font-size: clamp(20px, 3.4vw, 30px); line-height: 1.2; } .sticker .k { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-2); margin-top: 2px; } .sticker .p { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: #fff; } .sticker.playing .p { background: var(--c); color: var(--ink); } /* stats */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; } .stat { background: #fff; border: var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 4px 4px 0 var(--ink); } .stat .l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--ink-3); } .stat .v { font-family: var(--head); font-weight: 900; font-size: 19px; line-height: 1.35; margin-top: 4px; word-break: break-word; } .stat .v small { font-size: 12px; font-weight: 700; color: var(--ink-2); } .stat.warn { background: #FFE9A8; } .stat.dead { background: #E4E2DC; } /* ---------- body ---------- */ .body { margin-top: 44px; } .body h2 { font-family: var(--head); font-weight: 900; font-size: clamp(21px, 3.4vw, 27px); line-height: 1.5; margin: 56px 0 18px; display: flex; align-items: center; gap: 14px; } .body h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); font-family: var(--mono); font-size: 13px; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c); border: var(--line); box-shadow: 3px 3px 0 var(--ink); } .body { counter-reset: sec; } .body h2:first-child { margin-top: 0; } .body p { font-size: 15.5px; margin-bottom: 1.4em; max-width: 680px; } .body ul { margin: 0 0 1.4em 1.2em; font-size: 15px; max-width: 680px; } .body li { margin-bottom: 0.4em; } /* callout: この言語でしか言えない */ .only { background: #fff; border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 28px 30px; margin: 10px 0 30px; max-width: 680px; } .only .w { font-family: var(--head); font-weight: 900; font-size: clamp(26px, 5vw, 40px); line-height: 1.2; } .only .k { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 6px; } .only .m { font-size: 15px; margin-top: 14px; } .only .m b { display: inline-block; background: var(--c); border: 2px solid var(--ink); border-radius: 8px; padding: 0 8px; margin-right: 8px; font-size: 13px; } /* phrase cards */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0 30px; max-width: 680px; } .card { background: #fff; border: var(--line); border-radius: 16px; padding: 14px 14px 12px; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: transform 0.15s; } .card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .card .j { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink-3); } .card .w { font-family: var(--head); font-weight: 900; font-size: 20px; line-height: 1.3; margin-top: 4px; word-break: break-word; } .card .k { font-size: 11.5px; color: var(--ink-2); font-weight: 500; margin-top: 2px; } .card.playing { background: var(--c-soft); } .nums { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 30px; } .nums span { font-family: var(--head); font-weight: 900; font-size: 15px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; box-shadow: 3px 3px 0 var(--ink); } .nums span b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); font-size: 12px; margin-right: 8px; border: 2px solid var(--ink); } /* quote */ .quote { font-family: var(--head); font-weight: 700; font-size: clamp(18px, 3vw, 22px); line-height: 1.8; border-left: 8px solid var(--c); padding: 6px 0 6px 22px; margin: 28px 0; max-width: 640px; } .quote small { display: block; font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--ink-3); margin-top: 8px; } /* learn box */ .learn { background: var(--c-soft); border: var(--line); border-radius: var(--r); padding: 24px 28px; margin: 10px 0 30px; max-width: 680px; } .learn h3 { font-family: var(--head); font-weight: 900; font-size: 17px; margin-bottom: 10px; } .learn p { margin-bottom: 0.6em; font-size: 14.5px; } .sources { font-size: 12px; color: var(--ink-2); line-height: 1.9; margin-top: 44px; padding-top: 18px; border-top: 2px dashed var(--ink-3); max-width: 680px; } .sources a { color: var(--ink); } /* next */ .next { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; } .btn { font-family: var(--head); font-weight: 900; font-size: 14px; text-decoration: none; background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px; border: var(--line); box-shadow: 4px 4px 0 var(--c); transition: transform 0.15s; } .btn:hover { transform: translate(-2px, -2px); } .btn.alt { background: #fff; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); } /* ---------- 図鑑 index ---------- */ .zukan-head { padding: 30px 0 26px; } .zukan-head h1 { font-family: var(--head); font-weight: 900; font-size: clamp(34px, 7vw, 64px); line-height: 1.15; } .zukan-head h1 span { display: inline-block; background: var(--c); border: var(--line); border-radius: 14px; padding: 0 16px; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-2deg); } .zukan-head p { margin-top: 20px; font-size: 15px; max-width: 560px; font-weight: 500; } .zukan-head .cnt { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 12px; background: var(--ink); color: #fff; padding: 6px 14px; border-radius: 8px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 28px; } .tile { --c: #FF5C5C; display: block; text-decoration: none; background: var(--c); border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px 22px 20px; position: relative; overflow: hidden; min-height: 210px; transition: transform 0.15s, box-shadow 0.15s; } .tile:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); } .tile::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,0.35); } .tile .n { font-family: var(--head); font-weight: 900; font-size: clamp(26px, 4vw, 34px); line-height: 1.15; word-break: break-word; position: relative; z-index: 1; } .tile .j { font-family: var(--head); font-weight: 700; font-size: 14px; margin-top: 8px; position: relative; z-index: 1; } .tile .t { font-size: 12.5px; font-weight: 500; margin-top: 10px; line-height: 1.7; position: relative; z-index: 1; opacity: 0.85; } .tile .w { position: absolute; right: 14px; top: 14px; z-index: 2; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 4px 10px; font-family: var(--head); font-weight: 900; font-size: 13px; transform: rotate(6deg); box-shadow: 2px 2px 0 var(--ink); } .tile .d { position: absolute; left: 22px; bottom: 16px; z-index: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; opacity: 0.7; } .tile.soon { background: #fff; border-style: dashed; box-shadow: none; } .tile.soon:hover { transform: none; box-shadow: none; } .tile.soon .n { color: var(--ink-3); } .tile.soon .s { position: absolute; right: 14px; top: 14px; font-family: var(--mono); font-size: 9px; background: var(--ink-3); color: #fff; padding: 3px 8px; border-radius: 6px; } footer.site { margin-top: 90px; padding-top: 24px; border-top: var(--line); font-size: 12.5px; color: var(--ink-2); line-height: 2; } footer.site a { font-weight: 700; color: var(--ink); } @media (max-width: 640px) { .wrap { padding: 22px 14px 80px; } .hero { padding: 34px 22px 110px; } .sticker { right: 14px; bottom: 16px; } .stats { grid-template-columns: 1fr 1fr; } .only, .learn { padding: 20px 18px; } } /* ---------- ことばのはなし（横断記事） ---------- */ .hero.topic .native { font-size: clamp(40px, 8vw, 80px); letter-spacing: 0.04em; } .hero.topic { padding-bottom: 40px; } .related { background: #fff; border: var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 26px; margin: 40px 0 0; max-width: 680px; } .related h3 { font-family: var(--head); font-weight: 900; font-size: 15px; margin-bottom: 12px; } .related .chips { display: flex; flex-wrap: wrap; gap: 8px; } .related .chips a { display: inline-block; text-decoration: none; font-family: var(--head); font-weight: 700; font-size: 13px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 5px 14px; box-shadow: 3px 3px 0 var(--ink); transition: transform 0.15s; } .related .chips a:hover { transform: translate(-1px,-1px); background: var(--c-soft); } .related .chips a small { font-weight: 500; color: var(--ink-2); margin-left: 6px; } .related .chips a.has { background: var(--c); } .tile.topic .n { font-size: clamp(19px, 3vw, 23px); line-height: 1.5; } .tile.topic .g { font-family: var(--head); font-weight: 900; font-size: 30px; line-height: 1; position: relative; z-index: 1; margin-bottom: 12px; letter-spacing: 0.06em; } .tile.topic .t { opacity: 0.9; } .body table { border-collapse: collapse; font-size: 14px; margin: 6px 0 30px; max-width: 680px; width: 100%; background: #fff; border: var(--line); box-shadow: 4px 4px 0 var(--ink); } .body th, .body td { border: 2px solid var(--ink); padding: 8px 12px; text-align: left; vertical-align: top; line-height: 1.7; } .body th { background: var(--c-soft); font-family: var(--head); font-weight: 900; font-size: 13px; } .body td b { font-family: var(--head); }