/* === Global === */
:root{
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', sans-serif;
  --color-main: #AB8E64;
  --screen-base-size: 390;
}

html{
  scroll-behavior: smooth !important;
}

html.is-scroll-resetting{
  scroll-behavior: auto !important;
}

body{
  color: #333;
  background-color: #FFF;  
  font-family: var(--font-sans);
}

body.is-modal-open{
  position: fixed;
  width: 100%;
  overflow: hidden;
}

img, video{
  width: 100%;
}
/* === Global /E === */



/* === Layout === */
.l-container{
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
/* === Layout /E === */


/* === Component === */
.c-line-cta-wrap{
  position: fixed;
  width: min(100%, 750px);
  left: 50%;
  transform: translateX(-50%);
  bottom: 20%;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.c-line-cta{
  display: block;
  width: min(30%, 225px);
  pointer-events: auto;
}

.c-line-cta__img{
  display: block;
}

.c-cta-sec{
  position: relative;
  margin-top: -1px
}

.c-cta-sec-btn{
  width: 92%;
  position: absolute;
  left: 50%;
  bottom: 4.5%;
  transform: translateX(-50%);
}

.c-swiper-wrap{
  position: absolute;
  width: 90%;
  max-width: 750px;
  left: 50%;
  bottom: 54.5%;
  transform: translateX(-50%);
}

.c-fixed-cta{
  display: none;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;

  position: fixed;
  bottom: 1%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}

.c-fiexd-cta__img{
  display: block;
  width: 92%;
  margin: 0 auto;
}

body.is-modal-open .c-fixed-cta{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.swiper .swiper-wrapper {
  transition-timing-function: linear;
}
/* === Component /E === */


/* === Project === */
.p-fv{
  position: relative;
}

.p-fv-swiper-wrap{
  position: absolute;
  width: 90%;
  max-width: 750px;
  left: 50%;
  bottom: 32.5%;
  transform: translateX(-50%);
}

.p-fv-cta{
  position: absolute;
  width: 92%;
  left: 50%;
  bottom: 2.6%;
  transform: translateX(-50%);
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.25));
}

.p-grand-open-wrap{
  background-image: linear-gradient(0deg, #10100d, #080501);
  margin-top: -1px;
  padding-top: 1px;
  display: flex;
  flex-direction: column;
  gap: min(25px, calc(25 / var(--screen-base-size) * 100vw));
  padding-bottom: min(58px, calc(58 / var(--screen-base-size) * 100vw));
}

.p-grand-open-item{
  display: block;
  width: 90.5%;
}

.p-grand-open-item:nth-child(even){
  margin-left: auto;
}

.p-nayami-wrap{
  background-color: #525252;
  display: flex;
  flex-direction: column;
  gap: min(25px, calc(25 / var(--screen-base-size) * 100vw));
  padding-bottom: min(33px, calc(33 / var(--screen-base-size) * 100vw));
  margin-top: -1px;
  padding-top: 1px;
}

.p-nayami-item{
  display: block;
  width: 89%;
  margin: 0 auto;
}

.p-tsunagi{
  width: 100%;
  height: min(94px, calc(94 / var(--screen-base-size) * 100vw));
  background-color: #FFF9E5;
  position: relative;
}

.p-tsunagi-gray{
  background-color: #525252;
  height: min(42px, calc(42 / var(--screen-base-size) * 100vw));
  width: 100%;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
}

.p-tsunagi__ashirai{
  width: min(16px, calc(16 / var(--screen-base-size) * 100vw));
  height: min(94px, calc(94 / var(--screen-base-size) * 100vw));
  object-fit: contain;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1
  ;
}

.p-menu-wrap{
  background-image: linear-gradient(-45deg, #8b6b51 1%, #4f2b29 51%, #4b2d30 100%);  
  padding-top: min(96px, calc(96 / var(--screen-base-size) * 100vw));
  padding-bottom: min(55px, calc(55 / var(--screen-base-size) * 100vw));
  margin-top: min(-42px, calc(42 / var(--screen-base-size) * 100vw));
  clip-path: polygon(0 1%, 50% 0, 100% 1%, 100% 100%, 0% 100%);

  display: flex;
  flex-direction: column;
  gap: min(55px, calc(55 / var(--screen-base-size) * 100vw));
}

.p-menu-item{
  scroll-margin-top: min(20px, calc(20 / var(--screen-base-size) * 100vw));
  border: 1px solid var(--color-main);
  border-radius: 24px;
  margin: 0 auto;
  width: 90%;
  padding: 
    0 
    min(26px, calc(26 / var(--screen-base-size) * 100vw)) 
    min(35px, calc(35 / var(--screen-base-size) * 100vw));
  color: #FFF;
  line-height: 1.75;
  font-size: min(13px, calc(13 / var(--screen-base-size) * 100vw));
}

.p-menu-item-num{
  font-family: var(--font-serif);
  color: #FFF;
  background-color: var(--color-main);
  font-size: min(18px, calc(18 / var(--screen-base-size) * 100vw));
  font-weight: 600;
  display: inline-block;
  line-height: 1;
  padding: 
    min(4px, calc(4 / var(--screen-base-size) * 100vw)) 
    min(18px, calc(18 / var(--screen-base-size) * 100vw)) 
    min(5px, calc(5 / var(--screen-base-size) * 100vw));
  border-radius: 100px;
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-menu-item-num__num{
  font-family: 'Shippori Mincho', sans-serif;
  font-size: min(21px, calc(21 / var(--screen-base-size) * 100vw));
}

.p-menu-item__title{
  font-family: var(--font-serif);
  font-size: min(34px, calc(34 / var(--screen-base-size) * 100vw));
  font-weight: 600;
  text-align: center;
  color: var(--color-main);
  margin-top: -8px;
}

.p-menu-item__photo{
  width: 100%;
  margin: min(10px, calc(10 / var(--screen-base-size) * 100vw)) auto 0;
  display: block;
}

.p-menu-item__text{
  margin-top: min(12px, calc(12 / var(--screen-base-size) * 100vw));
}

.p-menu-item-plan{
  margin-top: min(10px, calc(10 / var(--screen-base-size) * 100vw));
}

.p-menu-item-plan__title{
  font-family: var(--font-serif);
  font-size: min(19px, calc(19 / var(--screen-base-size) * 100vw));
  font-weight: 600;
  color: var(--color-main);
  position: relative;
  padding-left: min(12px, calc(12 / var(--screen-base-size) * 100vw));
}

.p-menu-item-plan__title::before{
  content: '';
  display: block;
  width: min(4px, calc(4 / var(--screen-base-size) * 100vw));
  height: min(25px, calc(25 / var(--screen-base-size) * 100vw));
  background-color: var(--color-main);
  position: absolute;
  left: 0;
  bottom: min(4px, calc(4 / var(--screen-base-size) * 100vw));
}

.p-menu-item-plan__btn{
  margin-top: 15px;
}

.p-menu-item-plan-modal{
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.p-menu-item-plan-modal-wrap{
  width: 90%;
  max-width: 750px;

  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


.p-menu-item-plan-modal__img{
  
  border-radius: min(8px, calc(8 / var(--screen-base-size) * 100vw));
}

.p-menu-item-plan-modal-close{
  width: min(25px, calc(25 / var(--screen-base-size) * 100vw));
  height: min(25px, calc(25 / var(--screen-base-size) * 100vw));
  background-color: gray;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  border-radius: 100px;
}

.p-menu-item-plan-modal-close::before{
  content: '';
  display: block;
  width: min(15px, calc(15 / var(--screen-base-size) * 100vw));
  height: min(2px, calc(2 / var(--screen-base-size) * 100vw));
  background-color: #FFF;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.p-menu-item-plan-modal-close::after{
  content: '';
  display: block;
  width: min(15px, calc(15 / var(--screen-base-size) * 100vw));
  height: min(2px, calc(2 / var(--screen-base-size) * 100vw));
  background-color: #FFF;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.p-access{
  color: #FFF;
  background-color: #000;
  margin-top: -1px;
  padding-top: 1px;
  padding-bottom: min(40px, calc(40 / var(--screen-base-size) * 100vw));
  line-height: 1.75;
  font-weight: normal;
  font-size: min(14px, calc(14 / var(--screen-base-size) * 100vw));
}
.p-access-wrap{
  width: 88%;
  margin: min(18px, calc(18 / var(--screen-base-size) * 100vw)) auto 0;
}

.p-access-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0  min(18px, calc(18 / var(--screen-base-size) * 100vw));;
}

.p-access-table th{
  font-weight: normal;
}


.p-faq{
  font-size: min(16px, calc(16 / var(--screen-base-size) * 100vw));
  background-color: #FCF9F0;
  display: flex;
  flex-direction: column;
  padding:
    0
    min(20px, calc(20 / var(--screen-base-size) * 100vw))
    min(80px, calc(80 / var(--screen-base-size) * 100vw));
  gap: min(35px, calc(35 / var(--screen-base-size) * 100vw));
}

.p-faq-cat{
  background-color: var(--color-main);
  color: #FFF;
  font-size: min(16px, calc(16 / var(--screen-base-size) * 100vw));
  font-weight: 500;
  text-align: center;
  padding:
    min(8px, calc(8 / var(--screen-base-size) * 100vw))
    min(23px, calc(23 / var(--screen-base-size) * 100vw));
  border-radius: 100px;
  display: inline-block;
}

.p-faq-item-q, .p-faq-item-a{
  padding:
    min(20px, calc(20 / var(--screen-base-size) * 100vw))
    min(40px, calc(40 / var(--screen-base-size) * 100vw))
    min(20px, calc(20 / var(--screen-base-size) * 100vw))
    min(30px, calc(30 / var(--screen-base-size) * 100vw));
  position: relative;
  border-bottom: 1px solid #333;
}

.p-faq-item-q{
  cursor: pointer;
}

.p-faq-item-a{
  display: none;
  padding-right: initial;
}

.p-faq-item-q::before, .p-faq-item-a::before{
  content: '';
  display: block;
  width: min(18px, calc(18 / var(--screen-base-size) * 100vw));
  height: min(22px, calc(22 / var(--screen-base-size) * 100vw));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  left: 0;
  top: min(20px, calc(20 / var(--screen-base-size) * 100vw));
}

.p-faq-item-q::before{
  background-image: url(../img/icon-question.png);
}

.p-faq-item-a::before{
  background-image: url(../img/icon-answer.png);
}

.p-faq-item-q::after{
  content: '';
  display: block;
  width: min(30px, calc(30 / var(--screen-base-size) * 100vw));
  height: min(30px, calc(30 / var(--screen-base-size) * 100vw));
  background-image: url(../img/icon-arrow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.p-faq-item-q.is-active::after{
  transform: translateY(-50%) rotate(180deg);
}
/* === Project /E === */


/* === Utility === */

/* === Utility /E === */