/* ------------------------------------------------------------ */
/* variable */
:root {
--main_inner: 688px;
--bar_width: calc(100vw - 100cqw);
}
/* ------------------------------------------------------------ */
/* 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 {
display: block;
}
#footer_nav_sp {
display: none;
}
body {
display: grid;
}
.flex {
display: flex;
flex-wrap: wrap;
}
/* ------------------------------------------------------------ */
/* position: */
#blog_nav {
position: relative;
}
/* ------------------------------------------------------------ */
/* font-size: */
body,
h1,
h2,
h3 {
font-size: 1.6rem;
}
.section_footer,
.article_footer {
font-size: 0.85em;
}
.lunalys_a {
font-size: 1.2em;
}
/* ------------------------------------------------------------ */
/* */
html {
container-type: size;
overflow-y: scroll;
background-image: url('/text/res/img/bg/2_256.jpg');
background-attachment: fixed;
font-size: 62.5%;
font-family: "メイリオ", "Meiryo", "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif;
}
/* ------------------------------------------------------------ */
/* */
body {
grid-template-columns: 736px 416px;
grid-template-rows: repeat(3, auto);
width: 1152px;
margin: auto;
color: #222222;
}
/* ------------------------------------------------------------ */
/* */
a {
text-decoration-line: underline;
text-decoration-color: #ffffff00;
}
main a:link {
color: #3030ff;
}
main a:visited {
color: #7722cc;
}
main 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: 上 begin / 左 begin / 上 end / 左 end;
*/
grid-area: 1/1/2/2;
height: 184px;
overflow: hidden;
border-bottom: 1px solid #cccccc;
background-color: #ffffffbb;
}
#header_img {
aspect-ratio: 4 / 1;
width: 100%;
height: auto;
}
/* ------------------------------------------------------------ */
/* */
main {
grid-area: 2/1/3/2;
padding: 0 24px 32px;
background-color: #ffffffbb;
}
#content_header {
margin: 0 8px -8px;
padding: 16px 0 0 4px;
border-bottom: 1px solid #777777;
color: #6c666c;
}
#blog_nav {
z-index: 1;
width: calc(100% - 12px);
height: 1.2em;
margin: -1.55em 0 0;
text-align: right;
}
/* ------------------------------------------------------------ */
/* */
main h2 {
margin: 24px 12px -4px;
padding: 0 0 0 20px;
border: 1px solid #888888;
border-radius: 0.2em;
background-color: #e6e6e6;
background-image:
linear-gradient( 135deg, #888888 0.7em, transparent 0),
linear-gradient( -45deg, #888888 0.7em, transparent 0);
}
main h3 {
margin: 0 0 -12px 20px;
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-color: #00aaaa;
}
main p {
margin: 20px;
}
main p,
main li {
line-height: 1.7;
}
.section_footer,
.article_footer {
margin: -4px 12px 0 !important;
padding: 4px 4px 0 0;
border-top: 1px solid #999999;
color: #666666;
text-align: right;
}
.section_footer a,
.article_footer a,
.entry_date,
.entry_time {
margin: 0 0 0 4px;
}
/* ------------------------------------------------------------ */
/*