/* ------------------------------------------------------------ */ /* variable */ :root { --button-size: calc(100vw / 14); --button-margin: calc((100vw / 14) * 0.1); --safe-margin: env(safe-area-inset-bottom); } /* ------------------------------------------------------------ */ /* margin: & padding: */ body, div, p, h1, h2, h3, th, td, ul, ol, li, form, fieldset, pre { margin: 0; padding: 0; } /* ------------------------------------------------------------ */ /* display: */ textarea, header, footer, main, article, section, nav, td a, .button_span { display: block; } body { display: grid; } #footer_nav_sp { display: flex; } aside, #site_select, #footer_nav_pc, #copyright, .pc_only, div[align="center"], center { display: none; } /* ------------------------------------------------------------ */ /* position: */ .h2, .square1, .square2, #content_nav, #footer_nav_sp { position: relative; } #site_select, #content_mode, #content_filter { position: absolute; } footer { position: fixed; } /* ------------------------------------------------------------ */ /* font-size: */ body, h2, h3 { font-size: clamp(1.4rem, 100vw / 25, 1.8rem); } h1 { font-size: 1.3em; } .square1, .square2 { font-size: 1.15em; } .button_span { font-size: 0.65em; } /* ------------------------------------------------------------ */ /* font-weight: */ h1, h2, h3 { font-weight: normal; } em { font-weight: bold; font-style: normal; } /* ------------------------------------------------------------ */ /* text-align: */ h1, #content_date, #content_all, .button_a, .button_span { text-align: center; } /* ------------------------------------------------------------ */ /* text-decoration: */ a { text-decoration: none; } h1 { text-decoration: underline; } /* ------------------------------------------------------------ */ /* color: */ body, #footer_nav_sp a { color: #333333; } ._blue { color: #1f64d4 !important; } main a:link, #site_name a { color: #5555ff; } main a:visited { color: #8833ee; } #site_select { color: #ffffff; } .square1 { color: #555555; } .square2 { color: #888888; } /* ------------------------------------------------------------ */ /* background-color: */ html, body { background-color: #ffffff; } header, footer { background-color: #ffffffee; } .tr2 { background-color: #f8f8f8; } select { background-color: transparent; } /* ------------------------------------------------------------ */ /* border-bottom: */ #content_header, #content_date { border-bottom: 1px solid #999999; } /* ------------------------------------------------------------ */ /* */ html { overflow-y: scroll; font-size: 62.5%; font-family: "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif; } /* ------------------------------------------------------------ */ /* */ body { grid-template-rows: repeat(2, auto); line-height: 1.5; } /* ------------------------------------------------------------ */ /*

*/ header { grid-row: 2; margin: 0 0 calc(4.0em + var(--safe-margin)); } h1 { font-family: "Bradley Hand"; } /* ------------------------------------------------------------ */ /*

*/ main { grid-row: 1; } #content_header { margin: 0 0 0.2em; padding: 0.4em 0 0.2em 0.5em !important; } #content_all { z-index: 2; padding: 1em 0; } #content_date { z-index: 2; margin: -0.2em 0 0; padding: 0.4em 0; } #content_date a { margin: 0 0.3em; } #content_date time { margin: 0 1.0em; } #content_filter { top: -1.9em; right: 0.5em; z-index: 3; } #content_filter a { margin: 0 0 0 0.2em; } #content_mode { top: 0.4em; left: 0.5em; z-index: 3; } #content_mode a { margin: 0 0.2em 0 0; } /* ------------------------------------------------------------ */ /*