:root {
  --c_base: #504237;
 --c_yamabuki:#F8B500:
	 --c_cleam:#fbfaf5;
  --w_pc: calc(100% - clamp(60px, 8vw, 120px));
  --w_pc2: calc(100% - clamp(120px, 16vw, 240px));
  --w_sp: 89.3334%;
  --mr_sp: 5.3334%;
  --f_serif: 'Kiwi Maru', serif;
  --f_en: 'Josefin Sans', sans-serif;
  --f_num: 'Josefin Sans', sans-serif;
}

/* ========================================

common

======================================== */
.serif {
  font-family: var(--f_serif);
}
.en {
  font-family: var(--f_en);
}
.num {
  font-family: var(--f_num);
}


.is-fade > *:not(.is-not) {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
}
.is-fade > .is-not {
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
}
.is-fade.fadeIn > * {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.box-fade {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 0.6s cubic-bezier(0.37, 0, 0.63, 1);
}
.box-fade.fadeIn {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.p_hover a:hover {
  opacity: 0.7;
}

.svg.c_white svg {
  fill: #fff;
}
.svg.c_black svg {
  fill: #000;
}

.img-fit {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.img-fit::before {
  width: 100%;
  height: 0;
  content: '';
  display: block;
  padding-top: 100%;
  position: relative;
}
.img-fit img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.is-fade > *:nth-child(0) {
  -webkit-transition-delay: 100ms;
          transition-delay: 100ms;
}

.is-fade > *:nth-child(1) {
  -webkit-transition-delay: 220ms;
          transition-delay: 220ms;
}

.is-fade > *:nth-child(2) {
  -webkit-transition-delay: 340ms;
          transition-delay: 340ms;
}

.is-fade > *:nth-child(3) {
  -webkit-transition-delay: 460ms;
          transition-delay: 460ms;
}

.is-fade > *:nth-child(4) {
  -webkit-transition-delay: 580ms;
          transition-delay: 580ms;
}

.is-fade > *:nth-child(5) {
  -webkit-transition-delay: 700ms;
          transition-delay: 700ms;
}

.is-fade > *:nth-child(6) {
  -webkit-transition-delay: 820ms;
          transition-delay: 820ms;
}

.is-fade > *:nth-child(7) {
  -webkit-transition-delay: 940ms;
          transition-delay: 940ms;
}

.is-fade > *:nth-child(8) {
  -webkit-transition-delay: 1060ms;
          transition-delay: 1060ms;
}

.is-fade > *:nth-child(9) {
  -webkit-transition-delay: 1180ms;
          transition-delay: 1180ms;
}

.is-fade > *:nth-child(10) {
  -webkit-transition-delay: 1300ms;
          transition-delay: 1300ms;
}

.is-fade > *:nth-child(11) {
  -webkit-transition-delay: 1420ms;
          transition-delay: 1420ms;
}

.is-fade > *:nth-child(12) {
  -webkit-transition-delay: 1540ms;
          transition-delay: 1540ms;
}

.is-fade > *:nth-child(13) {
  -webkit-transition-delay: 1660ms;
          transition-delay: 1660ms;
}

.is-fade > *:nth-child(14) {
  -webkit-transition-delay: 1780ms;
          transition-delay: 1780ms;
}

.is-fade > *:nth-child(15) {
  -webkit-transition-delay: 1900ms;
          transition-delay: 1900ms;
}

.l_tel {
  pointer-events: none;
}

@media screen and (max-width: 800px) {
  .l_tel {
    pointer-events: auto;
  }
}
.arrow, .arrow_ul {
  width: 9px;
  height: 9px;
  vertical-align: middle;
  display: block;
  position: relative;
  -webkit-transition: all .2s;
  transition: all .2s;
}
.arrow::before, .arrow_ul::before {
  width: 9px;
  height: 9px;
  content: '';
  display: block;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transition: all .2s;
  transition: all .2s;
}
.arrow::after, .arrow_ul::after {
  width: 12px;
  height: 1px;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0.5px;
  background-color: #fff;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition: all .2s;
  transition: all .2s;
}
.arrow_ul {
  width: 11px;
  height: 13px;
  border-bottom: 1px solid #fff;
}
.arrow_ul::before {
  margin-left: 1px;
}
.arrow_ul::after {
  right: 1.5px;
}

a:hover .arrow._hover::before, a:hover ._hover.arrow_ul::before {
  border-color: var(--c_base);
}
a:hover .arrow._hover::after, a:hover ._hover.arrow_ul::after {
  background-color: var(--c_base);
}
a:hover .arrow_ul._hover {
  border-color: var(--c_base);
}

.link._hover a {
  position: relative;
}
.link._hover a::before {
  width: 0%;
  height: 1px;
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #fff;
  -webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
.link._hover a:hover::before {
  width: 100%;
}

/* ========================================

page

======================================== */
.page_title {
  position: relative;
  margin: 0 auto;
  padding: clamp(111px, 15.5vw, 186px) clamp(60px, 8vw, 120px) clamp(81px, 11.25vw, 135px);
  z-index: 1;
}
.page_title h1 {
  position: relative;
  opacity: 0;
  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 2;
}
.page_title .illust {
  width: 100%;
  height: calc(100% + 80px);
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.page_title .illust .img {
  display: block;
  position: absolute;
  -webkit-filter: blur(6px);
          filter: blur(6px);
  opacity: 0;
  -webkit-transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
}
.page_title.fadeIn h1 {
  -webkit-filter: blur(0);
          filter: blur(0);
  opacity: 1;
}
.page_title.fadeIn .illust .img01 {
  -webkit-animation: fadeIn 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards;
          animation: fadeIn 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards;
}
.page_title.fadeIn .illust .img02 {
  -webkit-animation: fadeIn 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.2s forwards;
          animation: fadeIn 0.8s cubic-bezier(0.76, 0, 0.24, 1) 0.2s forwards;
}
.page_title.fadeIn .illust .img03 {
  -webkit-animation: fadeIn 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0.4s forwards;
          animation: fadeIn 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0.4s forwards;
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-filter: blur(6px);
            filter: blur(6px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    -webkit-filter: blur(6px);
            filter: blur(6px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@media screen and (max-width: 800px) {
  .page_title {
    width: 100%;
    padding: 106px 0 95px;
  }
  .page_title h1 {
    margin: 0 auto;
  }
  .page_title .illust {
    height: 130%;
    opacity: 0.5;
  }
}
.kv_slides {
  position: relative;
}

.kv_item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.kv_item.pre {
  z-index: 2;
}
.kv_item.now {
  z-index: 3;
}

.kv_item .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-mask-image: url("../img/mask.jpg");
          mask-image: url("../img/mask.jpg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-position: right center;
          mask-position: right center;
}

.kv_item.now .img img {
  -webkit-animation: slide 2s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards;
          animation: slide 2s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards;
}

.kv_item .copy img {
  opacity: 0;
  -webkit-mask-image: url("../img/mask.jpg");
          mask-image: url("../img/mask.jpg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left top;
          mask-position: left top;
  -webkit-mask-size: 0% 0%;
          mask-size: 0% 0%;
}

.kv_item.now .copy img {
  opacity: 1;
  -webkit-animation: kv_copy 8s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards;
          animation: kv_copy 8s cubic-bezier(0.76, 0, 0.24, 1) 0s forwards;
}

.kv_item.now .illust {
  -webkit-animation: blur 6.8s cubic-bezier(0.76, 0, 0.24, 1) 1.2s forwards;
          animation: blur 6.8s cubic-bezier(0.76, 0, 0.24, 1) 1.2s forwards;
}
.kv_item.now .illust.illust02 {
  -webkit-animation-duration: 6.4s;
          animation-duration: 6.4s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

@-webkit-keyframes slide {
  0% {
    -webkit-mask-size: 0% 100%;
            mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  100% {
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

@keyframes slide {
  0% {
    -webkit-mask-size: 0% 100%;
            mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  100% {
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
@-webkit-keyframes kv_copy {
  0% {
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
  }
  15% {
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
  }
  35% {
    -webkit-mask-size: 200% 200%;
            mask-size: 200% 200%;
  }
  80% {
    -webkit-mask-size: 200% 200%;
            mask-size: 200% 200%;
  }
  100% {
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
  }
}
@keyframes kv_copy {
  0% {
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
  }
  15% {
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
  }
  35% {
    -webkit-mask-size: 200% 200%;
            mask-size: 200% 200%;
  }
  80% {
    -webkit-mask-size: 200% 200%;
            mask-size: 200% 200%;
  }
  100% {
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
  }
}
@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(6px);
            filter: blur(6px);
    opacity: 0;
    -webkit-transform: scale(1.2) rotate(0deg);
            transform: scale(1.2) rotate(0deg);
  }
  20% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  80% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  100% {
    -webkit-filter: blur(6px);
            filter: blur(6px);
    opacity: 0;
    -webkit-transform: scale(1.2) rotate(0deg);
            transform: scale(1.2) rotate(0deg);
  }
}
@keyframes blur {
  0% {
    -webkit-filter: blur(6px);
            filter: blur(6px);
    opacity: 0;
    -webkit-transform: scale(1.2) rotate(0deg);
            transform: scale(1.2) rotate(0deg);
  }
  20% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  80% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
            transform: scale(1) rotate(0deg);
  }
  100% {
    -webkit-filter: blur(6px);
            filter: blur(6px);
    opacity: 0;
    -webkit-transform: scale(1.2) rotate(0deg);
            transform: scale(1.2) rotate(0deg);
  }
}
body {
  height: 100vh;
  overflow: hidden;
}
body.comp {
  height: auto;
  overflow: auto;
}

@-webkit-keyframes scroll_bar {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  51% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}
.header .logo {
  margin-left: 0;
}
.header_nav {
  margin-left: clamp(10px, 2.5%, 30px);
}
.header_tel {
  margin-top: 0;
}

.wrap .illust {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
.wrap .is-fade.fadeIn .illust,
.wrap .box-fade.fadeIn .illust {
  -webkit-filter: blur(0px);
          filter: blur(0px);
}

@media screen and (max-width: 800px) {
  .header {
    margin-bottom: 38px;
  }
}
/* ========================================

intro

======================================== */
.intro {
  width: 100%;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--c_base);
  background-image: url(../img/common/bg_texture.png);
  background-size: 250px;
  z-index: 999;
  -webkit-transition: all 1.2s;
  transition: all 1.2s;
}
.intro.comp {
  opacity: 0;
  visibility: hidden;
  z-index: -10;
}
.intro.comp.out {
  display: none;
}
.intro_inner {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.intro_inner::before, .intro_inner::after {
  width: calc(clamp(380px, 47.6667vw, 715px) + 60px);
  height: calc(clamp(380px, 47.6667vw, 715px) + 60px);
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: var(--c_base);
  background-image: url(../img/common/bg_texture.png);
  background-size: 250px;
  z-index: 2;
}
.intro_inner::after {
  width: calc(clamp(380px, 47.6667vw, 715px) + 80px);
  height: calc(clamp(380px, 47.6667vw, 715px) + 80px);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  z-index: 1;
}
.intro[data-copy="1"] .copy01.comp {
  opacity: 1;
  -webkit-filter: blur(0px);
          filter: blur(0px);
}
.intro[data-copy="2"] .copy02.comp {
  opacity: 1;
  -webkit-filter: blur(0px);
          filter: blur(0px);
}
.intro[data-copy="3"] .copy03.comp {
  opacity: 1;
  -webkit-filter: blur(0px);
          filter: blur(0px);
}
.intro .copy {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;

  -webkit-filter: blur(5px);
          filter: blur(5px);
  -webkit-transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.intro .copy01 {
  width: 32.8%;
  max-width: 492px;
}
.intro .copy02 {
  width: 34.1334%;
  max-width: 512px;
}
.intro .copy03 {
  width: 44.9334%;
  max-width: 674px;
}
.intro .copy .name {
  font-size: 20px;
  letter-spacing: 0.1em;
  text-align: center;
  position: relative;
  margin-top: 34px;
  z-index: 5;
}
.intro .circle span, .intro .circle::before, .intro .circle::after {
  width: clamp(380px, 47.6667vw, 715px);
  height: clamp(380px, 47.6667vw, 715px);
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.intro .circle span {
  left: calc(50% + 16px);
  -webkit-transform-origin: calc(50% - 8px) 50%;
          transform-origin: calc(50% - 8px) 50%;
}
.intro .circle::before {
  top: calc(50% - 16px);
  left: calc(50% - 6px);
  -webkit-transform-origin: calc(50% + 8px) calc(50% + 3px);
          transform-origin: calc(50% + 8px) calc(50% + 3px);
}
.intro .circle::after {
  top: 50%;
  left: 50%;
  -webkit-transform-origin: calc(50% - 4px) 50%;
          transform-origin: calc(50% - 4px) 50%;
}
.intro .circle.comp span, .intro .circle.comp::before, .intro .circle.comp::after {
  opacity: 1;
  -webkit-animation: rotate 10s linear infinite;
          animation: rotate 10s linear infinite;
}
.intro .bubble {
  display: block;
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-animation: bubble 4.5s linear;
          animation: bubble 4.5s linear;
}
.intro .bubble01 {
  width: 16px;
  height: 76px;
  background-image: url(../img/top/intro_illust01.png);
}
.intro .bubble02 {
  width: 13px;
  height: 80px;
  border-radius: 6.5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.intro .bubble03 {
  width: 13px;
  height: 53px;
  border-radius: 6.5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.intro .bubble04 {
  width: 17px;
  height: 68px;
  background-image: url(../img/top/intro_illust02.png);
}

@-webkit-keyframes copy {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  15% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  33.3% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  48.3% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}

@keyframes copy {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  15% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  33.3% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  48.3% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes bubble {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  5% {
    opacity: 1;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  5% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  90% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  95% {
    opacity: 1;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}
@keyframes bubble {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  5% {
    opacity: 1;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  5% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  90% {
    opacity: 1;
    -webkit-filter: blur(0px);
            filter: blur(0px);
  }
  95% {
    opacity: 1;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
  100% {
    opacity: 0;
    -webkit-filter: blur(5px);
            filter: blur(5px);
  }
}
@media screen and (max-width: 800px) {
  .intro {
    height: 100svh;
  }
  .intro_inner::before, .intro_inner::after {
    width: calc(90vw + 30px);
    height: calc(90vw + 30px);
  }
  .intro_inner::after {
    width: calc(90vw + 50px);
    height: calc(90vw + 50px);
  }
  .intro .copy01 {
    width: 57.728%;
  }
  .intro .copy02 {
    width: 60.0747%;
  }
  .intro .copy03 {
    width: 79.0827%;
  }
  .intro .copy .name {
    font-size: 12px;
    margin-top: 20px;
  }
  .intro .circle span, .intro .circle::before, .intro .circle::after {
    width: 90vw;
    height: 90vw;
  }
  .intro .bubble {
    background-size: 70%;
  }
  .intro .bubble02 {
    width: calc(13px * 0.7);
    height: calc(80px * 0.7);
  }
  .intro .bubble03 {
    width: calc(13px * 0.7);
    height: calc(53px * 0.7);
  }
}
/* ========================================

kv

======================================== */
.kv {
  position: relative;
  margin-top: 20px;
  margin-bottom: clamp(80px, 13.2vw, 198px);
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.kv::before, .kv::after {
  width: 1px;
  height: 100px;
  content: '';
  display: block;
  position: absolute;
  left: 30px;
  bottom: -20px;
  background-color: #fff;
  z-index: 11;
}
.kv::before {
  -webkit-animation: scroll_bar 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
          animation: scroll_bar 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.kv::after {
  opacity: 0.2;
}
.kv_inner {
  width: var(--w_pc2);
  margin: 0 auto;
}
.kv_inner::before {
  width: 100%;
  height: calc(100vh - 124px - clamp(101px, 8.4vw, 126px));
  min-height: 740px;
  content: '';
  display: block;
}
.kv_item {
  height: 100%;
}
.kv_item .img {
  height: 100%;
}
.kv_item .copy {
  position: absolute;
  z-index: 2;
}
.kv_item .copy01 {
  top: clamp(-35px, -2.3334vw, 0px);
  right: clamp(-35px, -2.3334vw, 0px);
}
.kv_item .copy02 {
  bottom: clamp(-35px, -2.3334vw, 0px);
  left: clamp(-35px, -2.3334vw, 0px);
}
.kv_item .illust {
  position: absolute;
  z-index: 2;
  -webkit-filter: blur(6px);
          filter: blur(6px);
  opacity: 0;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
  -webkit-transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.kv_item.kv01 .copy01 {
  width: 36.1112%;
  max-width: 455px;
}
.kv_item.kv01 .copy02 {
  width: 36.9048%;
  max-width: 465px;
}
.kv_item.kv01 .illust01 {
  width: 16.6667%;
  right: -0.3175%;
  bottom: 17.7381%;
}
.kv_item.kv01 .illust02 {
  width: 10%;
  right: 44.8413%;
  bottom: -3.8096%;
}
.kv_item.kv02 .copy01 {
  width: 56.3493%;
  max-width: 710px;
}
.kv_item.kv02 .copy02 {
  width: 49.6032%;
  max-width: 625px;
}
.kv_item.kv02 .illust01 {
  width: 10%;
  top: -2.7381%;
  left: 22.5397%;
}
.kv_item.kv02 .illust02 {
  width: 17.381%;
  right: -4.127%;
  bottom: 19.7858%;
}
.kv_item.kv03 .copy01 {
  width: 25%;
  max-width: 300px;
}
.kv_item.kv03 .copy02 {
  width: 25%;
  max-width: 300px;
}
.kv_item.kv03 .illust01 {
  width: 17.9366%;
  top: -6.7858%;
  right: 28.254%;
}
.kv_item.kv03 .illust02 {
  width: 13.0953%;
  left: 6.1112%;
  bottom: 8.6905%;
}
.kv .kv_num {
  font-family: var(--f_num);
  font-size: 12px;
  letter-spacing: 0.05em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  position: absolute;
  left: calc(clamp(-120px, -8vw, -60px) + 25px);
  top: 50%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.kv .opening {
  color: var(--c_base);
  width: 320px;
  height: 70px;
  position: absolute;
  right: -30px;
  bottom: -20px;
  background-color: #fff;
  background-image: url(../img/common/bg_texture.png);
  background-size: 250px;
  border-radius: 5px;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.kv .opening .tit {
  font-size: 13px;
  letter-spacing: 0.025em;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  width: 42px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.kv .opening .date {
  font-family: var(--f_num);
  width: calc(100% - 162px);
  border-left: 1px solid rgba(81, 92, 101, 0.2);
  border-right: 1px solid rgba(81, 92, 101, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.kv .opening .date .md {
  font-size: 36px;
  letter-spacing: 0.025em;
  margin-right: 3px;
}
.kv .opening .date .wy {
  font-size: 15px;
  text-transform: uppercase;
}
.kv .opening .txt {
  font-size: 16px;
  font-weight: 400;
  width: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@media screen and (max-width: 800px) {
  .kv {
    margin-bottom: 100px;
  }
  .kv::before, .kv::after {
    display: none;
  }
  .kv_inner {
    width: 78.8%;
  }
  .kv_inner:before {
    height: calc(100vh - 174px);
    height: calc(100svh - 174px);
    min-height: 400px;
  }
  .kv_item .copy {
    position: absolute;
    z-index: 2;
    -webkit-transform: scale(0.371429);
            transform: scale(0.371429);
  }
  .kv_item .copy01 {
    top: -13px;
    right: -13px;
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
  }
  .kv_item .copy02 {
    bottom: -13px;
    left: -13px;
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
  }
  .kv_item.kv01 .copy01 {
    width: 455px;
  }
  .kv_item.kv01 .copy02 {
    width: 465px;
  }
  .kv_item.kv02 .copy01 {
    width: 790px;
  }
  .kv_item.kv02 .copy02 {
    width: 625px;
  }
  .kv_item.kv03 .copy01 {
    width: 300px;
  }
  .kv_item.kv03 .copy02 {
    width: 300px;
  }
  .kv_item .illust {
    display: none;
  }
  .kv .kv_num {
    font-size: 10px;
    left: -16px;
    top: 0;
  }
  .kv .opening {
    text-align: center;
    width: 110px;
    height: 85px;
    right: -20px;
    bottom: 30px;
    padding: 7px 0 8px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .kv .opening .tit {
    font-size: 12px;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    width: 100%;
    margin-bottom: 3px;
  }
  .kv .opening .date {
    width: 100%;
    text-align: left;
    padding-top: 5px;
    border-top: 1px solid rgba(81, 92, 101, 0.2);
    border-left: none;
    border-right: none;
  }
  .kv .opening .date .md {
    font-size: 27px;
    letter-spacing: 0.025em;
    margin-right: 3px;
  }
  .kv .opening .date .wy {
    font-size: 12px;
  }
  .kv .opening .txt {
    font-size: 15px;
    width: 100%;
    display: block;
  }
}
/* ========================================

bills

======================================== */
.bills {
  width: var(--w_pc2);
  max-width: 1140px;
  position: relative;
  margin: 0 auto;
  margin-bottom: clamp(100px, 12.5334vw, 188px);
  padding-top: 62px;
}
.bills_tit {
  position: absolute;
  top: 0;
  left: clamp(0px, 2.3334vw, 35px);
}
.bills_tit h2 {
  font-family: var(--f_serif);
  font-size: 38px;
  line-height: 1.25;
  letter-spacing: 0.025em;
  margin-bottom: 10px;
}
.bills_tit .sub {
  font-size: 14px;
  letter-spacing: 0.025em;
}
.bills .box_img {
  width: 78.9474%;
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 0;
  position: relative;
  background-color: rgba(255, 255, 255, 0.1);
}
.bills .box_img .img {
  max-width: 390px;
  margin: 0 auto;
}
.bills .box_img .en {
  font-family: var(--f_en);
  font-size: 14px;
  text-transform: uppercase;
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.bills .box_img .en::before {
  width: 10px;
  height: 10px;
  content: '';
  display: block;
  margin: 0 4px 2px 0;
  background-color: #fff;
  border-radius: 50%;
}
.bills .btn {
  position: absolute;
  right: 40px;
  bottom: -40px;
}
.bills .btn a {
  font-size: 16px;
  letter-spacing: 0.05em;
  width: 300px;
  height: 80px;
  display: block;
  padding: 0 36px;
  border: 1px solid #fff;
  border-radius: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.bills .btn a:hover {
  color: var(--c_base);
  background-color: #fff;
}
.bills .btn a:hover span {
  border-color: var(--c_base);
}
.bills .btn a:hover span::before {
  border-color: var(--c_base);
}
.bills .btn a:hover span::after {
  background-color: var(--c_base);
}
.bills .btn a .arrow, .bills .btn a .arrow_ul {
  margin-left: auto;
}

@media screen and (max-width: 800px) {
  .bills {
    width: var(--w_sp);
    margin-bottom: 160px;
    padding-top: 48px;
  }
  .bills_tit {
    text-align: center;
    width: 100%;
    left: 0;
  }
  .bills_tit h2 {
    font-size: 25px;
    text-align: center;
    margin-bottom: 18px;
  }
  .bills_tit .sub {
    font-size: 13px;
    text-align: center;
  }
  .bills .box_img {
    width: 100%;
    padding: 90px 0 74px;
  }
  .bills .box_img .img {
    width: 82.0896%;
    margin: 0 auto;
  }
  .bills .box_img .en {
    display: none;
  }
  .bills .btn {
    position: absolute;
    right: calc(50% - 120px);
    bottom: -30px;
  }
  .bills .btn a {
    font-size: 15px;
    width: 240px;
    height: 60px;
    padding: 0 20px;
  }
}
/* ========================================

guidance

======================================== */
.guidance {
  position: relative;
  margin-bottom: clamp(90px, 11.3334vw, 170px);
  padding-bottom: clamp(100px, 12.3334vw, 185px);
	padding-top:clamp(100px, 12.3334vw, 185px);
  z-index: 2;
	background-color: #FFF2E5;
}
.guidance::before {
  width: 100%;
  height: calc(100% - 440px);
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
.guidance .arrow, .guidance .arrow_ul {
  margin-left: 20px;
 color:var(--c_yamabuki);
}
.guidance_about {
  max-width: 1500px;
  margin: 0 auto 135px;
  padding-left: clamp(60px, 8vw, 120px);
  position: relative;
  z-index: 2;
}
.guidance_about .copy {
  font-family: var(--f_serif);
  font-size: 48px;
	color: var(--c_base);
  line-height: 1.66;
  letter-spacing: 0.025em;
  position: relative;
  margin-bottom: 36px;
  z-index: 2;
}
.guidance_about .txt {
  font-family: var(--f_serif);
  font-size: 17px;
 color: var(--c_base);
  line-height: 2.35;
  letter-spacing: 0.06em;
  position: relative;
  margin-bottom: 182px;
  z-index: 2;
}
.guidance_about .img {
  width: 64%;
  position: absolute;
  right: 0;
  top: 272px;
  z-index: 1;
}
.guidance_about .img .caption {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  letter-spacing: 0.02;
  text-align: right;
  display: block;
  margin: 6px 6px 0 0;
}
.guidance_about .box_text {
  position: relative;
	color: var(--c_base);
  z-index: 2;
}
.guidance_about h2 {
  font-family: var(--f_serif);
	color: var(--c_base);
  font-size: 48px;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}
.guidance_about h2 a {
  pointer-events: none;
	color: var(--c_base);
}
.guidance_about .en {
  font-size: 12px;
  margin-bottom: 64px;
}
.guidance_about .link {
  font-size: 16px;
  letter-spacing: 0.025em;
  width: 120px;
	color: var(--c_base);
}
.guidance_about .link a {
  width: 100%;
  padding-bottom: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.guidance_about .illust {
  width: 26.1%;
  max-width: 261px;
  position: absolute;
  top: 15px;
  right: 16.4%;
}
.guidance_inner {
  width: var(--w_pc2);
  max-width: 1380px;
  position: relative;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.guidance_inner .illust {
  width: 129%;
  max-width: 129px;
  position: absolute;
  top: -30px;
  left: -5.3175%;
  z-index: 2;
}
.guidance_item {
  width: 46.0318%;
  position: relative;
	color: var(--c_base);
  z-index: 2;
}
.guidance_item a {
  display: block;
}
.guidance_item a:hover .img {
  opacity: 0.8;
}
.guidance_item a:hover .link::before {
  width: 100%;
}
.guidance_item .img {
  margin-bottom: 30px;
  -webkit-transition: all .2s;
  transition: all .2s;
}
.guidance_item .box_text {
  position: relative;
}
.guidance_item h2 {
  font-family: var(--f_serif);
  font-size: 34px;
  letter-spacing: 0.025em;
  margin-bottom: 20px;
}
.guidance_item .en {
  font-size: 12px;
}
.guidance_item .link {
  font-size: 14px;
  letter-spacing: 0.025em;
  position: absolute;
  top: 6px;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.guidance_item .link::before {
  width: 0%;
  height: 1px;
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: -8px;
  background-color: #F8B500;
  -webkit-transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

@media screen and (max-width: 800px) {
  .guidance {
    margin-bottom: 84px;
    padding-bottom: 105px;
  }
  .guidance::before {
    height: 86.5%;
  }
  .guidance_about {
    width: var(--w_sp);
    margin-bottom: 64px;
    padding-left: 0;
  }
  .guidance_about .copy {
    font-size: 26.5px;
    line-height: 1.7;
    margin-bottom: 18px;
  }
  .guidance_about .txt {
    font-size: 15px;
    line-height: 2.15;
    margin-bottom: 66px;
  }
  .guidance_about .img {
    width: 100%;
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 23px;
  }
  .guidance_about .img .caption {
    font-size: 10px;
    margin-right: 0;
  }
  .guidance_about h2 {
    font-size: 26.5px;
    margin-bottom: 15px;
  }
  .guidance_about h2 a {
    pointer-events: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .guidance_about h2 .arrow, .guidance_about h2 .arrow_ul {
    margin: 4px 0 0 6px;
  }
  .guidance_about .en {
    margin-bottom: 0;
  }
  .guidance_about .link {
    display: none;
  }
  .guidance_about .illust {
    width: 57.8667%;
    top: -86px;
    right: 4.1334%;
  }
  .guidance_inner {
    width: var(--w_sp);
    margin: 0 auto;
  }
  .guidance_inner .illust {
    display: none;
  }
  .guidance_item {
    width: 100%;
  }
  .guidance_item:not(:last-of-type) {
    margin-bottom: 64px;
  }
  .guidance_item h2 {
    font-size: 28px;
    margin-bottom: 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .guidance_item h2 .arrow, .guidance_item h2 .arrow_ul {
    margin: 6px 0 0 6px;
  }
  .guidance_item .img {
    margin-bottom: 22px;
  }
  .guidance_item .link {
    display: none;
  }
}
/* ========================================

news

======================================== */
.news {
  width: var(--w_pc2);
  max-width: 1380px;
  position: relative;
background-color: var(--c_base);
  margin: 0 auto;
  margin-bottom: clamp(110px, 13.6667vw, 205px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.news_tit {
  width: 210px;
}
.news_tit h2 {
  font-family: var(--f_serif);
  font-size: 33px;
  margin-bottom: 16px;
}
.news_tit .en {
  font-family: var(--f_en);
  font-size: 13px;
}
.news_list {
  width: calc(95% - 200px);
  max-width: 890px;
}
.news_list li {
  padding-bottom: 75px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.news_list li:not(:last-of-type) {
  margin-bottom: 88px;
}
.news_list li .date {
  font-family: var(--f_num);
  font-weight: 300;
  color: var(--c_yamabuki);
  font-size: 13px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.news_list li h3 {
  font-family: var(--f_serif);
  font-size: 28px;
  line-height: 1.6;
  letter-spacing: 0.025em;
  margin-bottom: 25px;
}
.news_list li .txt {
  font-size: 15px;
  color: var(--c_cleam);
  line-height: 2;
  letter-spacing: 0.025em;
}
.news_list li .txt a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.news_list li .txt a:hover {
  color: #fff;
  border-bottom: 1px solid #fff;
}
.news .illust {
  width: 26%;
  max-width: 260px;
  position: absolute;
  top: -10%;
  right: -8%;
  z-index: 2;
}

@media screen and (max-width: 800px) {
  .news {
    width: var(--w_sp);
    margin-bottom: 88px;
    display: block;
  }
  .news_tit {
    width: 100%;
    margin-bottom: 68px;
  }
  .news_tit h2 {
    font-size: 28px;
    margin-bottom: 10px;
  }
  .news_tit .en {
    font-family: var(--f_en);
    font-size: 13px;
  }
  .news_list {
    width: 100%;
  }
  .news_list li {
    padding-bottom: 32px;
  }
  .news_list li:not(:last-of-type) {
    margin-bottom: 44px;
  }
  .news_list li .date {
    margin-bottom: 14px;
  }
  .news_list li h3 {
    font-size: 19px;
    line-height: 1.4;
    margin-bottom: 13px;
  }
  .news_list li .txt {
    font-size: 14px;
  }
  .news .illust {
    width: 50.9334%;
    top: -11%;
    right: 0;
  }
}
/* ========================================

top_img

======================================== */
.top_img {
  width: var(--w_pc);
  max-width: 1380px;
  margin: 0 auto;
  margin-bottom: clamp(108px, 13.3334vw, 200px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.top_img .caption {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  letter-spacing: 0.02;
  text-align: right;
  display: block;
  margin: 6px 6px 0 0;
}
.top_img .img01 {
  width: 33%;

}
.top_img .img02 {
  width: 33%;
}

.top_img .img03 {
  width: 33%;
}
.top_img .illust {
  width: 40%;
  max-width: 226px;
  position: absolute;
  top: -15.3969%;
  left: -1.9048%;
  z-index: 2;
}

@media screen and (max-width: 800px) {
  .top_img {
    width: 100%;
    margin-bottom: 95px;
  }
  .top_img .caption {
    font-size: 10px;
    line-height: 1.4;
    margin-right: 4px;
  }
  .top_img .img01,
  .top_img .img02 {
    width: 30%;
  }
  .top_img .illust {
    width: 42.6667%;
    top: auto;
    left: auto;
    right: 9.3334%;
    bottom: -23%;
  }
}

/*# sourceMappingURL=top.css.map */