@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400&family=Shippori+Mincho+B1:wght@400&display=swap');


body{
  box-sizing: border-box;
  font-size:16px;
  color:#555555;
}

main{
  overflow: hidden;
}

img{
  max-width:100%;
}

.text-serif-jp{
  font-family: 'Shippori Mincho B1', serif;
}

.text-theme{
  color:#dc91a1;
}
.bg-theme{
  background-color:#dc91a1;
}

section#hero{
  height:100vh;
  position:relative;
  overflow: hidden;
}
section#hero .hero-image{
  width:100vw;
  height:100vh;
  object-fit:cover;
  object-position:0% 50%;
}


.swiper {
  width: 100%;
  height: 100vh;
}
.swiper .swiper-slide {
  /*  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 50% 50%;*/
  overflow:hidden;
  position: relative;
}


section#hero .swiper-slide img{
  position:absolute;
  top:25%;
  right:0;
  min-width:100vw;
  height:auto;
  transform: translate(0, -25%);
}

section#hero #hero-content{
  position:absolute;
  left:0;
  top:0;
  z-index:1;
  padding:2rem 0;
  display: flex;
  flex-wrap:wrap;
}

section#hero #item{
  width:50%;
  display:flex;
  align-items:flex-end;
}

section#hero #item img{
  max-height:60vh;
}

section#hero #rose{
  width:50%;
  display:flex;
  align-items:flex-end;
  justify-content: flex-end;
}

section#hero #rose img{
  max-width:25vw;
}



section#hero #hero-content .copy-cacth{
  font-family: 'Shippori Mincho B1', serif;
  font-size:2.25rem;
  color:#fff;
  line-height:1.2;
  margin-bottom:0.6em;
  width:100%;
  background-color:rgba(220,145,161,0.9);
  padding:1.25rem;
}

section#hero #hero-content .copy-cacth span{
  font-family: 'Crimson Text', serif;
  font-size:110%;
}



@media (max-aspect-ratio: 1/1) {

  section#hero #item img{
    max-height:30vh;
  }


  section#hero #rose img{
    max-width:45vw;
  }

  section#hero #hero-content{
    position:absolute;
    left:0;
    top:auto;
    bottom:0;
    z-index:1;
    padding:1.2rem;
    max-width:92vw;

  }


  section#hero #hero-content .copy-cacth{
    font-size:1.75rem;
    margin-bottom:0.6em;
  }


  section#hero .swiper-slide img{
    top:0%;
    right:0;
    min-width:initial;
    width:initial;
    min-height:100vh;
    transform: translate(0, 0);
    object-fit: cover;
    object-position: 95% 0%;
  }


}


a.scroll-down{
  display: inline-block;
  position: absolute;
  right: 0px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 110px;
  overflow: hidden;
  background-color: rgba(236,176,187,0.8);
  color:#fff;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  z-index:1;
}

a.scroll-down:hover{
  color:rgba(255,255,255,0.4);
}

a.scroll-down::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 100px;
  background: #fff;
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


section#section01{
  background-color:#f1ebed;
  position:relative;

}


section#section01 .divider01{
  width:100vw;
  height:50vw;
  content:'';
  background-image:url(../images/divider_bubble_01.png);
  background-size:100% auto;
  background-position:50% 0%;
  background-repeat:no-repeat;
  z-index:1;
  display:block;
  position:absolute;
  top:0vw;
  pointer-events: none;
}

section#section01 .divider02{
  width:100vw;
  height:50vw;
  content:'';
  background-image:url(../images/divider_bubble_02.png);
  background-size:100% auto;
  background-position:50% 50%;
  background-repeat:no-repeat;
  z-index:1;
  display:block;
  position:absolute;
  top:-20vw;
  pointer-events: none;

}


section#section02{
  background-color:#edb2c3;
}


section#section03{
  background-color:#fff;
}


section#section04{
  background-color:#f1ebed;
}


/* 成分 */
section#section04{
  position:relative;
}


section#section04 .component01{

}

section#section04 .component-row{
  position:relative;
}

section#section04 .component02{
  /*transform:translatey(25%);*/
  padding-top:10%;
}


section#section04 .component03{
  margin-top:-5%;
}

section#section04 h3{
  padding:0 0 0.5em;
  margin:0 0 0.5em;
  font-size:1.35rem;
}


section#section04 .img-component{
  border-radius: 2rem;
}

@media screen and (max-width: 768px) {
  section#section04 .component02{
    padding-top:0;
  }
  section#section04 .component03{
    margin-top:0;
  }
}

section#section04 .divider03{
  width:100vw;
  height:50vw;
  content:'';
  background-image:url(../images/divider_bubble_02.png);
  background-size:100% auto;
  background-position:50% 50%;
  background-repeat:no-repeat;
  z-index:1;
  display:block;
  position:absolute;
  bottom:-25vw;
  left:0;
  pointer-events: none;

}



section#section06{
  background-color:#f1ebed;
}




dl.horizontal {
  position:relative;
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  margin:0;
}

dl.horizontal dt {
  flex-basis: 4.5rem;
  padding: 0.3rem 0.4rem;
  border-right: 1px solid rgba(0,0,0,0.25);
  margin:0 0 0.5rem;
  font-weight:normal;

}

dl.horizontal dd {
  flex-basis: calc(100% - 4.5rem);
  padding: 0.3rem 0.4rem;
  margin:0;
}


@media screen and (max-width: 559px) {
}


dl.horizontal dt,
dl.horizontal dd{
  font-size:80%
}

dl.horizontal dt.price,
dl.horizontal dd.price{
  font-size:100%
}

dl.horizontal ul.component{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
}
dl.horizontal ul.component li{
  margin:0 0 0.2em;
  padding:0;
  width:50%;
}


.swiper-dating{
  position:relative;
}

.swiper-dating .swiper-slide{
  border-radius:2rem;
}

.swiper-dating .swiper-wrapper{
  overflow: hidden;
  border-radius:2rem;
}

.swiper-dating .bg{
  position:absolute;
  content:'';
  width:50%;
  height:50%;
  background-color:rgba(255,255,255,0.25);
  top:-3.25rem;
  left:-3.25rem;
  border-radius:2rem;
}




.swiper-dating .swiper-slide img {
  transform: scale(1);
  transition: transform 7.5s linear ;
  max-width: 100%;
  width: 100%;
  border-radius:2rem;
}
.swiper-dating .swiper-slide.swiper-slide-duplicate-active img,
.swiper-dating .swiper-slide.swiper-slide.swiper-slide-active img {
  transform: scale(1.15);
}


#section02{
  position:relative;
  overflow:hidden;
}

.cannabis-sativa-container{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  max-width:65vw;
  height:100%;
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:3rem;
}

.cannabis-sativa .bg{

  position:absolute;
  top:0;
  left:0;
  content:'';
  width:65vw;
  height:40vw;
  display:block;
  z-index:1;
  background-image:url(../images/prize.png);
  background-size:contain;
  background-position:50% 0%;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  .cannabis-sativa-container{
    display:block;
    max-width:100%;
  }
  .cannabis-sativa-container h3{
    margin-top:auto;
  }
  .cannabis-sativa .bg{
    width:100vw;
    height:75vw;
  }

}



#logo{
  max-width:300px;
  margin:0 auto;
}

#logo08{
  transform-origin: 50% 50%;
}


section#section03{
  position:relative;
  overflow: hidden;
}
section#section03 h3{
  z-index:2;
  position:absolute;
  top:10em;
  left:-3em;
  background-color:#ecae9f;
  color:#fff;
  transform: rotate(-45deg);
  padding:0.3em 1em;
  width:18em;
  text-align:center;
  transform-origin:0% 0%;
  font-size:0.85rem;
}


.swiper-effect {

}

.swiper-effect .swiper-wrapper {
/*  transition-timing-function: linear;*/
}

.swiper-effect .swiper-button-next ,
.swiper-effect .swiper-button-prev {
	background-color: rgba(255,255,255,0.8);
	color:#dc91a1;
	width:36px;
	height:36px;
	border-radius:100vh;
	padding:5px;
	}
.swiper-effect .swiper-button-next:after ,
	.swiper-button-prev:after{
		font-size:16px;
	}


/* 画像のサイズ調整 */
.swiper-effect .swiper-slide img {
  height: auto;
  width: 100%;
}

.swiper-effect figure{
  margin:0;
  padding:0;
  position:relative;
}

.swiper-effect figure figcaption{
  position:absolute;
  bottom:0.2rem;
  right:0.2rem;
  background-color:rgba(220,145,161,0.85);
  border-radius:100vh;
  width:40%;
  height:40%;
  color:#fff;
  font-size:1.2rem;
  display:flex;
  flex-direction: column;;
  align-items:center;
  justify-content: center;
  text-align:center;
  line-height:1.35;
}

.swiper-effect figure figcaption span{
  font-family: 'Crimson Text', serif;
  position: absolute;
  font-size:2.5rem;
  line-height: 0;
  top:5%;
}

.swiper-effect .swiper-wrapper .swiper-slide{
  height:auto;
}

.swiper-effect .swiper-wrapper .swiper-slide.swiper-slide01,
.swiper-effect .swiper-wrapper .swiper-slide.swiper-slide03{
    background-color:rgba(220,145,161,0.25);
}

section#section03 .description{
  padding:1.25rem;
  height:100%;
}


#banner-content{
  position:fixed;
  right:0;
  top:50%;
  z-index:999;
  transform:translate(100%, -50%);
  transition:all 0.3s ease;
}

#banner-content.active{
  transform:translate(0, -50%);
}

#banner-content a{
  writing-mode: vertical-rl;
  text-orientation: upright;
  background-color:#8c0d25;
  color:#fff;
  line-height:1em;
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  padding:0.8em 0.8em;
  text-align:center;
  width:100%;
  font-size:80%;
  text-decoration:none;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

#banner-content .content-inquiry a .text{
  display:none;
}

@media screen and (max-width: 768px) {

  #banner-content{
    right:auto;
    left:0;
    top:auto;
    bottom:0;
    width:100%;
    transform:translate(0, 150%);
  }
  #banner-content.active{
    transform:translate(0, 0);
  }
  #banner-content > div{
    width:50%;
  }

  #banner-content a{
    writing-mode: unset;
    display:flex;
    justify-content:center;
    align-items:center;
    flex:1;
    padding:1.25em 0.15em;
    font-size:1.0rem;
    border-radius: 0;
    position:relative;
  }
  .banner-item{
    display:block;
    position:absolute;
    left:0px;
    bottom:0.1rem;
    width:70px;
    height:auto;
  }
  .swiper-effect figure figcaption{
    font-size:0.7rem;
  }
}



.btn-purchase{
  display:inline-block;
  background-color:#dc91a1;
  color:#fff;
  padding:0.8em 2em;
  border-radius: 100vh;
  text-decoration:none;
}


#footer{
background-color:#f1ebed;
}