span.l.red{
color: #e84e4e;
}
span.attention{
width: fit-content;
color: #cd0000;
padding: 3px 5px 1px;
border: 1px solid #cd0000;
border-radius: 5px;
margin: 15px 0 5px;
font-size: 13px;
font-size: 1.3rem;
}
div.h1{
position: relative;
font-size: 20px;
font-size: 2.0rem;
padding: 0.8em;
margin-top: 0.2em;
margin-bottom: 1em;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #c80000;
color: #fff;
box-shadow: 0 0 45px rgba(0, 0, 0, 0.25) inset;
line-height: 1.4;
font-weight: bold;
}
div.h1:before, div.h1:after {
content: '';
display: block;
width: 100%;
position: absolute;
border-top: 1px dashed;
}
div.h1:before {
top: 3px;
left: 0;
}
div.h1:after {
bottom: 3px;
left: 0;
}
div.h2,div.h3,div.h4,div.h5,div.h6{
color: #222;
font-size: 16px;
font-size: 1.6rem;
font-weight: bold;
line-height: 1.7;
letter-spacing: 0.05em;
margin: 2.5em 0;
padding: 0.5em 1em;
position: relative;
}
div.h2{
font-size: 18px;
font-size: 1.8rem;
color: #111;
}
div.h3{
border-left: 5px solid #FFC107;
background: #ffffee;
}
div.h3::before {
content: '';
width: 3px;
height: 43px;
background-color: #fdd96e;
position: absolute;
left: 2px;
top: 0px;
}
div.h4{
background: #fff3ec;
}
div.h5.dia {
padding-left: 30px;
margin: 10px 10px -5px;
}
div.h5.dia::before {
content: '';
width: 10px;
height: 10px;
border-radius: 15%;
background-color: #b70200;
position: absolute;
left: 11px;
top: 17px;
transform: rotate(45deg);
}
div.h6{
letter-spacing: 0.1em;
font-size: 1.2em;
line-height: 1.6em;
margin: 50px 0 30px;
border-left: none;
padding: 10px 15px;
width: 100%;
background: #c80000;
color: #fff;
font-weight: normal;
}
.post img{
max-width: 99%;
/*box-shadow: 0px 3px 10px -5px #333;*/
}
div.kanni-form{
padding: 5px;
background: #fffbf4;
border: solid 1.5px #f89174;
margin: 3em 0;
}
._5mfr img{
margin: 0;
max-width: 20px;
box-shadow: none;
}
#js_j{
margin: 20px 15px 50px;
}
.img-button div.h1{
text-align: center;
width: 95%;
padding-right: 2.5em;
}
div.h1.flag-1,div.h1.flag-2{
text-align: left;
width: 95%;
padding-right: 2.5em;
}
.img-button div.h1::before,div.h1.flag-1::before{
content: '';
width: 44px;
height: 44px;
border-radius: 15%;
background-color: #fff;
position: absolute;
left: 605px;
top: 8px;
transform: rotate(45deg);
}
div.h1.flag-2::before{
content: '';
width: 65px;
height: 65px;
border-radius: 15%;
background-color: #fff;
position: absolute;
left: 596px;
top: 10px;
transform: rotate(45deg);
}
.img-button img{
width: 80%;
padding: 1%;
}
.LINE-link{
margin: 0 0 30px;
float:left;
}
.LINE-link img{
width: 180px;
box-shadow: none;
margin: 0;
}
.LINE-info {
font-family: monospace;
}
img.LINE-QR{
float: left;
width: 20%;
width: 117px;
box-shadow: none;
margin: -10px 20px;
}
.LINE-info>span{
color: #169905;
font-style: italic;
}
.LINE-button{
width: 130px;
margin:0;
}
@media only screen and (max-width:770px){
.img-button div.h1, div.h1.flag-1, div.h1.flag-2 {
text-align: left;
padding-right: 3%;
}
.img-button div.h1::before, div.h1.flag-1::before {
width: 46px;
height: 46px;
top: 7px;
left: 96.5%;
}
div.h1.flag-2::before {
left: 96%;
top: 13%;
}
.post img {
box-shadow: none;
}
}
@media only screen and (max-width:750px){
div.h1.flag-2::before {
left: 95.6%;
}
.img-button div.h1, div.h1.flag-1, div.h1.flag-2 {
padding: 0.8em;
}
}
@media only screen and (max-width:680px){
div.h1.flag-2::before {
left: 95%;
width: 60px;
height: 60px;
}
.img-button div.h1, div.h1.flag-1, div.h1.flag-2 {
font-size: 18px;
font-size: 1.8rem;
}
.img-button div.h1::before, div.h1.flag-1::before {
width: 40px;
height: 40px;
}
}
@media only screen and (max-width:640px){
div.h1.flag-2::before {
left: 94.5%;
}
}
@media only screen and (max-width:600px){
div.h1{
font-size: 16px;
font-size: 1.6rem;
border-radius: 2px;
font-weight: normal;
}
div.h1.flag-2::before {
width: 55px;
height: 55px;
top: 7px;
}
div.h2,div.h3,div.h4,div.h5,div.h6{
font-size: 14px;
font-size: 1.4rem;
}
div.h3::before {
height: 37px;
width: 2px;
}
div.h5.dia {
padding-left: 15px;
margin: 10px 0 0;
}
div.h5.dia::before {
width: 6px;
height: 6px;
left: 3px;
top: 17px;
}
.img-button img {
width: 100%;
border: none;
}
.img-button div.h1, div.h1.flag-1, div.h1.flag-2 {
font-size: 16px;
font-size: 1.6rem;
}
.img-button div.h1::before, div.h1.flag-1::before {
width: 35px;
height: 35px;
}
}
@media only screen and (max-width:500px){
.img-button div.h1, div.h1.flag-1, div.h1.flag-2 {
letter-spacing: -0.2px;
padding: 0.8em 0.5em;
}
}
@media only screen and (max-width:480px){
div.h1 {
font-size: 16px;
font-size: 1.6rem;
border-radius: 1px;
}
div.h1.flag-2::before {
width: 48px;
height: 48px;
top: 6px;
}
.img-button div.h1, div.h1.flag-1, div.h1.flag-2 {
font-size: 14px;
font-size: 1.4rem;
}
.img-button div.h1::before, div.h1.flag-1::before {
width: 29px;
height: 29px;
top:6px;
}
.type-post div.kanni-form h5.dia::before {
left: 9px;
top: 9px;
width: 6px;
height: 6px;
}
}
@media only screen and (max-width:430px){
.img-button div.h1, div.h1.flag-1, div.h1.flag-2 {
width: 98%;
}
}
@media only screen and (max-width:400px){
.img-button div.h1, div.h1.flag-1{
font-size: 13px;
font-size: 1.3rem;
}
.img-button div.h1::before, div.h1.flag-1::before {
width: 0;
height: 0;
}
}
/* 20191115追記 エディター用css*/

.blog div,.blog p{
font-size: 16px;
font-size: 1.6rem;
line-height: 1.7;
letter-spacing: 0.05em;
text-align: left;
}

.blog h2,.blog h3,.blog h4,.blog h5,.blog h6{
font-size: 18px;
font-size: 1.8rem;
font-weight: normal;
padding: 0.8em 1.5em;
position: relative;
border: none;
}
.blog h2{
line-height: 1.7;
font-weight: bold;
border-bottom: 1px dotted #666;
border-top: 1px dotted #666;
padding: 2em 1em;
background: none;
}
.blog h3{
border-left: 5px solid #FFC107;
background: #ffffee;
}
.blog h3::before {
content: '';
width: 3px;
height: 58px;
background-color: #fdd96e;
position: absolute;
left: 2px;
top: 0px;
}
.blog h4{
background: #fff3ec;
}
.blog h5{
border-left: 5px solid #c90000;
background: #fff7f7;
}
.blog h5::before {
content: '';
width: 3px;
height: 58px;
background-color: #c90000;
position: absolute;
left: 2px;
top: 0px;
}
.blog h6,h2.flower{
position: relative;
background: none;
border: none;
padding-left: 3em;
}
.blog h6::before,h2.flower::before{
position: absolute;
content: "";
background-image: url(https://okamotopbc.jp/tokachi-plaza/wp-content/uploads/2019/07/flower.jpg);
top: 0.55em;
left: 0.5em;
width: 1.8em;
height: 1.7em;
background-size: cover;
}

@media only screen and (max-width:600px){
.blog div, .blog p {
font-size: 14px;
font-size: 1.4rem;
}
.blog h2,.blog h3,.blog h4,.blog h5,.blog h6{
font-size: 14px;
font-size: 1.4rem;
}
.blog h3::before,
.blog h5::before {
height: 47px;
width: 2px;
}
}