/* common */
img {
  width: 100%;
}
h3 {
  letter-spacing: 7px !important;
}
.align-center {
  align-items: center;
}
span br {
  display: block !important;
}
p br {
  display: block !important;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.bg-gray {
  background: #dae1e3;
}
.fz-12 {
  font-size: 12px;
}
.fz-14 {
  font-size: 14px;
}
.fz-21 {
  font-size: 21px;
}
.spacing-1{
  letter-spacing: 0.1em;
}
.font-nomal{
  font-weight: 400;
}
.font-bold{
  font-weight: 700;
}
.leading21{
  line-height: 21px;
}
/* .max-h {
  max-height: 238px;
} */
@media screen and (max-width: 768px) {
  h3 {
    letter-spacing: 1px !important;
  }
  br {
    display: block !important;
  }
  .fz-18 {
    font-size: 16px;
  }
  .fz-21 {
    font-size: 18px;
  }
}

/* caption */
.figcaption {
  color: #747474;
  height: 1.5rem;
  font-size: 1rem;
}
.image-photo {
  position: absolute;
  bottom: 2rem;
  right: 1rem;
  font-size: 10px;
  filter: drop-shadow(0 0 0.5rem rgb(0, 0, 0))
    drop-shadow(0 0 0.5rem rgb(0, 0, 0)) drop-shadow(0 0 0.5rem rgb(0, 0, 0));
  color: #fff;
}

/* super */
.super {
  vertical-align: top;
  font-size: 1.2rem;
}
strong {
  font-size: 1.6rem !important;
  display: block;
}

/* position */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

/* responsive */
.sp_only {
  display: none !important;
}
@media screen and (max-width: 768px) {
  .sp_only {
    display: block !important;
  }
  .pc_only {
    display: none !important;
  }
}

/* flex */
.flex {
  display: flex;
}
.space-between {
  justify-content: space-between;
}
.justify-start {
  justify-content: flex-start;
}
.gap-1 {
  gap: 1rem;
}
.gap-half {
  gap: 0.5rem;
}
.gap-2 {
  gap: 2rem;
}
.column {
  flex-direction: column;
}
.reverse {
  flex-direction: row-reverse;
}
.items-start{
  align-items: start;
}
@media screen and (max-width: 768px) {
  .sp-column {
    flex-direction: column;
  }
  .reverse {
    flex-direction: column;
  }
}

/* width */
.w-20 {
  width: 20%;
}
.w-40,
.flex-w40 {
  width: 48%;
}
.flex-w50 {
  width: 50%;
}
.flex-w52 {
  width: 52%;
}
.flex-w60 {
  width: 60%;
}
.w-full {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .w-20 {
    width: 40%;
  }
  .flex-w40 {
    width: 100%;
  }
  .flex-w50 {
    width: 100%;
  }
  .flex-w60 {
    width: 100%;
  }
}

/* margin */
.mtop-1half {
  margin-top: 1.5rem;
}
.mtop-2 {
  margin-top: 2rem;
}
.mtop-4 {
  margin-top: 4rem;
}
.mtop-8 {
  margin-top: 8rem;
}
.mb-48 {
  margin-bottom: 48px;
}
.m-auto {
  margin: auto;
}
@media screen and (max-width: 768px) {
  .mright-2 {
    margin-right: 0;
  }
}

/* padding */
.pa-1 {
  padding: 1rem;
}
.p-60 {
  padding: 60px;
}
@media screen and (max-width: 768px) {
  .p-60 {
    padding: 16px;
  }
}

/* button */
.button-flex {
  display: flex;
  justify-content: center;
  margin: 2rem auto;
}
a.prev-btn {
  background-image: url(<?phpbloginfo("template_url");?>/style/img/page/guide/guide-premium-btn-04.png) !important;
}
a.next-btn {
  background-position: 97% center !important;
}
a.prev-btn::after {
  content: none !important;
}
a.next-btn::after {
  content: none !important;
}
@media screen and (max-width: 768px) {
  .button-flex {
    justify-content: space-between;
  }
  /* .bottom-btn {
    width: 48% !important;
    margin: 0 !important;
  } */
}


ul.anchor-link {
  gap: 2rem;
  flex-wrap:nowrap;
}

@media (max-width: 820px) {
  ul.anchor-link.col-container {
    gap: 1rem;
    flex-direction: column;
  }
}

ul.anchor-link li + li {
  margin-left: 0 !important;
}