/* 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: #FFCD6C #42372E;
  scrollbar-width: auto;
}
::selection {
  color: #9F1A1B;
  background-color: #FFCD6C;
}
:root {
  --base-font-size: clamp(1rem, 0.8rem + 1vw, 1.25rem);
}
body {
  margin: 0;
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: var(--base-font-size);
  color: #42372E;
  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;
  z-index: 2;
  @media screen and (min-width: 900px) {
    align-items: flex-start;
    gap: 24px;
    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%;
      }
    }
  }
}
.c-inner__deco {
  background-image:
    linear-gradient(#FFCD6C, #FFCD6C),
    linear-gradient(#FFCD6C, #FFCD6C),
    linear-gradient(#FFCD6C, #FFCD6C),
    linear-gradient(#FFCD6C, #FFCD6C);
  background-position:
    left top,
    right top,
    left bottom,
    right bottom;
  background-repeat: no-repeat;
  @media screen and (min-width: 900px) {
    background-size: 8px 8px;
  }
  @media screen and (max-width: 899px) {
    background-size: 1.6vw 1.6vw;
  }
}
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 fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@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);
  }
}