@charset "UTF-8";

/* 目次 */
.toc{
border: 2px solid;
padding:10px 20px;
}
.toc__ttl{
border-bottom: 1px solid;
padding: 5px 0;
margin-bottom: 10px;
}

#toc .toc__list{
margin: 0 !important;
padding: 0 !important;
list-style-type: none !important;
}
#toc li a{
font-size: 90%;
color: inherit !important;
/* text-decoration: none !important; */
}

/* ブログカード */
.blogcard {
width: 100%;
margin: 30px 0;
background-color: #fff;
border: 1px solid #ccc;
word-wrap: break-word;
display: flex;
color: #000;
position: relative;
}
.post_content a{
color: #aa0000;
text-decoration: underline;
}

.blogcard * + *{
margin-top: 0 !important;
}
.blogcard-img {
width: 280px;
padding: 10px 0 10px 10px;
}
.blogcard-img img{
vertical-align: bottom;
}
.blogcard-content {
width: calc(100% - 280px);
padding: 10px;
color: #333;
}
.blogcard-title {
font-size: 16px;
font-weight: bold;
margin: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.blogcard-excerpt {
font-size: 14px;
line-height: 1.6;
margin-top: 10px !important;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}

@media screen and (max-width: 1023px) {
.blogcard {
flex-direction: column;
}
.blogcard-img {
width: 100%;
padding: 10px 10px 0 10px;
}
.blogcard-content{
width: 100%;
}
}

.blogcard--ttl{
margin-top: calc(30px + 28px) !important;
position: relative;
}
.blogcard .card_title{
position: absolute;
top: -29px;
left: -1px;
background: #AA0000;
padding: 0 10px;
height: 28px;
line-height: 28px;
font-size: 1.4rem;
color: #fff;
border-radius: 3px 3px 0 0;
}


/* 記事 */
.post_content {
margin-bottom: 2em;
}

.post_content__ttl{
font-size: 2.8rem;
}

.post_content__header{
display: flex;
justify-content: space-between;
}

.post_content__cat {
font-size: 1.2rem;
border-radius: 4px;
padding: 3px 8px;
border: 1px solid;
}
.post_content__time {
font-size: 1.2rem;
}
.post_content__tag {
display: flex;
gap: 10px;
}
.post_content__tag a{
font-size: 1.2rem;
background-color: #EEEEEE;
padding: 3px 20px;
border-radius: 12px;
}

.post_content_tmn{
margin-top: 20px;
}

.post_content{
margin-top: 20px; 

}

.post_content * + *{
margin-top: 1em;
}

.post_content table th,
.post_content table td{
border: 1px solid #ccc;
padding: 10px;
}

.post_content ul {
list-style-type: disc !important;
padding-left: 1em;
}
.post_content ol {
list-style-type: decimal!important;
padding-left: 1em;
}
.post_content ul li,
.post_content ol li {
margin: 0.2em;
}
.post_content ul ul, 
.post_content ul ol,
.post_content ol ul,
.post_content ol ol {
margin: 0;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
}
.post_content .wp-block-gallery ul {
padding-left: 0;
}
.post_content h1,
.post_content h2,
.post_content h3,
.post_content h4,
.post_content h5,
.post_content h6 {
line-height: 1.25;
font-weight: bold;
}
.post_content h4,
.post_content h5,
.post_content h6 {
font-size: 2rem;
padding: 9px 10px;
}
.post_content h2 {
font-size: 2.4rem;
padding: 25px;
background-color: #eee;
border-radius: 6px;
}
.post_content h3 {
border-left: 7px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: 2.2rem;
padding: 12px 20px;
}
.post_content h4 {
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
}
.post_content h5 {
border-bottom: 2px solid #ccc;
}
.post_content h6 {
border-bottom: 1px solid #ccc;
}
.post_content .column-wrap h1, .post_content .column-wrap h2, .post_content .column-wrap h3, .post_content .column-wrap h4, .post_content .column-wrap h5, .post_content .column-wrap h6 {
margin-top: 0;
}

.post_content .marker-pink{
background:linear-gradient(transparent 60%, #FFDCDC 0%);
}
.post_content .text-underline{
text-decoration:underline;
}
.post_content .text-red{
color: #AA0000;
font-weight: bold;
}
/************************************
** 引用（blockquote）
************************************/
blockquote {
background-color: #eee;
border: 1px solid #ccc;
padding: 1.4em 1.8em;
position: relative;
}
blockquote::before, blockquote::after {
color: #C8C8C8;
font-family: serif;
position: absolute;
font-size: 300%;
}
blockquote::before {
content: "“";
line-height: 1.1;
left: 10px;
top: 0;
}
blockquote::after {
content: "”";
line-height: 0;
right: 10px;
bottom: 0px;
}
blockquote cite {
font-size: 0.7em;
}


/* ページ送り */
.post__navigation{
margin-top: 80px;
padding: 10px 0;
display: flex;
justify-content: space-between;
border-top:1px solid #AAAAAA ;
border-bottom:1px solid #AAAAAA ;
}

.post__navigation > div a{
display: flex;
align-items: center;
gap: 10px;
line-height: 1;
}

.post__navigation_next{
margin-left: auto;
}

.post__navigation_next span img{
transform: rotate(180deg);
}



/* 関連記事 */

.related{
margin-top: 60px;
}
.relatedPost{
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.relatedPost__item{
width: calc((100% - 40px) / 3);
}
.relatedPost__item .img{
border-radius: 6px;
}
.relatedPost__txt{
margin-top: 10px;
}

.relatedPost__item .time{
text-align: right;
}
@media screen and (max-width: 1023px) {
.relatedPost{
flex-direction: column;
}
.relatedPost__item{
width: 100%;
display: flex;
gap: 10px;
align-items: flex-start;
}

.relatedPost__imgWrap{
width:40%;
}
.relatedPost__txt{
flex: 1;
line-height: 1.4;
vertical-align: baseline;
margin-top: 0;
}
}
/* PageTop */
.pagetop{
border: none;
cursor: pointer;
background: transparent;
position: fixed; 
padding: 0;
right: 20px;
bottom: 20px;
width: 60px;
height: 60px;
font-size: 20px;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s, bottom 0.3s;
}

.pagetop.is-show {
opacity: 1;
visibility: visible;
}

.pagetop.is-stop {
position: absolute; 
top:-80px; 
}
@media screen and (max-width: 1023px) {
.pagetop{
width: 40px;
height: 40px;
}
.pagetop.is-stop {
top:-60px;    
}
}

/* CTA */
.post_cta{
margin-top: 50px;
text-align: center;
background-color: #eee;
padding: 40px 20px;
}
.post_cta p{
font-size: 1.8rem;
font-weight: bold;
}
.post_cta p span{
  font-size: 1.4rem;
  display: block;
}
.post_ctaWrap{
display: flex;
gap: 20px;
justify-content: center;
margin-top: 30px;
}
.post_ctaBtn{
font-size: 1.6rem;
background-color: #AA0000;
color: #ffffff !important;
height: 50px;
width: 240px;
border-radius: 23px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
border: 1px solid #AA0000;
margin: 0 !important;
text-decoration: none !important;
}

.post_ctaBtn span{
position: relative;
line-height: 0;
margin-right: 5px;
}
.post_ctaBtn span::before{

}
.post_ctaBtn span::after{
content: "";
position: absolute;
top: 0;
left: 0;
}

.post_ctaBtn:hover span::after{
animation: btnhover 0.5s forwards;
}
.post_ctaBtn span::after{
animation: btnnohover 0.5s forwards;  
}

@keyframes btnhover {
100% {
opacity: 1;
}
}

@keyframes btnnohover {
100% {
opacity: 0;
}
}

.post_ctaBtn--contact span::before{
content: url('../img/contact-icon.svg');
}
.post_ctaBtn--document span::before{
content: url('../img/doc-icon.svg');
}

.post_ctaBtn:hover{
background-color: #fff;
color: #AA0000 !important;
}
.post_ctaBtn--contact span::after{
content: url('../img/contact-icon-r.svg');

}
.post_ctaBtn--document span::after{
content: url('../img/doc-icon-r.svg');
}

@media screen and (max-width: 1023px) {
.post_ctaWrap{
flex-direction: column;
align-items: center;
}
.post_cta p{
font-size: 1.4rem;
}
}