html { font-size: 100%;/* ここをjQueryで書き換えます */ /* ↑解説のために指定していますが、デフォルトは100%なので通常は指定不要です */ } body { color: #2C2C2C; font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif; font-size: 1rem;/* remで指定(1rem = 16px) */ line-height: 1; } a { transition: color 0.4s; } .ly_siteWrapper { display: flex; flex-direction: column; min-height: 100vh; } .ly_header { padding: 15px 56px; } .ly_header_inner { display: flex; align-items: center; justify-content: space-between; width: min(100%, 880px); margin: 0 auto; } .ly_main { background-color: #fafafa; flex: 1; overflow-x: hidden; } .ly_section { padding: 90px 0; } .ly_section_inner { padding: 0 15px; text-align: center; width: min(100%, 880px); margin: 0 auto; } .bl_headerList { display: flex; align-items: center; justify-content: space-between; } .bl_headerList > * + * { margin-left: 56px; } .bl_headerList a { line-height: 1.5; padding: 10px; } /********************/ /* ボタンのスタイル */ /********************/ .bl_sizeBtn_wrap { display: inline-flex; align-items: flex-end; font-weight: 500; } .bl_sizeBtn_wrap > span { font-size: 14px; letter-spacing: 0.05em; } .bl_sizeBtn_wrap > * + * { margin-left: 10px; } .bl_sizeBtn { background-color: #ddd; border-radius: 4px; color: #666; padding: 5px; transition: opacity 0.4s; } .bl_sizeBtn:first-of-type { font-size: 13px; } .bl_sizeBtn:nth-of-type(2) { font-size: 16px; } .bl_sizeBtn:nth-of-type(3) { font-size: 19px; } /* 選択したボタンのスタイル */ .bl_sizeBtn.is_active { background-color: #8cc779; color: #fff; } /****************************/ /* ボタンのスタイルここまで */ /****************************/ .bl_sampleList { margin-top: 1em; } .bl_sampleList li { line-height: 1.7; } .bl_sampleList span { font-weight: 700; padding: 0 0.3em; } /* サイズ固定のテキスト */ .bl_fzPx { font-size: 16px; } .el_lv2Heading { font-size: 2rem; font-weight: 700; } @media (hover: hover) and (pointer: fine) { .bl_headerList a:hover { color: #246a92; } .bl_sizeBtn:hover { opacity: 0.8; } }