/*
  ここにある内容

  --- col-1 ---
    ● col-1-post-thumb

  --- col-2 ---
    ● atc ( 投稿の記事部分 )
    ● prev-next

*/


/* ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍   col-1   ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍ */

.col-1-post-thumb {
  position: absolute;
  width: 730px;
  height: clamp(540px, 65dvh, 702px);
  bottom: 0px;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 1280px) and (max-height: 830px) {
  .col-1-post-thumb {
    top: 290px;
    bottom: auto;
  }
}

.col-1-post-thumb img {
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}


/* ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍   col-2   ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍ ◌ ◍ ● ◍ */

.col-2 hr {
  border: none;
  padding: 0;
  width: 88cqw;
  height: 1px;
  background-color: var(--hover);
  margin-inline: auto;
  margin-block: 3rem 1rem;
  transform: scaleX(1.02);
  transform-origin: center;
}

.atc {
  margin-top: 2.5cqw;
  width: 88cqw;
}

.atc a {
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.15em;
  text-decoration-color: #bbb;
}

.atc a:hover,
.atc a:focus-within {
  opacity: 0.7;
}

.atc-meta {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  font-family: var(--rubik);
  color: var(--hover);
}

.atc-number {
  letter-spacing: 0.07em;
}

.atc-number::before {
  content: "#";
}

.date-gr {
  justify-self: end;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-align: end;
}


/* - - - - - - - - h1 article title - - - - - - - - - - */

.atc h1 {
  margin-block: 1.3rem 2rem;
}


/* - - - - - - - - table of contents & ad - - - - - - - - */

.ad-toc-gr {
  width: 88cqw;
  display: grid;
  grid-template-columns: 1fr 300px;
  margin: 0 auto;
  column-gap: 10px;
}


/* - - - - - - - - - - - - - - - - - - - - */

.atc-toc svg {
  height: 25px;
  margin: 10px 0 20px;
}

.atc-toc-ul li {
  position: relative;
  margin-block: 0.7em 0;
  margin-inline: 0.2em 0;
  font-family: var(--rubik);
  padding-left: 1.8em;
  text-indent: -0.4em;
}

li.toc-cap1::before,
li.toc-cap6::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3.5px;
  display: inline-block;
  height: 1em;
  width: 1em;
  background: url("../ui/single__toc-li_01.svg") no-repeat center / contain;
}

li.toc-cap2::before,
li.toc-cap7::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3.5px;
  display: inline-block;
  height: 1em;
  width: 1em;
  background: url("../ui/single__toc-li_02.svg") no-repeat center / contain;
}

li.toc-cap3::before,
li.toc-cap8::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3.5px;
  display: inline-block;
  height: 1em;
  width: 1em;
  background: url("../ui/single__toc-li_03.svg") no-repeat center / contain;
}

li.toc-cap4::before,
li.toc-cap9::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3.5px;
  display: inline-block;
  height: 1em;
  width: 1em;
  background: url("../ui/single__toc-li_04.svg") no-repeat center / contain;
}

li.toc-cap5::before,
li.toc-cap10::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3.5px;
  display: inline-block;
  height: 1em;
  width: 1em;
  background: url("../ui/single__toc-li_05.svg") no-repeat center / contain;
}


/* - - - - - - - - - - - - - - - - - - - - */

.atc-ad {
  display: grid;
  width: min(100%, 300px);
  align-content: start;
  padding-top: 10px;
}

.atc-ad-bg {
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  aspect-ratio: 6 / 5;
  background-color: var(--bg-main);
}

.atc-ad a {
  position: relative;
  grid-area: 1 / 1 / -1 / -1;
  width: 100%;
  aspect-ratio: 6 / 5;
  overflow: hidden;
}

.atc-ad figure {
  width: 100%;
}

.atc-ad img {
  width: 100%;
  height: auto;
}

.atc-ad span {
  position: absolute;
  right: 1cqw;
  bottom: 1cqw;
  display: inline-block;
  padding: 0 0.3em;
  font-family: var(--rubik);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-align: end;
  color: #f9f9f9;
  background-color: #333;
  opacity: 0.8;
  cursor: pointer;
}


/* - - - - - - - - - h2 / h3 / nomal p - - - - - - - - - */

.atc-content h2::before {
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  margin-inline: auto;
  margin-bottom: 1rem;
  background-color: var(--hover);
  transform: scaleX(1.02);
  transform-origin: center;
}

.atc-content h2 {
  font-size: 1.3rem;
  margin-block: 3rem 2rem;
}

.atc-content h3 {
  margin-block: 2.5rem 1rem;
  font-size: 1.1rem;
}

.atc-content h3::before {
  content: "–– ";
  font-family: var(--m-plus-1p);
}

.atc-intro p,
.atc-content p {
  margin-block: 1rem 0;
}

/* = = = = = = = = other text appearance = = = = = = = = */
.gap0,
p.gap0 {
  margin-block: 0;
}

p.gap05,
figcaption.gap05 {
  margin-block: 0.5rem 0;
}

.gap1,
ul.gap1,
ol.gap1 {
  margin-block: 1rem 0;
}

.gap2,
p.gap2,
ul.gap2,
ol.gap2 {
  margin-block: 2rem 0;
}

.gap3,
p.gap3,
ul.gap3,
ol.gap3 {
  margin-block: 3rem 0;
}

.gap4,
p.gap4,
ul.gap4,
ol.gap4 {
  margin-block: 4rem 0;
}

.mag-st15 {
  margin-inline-start: 1.5rem;
}

.mag-st30 {
  margin-inline-start: 3rem;
}


/* - - - - - - - - - - - - - - - - - - - - */

.w500 {
  font-weight: 500;
}

.gray {
  font-size: 0.8rem;
  color: #888;
}


/* - - - - - - - - - - - - - - - - - - - - */

p.hanging {
  padding-left: 1.65em;
  text-indent: -1.65em;
}


/* - - - - - - - - - - - - - - - - - - - - */

.bullet li {
  margin-block: 0.5rem;
  padding-left: 1.3em;
  text-indent: -1.1em;
}

.bullet li::before {
  content: "●";
  font-size: 0.5em;
  vertical-align: 0.3em;
  letter-spacing: 1.2em;
  color: #555;
}


/* - - - - - - - - - - - - - - - - - - - - */

.bull-emoji li {
  margin-block: 0.5rem;
  padding-left: 1.65em;
  text-indent: -1.65em;
}


/* - - - - - - - - - - - - - - - - - - - - */

.ol-mag-st0 {
  margin-inline-start: 1.3rem;
}

.ol-mag-st15 {
  margin-inline-start: 2.8rem;
}

.ol-mag-st30 {
  margin-inline-start: 4.3rem;
}

.ol-mag-st0 li,
.ol-mag-st15 li,
.ol-mag-st30 li {
  margin-block: 0.5rem;
}


/* - - - - - - - - - - - - - - - - - - - - */

span.icon-ex {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  background: url("../ui/open_in_new.svg") no-repeat center / contain;
  vertical-align: -3px;
}


/* = = = = = = = = = = = = table = = = = = = = = = = = */

.two-cols-table {
  width: 90%;
  margin-inline-start: 1.5rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--hover);
  border-radius: 8px;
  overflow: hidden;
}

.two-cols-table th {
  background-color: var(--hover-trsp);
}

.two-cols-table th,
.two-cols-table td {
  border-top: 1px solid var(--hover);
  border-left: 1px solid var(--hover);
  padding: 12px 12px 12px 24px;
  text-align: left;
  vertical-align: top;
  text-indent: -8px;
}

.two-cols-table tr:first-child th {
  border-top: none;
}

.two-cols-table td:first-child,
.two-cols-table th:first-child {
  border-left: none;
}


/* = = = = = = = = = = = = pictures = = = = = = = = = = = */

.fig-w100 img,
.fig-h150 img,
.fig-h180 img,
.fig-h210 img,
.fig-h240 img,
.fig-h300 img,
.img-2cols-w80 img,
.img-2cols-w100 img,
.img-3cols-w100 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* △・△・△・△・△・△ img △・△・△・△・△・△ */


/* - - - ▼ figure に指定 - - - */
.fig-w100 {
  width: 100%;
  padding: 10px;
}

.fig-h150 {
  width: auto;
  height: 150px;
  padding: 10px;
  align-self: center;
}

.fig-h180 {
  width: auto;
  height: 180px;
  padding: 10px;
  align-self: center;
}

.fig-h210 {
  width: auto;
  height: 210px;
  padding: 10px;
  align-self: center;
}

.fig-h240 {
  width: auto;
  height: 240px;
  padding: 10px;
  align-self: center;
}

.fig-h300 {
  width: auto;
  height: 300px;
  padding: 10px;
  align-self: center;
}

@media (max-width: 499px) {
  .fig-h150 {
    height: 135px;
  }

  .fig-h180 {
    height: 160px;
  }

  .fig-h210 {
    height: 190px;
  }

  .fig-h240 {
    height: 215px;
  }

  .fig-h300 {
    height: 270px;
  }
}

/* - - - ▼ div に指定 - - - */
.img-2cols-w85 {
  width: 85%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.img-2cols-w100 {
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
}

.img-3cols-w100 {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 499px) {
  .img-2cols-w85.s-1col,
  .img-2cols-w100.s-1col,
  .img-3cols-w100.s-1col {
    grid-template-columns: 1fr;
  }

  .img-2cols-w85 {
    width: 100%;
  }
}

@media (max-width: 699px) {
  .img-2cols-w85.m-1col,
  .img-2cols-w100.m-1col,
  .img-3cols-w100.m-1col {
    grid-template-columns: 1fr;
  }
}


/* - - - - - - - - - - - - - */
.jus-end {
  justify-self: end;
}

.jus-start {
  justify-self: start;
}


/* ---------------   thank u 4 reading   --------------- */

.hr-tyfr {
  margin-top: 3rem;
  width: 102%;
  display: grid;
  grid-template-columns: 1fr 170px;
  align-items: center;
  color: var(--hover);
  transform: translateX(-1%);
}

.col-2 hr {
  border: none;
  padding: 0;
  width: 88cqw;
  height: 1px;
  background-color: var(--hover);
  margin-inline: auto;
  margin-block: 3rem 1rem;
  transform: scaleX(1.02);
  transform-origin: center;}



.hr-tyfr-line {
  height: 1px;
  background-color: var(--hover);
}

.hr-tyfr span {
  font-family: var(--rubik);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-align: end;
  cursor: default;
}


/* ------------------   support note   ------------------ */

.support-note {
  margin-top: 70px;
}

.support-note a {
  display: inline-block;
  margin-inline: 0.5em;
}

.support-note img {
  width: auto;
  height: 2em;
  display: inline-block;
  vertical-align: -0.65em;
}


/* -------------------   prev next   ------------------- */
.prev-next {
  margin-top: 70px;
  width: 88cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.to-prev {
  grid-area: 1 / 1 / -1 / 2;
  width: 41cqw;
}

.to-next {
  grid-area: 1 / 2 / -1 / 3;
  width: 41cqw;
  justify-self: end;
  text-align: end;
}

.to-prev span,
.to-next span {
  display: inline-block;
  color: var(--orange);
  font-size: 1.25rem;
  transform: scale(1);
  transform-origin: center bottom;
  transition: transform 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.to-prev figure,
.to-next figure {
  width: 100%;
  aspect-ratio: 345 / 300;
}

.to-prev img,
.to-next img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
}

.prev-next a:hover span,
.prev-next a:focus-within span {
  color: var(--hover);
  transform: scale(1.05);
}

.prev-next a:hover img,
.prev-next a:focus-within img {
  opacity: 0.7;
}





/* ▦ ▥ ▤ ▦ ▥ ▤ ▦   M: 幅500〜1279px（タブレットなど）   ▦ ▥ ▤ ▦ ▥ ▤ ▦ */

@media (min-width: 500px) and (max-width: 1279px) {

  .col-1-post-thumb {
    width: 100%;
    height: 540px;
    overflow: hidden;
  }

  .col-1-post-thumb img {
    width: 100%;
    height: 100%;
  }

}

@media (min-width: 500px) and (max-width: 699px) {

  .ad-toc-gr {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

}


/* ▦ ▥ ▤ ▦ ▥ ▤ ▦   S: 幅499px 以下（スマホなど）   ▦ ▥ ▤ ▦ ▥ ▤ ▦ */

@media (max-width: 499px) {

  .col-1-post-thumb {
    width: 100%;
    height: calc(70vh - 80px);
    height: calc(70svh - 80px);
    overflow: hidden;
  }


  /* - - - - - - - - - - - - - - - - - - - - */

  .atc h1 {
    margin: 1.3rem 0 1.5rem;
  }
  
  .ad-toc-gr {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .atc-ad {
    justify-self: center;
  }

  .mag-st15 {
    margin-inline-start: 1rem;
  }

  .mag-st30 {
    margin-inline-start: 2rem;
  }

  .ol-mag-st15 {
    margin-inline-start: 2.3rem;
  }

  .ol-mag-st30 {
    margin-inline-start: 3.3rem;
  }

  .two-cols-table {
    width: 95%;
    margin-inline: auto;
  }

  .to-prev,
  .to-next {
    width: 42cqw;
  }

}