.bl-history, .bl-beauty-onsen, .bl-hot-spring-type, .bl-magatama {
  margin-inline: auto;
}
@media print, screen and (min-width: 768.1px) {
  .bl-history, .bl-beauty-onsen, .bl-hot-spring-type, .bl-magatama {
    width: 1000px;
    max-width: calc(100% - 20px);
  }
}
@media screen and (max-width: 768px) {
  .bl-history, .bl-beauty-onsen, .bl-hot-spring-type, .bl-magatama {
    width: 76.9230769231vw;
  }
}

:where(.page-common-heading) {
  border-bottom: 1px solid #967A21;
  color: #226a52;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

:where(.page-common-heading .en) {
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
}

:where(.page-common-heading .ja) {
  margin-block: var(--leading-trim);
  font-family: var(--font-shippori);
  font-weight: 700;
  letter-spacing: 0.05em;
}

@media print, screen and (min-width: 768.1px) {
  :where(.page-common-heading) {
    padding-bottom: 33px;
  }
  :where(.page-common-heading .en) {
    font-size: 17px;
  }
  :where(.page-common-heading .ja) {
    font-size: 35px;
    line-height: 1.29;
  }
}
@media screen and (max-width: 768px) {
  :where(.page-common-heading) {
    padding-bottom: 22px;
  }
  :where(.page-common-heading .en) {
    font-size: 14px;
  }
  :where(.page-common-heading .ja) {
    font-size: 28px;
    line-height: 1.36;
  }
}

.bl-kv {
  position: relative;
  z-index: 0;
}
.bl-kv__main-image {
  display: block;
}
.bl-kv__main-image img {
  width: 100%;
}
.bl-kv__hgroup {
  position: relative;
  z-index: 3;
}
.bl-kv__catch {
  margin-block: var(--leading-trim);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: center;
}
.bl-kv__illust {
  display: block;
  pointer-events: none;
}
.bl-kv__cloud {
  bottom: -335px;
  left: 0;
}
@media print, screen and (min-width: 768.1px) {
  .bl-kv {
    position: relative;
    z-index: 0;
  }
  .bl-kv__hgroup {
    margin-top: -40px;
  }
  .bl-kv__catch {
    padding-top: 39px;
  }
  .bl-kv__illust {
    position: absolute;
    right: min(168px, 10%);
    bottom: -210px;
  }
}
@media print and (max-width: 1270px), screen and (min-width: 768.1px) and (max-width: 1270px) {
  .bl-kv__illust {
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  .bl-kv {
    display: flex;
    flex-direction: column;
  }
  .bl-kv__hgroup {
    display: contents;
  }
  .bl-kv__heading {
    margin-top: -31px;
  }
  .bl-kv__catch {
    order: 9;
    margin-inline: auto;
    padding-top: 18px;
    width: 14em;
  }
  .bl-kv__illust {
    margin: -6.4102564103vw auto 0;
    display: block;
    width: 34.7692307692vw;
  }
  .bl-kv__cloud {
    width: 99.2307692308vw;
    top: 117.6923076923vw;
    left: 0;
  }
}

@property --is-active {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.bl-history {
  position: relative;
  z-index: 1;
}
.bl-history__heading {
  text-align: center;
}
.bl-history__items {
  display: flex;
}
.bl-history__item {
  flex-shrink: 0;
  display: flex;
}
.bl-history__image {
  flex-shrink: 0;
}
.bl-history__item-contents {
  flex-shrink: 0;
}
.bl-history__era {
  color: #226a52;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.1em;
}
.bl-history__description {
  margin-block: var(--leading-trim);
  font-size: 15px;
  line-height: 1.73;
  letter-spacing: 0.05em;
  text-align: justify;
}
.bl-history__scrollbar {
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 0;
}
.bl-history__scrollbar::after {
  content: "";
  margin: auto;
  display: block;
  background-color: #226a52;
  height: 3px;
  position: absolute;
  z-index: -1;
  top: 7px;
  transition: transform 0.8s;
  transform: scaleX(calc(var(--active-index, 0) * 33.33%));
  transform-origin: left center;
}
.bl-history__scrollbar-item {
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.025em;
  display: flex;
  flex-direction: column;
  align-items: center;
  --is-active: clamp(0, calc(-1 * abs(var(--active-index) - var(--nth)) + 1), 1);
}
.bl-history__scrollbar-item::before {
  content: "";
  border-radius: 50%;
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: color-mix(in srgb, #967A21 calc(var(--is-active) * 100%), #fff);
  transition: background-color 0.8s;
}
.bl-history__scrollbar-item:nth-of-type(1) {
  --nth: 0;
}
.bl-history__scrollbar-item:nth-of-type(2) {
  --nth: 1;
}
.bl-history__scrollbar-item:nth-of-type(3) {
  --nth: 2;
}
.bl-history__scrollbar-item:nth-of-type(4) {
  --nth: 3;
}
@media print, screen and (min-width: 768.1px) {
  .bl-history {
    margin-top: 70px;
  }
  .bl-history__frame {
    min-height: calc(100lvh - var(--top-header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: -webkit-sticky;
    position: sticky;
    z-index: 0;
    top: var(--top-header-height);
  }
  .bl-history__track {
    margin-top: 45px;
  }
  .bl-history__item {
    padding-right: 180px;
    align-items: center;
    gap: 63px;
  }
  .bl-history__item:last-of-type {
    padding-right: 0;
  }
  .bl-history__item-contents {
    width: 368px;
  }
  .bl-history__description {
    padding-top: 22px;
  }
  .bl-history__scrollbar {
    margin-top: 52px;
    width: 450px;
  }
  .bl-history__scrollbar::after {
    width: calc(100% - 90px);
    left: 45px;
  }
  .bl-history__scrollbar-item {
    width: 90px;
    font-size: 16px;
    gap: 15px;
    flex-direction: column;
  }
  .bl-history__cloud {
    right: -165px;
    bottom: 33px;
  }
}
@media screen and (max-width: 768px) {
  .bl-history {
    margin-top: 16.6666666667vw;
    width: 100%;
  }
  .bl-history__frame {
    height: 100%;
  }
  .bl-history__hgroup {
    margin-inline: auto;
    margin-bottom: 24px;
    width: 76.9230769231vw;
  }
  .bl-history__frame-sp {
    min-height: calc(100lvh - var(--top-header-height));
    display: flex;
    flex-direction: column;
    position: -webkit-sticky;
    position: sticky;
    z-index: 0;
    top: var(--top-header-height);
  }
  .bl-history__items {
    padding-top: 24px;
  }
  .bl-history__item {
    margin-right: 6.4102564103vw;
    flex-direction: column;
    gap: 28px;
  }
  .bl-history__item:last-of-type {
    margin-right: 0;
  }
  .bl-history__image {
    width: 100vw;
  }
  .bl-history__item-contents {
    margin-inline: auto;
    width: 76.9230769231vw;
  }
  .bl-history__description {
    padding-top: 24px;
    font-family: var(--font-zen-old-yakuhan);
    text-align: justify;
  }
  .bl-history__scrollbar {
    margin: 24px auto 0;
    width: 76.9230769231vw;
    gap: 76px;
  }
  .bl-history__scrollbar::after {
    width: 100%;
  }
  .bl-history__scrollbar-item {
    writing-mode: vertical-rl;
    font-size: 14px;
    gap: 5px;
    flex-direction: row;
  }
  .bl-history__cloud {
    width: 58.9743589744vw;
    right: -8.7179487179vw;
    bottom: 32.3076923077vw;
  }
}

.bl-beauty-onsen__top-frame {
  position: relative;
  z-index: -1;
}
.bl-beauty-onsen__main-image {
  display: block;
  position: relative;
  z-index: -5;
}
.bl-beauty-onsen__section-heading {
  color: #226a52;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
}
.bl-beauty-onsen__section-description {
  margin-block: var(--leading-trim);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.73;
  letter-spacing: 0.05em;
  text-align: justify;
}
.bl-beauty-onsen__specify-items {
  display: flex;
}
.bl-beauty-onsen__specify-heading {
  border-radius: 100vmax;
  height: 42px;
  width: 100%;
  background: #967A21;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.67;
  letter-spacing: 0.1em;
  display: grid;
  place-items: center;
}
.bl-beauty-onsen__specify-illust {
  margin-top: 18px;
  display: block;
}
.bl-beauty-onsen__specify-description {
  margin-block: calc(19px + var(--leading-trim)) var(--leading-trim);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.73;
  letter-spacing: 0.05em;
  text-align: justify;
}
@media print, screen and (min-width: 768.1px) {
  .bl-beauty-onsen {
    margin-top: 100px;
  }
  .bl-beauty-onsen__hgroup {
    width: 407px;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 197px;
    margin: auto;
  }
  .bl-beauty-onsen__cloud {
    left: -37px;
    bottom: -28px;
  }
  .bl-beauty-onsen__section:nth-of-type(1) {
    margin-top: 52px;
  }
  .bl-beauty-onsen__section:nth-of-type(2) {
    margin-top: 80px;
  }
  .bl-beauty-onsen__section-description {
    padding-top: 26px;
  }
  .bl-beauty-onsen__specify-items {
    margin-top: 32px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 62px;
  }
  .bl-beauty-onsen__specify-item {
    width: 290px;
  }
}
@media screen and (max-width: 768px) {
  .bl-beauty-onsen {
    margin-top: 21.0256410256vw;
  }
  .bl-beauty-onsen__main-image {
    margin-left: calc((100% - 100vw) / 2);
    margin-right: calc((100% - 100vw) / 2);
    width: auto !important;
    max-width: none;
    margin-block: 28px 30px;
  }
  .bl-beauty-onsen__main-image img {
    width: 100%;
  }
  .bl-beauty-onsen__cloud {
    width: 72.3076923077vw;
    left: -47.1794871795vw;
    bottom: -10.2564102564vw;
  }
  .bl-beauty-onsen__section:nth-of-type(2) {
    margin-top: 68px;
  }
  .bl-beauty-onsen__section-description {
    padding-top: 28px;
  }
  .bl-beauty-onsen__specify-items {
    margin-top: 8.9743589744vw;
    flex-direction: column;
    gap: 9.2307692308vw;
  }
  .bl-beauty-onsen__specify-illust img {
    width: 100%;
  }
}

.bl-hot-spring-type__strong {
  background: #226a52;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
.bl-hot-spring-type__main-image img {
  width: 100%;
}
.bl-hot-spring-type__catch {
  margin-block: var(--leading-trim);
  color: #226a52;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.bl-hot-spring-type__description {
  margin-block: calc(22px + var(--leading-trim)) var(--leading-trim);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.73;
  letter-spacing: 0.05em;
}
.bl-hot-spring-type__specify-items {
  text-wrap: balance;
  text-align: center;
}
.bl-hot-spring-type__specify-item {
  background: url(../../images/tamatsukuri-onsen/hot-spring-type__magatama.svg) no-repeat top center/contain;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.bl-hot-spring-type__specify-heading {
  color: #967A21;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
}
.bl-hot-spring-type__specify-description {
  line-height: 1.73;
  letter-spacing: 0.05em;
}
@media print, screen and (min-width: 768.1px) {
  .bl-hot-spring-type {
    margin-top: 112px;
  }
  .bl-hot-spring-type__strong {
    margin: 51px auto 0;
    padding: 11px 0;
    border-radius: 100vmax;
    width: 700px;
  }
  .bl-hot-spring-type__cols {
    margin-top: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .bl-hot-spring-type__main-image, .bl-hot-spring-type__contents {
    width: 45%;
  }
  .bl-hot-spring-type__specify-items {
    margin-top: 46px;
    margin-bottom: -13px;
    gap: 26px;
  }
  .bl-hot-spring-type__specify-item {
    margin: 0 13px 13px;
    padding-top: 45px;
    width: 170px;
    height: 208px;
  }
  .bl-hot-spring-type__specify-heading {
    font-size: 18px;
  }
  .bl-hot-spring-type__specify-description {
    margin-block: calc(21px + var(--leading-trim)) var(--leading-trim);
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  .bl-hot-spring-type {
    margin-top: 20vw;
  }
  .bl-hot-spring-type__strong {
    margin-top: 41px;
    padding: 12px 22px;
    border-radius: 26px;
  }
  .bl-hot-spring-type__cols {
    margin-top: 7.4358974359vw;
  }
  .bl-hot-spring-type__catch {
    padding-top: 26px;
    text-align: center;
  }
  .bl-hot-spring-type__specify-items {
    margin: 25px -10px -11px;
  }
  .bl-hot-spring-type__specify-item {
    margin: 0 10px 11px;
    padding-top: 36px;
    width: 140px;
    height: 171px;
  }
  .bl-hot-spring-type__specify-heading {
    font-size: 14px;
  }
  .bl-hot-spring-type__specify-description {
    margin-block: calc(17px + var(--leading-trim)) var(--leading-trim);
    font-size: 12px;
  }
}

.bl-magatama__illust {
  display: block;
  pointer-events: none;
}
.bl-magatama__main-image {
  display: block;
}
.bl-magatama__catch {
  margin-block: var(--leading-trim);
  color: #226a52;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.bl-magatama__description {
  margin-block: var(--leading-trim);
  padding-top: 22px;
  font-size: 15px;
  line-height: 1.73;
  letter-spacing: 0.05em;
}
@media print, screen and (min-width: 768.1px) {
  .bl-magatama {
    margin-top: 168px;
    position: relative;
    z-index: 0;
  }
  .bl-magatama__illust {
    position: absolute;
    z-index: 1;
    top: -95px;
    right: 0;
  }
  .bl-magatama__cols {
    margin-top: 34px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
  .bl-magatama__main-image {
    width: 50%;
  }
  .bl-magatama__contents {
    width: 45%;
  }
}
@media screen and (max-width: 768px) {
  .bl-magatama {
    margin-top: 5.641025641vw;
  }
  .bl-magatama__hgroup {
    margin-top: 18px;
  }
  .bl-magatama__illust {
    margin: auto;
    width: 38.4102564103vw;
  }
  .bl-magatama__main-image {
    margin-block: 7.9487179487vw 5.3846153846vw;
  }
  .bl-magatama__catch {
    text-align: center;
  }
}
/*# sourceMappingURL=page-tamatsukuri-onsen.css.map */