/**
 * 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);}
 * 
 */
/* intro --------------------------------------- */
.intro {
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1.5s opacity ease;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 201;
}
.intro__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 23.0769230769px + 1.9230769231vw, 60px);
  margin: 0 auto;
  transition: 0.5s opacity ease;
}
.intro > * {
  margin: 0 auto;
}
.intro__txt {
  transition-delay: 0.4s;
  writing-mode: vertical-rl;
  font-size: clamp(0.875rem, 0.8461538462rem + 0.1282051282vw, 1rem);
  line-height: 1;
}
.inview .intro__txt.inview__item {
  transform: translateY(0) !important;
}
.intro__logo {
  transition-delay: 0.3s;
}
.intro__logo .icon {
  width: clamp(40px, 35.3846153846px + 1.2820512821vw, 60px);
  height: auto;
}
.inview .intro__logo.inview__item {
  transform: translateY(0) !important;
}
@media (min-width: 75em) {
  .intro__txt {
    line-height: 1.6;
  }
}

.globalWrapper {
  opacity: 0;
}

.homeHeaderDecoWrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.homeHeaderDeco {
  display: block !important;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: -1;
  transform: scale(1.15) translateY(20px);
  transition: 6s transform ease 0.3s;
  /* animation */
}
.homeHeaderDeco__01, .homeHeaderDeco__02, .homeHeaderDeco__03 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  opacity: 0;
}
.homeHeaderDeco__01, .homeHeaderDeco__02 {
  display: none;
}
.homeHeaderDeco__01 {
  width: 80vw;
  transform: rotate(-0.05turn) translate(-40%, -90%);
  animation: homeHeaderCloud01 120s linear infinite alternate;
  transition: 2s opacity ease 0.3s;
}
.homeHeaderDeco__02 {
  width: 120vw;
  transform: rotate(-0.04turn) translate(-10%, 4%) scale(1, -1);
  animation: homeHeaderCloud02 190s linear infinite alternate;
  transition: 3s opacity ease 0.6s;
}
.homeHeaderDeco__03 {
  width: 1200px;
  transform: rotate(-0.03turn) translate(-10%, -45%);
  animation: homeHeaderCloud03 250s linear infinite alternate;
  transition: 4s opacity ease 1s;
}
@keyframes homeHeaderCloud03 {
  0% {
    transform: rotate(-0.03turn) translate(-10%, -45%);
  }
  100% {
    transform: rotate(-0.03turn) translate(-60%, -45%);
  }
}

/* globalHeaderDeco --------------------------------------- */
.pageHeaderDecoWrapper {
  display: none;
}

@media (min-width: 75em) {
  .homeHeaderDeco {
    transform: scale(1.15) translateY(30px);
    overflow: visible;
    /* animation */
  }
  .homeHeaderDeco__01, .homeHeaderDeco__02 {
    display: block;
  }
  .homeHeaderDeco__01 {
    width: 80vw;
    transform: rotate(-0.05turn) translate(-40%, -90%);
    animation: homeHeaderCloud01 80s linear infinite alternate;
    transition: 2s opacity ease 0.3s;
  }
  .homeHeaderDeco__02 {
    width: 120vw;
    transform: rotate(-0.04turn) translate(-10%, 4%) scale(1, -1);
    animation: homeHeaderCloud02 160s linear infinite alternate;
    transition: 4s opacity ease 1s;
  }
  .homeHeaderDeco__03 {
    width: 150vw;
    transform: rotate(-0.008turn) translate(-20%, 100%);
    animation: homeHeaderCloud03 220s linear infinite alternate;
    transition: 6s opacity ease 2s;
  }
  @keyframes homeHeaderCloud01 {
    0% {
      transform: rotate(-0.05turn) translate(-40%, -90%);
    }
    100% {
      transform: rotate(-0.05turn) translate(0%, -90%);
    }
  }
  @keyframes homeHeaderCloud02 {
    0% {
      transform: rotate(-0.04turn) translate(-10%, 4%) scale(1, -1);
    }
    100% {
      transform: rotate(-0.04turn) translate(-40%, 4%) scale(1, -1);
    }
  }
  @keyframes homeHeaderCloud03 {
    0% {
      transform: rotate(-0.008turn) translate(-20%, 100%);
    }
    100% {
      transform: rotate(-0.008turn) translate(50%, 100%);
    }
  }
}
.load .homeHeaderDeco {
  transform: scale(1) translateY(0);
}
.load .homeHeaderDeco__01, .load .homeHeaderDeco__02, .load .homeHeaderDeco__03 {
  opacity: 0.15;
}

/* kv --------------------------------------- */
.kv {
  position: relative;
  width: calc(100% - 10px);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 100px;
  margin-top: 35vh;
  opacity: 0;
  transition: 0.5s opacity cubic-bezier(0.17, 0.84, 0.44, 1);
  transition-delay: 2.5s;
}
.kv .kvImg {
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 70vh;
  display: grid;
  place-items: center;
  margin: auto;
  overflow: hidden;
  margin-bottom: 140px;
  position: relative;
  border-radius: var(--borderrad);
}
.kv .kvImg__inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--borderrad);
  transform: translateY(0) !important;
}
.kv .kvImg__innerItem {
  transform: scale(1.15) !important;
  transition: 20s cubic-bezier(0.17, 0.84, 0.44, 1);
  transition-property: transform;
}
.kv .kvImg img {
  width: inherit;
  height: inherit;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.kv__txtWrap {
  width: calc(100% - 50px);
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
  z-index: 2;
}
.kv__copy {
  font-size: clamp(1.25rem, 0.9615384615rem + 1.2820512821vw, 2.5rem);
  margin-top: 0;
  margin-bottom: 30px;
}
.kvNav {
  position: absolute;
  bottom: 30px;
  left: 25px;
  z-index: 3;
}
.kvNav__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
}
.kvNav__item {
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: 1s opacity ease;
}
.kvNav__item:first-child {
  transition-delay: 1s;
}
.kvNav__item:nth-child(2) {
  transition-delay: 1.4s;
}
.kvNav__item:nth-child(3) {
  transition-delay: 1.8s;
}
.kvNav__item:before {
  content: none;
}
.kvNav__a {
  display: inline-block;
  background-color: #fff;
  text-align: center;
  padding: 5px 15px;
  border-radius: 100px;
  font-size: 14px;
  text-decoration: none;
}

.load .kv {
  opacity: 1;
}
.load .kvNav__item {
  opacity: 1;
}
.load .kv .kvImg__innerItem {
  transform: scale(1) !important;
}

/* .img-reel ---------- */
.img-reel {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 0;
  font-size: 0;
  line-height: 0;
  list-style: none;
  overflow: hidden;
  will-change: opacity, filter;
}
.img-reel__item {
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-position: 0 center;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-reel__item-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background-repeat: no-repeat;
  box-sizing: border-box;
  background-image: url(../../../../assets/img/home/kv_01.webp);
  background-size: cover;
  background-position: center;
}

@media (min-width: 75em) {
  .kv {
    width: calc(100% - 220px);
    aspect-ratio: 1.25/1;
    margin-left: 0;
    margin-bottom: 160px;
    margin-top: 20vh;
  }
  .kv .kvImg {
    margin-bottom: 0;
  }
  .kv__txtWrap {
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 40px;
  }
  .kv__txtWrap > * {
    color: #fff;
  }
}
/* news --------------------------------------- */
.newsSection .sectionHeader {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (min-width: 75em) {
  .newsSection .newsHeadline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 65px;
  }
  .newsSection .newsHeadline__item {
    text-align: center;
  }
  .newsSection .newsHeadline__a {
    padding: 0;
    border: none;
  }
  .newsSection .newsHeadline__a .more__ico {
    display: none;
  }
  .newsSection .newsHeadline__thumb {
    width: 100%;
    height: auto;
    margin-right: 0;
  }
  .newsSection .newsHeadline__meta {
    margin-top: 20px;
    width: 100%;
  }
  .newsSection .newsHeadline__meta > * {
    text-align: center;
  }
  .newsSection .newsHeadline__catList {
    justify-content: center;
  }
  .newsSection .newsHeadline__dat {
    justify-content: center;
  }
}
@media (min-width: 90em) {
  .newsSection .newsHeadline {
    gap: 30px 100px;
  }
}

/* funeral --------------------------------------- */
.funeralSection .sectionBody {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 80px;
}
.funeralSection .sectionBody__txtWrap {
  width: 100%;
}
.funeralSection .sectionBody__copy {
  margin-top: 0;
  font-size: clamp(1.5rem, 1.3413461538rem + 0.7051282051vw, 2.1875rem);
}
.funeralSection .sectionBody__img {
  width: 100%;
  max-width: 250px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 75em) {
  .funeralSection .sectionBody {
    flex-direction: row;
    gap: 60px;
  }
  .funeralSection .sectionBody__txtWrap {
    width: 65%;
  }
  .funeralSection .sectionBody__img {
    width: calc(35% - 60px);
    max-width: 380px;
    margin: 0;
  }
  .funeralSection .sectionBody__txtInner {
    margin-bottom: 40px;
  }
}

/* about --------------------------------------- */
.aboutSection .sectionBody {
  height: 90vh;
  aspect-ratio: 2.2/1;
  background-image: url(../../../assets/img/home/img_about.webp);
  background-repeat: no-repeat;
  background-position: 5% center;
  background-size: cover;
  padding: 30px;
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--borderrad);
}
.aboutSection .sectionBody__txtWrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
}
.aboutSection .sectionBody__txtInner > * {
  color: #fff;
}
.aboutSection .sectionBody__copy {
  margin-top: 0;
  font-size: clamp(1.25rem, 1.1634615385rem + 0.3846153846vw, 1.625rem);
}
.aboutSection .sectionBody .btnWrap .btn {
  font-size: clamp(0.875rem, 0.8173076923rem + 0.2564102564vw, 1.125rem);
}
.aboutSection .sectionBody .btnWrap .btn:hover:before {
  color: var(--color-hover);
}
@media (min-width: 75em) {
  .aboutSection .sectionBody {
    height: auto;
    max-height: none;
    aspect-ratio: 1.4/1;
    background-position: center;
  }
  .aboutSection .sectionBody__txtWrap {
    max-width: 440px;
    flex-direction: column-reverse;
    justify-content: space-between;
    height: 100%;
  }
  .aboutSection .sectionBody__txtInner + .btnWrap {
    margin-top: 0;
  }
}

/* lost --------------------------------------- */
.lostSection .sectionInner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--color-secondary);
  padding: clamp(30px, 23.0769230769px + 1.9230769231vw, 60px);
  border-radius: var(--borderrad);
}
.lostSection .sectionHeader {
  width: 100%;
  position: relative;
  padding-bottom: clamp(20px, 17.6923076923px + 0.641025641vw, 30px);
  margin-bottom: clamp(20px, 24.6153846154px - 1.2820512821vw, 0px);
}
.lostSection .sectionHeader__ttl {
  font-size: clamp(1.25rem, 1.1634615385rem + 0.3846153846vw, 1.625rem);
  padding-bottom: 0;
  margin-bottom: 0;
}
.lostSection .sectionHeader:after {
  content: "";
  width: 50px;
  height: 3px;
  position: absolute;
  right: auto;
  left: 0;
  bottom: 0;
  display: block;
  margin: 0 auto;
  background-image: url(../../../../assets/img/global/img_line.png);
  background-size: auto 100%;
  background-repeat: repeat-x;
}
.lostSection .sectionBody {
  width: 100%;
}
.lostSection .sectionBody p {
  margin-top: 0;
}
@media (min-width: 75em) {
  .lostSection .sectionHeader {
    width: 50%;
  }
  .lostSection .sectionBody {
    width: 50%;
  }
}