@charset "UFT-8";
:root{
  /* font */
  --ff-title:"Gloock", serif;
  --ff-text:"Noto Sans JP", sans-serif;
  /* color */
  --c-title: #DF958D;
  --c-text: #A87676;
  --c-gb: #FFEAE2;
  --c-bg-text: rgba(255, 234, 226, 0.35);
}
html{
  font-size: 100%;
}
html,
body{
  scroll-behavior: smooth;
  font-family: var(--ff-text);
  font-size: 12px;
  overflow-x: hidden;
}
.wrapper{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}
li{
  list-style-type: none;
}
a{
  text-decoration: none;
  color: inherit;
}
h2,
h3{
  font-size: inherit;
  font-weight: inherit;
}
/* header */
.pc-ver{
  display: none;
}
.ip-ver{
  background-image: url(../img/main_visual.webp);
  height: 100vh;
  background-position: center;
    background-size: cover;
}
.ip-ver li{
  text-transform: uppercase;
  font-size: 15px;
  font-family: var(--ff-title);
  color: var(--c-text);
}
h1 img{
  width: clamp(120px, 81.268px + 10.329vw, 230px);
}

/* ハンバーガーボタン */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  clip-path: inset(0px 0px 99.9% 99.9%);
  border: 0;
}

.ham-button{
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 1;
  bottom: -3%;
  left: 85%;
}

/* ハンバーガーの真ん中の線 */
.ham-button-line{
  display: block;
  width: 30px;
  height: 1px;
  background-color: #000;
  margin: auto;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.ham-button-line::before,
.ham-button-line::after{
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-color: #000;
  position: absolute;
  transition: inherit;
}

/* 上の線 */
.ham-button-line::before{
  top: -8px;
}

/* 下の線 */
.ham-button-line::after{
  top: 8px;
}


/* メニューが開いてる時のボタン */
.open .ham-button-line{
  /* 背景色を透明にする */
  background-color: transparent;
}
.open .ham-button-line::before{
  rotate: 45deg;
  top: 0;
  background-color: var(--c-text);
}
.open .ham-button-line::after{
  rotate: -45deg;
  top: 0;
  background-color: var(--c-text);
}

dialog::backdrop{
  background-color: rgba(255,255,255,0.7);
}
.ip-ver{
  position: relative;
}
.ip-ver h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ip-main-nav{
  position: fixed;
  background-color: var(--c-gb);
  inset: 0 -100% 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  font-size: 1.5rem;
  list-style: none;
  transition: all 0.3s ease-in-out;
}
.open .ip-main-nav{
  transform: translateX(-100%);
}
.ip-main-nav li{
  letter-spacing: 2px;
}
.ip-main-nav a{
  position: relative;
}
.ip-main-nav a::after{
  content: "";
  background-color: var(--c-title);
  height: 1px;
  width: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: -5px;
  transform: scale(0, 1);
  transition: transform 0.3s;
  transform-origin: center top;
}
.ip-main-nav a:hover{
  color: var(--c-title);
}
.ip-main-nav a:hover::after{
  transform: scale(1, 1);
}
/* main */
.scroll{
  opacity: 0;
  translate: 0 50px;
  transition: all 0.7s;
}
.scroll.scroll-active{
  opacity: 1;
  translate: 0 0;
}
h2::before{
  content: attr(data-en);
  font-family: var(--ff-title);
  font-size: clamp(23px, 9.972px + 3.474vw, 60px);
  color: var(--c-title);
  text-transform: uppercase;
  letter-spacing: 3px;
}
h2{
  color: var(--c-text);
  margin-bottom: 35px;
  display: flex;
}
h2 span,
h3 span{
  display: flex;
  align-items: center;
  margin-left: 10px;
  gap: 5px;
  font-size: clamp(12px, 9.183px + 0.751vw, 20px);
}
h2 span::before,h2 span::after,h3 span::before,h3 span::after{
  content: "";
  height: 1px;
  width: clamp(5px, 3.239px + 0.469vw, 10px);
  background-color: var(--c-text);
  display: inline-block;
}
.item-box{
  /* display: flex;
  justify-content: center; */
  margin: 0 auto;
  /* gap: clamp(12px, 2.141px + 2.629vw, 40px); */
}
.swiper-wrapper {
  transition-timing-function: linear;
}
.box{
  margin-top: 100px;
  color: var(--c-text);
}
.item-box > li >img{
  width: 100%;
  /* width: clamp(170px, 141.831px + 7.512vw, 250px); */
  object-fit: cover;
}
.click-item{
  /* display: inline-block; */
  font-family: var(--ff-title);
  font-size: clamp(12px, 10.592px + 0.376vw, 16px);
  margin-top: 30px;
  text-align: right;
  width: fit-content;
  margin-left: auto;
  margin-right: clamp(110px, 85.352px + 6.573vw, 180px);
  /* display: flex; */
  /* align-items: center; */
  /* gap: 10px; */
  position: relative;
}
.click-item::before{
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background-color: var(--c-text);
  transform: rotate(45deg);
  position: absolute;
  /* right: 0; */
  left: calc(100% + 55px);
  bottom: 2px;
  transition: 0.5s;
}
.click-item::after{
  content: "";
  width: 50px;
  height: 1px;
  background-color: var(--c-text);
  display: inline-block;
  position: absolute;
  left: calc(100% + 5px);
  bottom: 3px;
  transition: 0.5s;
}
.bg-text{
  font-family: var(--ff-title);
  color: var(--c-bg-text);
  font-size: clamp(100px, -5.634px + 28.169vw, 400px);
  letter-spacing: 20px;
  text-transform: uppercase;
}
.bg-text1{
  position: relative;
  top: -110px;
  z-index: -1;
  line-height: 80%;
  opacity: 0;
  translate: -100% 0;
  transition: all 1s;
}
.bg-text1.item-active{
  opacity: 1;
  translate: 0 0;
}
.news-box{
  display: flex;
  gap: 20px;
  border-top: 1px solid var(--c-title);
  padding-top: 12px;
  width: clamp(305px, 25.070px + 74.648vw, 1100px);
  margin: 0 auto;
}
.news-box3{
  border-bottom: 1px solid var(--c-title);
  padding-bottom: 10px;
}
.news-box img{
  width: clamp(135px, 41.690px + 24.883vw, 400px);
}
.news-box time{
  color: var(--c-title);
  font-size: clamp(12px, 10.944px + 0.282vw, 15px);
}
.news-box p{
  font-size: clamp(12px, 9.887px + 0.563vw, 18px);
}
.news-item{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: 10px;
}
#news{
  position: relative;
}
.bg-text2{
  transform: rotate(270deg);
  transform-origin: right bottom;
  /* top: clamp(-150px, -51.408px + -26.291vw, -430px); */
  letter-spacing: 15px;
  line-height: 1;
  position: absolute;
  bottom: 0;
  right: -3%;
  z-index: -1;
  
  opacity: 0;
  transition: all 1s;
  translate: 0 2vw;
}
.bg-text2.news-active{
  opacity: 1;
  translate: 0 calc(clamp(100px, -5.634px + 28.169vw, 400px) * -2);
}
h3::before{
  content: attr(data-en);
  color: var(--c-title);
  font-family: var(--ff-title);
  font-size: clamp(15px, 13.239px + 0.469vw, 20px);
  letter-spacing: 2px;
  text-transform: uppercase;
}
h3{
  font-size: 11px;
  display: flex;
  align-items: center;
}
#contact{
  margin-top: calc(clamp(100px, -5.634px + 28.169vw, 400px) + 100px);
}
.contact-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  text-align: left;
  border-top: 1px solid var(--c-title);
  border-bottom: 1px solid var(--c-title);
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 35px;
}
.contact-text p{
  font-size: clamp(12px, 9.887px + 0.563vw, 18px);
}
.contact-text-tel{
  margin-top: 10px;
}
.contact-text img{
  margin-top: 10px;
}
.contact-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}
.btn-top{
  display: none;
}
.active{
  font-family: var(--ff-title);
  color: var(--c-text);
  transform: rotate(270deg);
  position: fixed;
  top: 90%;
  left: 85%;
  display: flex;
  align-items: center;
  gap: 7px;
}
.active::after{
  content: "";
  width: 50px;
  height: 1px;
  background-color: var(--c-text);
  display: inline-block;
}
.bg-text3{
  text-align: right;
  line-height: 80%;
  position: relative;
  top: -65px;
  left: 3%;
  z-index: -1;
  opacity: 0;
  translate: 100% 0;
  transition: all 1s;
}
.bg-text3.contact-active{
  opacity: 1;
  translate: 0 0;
}
/* footer */
footer{
  background-color: var(--c-gb);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
footer img{
  width: 35px;
}
small{
  color: var(--c-text);
}






/* れすぽんしぶ */
@media(min-width: 768px){
  .wrapper{
    max-width: 1200px;
  }
  .ip-ver{
    display: none;
  }
  .pc-ver{
    background-image: url(../img/main_visual.webp);
    background-position: center;
    background-size: cover;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
  }
  .top-icon p{
    font-family: var(--ff-title);
    text-transform: uppercase;
  }
  .top-icon p:hover{
    color: var(--c-title);
  }
  .icon-all{
    display: flex;
    gap: 20px;
  }
  .icon-all img:hover svg{
    fill: var(--c-gb);
  }
  h1 img{
    width: clamp(120px, 81.268px + 10.329vw, 230px);
  }
  .top-icon{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 5%;
    margin-top: 20px;
  }
  .top-icon p{
    font-size: 20px;
  }
  .icon-all li img{
    width: 25px;
  }
  .ham-button{
    display: none;
  }
  nav{
    background-color: rgba(255, 255, 255, 0.75);
  }
  .nav-box{
    display: flex;
    /* justify-content: space-between; */
    padding: 15px 30px;
    max-width: clamp(600px, 388.732px + 56.338vw, 1200px);
    gap: 9%;
    justify-content: center;
    margin: 0 auto;
  }
  .nav-box li{
    font-family: var(--ff-title);
    color: var(--c-text);
    text-transform: uppercase;
    font-size: clamp(12px, 9.183px + 0.751vw, 20px);
  }
  .nav-box li:hover{
    color: var(--c-title);
  }
  .nav-line{
    border-right: 1px solid var(--c-text);
    padding-right: 9%;
  }
  .click-item:hover::before{
    left: calc(100% + 105px);
  }
  .click-item:hover::after{
    width: 100px;
  }
  .contact-box{
    flex-direction: row;
    justify-content: center;
    gap: 5%;
  }
  .contact-text{
    margin-top: 0;
    width: clamp(120px, 21.408px + 26.291vw, 400px);
  }
  .contact-box iframe{
    width: clamp(340px, 283.662px + 15.023vw, 500px);
    height: 300px;
  }
  .btn-top{
    left: 90%;
    font-size: 15px;
  }
}