@charset "utf-8"; /* ========================================================= 佐賀陶磁器展 vol.4 ／開催決定ページ ■ ページの地色はで淡色になります。白にしたいときは body.light の --page-bg を #FFFFFF に。 ■ 言語はとで切り替わります。切り替えは js/lang.js が行います。 ========================================================= */ :root{ color-scheme: dark; /* 会場（松山文創園区）の緑の腰壁とコンクリートから起こした暗色 */ --page-bg: #0D1210; /* 白磁の釉薬 */ --text: #F2EFE7; --text-2: rgba(242,239,231,.74); --text-3: rgba(242,239,231,.48); /* 染付の呉須藍 */ --accent: #7A99CE; /* 金襴手の金。ごく一部にだけ使う */ --gold: #C0A15E; /* 会場の緑青 */ --green: #6E9081; --rule: rgba(242,239,231,.18); /* キービジュアルの周りを暗くする膜。見本サイトは黒30%の一枚だけ */ --kv-mask: rgba(10,14,12,.32); --f-min: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; --f-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif; --f-tc-min: "Noto Serif TC", "Shippori Mincho B1", serif; --f-tc-sans: "PingFang TC", "Microsoft JhengHei", "Hiragino Sans", sans-serif; } /* 繁體中文のときは、書体をまるごと台湾向けに差し替える */ html[data-lang="zh"]{ --f-min: var(--f-tc-min); --f-sans: var(--f-tc-sans); } /* 淡色のページ。白にしたいときは --page-bg を #FFFFFF に変える */ body.light{ color-scheme: light; --page-bg: #F2F2F2; --text: #1D2220; --text-2: rgba(29,34,32,.78); --text-3: rgba(29,34,32,.54); --accent: #2E5490; --gold: #8A6C2C; --green: #44614F; --rule: rgba(29,34,32,.18); --kv-mask: rgba(10,14,12,.30); } *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; } body{ margin: 0; background: var(--page-bg); color: var(--text); font-family: var(--f-sans); font-size: 16px; line-height: 1.9; letter-spacing: .02em; } img{ max-width: 100%; display: block; } .wrap{ max-width: 1080px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); } /* ========================================================= 言語切り替えボタン ========================================================= */ .langbar{ border-bottom: 1px solid var(--rule); } .langbar__inner{ max-width: 1080px; margin-inline: auto; padding: 8px clamp(14px, 4vw, 48px); display: flex; justify-content: flex-end; align-items: center; } .langbar button{ appearance: none; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 1.7; letter-spacing: .12em; padding: 6px 14px; color: var(--text-3); } .langbar button + button{ border-left: 1px solid var(--rule); } .langbar button[aria-pressed="true"]{ color: var(--text); } .langbar button:hover{ color: var(--text-2); } .langbar button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } /* ========================================================= キービジュアル見本サイトと同じ作り。同じ写真を2枚使い、後ろの1枚をぼかす。ぼかしは箱の中だけに閉じ込め、ページ全体には敷かない。 ========================================================= */ .kv{ position: relative; /* 中の部品の位置の基準 */ overflow: hidden; /* 箱からはみ出したものを切り落とす */ isolation: isolate; /* 重ね順をこの箱の中だけで完結させる */ background-color: var(--page-bg); background-position: center center; background-size: cover; background-repeat: no-repeat; display: flex; justify-content: center; padding: clamp(26px, 5.5vw, 76px) clamp(20px, 6vw, 88px); } /* 後ろに敷くぼかし。ぼかすと端がにじむので一回り大きくして、はみ出しを切る */ .kv__blur{ position: absolute; top: -16px; right: -16px; bottom: -16px; left: -16px; background-position: center center; background-size: cover; background-repeat: no-repeat; filter: blur(10px); z-index: 0; } /* 暗くする膜 */ .kv__mask{ position: absolute; inset: 0; background: var(--kv-mask); z-index: 1; } /* ----------------------------------------------------- 会場写真を手前にも使い、その上に文字をすべて重ねる作り ----------------------------------------------------- */ .kv--photo{ padding: clamp(18px, 3.2vw, 52px) clamp(14px, 4vw, 64px); } .kv__stage{ position: relative; z-index: 2; overflow: hidden; width: min(100%, 1000px); display: grid; grid-template-areas: "stack"; place-items: center; padding: clamp(22px, 3.6vw, 48px); box-shadow: 0 26px 56px -26px rgba(0,0,0,.6); } /* 写真の比率（3:2）を最低限の高さとして確保する。文字のほうが背が高いときは、こちらに合わせて箱が縦に伸びる */ .kv__stage::before{ content: ""; grid-area: stack; width: 100%; aspect-ratio: 3 / 2; } .kv__photo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 箱の形に合わせて写真を切り抜く */ filter: brightness(1.14) saturate(1.04); z-index: 0; } /* 文字を読ませるために写真を沈める膜 */ .kv__veil{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,11,10,.30) 0%, rgba(8,11,10,.50) 48%, rgba(8,11,10,.40) 100%); } /* ========================================================= 見出しまわり ========================================================= */ .lede{ display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.2vw, 22px); max-width: 50rem; /* 会期の1行が折り返さない幅 */ margin-inline: auto; padding-block: clamp(40px, 7vw, 76px) clamp(48px, 8vw, 88px); text-align: center; } .eyebrow{ margin: 0; font-family: var(--f-min); font-size: clamp(13px, 1.5vw, 15px); letter-spacing: .42em; margin-right: -.42em; color: var(--gold); } h1{ margin: 0; font-family: var(--f-min); font-weight: 800; font-size: clamp(27px, 5.6vw, 50px); line-height: 1.34; letter-spacing: .06em; text-wrap: balance; } .theme{ margin: 0; display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); font-family: var(--f-min); font-size: clamp(14px, 1.9vw, 17px); letter-spacing: .34em; color: var(--accent); } .theme::before, .theme::after{ content: ""; width: clamp(20px, 6vw, 52px); height: 1px; background: currentColor; opacity: .5; } /* 会期 */ .dates{ margin: 0; width: 100%; padding-block: clamp(16px, 2.6vw, 24px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1em .4em; font-family: var(--f-min); font-size: clamp(30px, 7vw, 58px); font-weight: 600; line-height: 1.16; font-variant-numeric: tabular-nums; } .dates .dow{ font-size: .38em; letter-spacing: .2em; color: var(--accent); padding-left: .15em; } .dates .dash{ font-size: .6em; color: var(--text-3); padding-inline: .15em; } .dates-sub{ margin: 0; font-size: clamp(12.5px, 1.6vw, 14px); line-height: 1.8; letter-spacing: .08em; color: var(--text-2); } .venue{ margin: 0; font-size: clamp(13px, 1.7vw, 15px); letter-spacing: .12em; } .pending{ margin: 0; font-size: 12px; line-height: 1.8; letter-spacing: .06em; color: var(--text-3); } /* ========================================================= コンセプト ========================================================= */ .concept{ border-top: 1px solid var(--rule); } .concept .wrap{ padding-block: clamp(52px, 9vw, 104px); display: grid; gap: clamp(28px, 5vw, 56px); } .concept h2{ margin: 0; font-family: var(--f-min); font-weight: 600; font-size: clamp(20px, 4.4vw, 30px); line-height: 1.5; letter-spacing: .3em; } .prose{ max-width: 40rem; } .prose h3{ margin: 0 0 .7em; font-family: var(--f-min); font-weight: 600; font-size: clamp(17px, 2.6vw, 21px); line-height: 1.6; letter-spacing: .1em; } .prose p{ margin: 0; font-size: clamp(14px, 1.7vw, 15.5px); line-height: 2.1; color: var(--text-2); } /* 4つの体験。去年のサイトの構成に合わせて、番号・見出し・本文の3段組み。 01–04 は来場者がたどる順序そのものなので、番号を出している */ .steps{ margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(26px, 3.2vw, 40px) clamp(24px, 3vw, 40px); } .steps li{ padding-top: clamp(16px, 2vw, 20px); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: .75em; } .steps__no{ margin: 0; display: flex; align-items: baseline; gap: .85em; font-family: var(--f-min); line-height: 1.3; } .steps__no .num{ font-size: clamp(19px, 2.4vw, 24px); font-weight: 600; letter-spacing: .04em; color: var(--accent); font-variant-numeric: tabular-nums; } .steps__no .label{ font-size: clamp(16px, 2.1vw, 19px); letter-spacing: .18em; padding-left: .85em; border-left: 1px solid var(--rule); } .steps__lead{ margin: 0; font-family: var(--f-min); font-weight: 600; font-size: clamp(14.5px, 1.8vw, 16.5px); line-height: 1.7; letter-spacing: .06em; } .steps__body{ margin: 0; font-size: 13px; line-height: 2; color: var(--text-2); /* 小さい字なので薄くしすぎない */ } @media (min-width: 880px){ .concept .wrap{ grid-template-columns: max-content 1fr; align-items: start; column-gap: clamp(48px, 7vw, 88px); } /* キービジュアル右下の縦組みに合わせて、テーマも縦に組む */ .concept h2{ writing-mode: vertical-rl; text-orientation: upright; grid-row: span 2; height: 100%; padding-left: clamp(20px, 2.6vw, 30px); border-left: 1px solid var(--rule); letter-spacing: .42em; } .steps{ grid-column: 2; } } /* ========================================================= フッター ========================================================= */ footer{ border-top: 1px solid var(--rule); } footer .wrap{ padding-block: clamp(36px, 6vw, 60px); display: grid; gap: clamp(20px, 3vw, 28px); } .credits{ margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); font-size: 13px; line-height: 1.8; } .credits dt{ font-family: var(--f-min); font-size: 11.5px; letter-spacing: .3em; margin-right: -.3em; margin-bottom: .3em; color: var(--green); } .credits dd{ margin: 0; letter-spacing: .04em; color: var(--text-2); } .colophon{ margin: 0; font-size: 11.5px; letter-spacing: .1em; color: var(--text-3); } @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } } /* ========================================================= 写真の上に重ねた見出しまわり（案C） ========================================================= */ .lede--over{ grid-area: stack; position: relative; z-index: 2; width: 100%; max-width: 44rem; padding-block: 0; gap: clamp(9px, 1.6vw, 18px); /* 写真の上は常に暗いので、配色をここで白系に固定する */ --text: #F7F4EC; --text-2: rgba(247,244,236,.84); --text-3: rgba(247,244,236,.64); --accent: #AFC6EC; --gold: #DCBD7C; --rule: rgba(247,244,236,.32); /* 開催決定と展示会名は同じ寸法。ここ1か所で両方が変わる */ --kv-title: clamp(26px, 5vw, 52px); color: var(--text); text-shadow: 0 1px 10px rgba(0,0,0,.72), 0 0 34px rgba(0,0,0,.5); } .lede--over h1{ font-size: var(--kv-title); } .lede--over .dates{ font-size: clamp(25px, 5.4vw, 50px); padding-block: clamp(12px, 1.8vw, 18px); } /* 開催決定 */ .kv__badge{ margin: 0 0 clamp(2px, .6vw, 8px); font-family: var(--f-min); font-weight: 600; font-size: var(--kv-title); /* h1 と同じ寸法 */ line-height: 1.5; letter-spacing: .2em; /* 大きな字は字間を詰める */ margin-right: -.2em; } /* 言語の出し分けは、ほかのどの指定にも勝つよう最後に置く */ html[data-lang="ja"] .l-zh{ display: none; } html[data-lang="zh"] .l-ja{ display: none; }