.bg-container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; pointer-events: none; }
.bg-container::after { content: ""; display: block; background-color: #504b41; opacity: 0.3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; mix-blend-mode: multiply; }
.bg-container video { z-index: 0; width: 100%; height: 100vh; object-fit: cover; object-position: center center; }
@keyframes mainBgFadeMotion { 0% { opacity: 0; }
  100% { opacity: 1; } }
.bg-container .bg-inner { opacity: 0; }
.bg-container .bg-inner.active { animation: mainBgFadeMotion 2s ease-out 0s forwards; }

.page-note { position: relative; background-color: #fff; }

.mainvisual { width: 100%; /*max-width:1280px;*/ overflow: hidden; margin: 0 auto; position: relative; background-color: rgba(0, 0, 0, 0); }
.mainvisual::before { content: ""; display: block; width: 100%; padding-bottom: calc(9 / 16 * 100%); }
.mainvisual .note { color: #fff; }
.mainvisual .mainnote { position: absolute; bottom: 10px; right: 10px; text-shadow: 0 0 10px #000; }
.mainvisual img { width: 100%; height: auto; }
@keyframes maincopyFadeMotion { 0% { opacity: 0; transform: scale(1.4, 1.4); }
  100% { opacity: 1; transform: scale(1, 1); } }
.mainvisual .maincopy { position: absolute; top: 50%; left: 50%; transform: scale(1.4, 1.4); width: 50%; max-width: 500px; translate: -50% -50%; opacity: 0; }
.mainvisual .maincopy.active { animation: maincopyFadeMotion 2s ease-out 1s forwards; }
@media screen and (max-width: 960px) { .mainvisual::before { padding-bottom: 75%; }
  .mainvisual .maincopy { width: 60%; } }
@media screen and (max-width: 560px) { .mainvisual::before { padding-bottom: 120%; }
  .mainvisual .maincopy { width: 75%; } }

main { background-color: transparent; position: relative; }
main .bg-img-cap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 12; pointer-events: none; }
main .bg-img-cap .img { height: 100%; }

/*
.mainvisual { position: sticky; top: 0; height: 100vh; background: url("../images/top/mv_end_bg.jpg") center top / cover no-repeat;
 .image { height: 100vh;
 &::before { height: 100vh; } }
 .mv-inner { position: sticky; top: 0; z-index: 20;
 .img {
//      height: 100vh; z-index: 20;
 .cap { &.in { z-index: 20; } } } } @media screen and (max-width:$bp02){
//         height: 100%; .image{ height: 100%; &::before{ height: 100%; } } }
}
*/
.container-box { position: relative; }
.container-box .bg-image { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 1; }
.container-box .bg-image img { height: 100%; object-fit: cover; object-position: center bottom; }
.container-box .overlay-bg { position: sticky; top: 0; width: 100%; height: 105vh; overflow: hidden; z-index: 1; mix-blend-mode: multiply; background-color: rgba(80, 75, 65, 0.64); }
.container-box .overlay-bg.aos-animate { height: 100vh; }
.container-box .conts-overlay { overflow: hidden; color: #fff; position: relative; }
.container-box .contents-wrap { position: relative; z-index: 1; padding: 0 0 10%; }
.container-box .conts-title { font-size: clamp(32px, 4vw, 4rem); text-align: left; line-height: 1.28; margin-bottom: 10%; }
.container-box .viewmore { width: calc(((360/1040)*100%) + 24px); max-width: calc(360px + 24px); margin-top: 4%; }
.container-box .viewmore a { display: block; width: 100%; padding-right: 24px; }
.container-box .viewmore a p { padding: 0 0 8px 1rem; border-bottom: thin solid #fff; position: relative; }
.container-box .viewmore a p img { max-width: 96px; }
.container-box .viewmore a p::before { content: ""; width: 1rem; height: 1rem; border-right: thin solid #fff; position: absolute; right: 3px; bottom: -8px; transform: rotate(-45deg); }
.container-box .viewmore a:hover { padding-right: 0; }
.container-box .bg-img-cap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 12; pointer-events: none; }
.container-box .bg-img-cap .img { height: 100%; }
@media screen and (max-width: 834px) { .container-box .bg-image { top: 76px; height: 64vh; }
  .container-box .overlay-bg { top: 76px; height: 65vh; }
  .container-box .overlay-bg.aos-animate { height: 64vh; } }
@media screen and (max-width: 560px) { .container-box .bg-image { top: 71.5px; height: 560px; }
  .container-box .overlay-bg { top: 71.5px; height: 562px; }
  .container-box .overlay-bg.aos-animate { height: 560px; }
  .container-box .viewmore { width: 64%; max-width: initial; margin-top: 10%; }
  .container-box .viewmore a p img { max-width: 80px; } }

.contents-cls { position: relative; height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.contents-cls .conts-overlay { width: 100%; overflow: visible; }
.contents-cls .lead { text-align: left; }
.contents-cls .contents-wrap { height: auto; padding-bottom: 0; opacity: 0; transform: translateY(10%); transition: 0.4s ease 0s opacity ,  0.4s ease 0s transform; }
.contents-cls .overlay-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.4s ease 0s opacity; }
.contents-cls .bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: auto 120%; background-position: 50% 0%; }
.contents-cls .bg-img-cap { height: auto; bottom: 0; top: auto; }
.contents-cls.active .overlay-bg { opacity: 1; }
.contents-cls.active .contents-wrap { opacity: 1; transform: translateY(0%); transition-delay: 0.2s; transition-duration: 1.4s; }
@media screen and (max-width: 560px) { .contents-cls { height: auto; padding: 10rem 0; } }

.information-container p { text-align: center; font-size: clamp(18px, 1.75vw, 1.875rem); line-height: 1.2; margin-bottom: 1rem; letter-spacing: 0.075em; }
.information-container .txt-l { font-size: 200%; }
.information-container .txt-s { font-size: 56%; letter-spacing: 0.05em; }
.information-container .conversion { padding-top: 1rem; }
.information-container .map-img { margin-bottom: 1rem; }
.information-container .info-block + .info-block { margin-top: 1rem; }
.information-container .info-block .holiday { margin-bottom: 1rem; }
.information-container .conv1 .conversion:first-of-type { padding-bottom: 0; }
.information-container .conv1 .entry { display: none !important; }
.information-container .conv2 .entry { margin-right: 0; }
.information-container .conv2 .reserve { display: none !important; }
@media screen and (max-width: 560px) { .information-container p { margin-bottom: 8px; }
  .information-container .conversion { padding-top: 1rem; }
  .information-container .info-block + .info-block { margin-top: 0.5rem; }
  .information-container .info-block .holiday { margin-top: 1rem; margin-bottom: 0.5rem; } }

#conts-INFORMATION { padding-top: 0; position: relative; z-index: 1; background-color: #fff; color: #000; height: auto; }
#conts-INFORMATION .contents-wrap { padding: 4rem 0; }
#conts-INFORMATION .conts-title { text-align: center; font-size: clamp(20px, 1.6vw, 1.25rem); font-weight: 400; letter-spacing: 0.1em; margin-bottom: 2.5rem; }
@media screen and (max-width: 834px) { #conts-INFORMATION { margin-top: 0; } }

#conts-CONCEPT { position: relative; height: 100%; padding-top: 0; background: none; }
#conts-CONCEPT::before { content: ""; width: 100%; height: 100%; background-color: rgba(80, 75, 65, 0.8); mix-blend-mode: multiply; display: block; position: absolute; top: 0; left: 0; }
#conts-CONCEPT .conts-overlay { height: auto; margin-top: 0; z-index: 1; }
#conts-CONCEPT .conts-overlay .contents-wrap { padding: 10% 0; }
#conts-CONCEPT .conts-title { text-align: center; font-size: clamp(20px, 1.6vw, 1.25rem); letter-spacing: 0.05em; margin-bottom: 4rem; }
#conts-CONCEPT .copy { width: calc((552/1040)*100%); max-width: 552px; margin: 0 auto 1rem; }
#conts-CONCEPT .keyword { width: calc((200/1040)*100%); max-width: 200px; margin: 0 auto 3rem; }
#conts-CONCEPT .lead { text-align: center; line-height: 3; }
@media screen and (max-width: 560px) { #conts-CONCEPT .conts-overlay .contents-wrap { padding: 20% 0; }
  #conts-CONCEPT .keyword { width: calc((160/430)*100%); max-width: 160px; } }

.modal-content { background-color: #ebe9e8; }
.modal-content .information-container { padding: 2.5rem 2.5rem 0; }
.modal-content .information-container p { margin-bottom: 0.25rem; }
.modal-content .information-container p.lead { font-size: 1rem; margin: 1rem auto 1.5rem; }
.modal-content .information-container .conversion .entry { display: none; }
.modal-content .contact { border-top: none; padding-top: 0; padding-bottom: 2.5rem; }
.modal-content .contact p { width: 100%; text-align: center; font-size: 1.25rem; line-height: 1.28; }
.modal-content .contact .tel { margin: 8px auto; }
.modal-content .contact .att { font-size: 144%; }
.modal-content .contact .red { color: #913622; }
@media screen and (max-width: 560px) { .modal-content .information-container { padding: 1.5rem 1rem 0; }
  .modal-content .information-container p.lead { font-size: 13px; }
  .modal-content .contact p:nth-of-type(2) { margin: 4px auto; }
  .modal-content .contact .tel { margin-top: 0; }
  .modal-content .contact .att { font-size: 136%; margin-bottom: 0; } }

#conts-PLAN .bg-image { background-image: url("../images/top/plan_bg.jpg"); }

#conts-LOCATION .bg-image { background-image: url("../images/top/location_bg.jpg"); }

#conts-ACCESS .bg-image { background-image: url("../images/top/access_bg.jpg"); }