*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

@font-face{
  font-family: 'NotoSansCJKjp-Regular';
  src: url('../font/NotoSansCJKjp-Regular.otf');
}
@font-face{
  font-family: 'Cochin';
  src: url('../font/Cochin.ttc');
}
@font-face{
  font-family: 'Apple Chancery';
  src: url('../font/Apple Chancery.ttf');
}

body,a,p,h1,h2,h3,h4{
  font-family: "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #1a1311;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.8;
}
body{
  position: relative;
  -webkit-overflow-scrolling: touch;
}
ul{
  padding: 0;
}
li{
  list-style: none;
}
img{
  width: 100%;
}

.pc{
  display: block;
}
.sp{
  display: none;
}

.fadein1{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(100px);
}
.fadein2{
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(200px);
}
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.fade-block{
  opacity: 0;
  transition: opacity 1.2s ease-in;
}
.fade-block.blockIn {
  opacity: 1;
}

.slide-in {
  overflow: hidden;
  display: inline-block;
}
.slide-in_inner {
  display: inline-block;
}
.leftAnime{
  opacity: 0;
}
.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 1.4s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slideTextX100{
  from {
    transform: translateX(-300%);
    opacity: 0;
  }
  to {
  transform: translateX(0);
    opacity: 1;
  }
}
.slideAnimeRightLeft{
  animation-name: slideTextX-100;
  animation-duration: 1.4s;
  animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes slideTextX-100{
  from {
    transform: translateX(300%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fadein{
  0% {opacity: 0}
  70% {opacity: 0}
	100% {opacity: 1}
}
@keyframes zoomin{
  0% {transform:scale(1.02);opacity: 0}
  70% {transform:scale(1.02);opacity: 0}
	100% {transform:scale(1);opacity: 1}
}

header{
  position: relative;
  /* background: #fff;
  overflow: hidden; */
}
header h1{
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 10;
  width: 140px;
  animation: fadein 5s forwards ease-in-out;
}
header h2{
  position: absolute;
  top: 36%;
  right: 9vw;
  z-index: 10;
  width: 42vw;
  animation: zoomin 4.4s forwards ease-in-out;
}
header h3{
  position: absolute;
  top: 64%;
  right: 14vw;
  z-index: 10;
  width: 29vw;
  animation: zoomin 4.6s forwards ease-in-out;
}
header .photo{
  overflow: hidden;
  animation: zoomin 3.6s forwards ease-in-out;
  background: #766e94;
}

header.bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
}
header.bg.-visible:before {
  transform: translate(0, 0);
}
header.bg:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #766e94;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 2s;
  content: '';
}

.lead{
  width: 68%;
  margin: 50px auto 20px;
  padding-bottom: 5%;
  background-image: url(../img/ribbon.svg);
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: right 2.4rem bottom;
}
.lead img{
  width: 110px;
  margin: 0 auto 20px;
}
.lead .text{
  color: #484a4e;
  font-family: 'Apple Chancery', serif;
  font-size: 30px;
  text-align: center;
  line-height: 2.4;
}

.nav .slider li{
  position: relative;
}
.nav .slider li a{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.nav .slider li a .nav-img{
  transition-duration: 0.6s;
}
.nav .slider li a:hover .nav-img{
  transform: scale(1.1);
  transition-duration: 0.6s;
  opacity: 0.9;
}
.nav .slider .number{
  position: absolute;
  top: 1.5vw;
  right: 1vw;
  width: 3vw;
}


.sec{
  position: relative;
  margin-bottom: 40px;
  padding-top: 20px;
}
.sec .column{
  display: flex;
  width: 84%;
  max-width: 930px;
  margin: auto;
}
.sec .column div:first-child{
  margin-right: 60px;
}
.sec .title{
  width: 160px;
  margin: 0 auto 40px;
}
.sec .photo{
  overflow: hidden;
  position: relative;
  margin: 0 auto 20px;
}
.sec .text{
  margin-bottom: 80px;
}
.sec .text a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: wrap;
  max-width: 400px;
  margin: 0 auto 14px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0,0,0,0);
}
.sec .text a:hover{
  border-bottom: 1px solid #8985aa;
  transition: 0.6s;
}
.sec .item, .sec .price{
  color: #8985aa;
  line-height: 1.6;
}
.sec .item{
  flex: 1;
  font-size: 14px;
  letter-spacing: 0.08rem;
  font-family: 'Cochin', sans-serif;
}
.sec .price{
  /* width: 120px; */
  text-align: right;
  font-size: 12px;
  font-family: 'NotoSansCJKjp-Regular', sans-serif;
}

.sec-owner{
  background-image: url(../img/sec01-item.svg);
  background-size: 14.6%;
  background-repeat: no-repeat;
  background-position: left -.5rem top 270px;
}
#sec1 .box1{
  width: 50%;
  margin: auto;
}
#sec1 .column{
  width: 90%;
  max-width: 1000px;
}
#sec1 .column div:first-child{
  margin-right: 40px;
}

#sec2 .box1{
  margin-top: 310px;
}
#sec2 .box2{
  margin-top: 40px;
}
#sec2 .box3{
  width: 50%;
  margin: auto;
}

#sec3{
  background-image: url(../img/sec03-item.svg);
  background-size: 14.6%;
  background-repeat: no-repeat;
  background-position: right 1rem top 180px;
}
#sec3 .box1{
  width: 50%;
  margin: auto;
}
#sec3 .box3{
  margin-top: 260px;
}

#sec4{
  background-image: url(../img/sec04-item.svg);
  background-size: 12.6%;
  background-repeat: no-repeat;
  background-position: left 0rem top 400px;
}
#sec4 .box1{
  width: 50%;
  margin: auto;
}
#sec4 .box3{
  margin-top: 460px;
}

#sec5{
  background-image: url(../img/sec05-item.svg);
  background-size: 14%;
  background-repeat: no-repeat;
  background-position: right 1rem top 150px;
}
#sec5 .box1{
  margin-top: 10px;
}
#sec5 .box2{
  margin-top: 290px;
}
#sec5 .box3{
  width: 50%;
  margin: auto;
}

#sec6{
  margin-bottom: 20px;
  background-image: url(../img/sec06-item.svg);
  background-size: 12%;
  background-repeat: no-repeat;
  background-position: left 0rem top 200px;
}
#sec6 .box1{
  width: 50%;
  margin: auto;
}
#sec6 .box2{
  width: 55%;
}

.beauty{
  position: relative;
  width: 60%;
  margin: 0 auto 140px;
  transition: 0.4s ease-in-out;
}
.beauty a:hover img{
  opacity: 0.8;
  transition: 0.6s ease-in-out;
}
.beauty .logo{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 96%;
  opacity: 0;
  transition: 0.4s ease-in-out;
}
.beauty a:hover img.logo{
  opacity: 1;
  transition: 0.6s ease-in-out;
}

.postscript{
  width: 68%;
  margin: 0 auto 100px;
  padding-bottom: 5%;
  background-image: url(../img/ribbon.svg);
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: right 2.4rem bottom;
}
.postscript img{
  width: 110px;
  margin: 0 auto 20px;
}
.postscript .text{
  color: #484a4e;
  font-family: 'Apple Chancery';
  font-size: 30px;
  text-align: center;
  line-height: 2.4;
}

.end-block{
  width: 100%;
  max-width: 1000px;
  margin: 5% auto 5% auto;
}
.end-block p{
  margin-bottom: 50px;
  text-align: center;
}
.end-block p a{
  border-bottom: 1px solid #fff;
  padding: 0 0 0.5% 0;
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.2rem;
  font-family: "ヒラギノ明朝","MS P明朝", serif;
}
.end-block a:hover{
  border-bottom: 1px solid #000;
  transition: .3s ease-in-out;
}
.end-block .allitem-btn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.end-block .allitem-btn a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}
.end-block .allitem-btn a span{
  margin: 0 1rem;
}
.end-block .allitem-btn img{
  width: 100px;
}
.end-block .lavender{
  color: #bd85d6;
  font-size: 14px;
  font-family: 'Cochin', sans-serif;
  letter-spacing: 0.1rem;
}
.end-block .f-btn-box{
  width: 30%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 0% auto;
}
.end-block .f-btn-box li{
  width: 50%;
  text-align: center;
}
.end-block ul li a{
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 2px;
  border-bottom: 1px solid #fff;
  transition: .3s;
  font-family: 'futura-pt', sans-serif;
}
.end-block ul li a:hover{
  border-bottom: 1px solid #000;
  transition: .3s;
}
.end-block .item-category{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 60%;
  gap: 20px;
  margin: 0 auto 100px;
  text-align: center;
}
.end-block .item-category li{
  margin-left: -20px;
  border-right: 1px solid #1a1311;
}
.end-block .item-category li:first-child, .end-block .item-category li:nth-child(4){
  border-left: 1px solid #1a1311;
}
.end-block .f-btn-box li a{
  padding: 0 0 2% 0;
}


#pagetop{
  position: fixed;
  right: 5%;
  bottom: 60px;
  width: 35px;
  display: block;
  z-index: 99;
}

.footer{
  letter-spacing: 0.3em;
  position: relative;
  text-align: center;
  padding: 0 0 30px 0;
}
.footer_sns {
  margin: 26px 0 0;
}
.footer_snsNode {
  display: inline-block;
  margin: 0 10px;
  width: 30px;
}
.f-ow{
  width: 120px;
  margin: 25px auto 0 auto;
}
.footer_copyright{
  font-family: "Helvetica",serif;
  font-size: 10px;
  letter-spacing: 0.02em;
  margin: 34px 0 0;
}

@media screen and (min-width:767px) and (max-width:1032px){
  .sec .number{
    font-size: 11rem;
  }
}
@media screen and (max-width:766px){
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }

  header h1{
    width: 160px;
    top: 20px;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    animation: fadein 4.6s forwards ease-in-out;
  }
  header .photo span img{
    position: relative;
    background: #fff;
    z-index: 99;
    width: 100%;
    margin: auto;
    padding: 7% 9%;
    animation: fadein 5.2s forwards ease-in-out;
  }

  .lead{
    width: 80%;
    margin-bottom: 12%;
    background-position: right 0rem bottom;
  }
  .lead .text{
    font-size: 3.6vw;
    line-height: 2.6;
  }

  .nav .slider .number{
    width: 10vw;
    top: 2.5vw;
    right: 2vw;
  }

  .sec .text a{
    align-items: flex-start;
    width: 100%;
    margin: auto;
  }
  .sec .column{
    display: block;
    width: 90%;
  }
  .sec .photo{
    display: block;
    width: 80%;
  }
  .box1, .box2, .box3, #sec6 .box2{
    width: 100%;
    margin: auto;
  }
  .sec .column div:first-child{
    margin-right: 0;
  }
  .sec-owner{
    background-image: none;
  }
  .sec .text a{
    margin-bottom: 4%;
  }
  .sec .item{
    flex: 1;
    line-height: 1.2;
  }
  .sec .price{
    width: 100px;
    line-height: 1.4;
  }

  #sec1 .box1, #sec2 .box3, #sec3 .box1, #sec4 .box1, #sec5 .box3, #sec6 .box1{
    width: 100%;
  }
  #sec1 .box1 .photo, #sec2 .box3 .photo, #sec3 .box1 .photo, #sec4 .box1 .photo, #sec5 .box3 .photo, #sec6 .box1 .photo{
    width: 100%;
  }
  #sec1 .box1 .text a, #sec2 .box3 .text a, #sec3 .box1 .text a, #sec4 .box1 .text a, #sec5 .box3 .text a, #sec6 .box1 .text a{
    width: 90%;
  }

  #sec2 .box1, #sec2 .box2, #sec3 .box3, #sec4 .box3, #sec5 .box2{
    margin-top: 0;
  }

  #sec1{
    background-image: url(../img/sec01-item.svg);
    background-size: 98px;
    background-repeat: no-repeat;
    background-position: left -1rem top 104%;
  }
  #sec1 .column div:first-child{
    margin-right: 0;
  }
  #sec3{
    background-size: 98px;
    background-position: right -1rem top 72%;
  }
  #sec4{
    background-size: 98px;
    background-position: left 0rem top 778px;
  }
  #sec5{
    background-size: 98px;
    background-position: right -1rem top 65px;
  }
  #sec6{
    margin-bottom: 0;
    padding-bottom: 40px;
    background-size: 98px;
    background-position: left 0rem top 739px
  }

  .beauty{
    width: 100%;
    margin-bottom: 20%;
  }
  .beauty .logo{
    opacity: 1;
  }
  .postscript{
    width: 80%;
    margin-bottom: 12%;
    background-position: right 0rem bottom;
  }
  .postscript .text{
    font-size: 3.6vw;
    line-height: 2.6;
  }

  #pagetop{
    bottom: 12%;
  }

  .end-block .item-category{
    width: 80%;
    grid-gap: 1.6em 3%;
    margin-bottom: 18%;
  }
  .end-block .item-category li{
    margin-left: -3%;
  }
  .end-block .item-category li a{
    font-size: 3.6vw;
  }
  .end-block .f-logo{
    width: 40vw;
    margin-bottom: 6%;
  }
  .end-block .f-btn-box{
    width: 80%;
  }
  .end-block .f-btn-box li a{
    font-size: 3.6vw;
  }
  .footer_snsNode{
    width: 12%;
  }

}