/* <system section="background" selected="D2B48C"> */
body{background:#f5f5f5;}
/* </system> */
blog-title-inner {
background-image:url(

https://cdn-ak.f.st-hatena.com/images/fotolife/a/annkorokoror/20210929/20210929231710.jpg

);
background-position:center center;
background-size:cover
}

h4 { background: linear-gradient(transparent 85%, #ffa500 80%); }

.entry-content {

    font-size:17px;

}

/*目次に太いライン*/
.entry-content .table-of-contents {
position: relative;
margin: 0;
padding: 1em 1.2em 1em;
background: #fff;
font-size: 100%;
border-top: solid 40px #D2B48C;
border-right: solid 3px #D2B48C;
border-bottom: solid 3px #D2B48C;
border-left: solid 3px #D2B48C;
border-radius: 4px;
}
.entry-content .table-of-contents::before {
content: "目次";
position: absolute;
top: -33px;
left: 20px;
margin: 0 0 .8rem;
padding: 0 0 .4rem;
color: #fff;
border: none;
font-size: 120%;
}
.entry-content .table-of-contents li {
margin: .2em 0 1em 1em;
list-style-type: decimal;
line-height: 1.6em;
}
.entry-content .table-of-contents li ul {
margin: 0 0 1em .5em;
padding: 0;
}
.entry-content .table-of-contents li ul li {
margin: .2em 0 0 1em;
list-style-type: disc;
}
.entry-content .table-of-contents li ul li ul li {
list-style-type: circle;
}
.table-of-contents li a {
line-height: 1.6em;
}
.entry-content .table-of-contents a {
color: #454545;
text-decoration: underline;
}
/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;!important;}
}
.fukidashi01::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/annkorokoror/20210714/20210714222917.jpg);}
.fukidashi02::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/annkorokoror/20210716/20210716153543_120.jpg);}
.fukidashi03::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/annkorokoror/20210803/20210803140934.jpg);}
.fukidashi04::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/annkorokoror/20210805/20210805233350.jpg);}
.fukidashi05::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/annkorokoror/20210914/20210914114336.jpg);}

#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #D2B48C;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #8B4513;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #D2B48C;
transition: all .5s;
}

.menu-toggle{
display: none;
}

/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}

/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #D2B48C;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #D2B48C;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;

}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #D2B48C;/*リスト文字の背景色*/
margin: 0 auto;
text-align: left;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: D2B48C;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;!important;}
}

 

見出しカスタマイズ
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}
.entry-content h3 {
padding: 6px 10px;
border-left: 8px solid #f4a460;
color: #333;
line-height: 1.5;
background-color: #ffffe0;!important;
}

.box27 {     position: relative;     margin: 2em 0;     padding: 0.5em 1em;     border: solid 3px #ffa500; } .box27 .box-title {     position: absolute;     display: inline-block;     top: -27px;     left: -3px;     padding: 0 9px;     height: 25px;     line-height: 25px;     font-size: 17px;     background: #ffa500;     color: #ffffff;     font-weight: bold;     border-radius: 5px 5px 0 0; } .box27 p {     margin: 0;      padding: 0; } 

.box17{
margin:2em 0;
position: relative;
padding: 0.5em 1.5em;
border-top: solid 2px black;
border-bottom: solid 2px black;!important
}
.box17:before, .box17:after{
content: '';
position: absolute;
top: -10px;
width: 2px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: black;!important
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
margin: 0; 
padding: 0;
}

.box18{
margin:2em 0;
position: relative;
padding: 0.25em 1em;
border: solid 2px #ffcb8a;
border-radius: 3px 0 3px 0;
}
.box18:before,.box18:after
{
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px #ffcb8a;
border-radius: 50%;
}
.box18:after {
top:-12px;
left:-12px;
}
.box18:before {
bottom:-12px;
right:-12px;
}
.box18 p {
margin: 0; 
padding: 0;
}

article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);!important
}


.box9 {     padding: 0.5em 1em;     margin: 2em 0;     color: #ff7d6e;     background: #ffebe9;     border-top: solid 10px #ff7d6e; } .box9 p {     margin: 0;      padding: 0<p> </p>

article u{
text-decoration: none;
background: linear-gradient(transparent 50%, #ffff00 50%);
}

CSS .box27 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #62c1ce; } .box27 .box-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .box27 p { margin: 0; padding: 0; }