/* assets/scss/_base.scss */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
html {
  font-size: 100%;
  scroll-behavior: smooth;
  scrollbar-color: #a93637 #42372E;
  scrollbar-width: auto;
}
::selection {
  color: #ffffff;
  background-color: #4e9ba3;
}
:root {
  --base-font-size: clamp(1rem, 0.8rem + 1vw, 1.25rem);
  --c-main: #a93637;
  --c-sub: #4e9ba3;
  --c-text: #42372E;
}

body {
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: var(--base-font-size);
  color: var(--c-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
  overflow-x: hidden;
}
ul {
  list-style: none;
}
.c-cont {
  position: relative;
  display: flex;
  margin: 0 auto;
  @media screen and (min-width: 900px) {
    align-items: flex-start;
    gap: 32px;
    max-width: 1200px;
    padding: 80px 20px;
    .c-cont__ttl {
      position: sticky;
      flex-shrink: 0;
      top: 20px;
      width: 250px;
      z-index: 3;
    }
  }
  @media screen and (max-width: 899px) {
    flex-direction: column;
    padding: 5.3vw 0;
    .c-cont__ttl {
      padding: 0 32vw 5.3vw;
      img {
        width: 100%;
      }
    }
  }
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.fn-fadeIn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  &.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}
.u-visible-pc {
  @media screen and (min-width: 900px) {
    display: none;
  }
}
.u-visible-sp {
  @media screen and (max-width: 899px) {
    display: none;
  }
}
@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes deco-scroll {
  from {
    background-position: 0 center;
  }
  to {
    background-position: -380px center;
  }
}
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translate(-50%, -200px);
  }
  to {
    opacity: 1;
    transform: translate(-50% , 0);
  }
}
@keyframes slideBlurChr {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes frameExtend {
  to {
    background-size:
      calc(100% - 20px) 8px,
      calc(100% - 20px) 8px,
      8px calc(100% - 20px),
      8px calc(100% - 20px);
  }
}
@keyframes frameExtendSp {
  to {
    background-size:
      calc(100% - 2.8vw) 1.4vw,
      calc(100% - 2.8vw) 1.4vw,
      1.4vw calc(100% - 2.8vw),
      1.4vw calc(100% - 2.8vw);
  }
}