@charset "UTF-8"; /* ========== Component: Modal (FLOCSS: c-*) ========== */ .c-modal { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: 1fr; align-items: center; justify-items: center; padding: 24px; visibility: hidden; opacity: 0; pointer-events: none; /* 背景操作不可 */ transition: opacity .2s ease, visibility .2s ease; } /* 背景 */ .c-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); } /* 本体 */ .c-modal__dialog { position: relative; max-width: min(92vw, 640px); width: 100%; background: #fff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,.2); padding: 24px; outline: none; } /* タイトル・本文 */ .c-modal__title { font-size: 20px; font-weight: 700; margin: 0 0 .5em; } .c-modal__desc { margin: 0 0 1.25em; line-height: 1.8; } /* ボタン */ .c-modal__actions { display: flex; justify-content: flex-end; gap: 12px; } .c-modal__close { appearance: none; border: 1px solid #ddd; background: #f7f7f7; border-radius: 999px; padding: .6em 1.1em; font-weight: 600; cursor: pointer; } .c-modal__close:hover { background: #efefef; } /* 開いた状態 */ .c-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; } /* 背景スクロールロック（JSで .u-scroll-lock を に付与） */ .u-scroll-lock, .u-scroll-lock body { overflow: hidden !important; height: 100%; } /* 画面リーダー用：フォーカストラップ時の非表示領域を無視（必要なら） */ [aria-hidden="true"] { /* 必要に応じて視覚的非表示ユーティリティを併用 */ } .c-modal__desc span{ text-decoration: underline; }