/* ------------------------------------------------------------ */ /* margin: & padding: */ body, div, p, h1, h2, h3, th, td, ul, ol, li, form { margin: 0; padding: 0; } /* ------------------------------------------------------------ */ /* display: */ header, main, article, section, .lunalys_a, #scaling_img, .tweet_img { display: block; } aside, #header_nav_pc, #footer_nav_pc, .headline_no, .entry_time, #scaling_div { display: none; } .flex { display: flex; flex-wrap: wrap; } /* ------------------------------------------------------------ */ /* position: */ header, main, #blog_nav, .button_a { position: relative; } .button_span, #scaling_img { position: absolute; } #header_img, #header_nav_sp, #scaling_div { position: fixed; } /* ------------------------------------------------------------ */ /* font: */ body, h1, h2, h3 { font-size: clamp(1.4rem, 100vw / 25, 2.0rem); } .section_footer, .article_footer, .headline_date { font-size: 0.85em; } /* ------------------------------------------------------------ */ /* text-overflow: */ h1, h2, #headline_ul li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------------ */ /* */ html { overscroll-behavior: none; overflow-y: scroll; background-color: #ffffff; font-size: 62.5%; font-family: "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", "メイリオ", "Meiryo", sans-serif; } /* ------------------------------------------------------------ */ /* */ 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; } /* ------------------------------------------------------------ */ /* */ body { color: #222222; } /* ------------------------------------------------------------ */ /*
*/ /* for Smart Phone */ :root { --btn_size: clamp(3.2rem, 100vw / 11.5, 5.0rem); --img_width: 100vw; --img_height: calc(100vw * 0.5); } /* for Tablet */ @media (min-width: 768px) { :root { --img_width: calc(100vw * 0.8); --img_height: calc(100vw * 0.4); } #header_img { margin: auto 10%; } } header { height: var(--img_height); } #header_img { aspect-ratio: 2 / 1; width: var(--img_width); height: var(--img_height); border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #header_nav_sp { top: 0.45em; right: 0.45em; z-index: 3; } .button_a { display: inline-block; width: var(--btn_size); height: var(--btn_size); margin: 0 0.3em; border-radius: calc(var(--btn_size) * 0.5); background-color: #222222bb; text-align: center; } .button_img { --img_size: calc(var(--btn_size) * 0.72); width: var(--img_size); height: var(--img_size); margin: calc(var(--btn_size) * 0.14) 0 0; } .button_span { top: var(--btn_size); left: 0; width: 100%; text-align: center; font-size: 0.65em; color: #222222 !important; } /* ------------------------------------------------------------ */ /*
*/ main { z-index: 2; padding: 0 0.4em 1.5em; } #content_header { margin: 0 0.6em -0.6em; padding: 0.8em 0 0 0.4em; border-bottom: 1px solid #555555; } #blog_nav { z-index: 1; width: calc(100% - 1.1em); height: 1.4em; margin: -1.6em 0 -0.4em; text-align: right; } #blog_nav_a2 { margin-left: 0.7em; } /* ------------------------------------------------------------ */ /*
*/ h2 { margin: 1.7em 0.7em -0.4em; padding: 0 0 0 1.2em; 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); } h3 { margin: 0 0 -0.8em 1.0em; text-decoration-line: underline; text-decoration-style: double; text-decoration-color: #00aaaa; } main p { margin: 1.1em; line-height: 1.7; } .section_footer, .article_footer { margin: -0.6em 1.2em !important; padding: 0.2em 0.2em 0.2em 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 0.4em; } /* ------------------------------------------------------------ */ /*