@media (max-width:700px) {

h2 {
margin-bottom: 0;
}
h2::after {
height: 10px;
margin-top: 5px;
}
h3 {
margin-left: 5px;
}
h3 > span {
padding-left: 15px;
}
.mailForm .enter {
width: 90%;
min-width: 100px;
max-width: 400px;
}
.nameChange .enter {
width: 7em;
}
.box {
padding: 20px 10px 50px;
}
.contentsWrap {
width: 90%;
}
.longList2 {
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 30px auto 40px;
}
.longList2 li {

margin-bottom: 20px;
}
.shortList {
columns: 1;
}
.mainHeader {
padding-bottom: 50px;
}
.mainNavWrap {
transform: translateX(-100%);
}
.mainNavWrap::after {
content: '';
display: block;
width: 100%;
height: 100vh;
}
.mainNav {
flex-direction: column-reverse;
padding: 40px 20px 20px;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
background: #ffffff77;
}
h1 {
font-size: 1.5em;
}
.mainNav ul {
flex-direction: column;
align-items: flex-end;
}
.mainNav li {
margin: 1rem 0;
}
.navInfo {
padding: 10px;
}
.view {
transform: translateX(0);
}
.navTrigger {
display: inline-block;
position: fixed;
width: 30px;
height: 10px;
margin: 20px 10px;
border-top: var(--darkColor) solid 1px;
border-bottom: var(--darkColor) solid 1px;
z-index: 4;
}
.headerBox {
width: 200px;
height: 200px;
}
.headerBox::before,
.headerBox::after {
width: calc(100% - 30px);
height: calc(100% - 30px);
}
.headerBox::before {
top: 13px;
left: 13px;
}
.headerBox::after {
top: 17px;
left: 17px;
}
.siteTitle {
font-size: 1.5em;
}
.siteInfo {
font-size: 1rem;
}
.mobile {
display: block;
}
}
</style>



です。

このままで保存するときちんと色がついているのですが、('メイン画像URL')に('##IMAGE_DATA_〇_URL##')を記入して保存すると1枚目のようになってしまいます。。