@charset "utf-8";
/* CSS Document */
/* # =================================================================
   # Foundation
   # ================================================================= */
html:has(.p-post) {
   scroll-padding-top: 100px;
   scroll-behavior: smooth;
}
/* # =================================================================
   # Project
   # ================================================================= */
:where(.p-post) p {
   margin-top: 1.5em; 
}
:where(.p-post) a {
   color: inherit;
   transition: opacity var(--animation-sec);
}
:where(.p-post) img {
   display: block;
   margin-top: 1.6rem;        
   margin-right: auto;
   margin-left: auto;
}
:where(.p-post) h4 {
   margin-top: 1.5em;
}
:where(.p-post) .highlight {
   background: linear-gradient(transparent 60%, #ece31a 60%);
}

@media (hover: hover) {
   :where(.p-post) a:hover {
      opacity: var(--hover-opacity);
   }
}
:where(.p-post) hr {
   margin-top: 1.5em; 
   margin-bottom: 1.5em;   
}
.p-post .ez-toc-custom {
   margin-top: 4rem;
   padding-right: 2.5rem;
   padding-bottom: 2.5rem;
   padding-left: 2.5rem;
   border-radius: 20px;
   border: 1px solid var(--color-green);
   background-color: #FFF;
   background-image: url('../images/common/bg-toc-left.webp'), url('../images/common/bg-toc-right.webp');
   background-repeat: no-repeat;
   background-position: left top -9.2rem, right -8.8rem bottom -8rem;
   background-size: 20.1rem auto, 21rem auto;
}
.p-post .ez-toc-title {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   min-height: 6.6rem;
   margin: 0;
   padding-top: .5em;
   padding-bottom: .5em;
   color: var(--color-black);
   font-weight: var(--fontweight-bold);
   font-size: 1.8rem;
   line-height: 1.5;
   text-align: center;
   word-break: keep-all;
}
.p-post .ez-toc-list>li,
.p-post .ez-toc-list ul>li {
   padding-left: 1em;  
   text-indent: -1em;
   font-size: 1.6rem;
}
.p-post .ez-toc-list>li {
   padding-top: .625em;
   padding-bottom: .625em;
   border-top: 1px dashed #EBEBE6;
}
.p-post .ez-toc-list>li::before,
.p-post .ez-toc-list ul>li::before {
   content: '・';
}
.p-post .ez-toc-link {
   color: inherit;
   font-weight: var(--fontweight-bold);
   text-decoration: none;
   transition: opacity var(--animation-sec);
}
.p-post .ez-toc-section,
.p-post .ez-toc-section-end {
   order: 1;
}
@media (max-width: 767.98px) {
   .p-post .ez-toc-custom {
      margin-top: 2.8rem;
      padding-right: 25px;
      padding-left: 25px;
      background-image: url('../images/common/bg-toc-left-sp.webp'), url('../images/common/bg-toc-right-sp.webp');
      background-position: left -22px top -98px, right -84px bottom;
      background-size: 202px auto, 213px auto;
   }
   .p-post .ez-toc-title {
      font-size: 1.6rem;
   }
   .p-post .ez-toc-list>li,
   .p-post .ez-toc-list ul>li {
      font-size: 1.4rem;
   }
   .p-post .ez-toc-list>li {
      padding-top: .714em;
      padding-bottom: .714em;
   }
}
.p-postList__item+.p-postList__item {
   margin-top: 30px; 
}
.p-postList__link {
   display: flex;
   gap: 0 16px;
   text-decoration: none;
   transition: opacity var(--animation-sec);
}
.p-postList__img {
   position: relative;
   flex: 0 0 130px;
   height: 82px;
}
.p-postList__mask {
   mask-image: url('../images/common/img-post-mask.svg');
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: contain;
}
.p-postList__mask>img {
   width: 130px;
   height: 75px;
   object-fit: cover;
}
.p-postList__arrow {
   position: absolute;
   right: 6px;
   bottom: 6px;
}
.p-postList__desc {
   flex: 1;  
}
.p-postList__meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0 8px;
}
.p-postList__date {
   color: #868686;
   font-weight: var(--fontweight-medium);
   font-size: 1.5rem;
}
.p-postList__cate {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 9rem;
   min-height: 18px;
   border-radius: 9999px;
   background-color: var(--color-green);
   color: #FFF;
   font-size: 1.2rem;
}
.p-postList__txt {
   margin-top: .3em;
   margin-bottom: 0;
   color: var(--color-green);
   font-weight: var(--fontweight-bold);
   display: -webkit-box;             
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 4; 
   line-height: 1.5;
}
.p-postList__txt .--unclamp {
   margin-top: .3em;
   margin-bottom: 0;
   color: var(--color-green);
   font-weight: var(--fontweight-bold);
   display: -webkit-box;             
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.5;
}
.p-postList-bottom {
   display: inline-block;
   margin-bottom: 1.5rem;
}
@media (max-width: 767.98px) {
   .p-postList.--s .p-postList__img {
      flex: 0 0 80px;
      height: 52px;
   }
   .p-postList.--s .p-postList__img .p-postList__mask>img{
      width: 80px;
      height: 47px;
   }
   .p-postList.--s .p-postList__img .c-arrow {
      width: 12px;
      height: 12px;
      right: 4px;
      bottom: 4px;
   }
   .p-postList.--s .p-postList__img .c-arrow__icon {
      width: 8px;
      height: 8px;
      margin-top: -1px;
      margin-right: -1px;
   }
   .p-postList__date {
      font-size: 1.3rem;
   }
   .p-postList.--s .p-postList__txt {
      margin-top: 0.25em;
      font-size: 1.4rem;
      -webkit-line-clamp: 2;      
   }
   .p-postList.--s .p-postList__txt.--unclamp {
      margin-top: 0.25em;
      font-size: 1.4rem;   
      -webkit-line-clamp: initial;
      display: block;   
   }
}
.p-post__date {
   display: flex;
   align-items: center;
   gap: 0 8px;
   border-bottom: 1px solid #E1E1E1;
   padding-bottom: 1rem;
   font-weight: var(--fontweight-medium);
   font-size: 1.2rem;
}
.p-post__date::before {
   width: 1.333em;
   height: 1.666em;
   background: url('../images/post/icon-post-reload.webp') no-repeat center / contain;
   content: '';
}
.p-post-meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0 8px;
}
.p-post-meta__date {
   color: #868686;
   font-weight: var(--fontweight-medium);
   font-size: 1.5rem;
}
.p-post-meta__cate {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 9rem;
   min-height: 18px;
   border-radius: 9999px;
   background-color: var(--color-green);
   color: #FFF;
   font-size: 1.2rem;
}
@media (max-width: 767.98px) {
   .p-post-meta__date {
      font-size: 1.3rem;
   }
}
.p-post-toc {
   margin-top: 1rem;
   margin-bottom: 1rem;
   padding-top: 20px;
   padding-right: 25px;
   padding-bottom: 20px;
   padding-left: 25px;
   border-top: 1px solid var(--color-green); 
   border-bottom: 1px solid var(--color-green);
   background-color: var(--color-light-blue);
}
.p-post-toc__list {
   counter-reset: post-toc-number 0;
}
.p-post-toc__item {
   display: flex;
   color: inherit;
   font-weight: var(--fontweight-medium);
}
.p-post-toc__item+.p-post-toc__item {
   margin-top: .25em;
}
.p-post-toc__item:before {
   flex: 0 0 1.625em;
   counter-increment: post-toc-number 1;
   content: counter(post-toc-number) '.';
}
.p-post-toc__link {
   flex: 1;
   color: inherit;
   transition: opacity var(--animation-sec);
}
.p-post__img {
   width: 100%;
   margin-top: 1.6rem;
}
.p-post-reference {
   display: flex;
   gap: 0 10px;
   color: inherit;
   text-decoration: none;
}
.p-post-reference+.p-post-reference {
   margin-top: 1rem;
}
.p-post-reference__img {
   flex: 0 0 106px;
}
.p-post-reference__img>img {
   width: 100%;
}
.p-post-reference__txt {
   flex: 1;
   margin-top: -.375em;
}
.p-post-faq__q,
.p-post-faq__a {
   display: flex;
}
.p-post-faq__q {
   font-weight: var(--fontweight-bold);
}
.p-post-faq__q::before,
.p-post-faq__a::before {
   flex: 0 0 2em;
}
.p-post-faq__q::before {
   content: 'Q.';
}
.p-post-faq__a::before {
   content: 'A.';
}
.p-post-faq__checklist .c-check {
   gap: 0 10px;
}
.p-post-cta {
   margin-top: 7rem;
   margin-right: calc(50% - 50vw);
   margin-bottom: 7rem;
   margin-left: calc(50% - 50vw);
   padding-top: 4rem;
   padding-bottom: 4rem;
}
.p-post-cta__logo>img {
   margin-right: auto;
   margin-left: auto;
   text-align: center;
}
.p-post-cta__lead {
   margin-top: 2rem;
   text-align: center;
}
.p-post-cta .c-btn__icon {
    flex: 0 0 2em;
    height: 1.866em;
}
.p-post-cta__btns {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 1rem 3rem;
   margin-top: 2.2rem;
}
.p-post-cta__btns>* {
   width: 16.5rem;
}
.p-post-cta__btns .c-btn {
   height: 100%;
   padding-right: 8px;
   padding-left: 8px;
   border: 0;
   font-size: 1.5rem;
}
.p-post-cta__btns .c-btn.--icon {
    gap: 0 8px;
}
@media (max-width: 767.98px) {
   .p-post-cta__lead {
      font-size: 1.4rem;
   }
   .p-post-cta__btns {
      gap: 1rem;
      max-width: 34rem;
      margin-top: 1.2rem;
      margin-right: auto;
      margin-left: auto;
   }
   .p-post-cta__btns>* {
      flex: 0 0 calc((100% - 1rem) / 2);
   }
}
.p-post-author {
   display: flex;
   gap: 0 20px;
}
.p-post-author__img {
   flex:  0 0 7rem;
}
.p-post-author__img>img {
   border-radius: 50%;
}
.p-post-author__desc {
   flex: 1;
}
.p-post-author__title {
   margin-top: 1em;
   margin-bottom: .375em;
   color: var(--color-green);
   font-weight: var(--fontweight-bold);
   font-size: 1.6rem;
   line-height: 2;
}
.p-post-authorBook {
   display: flex;
   gap: 0 10px;
}
.p-post-authorBook__img {
   flex: 0 0 120px;
}
.p-post-authorBook__img>img {
   width: 100%;
}
.p-post-authorBook__text {
   flex: 1;
}
.p-post-authorLinks__link {
   margin-top: 1rem;
}
.p-post-authorLinks__item {
   display: block;
   padding-top: 5px;
   padding-right: 10px;
   padding-bottom: 5px;
   padding-left: 10px;
   background-color: #FFF;
   color: inherit;
   font-weight: var(--fontweight-regular);
   font-size: 1.2rem;
   text-decoration: none;
   transition: opacity var(--animation-sec);
}
@media (max-width: 767.98px) {
   .p-post-author {
      display: block;
   }
   .p-post-author__img {
      float: left;
      margin-right: 2rem;
      margin-bottom: 1rem;
   }
}
.p-post__owner {
   font-size: 1.2rem;
   line-height: 2;
}
.p-post-related {
   padding-top: 3rem;
}
.p-post-related__head {
   position: relative;
   max-width: 24rem;
   margin-right: auto;
   margin-bottom: 4rem;
   margin-left: auto;
   color: var(--color-green);
   font-weight: var(--fontweight-bold);
   font-size: 2rem;
   line-height: 1;
   text-align: center;
}
.p-post-related__head::before {
   position: absolute;
   top: 50%;
   right: 0;
   width: 100%;
   height: 1px;
   background-color: var(--color-green);
   content: '';
}
.p-post-related__head>span {
   display: inline-block;
   position: relative;
   padding-right: 1em;
   padding-left: 1em;
   background-color: #FFF;
}
.p-post-related__list {
   display: flex;
   gap: 2rem;
}
.p-post-related__link {
   color: inherit;
   text-decoration: none;
}
.p-post-related__img>img {
   width: 100%;
   aspect-ratio: 340 /180;
   object-fit: cover;
   border-radius: 10px;
}
.p-post-related__title {
   margin-top: 1em;
   font-size: 1.4rem;
}
.p-post-related__item {
   width: 100%;
   max-width: calc((100% - 6rem)/4);
}
.p-post-sns {
   margin-top: 9rem;
}
.p-post-sns .a2a_svg {
   border-radius: 0px !important;
}
.p-post-sns .a2a_svg.a2a_s_facebook {
   background: url('../images/common/logo-facebook.png') no-repeat center / contain !important;
}
.p-post-sns .a2a_svg.a2a_s_x {
   background: url('../images/common/logo-x.png') no-repeat center / contain !important;
}
.p-post-sns .a2a_svg.a2a_s_line {
   background: url('../images/common/logo-line.png') no-repeat center / contain !important;
}
.p-post-sns .a2a_svg svg {
   display: none !important;
}
.p-post-sns .addtoany_shortcode {
   position: relative;
}
.p-post-sns .addtoany_shortcode::before {
   position: absolute;
   top: -.5em;
   left: 50%;
   translate: -50% -100%;
   width: 100%;
   color: #292929;
   font-weight: var(--fontweight-bold);
   font-size: 16px;
   content: "＼　SNSで記事をシェア　／";
}
@media (max-width: 991.98px) {
   .p-post-related__list {
      flex-wrap: wrap;
   }
   .p-post-related__item {
      width: calc((100% - 2rem)/2);
      max-width: none;
   }
}
@media (max-width: 767.98px) {
   .p-post__checklist>*+* {
      margin-top: 1rem;
   }
   .p-post-faq__q,
   .p-post-faq__a {
      font-size: 1.4rem;
   }
   .p-post-related__list {
      flex-direction: column;
   }
   .p-post-related__item {
      width: 100%;
   }
}
@media (hover: hover) {
   .p-post-toc__link:hover,
   .p-postList__link:hover,
   .p-post-authorLinks__item:hover {
      opacity: var(--hover-opacity);
   }
}
.p-box.--blue.--quote{
   position: relative;
   margin-bottom: 4rem;
   padding-top: 2.5rem;
}
.p-box.--blue.--quote:before{
   display: inline-block;
    position: absolute;
    top: 15px;
    left: 15px;
    content: url("../images/common/quote-before.svg"); 
    width: 20px;
    height: auto;
}
.p-box.--blue.--quote:after{
   display: inline-block;
    position: absolute;
    bottom: 15px;
    right: 15px;
    content: url("../images/common/quote-after.svg"); 
    width: 20px;
    height: auto;
}


.p-postList__cate.--light-green {
   background-color: #7fc057;
}

.p-postList__cate.--pink {
   background-color: #C87A7A;
}
.p-postList__cate.--purple {
   background-color: #938BB1;
}

.p-postList__cate.--orenge {
   background-color: #e38545;
}

.p-postList__cate.--yellow {
   background-color: #ede867;
   color: var(--color-green);
}
.p-postList__cate.--beige {
   background-color: #EBEBE5;
   color: var(--color-green);
}
.p-postList__cate.--dark-blue {
   background-color: #6A89B0;
}

.p-postList__cate.--blue {
   background-color: #5FA39B;
}
.p-post-author__desc>:first-child,
.p-post-authorBook__text>:first-child,
.p-post .c-title-btmLine+*,
.p-post-author__title+*,
.p-post-authorBook__img>img,
.p-post-author__img>img,
.p-post-reference__img>img,
.p-post-faq__body>p {
   margin-top: 0;
}