/* ===== 調整用の設定値 ===== */ :root { --font-size: 1.125rem; /* 基本の文字サイズ(18px相当) */ --line-height: 2; /* 行の高さ */ --space-small: 0.5rem; /* セクション・実績間の余白 */ --space: 1rem; /* セクション・実績間の余白 */ --space-large: 2rem; /* セクション・実績間の余白 */ --space-xlarge: 4rem; /* セクション・実績間の余白 */ --color-text: #000000; /* 文字色 */ --color-bg: #ffffff; /* 背景色 */ --color-line: #ff0000; /* 区切り線の色 */ --flip-duration: 1.1s; /* 言語切り替えの回転にかかる時間 */ --flip-easing: ease-in-out; /* 回転の緩急(始まりと終わりを滑らかに) */ --flip-perspective: 3500px; /* 回転の遠近感の初期値(実際はコンテンツ高さ×係数でJSが上書き) */ --flip-back-opacity: 0.1; /* 裏を向いている面の透け具合(0で非表示) */ --viewer-dot-color: #00c853; /* オンライン人数の左に付くドットの色 */ --viewer-dot-size: 0.5em; /* ドットの大きさ */ } /* ===== リセット ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* スマホ横向き時の自動文字拡大を防ぐ */ } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } ul, ol { list-style: none; } img, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } /* ===== 基本 ===== */ html{ font-size: var(--font-size); } body { font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'a-otf-gothic-bbb-pr6n', sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.05em; line-height: var(--line-height); font-feature-settings: 'palt'; color: var(--color-text); background: var(--color-bg); } b{ font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'a-otf-midashi-go-mb31-pr6n', sans-serif; font-weight: 600; font-style: normal; } .container { position: relative; transform-style: preserve-3d; transform: perspective(var(--flip-perspective)); transition: transform var(--flip-duration) var(--flip-easing); } /* 反転状態は のクラスで持つ。初期表示から英語面にする場合に 本文より前(head)で決められるため、日本語面が一瞬見えてから回る現象が起きない */ html.is-flipped .container { transform: perspective(var(--flip-perspective)) rotateY(180deg); } .ja, .en { width: 108vw; margin-inline: auto; padding: var(--space-large); transform: scale(0.92,1); transform-origin: center left; transition: opacity var(--flip-duration) var(--flip-easing); /* 裏面の透け具合も回転に合わせて変化 */ } .en{ position: absolute; top: 0; left: 0; transform: translateX(92%) rotateY(180deg) scale(0.92,1); opacity: var(--flip-back-opacity); pointer-events: none; } html.is-flipped .en { opacity: 1; pointer-events: auto; } html.is-flipped .ja { opacity: var(--flip-back-opacity); pointer-events: none; } .lang-toggle { position: fixed; top: var(--space-small); right: var(--space); z-index: 1; border: none; background: none; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3rem; text-decoration-color: var(--color-line); } .viewer-count { position: fixed; top: var(--space-small); left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap; } .viewer-count::before { content: ''; display: inline-block; width: var(--viewer-dot-size); height: var(--viewer-dot-size); border-radius: 50%; background: var(--viewer-dot-color); margin-right: 0.45em; } i{ font-style: italic; } a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3rem; text-decoration-color: var(--color-line); } hr { border: none; border-top: 1px solid var(--color-line); margin-block: var(--space); } .block-small{ margin-top: var(--space); } .block-small:first-child{ margin-top: 0; } .block{ margin-top: var(--space-large); } .block:first-child{ margin-top: 0; } .indent{ padding-left: var(--space); } .works { list-style: none; padding: 0; } .works li { margin-top: var(--space); } .works li:first-child { margin-top: 0; } /* ===== 文字サイズ(muesumプロジェクトと同じスケール) ===== 基準1rem(16px) × 1.3のべき乗による段階スケール。 ビューポート360pxで最小値、1440pxで最大値になるよう滑らかに可変する。 例: regular はモバイル0.769rem(約12.3px) → デスクトップ1rem(16px) */ .textsize-xsmall { font-size: clamp(0.455rem, 0.41rem + 0.20vw, 0.592rem); } .textsize-small { font-size: clamp(0.592rem, 0.533rem + 0.26vw, 0.769rem); } .textsize-regular { font-size: clamp(0.769rem, 0.692rem + 0.34vw, 1rem); } .textsize-article { font-size: clamp(1rem, 0.9rem + 0.44vw, 1.3rem); } .textsize-medium { font-size: clamp(1.3rem, 1.17rem + 0.58vw, 1.69rem); } .textsize-large { font-size: clamp(1.69rem, 1.521rem + 0.75vw, 2.197rem); } .textsize-xlarge { font-size: clamp(2.197rem, 1.977rem + 0.98vw, 2.856rem); }