@charset "UTF-8";

/*-------------------------------------------------
.parts
------------------------------------------------*/
/* ・ */
.mark-disc li {
  position: relative;
  padding-left: 1.2em;
}
.mark-disc li::before {
  position: absolute;
  content: '・';
  left: 0;
  top: 0;
}
.mark-disc li + li {
  margin-top: 1em;
}


/* img border */
img.brd {
  border: 1px solid #ccc;
}


/* img padding */
img.pdg10 {
  padding: 10px;
}
img.pdg20 {
  padding: 20px;
}


/*-------------------------------------------------
.post-heading
------------------------------------------------*/
.post-heading {
  /* margin-block-start: 30px; */
}
.post-heading .post-date {
  display: flex;
  align-items: center;
}
.post-heading .post-date .post-release {
  margin: 0 1em 0 0;
  font-size: 13px;
}
.post-heading .post-date .post-release i {
  margin: 0 4px 0 0;
}
.post .post-heading .post-date .post-update span:nth-child(1) {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-size: 12px;
}
.post-heading .post-date .post-update span:nth-child(2) {
  font-family: 'Roboto';
  font-weight: 400;
  font-size: 13px;
}

.post-heading .post-cat {
  display: flex;
  gap: 10px;
}
.post-heading .post-cat li a {
  display: inline-block;
  margin: 14px 0 0;
  padding: 4px 8px 6px;
  background-color: var(--primary-darkblue);
  color: #fff;
  font-size: 13px;
}
.post-heading .post-cat li a span {
  display: block;
}

.post-heading h1 {
  margin: 20px 0 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: .12em;
}
.post-heading h1 code {
  font-weight: 600;
}

.post-heading .post-thumb {
  margin: 20px 0 0;
}

@container main (inline-size >= 540px) {
  .post-heading {
    /* margin-block-start: 40px; */
  }
}

@container main (inline-size >= 769px) {
  .post-heading {
    /* margin-block-start: 50px; */
  }
}



/*-------------------------------------------------
.post-content
------------------------------------------------*/
.post-content {
  margin-block-start: 40px;
}

.post-content p,
.post-content dt,
.post-content dd {
  line-height: 2.2;
}
.post-content li {
  line-height: 1.8;
}

.post-content code {
  margin-inline: .3em;
  padding: .2em .4em;
  border-radius: 2px;
  background-color: #eee;
  font-family: 'Source Code Pro';
  font-weight: 500;
  letter-spacing: .08em;
}
.post-content code.mgn-i-e {
  margin-inline: 0 .3em;
}

/* .post-content > * + * {
  margin-block-start: 40px;
} */

@container main (inline-size >= 540px) {
  .post-content {
    margin-block-start: 50px;
  }
}

@container main (inline-size >= 769px) {
  .post-content {
    font-size: 16px;
  }
  .post-content {
    margin-block-start: 60px;
  }
}

@media (width >= 600px) {
  /* .post-content > * + * {
    margin-block-start: 60px;
  } */
  /* .post-content h3 {
    padding: 20px;
    font-size: 20px;
  } */
}


/*-------------------------------------------------
.lead
------------------------------------------------*/
.post-content .lead > * + * {
  margin-block-start: 2em;
}



/*-------------------------------------------------
section
------------------------------------------------*/
.post-content section {
  margin-block-start: 60px;
}

.post-content section .sec-content > * + * {
  margin-block-start: 2em;
}
.post-content section .sec-content > * + *.mbs-l {
  margin-block-start: 3em;
}

.post-content section .content + .content {
  margin-block-start: 40px;
}

.post-content section .content > *:nth-child(n+3) {
  margin-block-start: 40px;
}

@container main (inline-size >= 540px) {
  .post-content section {
    margin-block-start: 70px;
  }
  .post-content section .content + .content {
    margin-block-start: 50px;
  }
}

@container main (inline-size >= 769px) {
  .post-content section {
    margin-block-start: 100px;
  }
  .post-content section .content + .content {
    margin-block-start: 60px;
  }
}



/*-------------------------------------------------
section h2.h2-ttl
------------------------------------------------*/
/* .post-content section h2.h2-ttl { */
.post-content h2.h2-ttl {
  /* position: relative; */
  margin-block-end: 30px;
  padding: 14px 20px;
  background-color: var(--color-black);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .14em;
  line-height: 1.5;
  color: white;
}
/* .post-content section h2.h2-ttl::after {
  position: absolute;
  inset-block-end: -14px;
  inset-inline-start: 14px;
  inline-size: 0;
  block-size: 0;
  content: '';
  border-width: 14px 22px 0 22px;
  border-style: solid;
  border-color: var(--color-black) transparent transparent transparent;
} */
/* .post-content section h2.h2-ttl code {
  font-weight: 600;
} */

@container main (inline-size >= 540px) {
  /* .post-content section h2.h2-ttl { */
  .post-content h2.h2-ttl {
    margin-block-end: 40px;
    padding: 16px 22px;
    font-size: 18px;
  }
  /* .post-content section h2.h2-ttl::after { */
  .post-content h2.h2-ttl::after {
    inset-block-end: -16px;
    inset-inline-start: 16px;
    border-width: 16px 24px 0 24px;
  }
}

@container main (inline-size >= 769px) {
  /* .post-content section h2.h2-ttl { */
  .post-content h2.h2-ttl {
    padding: 20px 26px;
    font-size: 20px;
  }
  /* .post-content section h2.h2-ttl::after { */
  .post-content h2.h2-ttl::after {
    inset-block-end: -20px;
    inset-inline-start: 20px;
    border-width: 20px 30px 0 30px;
  }
}



/*-------------------------------------------------
section h3
------------------------------------------------*/
.post-content section h3 {
  margin-block-end: 16px;
  padding-block-end: 10px;
  border-bottom: 1px solid currentColor;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: .1em;
}

@container main (inline-size >= 540px) {
  .post-content section h3 {
    margin-block-end: 20px;
    padding-block-end: 12px;
    font-size: 17px;
  }
}

@container main (inline-size >= 769px) {
  .post-content section h3 {
    margin-block-end: 30px;
    padding-block-end: 14px;
    font-size: 19px;
  }
}



/*-------------------------------------------------
section h4
------------------------------------------------*/
.post-content h4 {
  margin-block-end:20px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--txt-clr-primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

@media (width >= 600px) {
  .post-content h4 {
    font-size: 20px;
  }
}



/*-------------------------------------------------
.toc
------------------------------------------------*/
.post-content .toc {
  margin-block-start: 30px;
  background-color: var(--color-lightgray);
}

.post-content .toc h2 {
  padding: 16px 1em 0;
  /* background-color: var(--color-lightblue); */
  text-align: center;
  font-weight: 500;
}

.post-content .toc ol {
  counter-reset: count 0;
}
.post-content .toc ol li {
  position: relative;
}
.post-content .toc ol li::before {
  display: inline-block;
  counter-increment: count 1;
  content: counters(count, "-") ". ";
  padding-inline-end: .4em;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}
.post-content .toc > ol > li {
  padding-inline-start: 1em;
}
.post-content .toc ol > li + li {
  margin-block-start: 1.2em;
}
.post-content .toc ol.toc-list > li > ol {
  padding-inline-start: 1.5em;
}
.post-content .toc ol > li > ol > li {
  margin-block-start: 1em;
  padding-inline-start: 2em;
}
.post-content .toc ol a {
  position: relative;
  border-block-end: 1px solid currentColor;
  line-height: 1.6;
  transition: opacity .4s;
}
.post-content .toc .toc-list a:hover {
  opacity: .7;
}
.post-content .toc > ol > li > ol > li a {
  font-size: 14px;
}

@container main (inline-size >= 540px) {
  .post-content .toc {
    margin-block-start: 50px;
  }
  .post-content .toc h2 {
    padding: 20px 1em 0;
  }
  .post-content .toc > ol {
    padding: 30px;
  }
}

@container main (inline-size >= 769px) {
  .post-content .toc {
    margin-block-start: 60px;
  }
  .post-content .toc h2 {
    padding: 30px 1em 0;
  }
  .post-content .toc > ol {
    padding: 40px;
  }
  .post-content .toc > ol > li + li {
    margin-block-start: 1.4em;
  }
}



/*-------------------------------------------------
.pochipp-box
------------------------------------------------*/
.pochipp-box .pochipp-box__title a {
  line-height: 1.6;
}
.pochipp-box .pochipp-box__logo {
  display: none !important;
}





/*///////////////////////////////////////////////////////////////////////

tb 520〜959px

///////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 520px) {

/*-------------------------------------------------
.post-heading (tb)
------------------------------------------------*/
.post-heading .post-update span:nth-child(1) {
  font-size: 13px;
}
.post-heading .post-update span:nth-child(2) {
  font-size: 14px;
}

.post-heading h1 {
  font-size: 26px;
}

.post-heading .post-thumb {
  margin: 30px 0 0;
}



/*-------------------------------------------------
.post-sec (tb)
------------------------------------------------*/
.post-sec {
  margin: 70px 0 0;
}



}





/*///////////////////////////////////////////////////////////////////////

px 960px〜

///////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 960px) {

  /*-------------------------------------------------
.post-heading (pc)
------------------------------------------------*/
.post-heading h1 {
  font-size: 30px;
}

.post-heading .post-thumb {
  margin: 40px 0 0;
}


/*-------------------------------------------------
.post-sec (pc)
------------------------------------------------*/
.post .post-sec {
  margin: 100px 0 0;
}




}