/* ------------------------------------------------------------ */
/* variable */
:root {
--main_inner: 680px;
--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,
main h2,
main h3 {
font-size: 1.6rem;
}
aside h2,
#content_header {
font-size: 1.5rem;
}
.section_footer,
.article_footer {
font-size: 1.4rem;
}
.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: 720px 420px;
grid-template-rows: repeat(3, auto);
width: 1140px;
margin: auto;
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: 上 begin / 左 begin / 上 end / 左 end;
*/
grid-area: 1/1/2/2;
height: 180px;
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 20px 20px;
background-color: #ffffffbb;
}
#content_header {
margin: 0 10px -10px;
padding: 15px 0 0 5px;
border-bottom: 1px solid #555555;
}
#blog_nav {
z-index: 1;
width: calc(100% - 15px);
height: 20px;
margin: -22px 0 -8px;
text-align: right;
}
/* ------------------------------------------------------------ */
/* */
main h2 {
margin: 25px 10px -5px;
padding: 0 0 0 18px;
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 -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;
}
/* ------------------------------------------------------------ */
/*