/* ------------------------------------------------------------ */ /* margin: & padding: */ body, div, p, h1, h2, h3, th, td, ul, ol, li, form { margin: 0; padding: 0; } /* ------------------------------------------------------------ */ /* display: */ header, footer, main, aside, article, section, .lunalys_a, #scaling_img, .tweet_img { display: block; } #header_nav_sp, #blog_nav_a1, #scaling_div { display: none; } body { display: grid; } .flex { display: flex; flex-wrap: wrap; } /* ------------------------------------------------------------ */ /* position: */ header, footer, #blog_nav { position: relative; } #scaling_img, #header_nav_pc, #footer_nav_pc, #copyright { position: absolute; } #scaling_div { position: fixed; } /* ------------------------------------------------------------ */ /* font-size: */ body, main h2, main h3, #site_name { font-size: 1.55rem; } aside h2, #content_header { font-size: 1.45rem; } .section_footer, .article_footer { font-size: 1.35rem; } .lunalys_a { font-size: 1.2em; } /* ------------------------------------------------------------ */ /* */ html { overflow-y: scroll; background-color: #ffffff; font-size: 62.5%; font-family: "メイリオ", "Meiryo", "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif; } html::-webkit-scrollbar { width: 16px; height: 16px; } html::-webkit-scrollbar-thumb { border: 1px solid #999999; border-radius: 8px; background-color: #ffffff; } /* ------------------------------------------------------------ */ /* */ body { grid-template-columns: 660px 331px; grid-template-rows: repeat(3, auto); width: 991px; margin: auto; border-right: 1px solid #999999; border-left: 1px solid #999999; color: #222222; } /* ------------------------------------------------------------ */ /* */ a { text-decoration-line: underline; text-decoration-color: #ffffff00; } a:link { color: #3030ff; } a:visited { color: #7722cc; } a:hover { color: #3030cc; text-decoration-color: #3030cc; } /* ------------------------------------------------------------ */ /*
*/ table { width: 100%; border-collapse: collapse; table-layout: fixed; } em { color: #000000; font-weight: bold; font-style: normal; text-decoration-line: underline; text-decoration-style: double; text-decoration-color: #ffff00; } blockquote { color: #118811; } hr { height: 1px; border-width: 1px 0px 0px 0px; } /* ------------------------------------------------------------ */ /*
*/ header { grid-area: 1/1/2/3; height: 220px; } header a:link, header a:visited, header a:hover, footer a:link, footer a:visited, footer a:hover { color: #ffffff; } header a:hover, footer a:hover { text-decoration-color: #ffffff; } #header_nav_pc a, #footer_nav_pc a { margin: 0 10px; } #header_img { width: 991px; height: 220px; } #header_nav_pc { bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.5); } #site_name { margin: 0 160px 0 20px !important; font-weight: normal; } /* ------------------------------------------------------------ */ /*
*/ main { grid-area: 2/1/3/2; margin: 0 0 20px; padding: 0 5px; } #content_header { margin: 0 10px -10px; padding: 15px 0 0 5px; border-bottom: 1px solid #555555; } #blog_nav { z-index: 1; width: calc(100% - 20px); height: 20px; margin: -22px 0 -8px; text-align: right; } /* ------------------------------------------------------------ */ /*
*/ main h2 { margin: 25px 10px -5px; padding: 0 0 0 18px; border: 1px solid #8888ff; border-radius: 0.2em; background-color: #f0f0ff; background-image: linear-gradient( 135deg, #8888ff 0.7em, transparent 0), linear-gradient( -45deg, #8888ff 0.7em, transparent 0); } main h3 { margin: 0 0 -10px 15px; text-decoration-line: underline; text-decoration-style: double; text-decoration-color: #00aaaa; } main p { margin: 17px 20px; } main p, main li { line-height: 1.7; } .section_footer, .article_footer { margin: -6px 15px -12px !important; padding: 0 2px 2px 0; border-top: 1px dashed #777777; color: #666666; text-align: right; } .section_footer a, .article_footer a, .entry_date, .entry_time { margin: 0 0 0 5px; } /* ------------------------------------------------------------ */ /*