/**
 * Convert font-size from px to rem with px fallback
 *
 * @param $size - the value in pixel you want to convert
 *
 * e.g. p {@include fontSize(12px);}
 * 
 */
/* html --------------------------------------- */
html {
  border-color: var(--color-port);
}

.localPage .pageBody {
  margin-top: 0 !important;
  position: relative;
}

/* list --------------------------------------- */
.introduction .sectionHeader {
  width: 100%;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-top: clamp(0px, -23.0769230769px + 6.4102564103vw, 100px);
  margin-bottom: clamp(80px, 75.3846153846px + 1.2820512821vw, 100px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.introduction .sectionHeader .btnWrap {
  position: relative;
  z-index: 2;
}
.introduction__list {
  background-color: var(--color-bg);
  list-style: none;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  margin: 0;
}
.introduction__area {
  font-size: 15px;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-align: center;
  color: var(--color-txt-weak);
  border-radius: var(--borderrad);
  border: 1px solid;
  background-color: var(--color-bg);
  padding: 10px 3px;
  margin: 0;
  position: relative;
  z-index: 2;
}
.introduction__item {
  padding: 0;
  list-style: none;
}
.introduction__item:before {
  content: none;
}
.introduction__item.-nagasu .introduction__anchor {
  background-color: var(--color-nagasu-bg);
}
.introduction__item.-nagasu .introduction__area {
  border-color: var(--color-nagasu);
}
.introduction__item.-nankan .introduction__anchor {
  background-color: var(--color-nankan-bg);
}
.introduction__item.-nankan .introduction__area {
  border-color: var(--color-nankan);
}
.introduction__item.-kikusui .introduction__anchor {
  background-color: var(--color-kikusui-bg);
}
.introduction__item.-kikusui .introduction__area {
  border-color: var(--color-kikusui);
}
.introduction__anchor {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
}
.introduction__anchor:hover {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.introduction__anchor:hover .introduction__img img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-filter: brightness(1.2);
          filter: brightness(1.2);
}
.introduction__anchor:hover .ttlWrap .icon svg {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.introduction .ttlWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  position: relative;
}
.introduction .ttlWrap > * {
  margin-top: 0;
  text-decoration: none;
}
.introduction .ttlWrap .icon {
  position: absolute;
  right: auto;
  left: 14em;
  top: -15px;
  bottom: 0;
  margin: auto;
  width: auto;
  height: auto;
  z-index: 1;
}
.introduction .ttlWrap .icon svg {
  -webkit-transition: 0.8s cubic-bezier(0.17, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.17, 0.84, 0.44, 1);
  width: clamp(120px, 90px + 8.3333333333vw, 250px);
  height: clamp(120px, 90px + 8.3333333333vw, 250px);
  -webkit-transform: scale(1);
          transform: scale(1);
}
.introduction__ttl {
  font-size: clamp(1.5rem, 1.2692307692rem + 1.0256410256vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.008rem;
  position: relative;
  z-index: 2;
}
.introduction__ttl small {
  font-size: clamp(0.875rem, 0.8605769231rem + 0.0641025641vw, 0.9375rem);
  display: block;
  margin-bottom: 10px;
}
.introduction__img {
  position: relative;
  aspect-ratio: 1.5/1;
  overflow: hidden;
  width: calc(100% - 40px);
  height: auto;
  margin: 20px;
}
.introduction__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: 0.8s cubic-bezier(0.17, 0.84, 0.44, 1);
  transition: 0.8s cubic-bezier(0.17, 0.84, 0.44, 1);
  border-radius: 5px;
}

@media (min-width: 80em) {
  .introduction .sectionHeader {
    width: 40%;
  }
  .introduction .ttlWrap .icon {
    top: -60px;
  }
  .introduction__anchor {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .introduction__item.-nankan .introduction__anchor {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .introduction__img {
    width: calc(60% - 40px);
  }
  .introduction__img img {
    -webkit-transition: 0.6s cubic-bezier(0.17, 0.84, 0.44, 1);
    transition: 0.6s cubic-bezier(0.17, 0.84, 0.44, 1);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}