@charset "UTF-8";
@import url("../common/style.css");

/* reset */
#flowers, #product_item, #shops, #contact {
  line-height: 0;
  font-size: 0;
}

html{
  scroll-behavior: smooth;
/*  scroll-padding-top: jsで設定*/
}

/* 画像の入れ替え */
.pc { display: none  !important; visibility: hidden; }
.sp { display: block !important; visibility: visible;}

/*========= slick ===============*/
.slider {
  position:relative;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.slider-item img {
  display: inline-block;
  width: 100%;
  height: 100vw;
}

/*========= main ===============*/
/*////////////////////////*/
/*  NEWS  img 1枚目-2枚目  */
/*////////////////////////*/
#flowers {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;  
}

.wreath1{
  width: 100%;
  height: auto;
  margin: 0;
}

.creations {
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.screen1-2{
  position: absolute;
  width: 100%;
/* Heightはjsで指定 */
  z-index: 1;
  background-color: #202020;
  animation-name:fadeInAnime2;
  animation-duration:0.3s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeInAnime2{
  from { opacity: 0; }
  to   { opacity: 0.65; }
}

#shopLogo_mainvisual {
  position: absolute;
  width: 55%;
  height: auto;
/*  top: jsで指定 */
  left: 50%;
  z-index: 2;
  color: #000000;
  transform: translate(-50%,-90%);
}

.article1 h2, .article1 p{
  display: inline-block;
  position: absolute;
  font-family: serif;
/*  top: jsで指定 */
  left: 50%;
  width: 80vw;
  z-index: 2;
/*  font-size: jsで指定 */
  line-height: 6vw;
  text-align: center;
  color: #f0f0f0;
  transform: translate(-50%, 0%);
}

.article1 h2:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 20vw;
  transform: translate(-50%, 50%);
  border-bottom: 0.8vw #0080f0 solid;
}

.article1 p a {
  display: block;
  position: absolute;
  font-family: serif;
/*  top: jsで指定 */
  left: 50%;
  width: 30vw;
  z-index: 2;
  font-size: 3vw; 
  text-align: center;
  color: #f0f0f0;
  border-radius: 0;
  transform: translate(-50%, 0%);
  background-color: #0080f0;
  text-decoration: none;
  padding: 1.5vw 1vw 1.5vw 3.0vw;
  cursor: pointer;
}

.article1 p a:hover {
  background-color: #0050b0;
}

.article1 p a img {
  position: absolute;
  width: 2.5vw;
  margin-right: 0;
  transform: translate(-150%, 50%);
}

/*========= scroll指示 ===============*/
.arrowTop {
  position: absolute;
  margin-top: 10%;
  z-index: 2;
  width: 15vw;
  height: auto;
  left: 50%;
  transform: translate(-50%, 0%);
}

.arrowTop img{
  position: absolute;
  width: 15vw;
  transform: translate(-6%,0%);
}

.arrows {
  position: absolute;
  transform: translate(0%,30%);
}

.a1 {
  display: inline-block;
  width: 5vw;
  height: 7.05vw;
  margin-top: 3vw;
}

.a2{
  display: inline-block;
  width: 5vw;
  height: 7.05vw;
  margin-top: 6vw;
}
.a3{
  display: inline-block;
  width: 5vw;
  height: 7.05vw;
  margin-top: 9vw;
}

.a1, .a2, .a3 {
  opacity: 0;
  stroke: #c0c0c0;
  fill: transparent;
  stroke-width: 0.3vw;  
  animation: arrow 2s infinite;
}

@keyframes arrow
{
    0% {opacity:0}
   40% {opacity:1}
   80% {opacity:0}
  100% {opacity:0}
}

.a1 {
  animation-delay:-1s;
}

.a2 {
  animation-delay:-0.5s;
}

.a3 { 
  animation-delay:0s;
}
/*ここまで*/

#shopLogo_mainvisual, .article1 h2, .article1 p, .article1 p a, .arrowTop img, .arrows img {
  position: absolute;
  z-index: 2;
  animation-name:fadeInAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeInAnime{
  from { opacity: 0; }
  to   { opacity: 1; }
}

/*/////////////////////*/
/*  GOODS  slick 3枚目 */
/*/////////////////////*/

#product_item {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;  
}

#slide_left_to_right_pt1 {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: -120%;
}

#slide_left_to_right_pt1.is-show {
  animation-iteration-count: 1;
  animation: slide_left_to_right_pt1_anime 1s forwards;
}

@keyframes slide_left_to_right_pt1_anime
{
    0% {left:-120%;}
  100% {left:    0;}
}

.screen3 {
  position: absolute;
  width: 100%;
  transform: translate(0%, -100%);
/* Heightはjsで指定 */
  z-index: 1;
  opacity: 0.75;
  background-color: #202020;
}

.goodslist {
  display: inline-block;
  position: absolute;
  width: 100%;
/*  height: jsで指定 */
  z-index: 2;
  font-size: 3vw;
  font-family: serif;
  line-height: 6vw;
  text-align: left;
  transform: translate(0%, -100%);
  color: #f0f0f0;
}

#modamaItemLetter {
  display: inline-block;
  position: absolute;
  top:12%;
  width: 30vw;
  font-size: 5vw;
  text-align: left;
  transform: translate(10%, 0%);
  font-family: serif;
  left: 0;
}

#modamaItemLetter:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 100%;
  width: 40%;
  height: 2vw;
  border-bottom: 0.8vw #0080f0 solid;
}

.explanations1 {
  display: inline-block;
  position: absolute;
  width: 30%;
  height: 10vw;
  top: 19%;
  transform: translate(10%, 0%);
  font-family: serif;
  left: 0;
}

.goodslist ul {
  display: inline-block;
  position: absolute;
  width: 50%;
  top: 27%;
  left: 0;
  transform: translate(20%, 0);
}

.list_caution {
  display: inline-block;
  position: absolute;
  width: 80%;
  top: 79%;
  left: 0;
  transform: translate(10%, 0);
  padding-left: 1.3rem;
  text-indent: -1.3rem;
}

/*///////////////////*/
/*   SHOP  img 4枚目 */
/*///////////////////*/
#shops {
  position: relative;
  margin: 0;
  padding: 0;
  display: inline-block;
  overflow: hidden;
}

#slide_right_to_left {
  position: absolute;
  z-index: 1;
  width: 100%;
  right: -120%;
  box-sizing: border-box;
}

#slide_right_to_left.is-show {
  animation-iteration-count: 1;
  animation: slide_right_to_left_anime 1s forwards;
}

@keyframes slide_right_to_left_anime
{
    0% {right: -120%;}
  100% {right: 0;}
}

.screen4 {
  position: absolute;
  width: 100%;
  transform: translate(0%, -100%);
/* Heightはjsで指定 */
  z-index: 1;
  opacity: 0.75;
  background-color: #202020;
}

.shoplist {
  display: inline-block;
  position: absolute;
  width: 100%;
/*  height: jsで指定 */
  z-index: 2;
  font-size: 3vw;
  font-family: serif;
  line-height: 6vw;
  text-align: right;
  transform: translate(0%, -100%);
  color: #f0f0f0;
}

#modamaShopLetter {
  display: inline-block;
  position: absolute;
  top:12%;
  width: 20vw;
  text-align: right;
  font-size: 5vw;
  transform: translate(-20%, 0%);
  font-family: serif;
  right: 0;
}

#modamaShopLetter:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 100%;
  right: 0%;
  width: 10vw;
  transform: translate(0%, 50%);
  border-bottom: 0.8vw #0080f0 solid;
}

.explanations2 {
  display: inline-block;
  position: absolute;
  width: 30%;
  height: 10vw;
  top: 19%;
  transform: translate(-14%, 0%);
  font-family: serif;
  right: 0;
}

.map_letter {
  display: inline-block;
  position: absolute;
  width: 80%;
  top: 35%;
  right: 0;
  transform: translate(-8%, 0);
}

.shoplist p a {
  display: block;
  position: absolute;
  font-family: serif;
  right: 50%;
  width: 40vw;
  z-index: 2;
  font-size: 3vw; 
  text-align: center;
  color: #f0f0f0;
  border-radius: 0;
  transform: translate(50%, 600%);
  background-color: #0080f0;
  text-decoration: none;
  padding: 1.5vw 1vw 1.5vw 3.0vw;
  cursor: pointer;
}

.shoplist p a:hover {
  background-color: #0050b0;
}

.shoplist p a img {
/*  border: 2px solid #008800;*/
  position: absolute;
  width: 2.5vw;
  margin-right: 0;
  transform: translate(-150%, 50%);
}

/*///////////////////*/
/*   SHOP  img 5枚目 */
/*///////////////////*/
#contact {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#slide_left_to_right_pt2 {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: -120%;
}

#slide_left_to_right_pt2.is-show {
  animation-iteration-count: 1;
  animation: slide_left_to_right_pt2_anime 1s forwards;
}

@keyframes slide_left_to_right_pt2_anime
{
    0% {left:-120%;}
  100% {left:    0;}
}

.screen5 {
  position: absolute;
  width: 100%;
  transform: translate(0%, -100%);
/* Heightはjsで指定 */
  z-index: 1;
  opacity: 0.75;
  background-color: #202020;
}

.contactus {
  display: inline-block;
  position: absolute;
  width: 100%;
/*  height: jsで指定 */
  z-index: 2;
  font-size: 3vw;
  font-family: serif;
  line-height: 6vw;
  text-align: left;
  transform: translate(0%, -100%);
  color: #f0f0f0;
}

#modamaContactLetter {
  display: inline-block;
  position: absolute;
  top:12%;
  width: 30vw;
  font-size: 5vw;
  text-align: left;
  transform: translate(10%, 0%);
  font-family: serif;
  left: 0;
}

#modamaContactLetter:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 90%;
  width: 30%;
  height: 2vw;
  border-bottom: 0.8vw #0080f0 solid;
}

.explanations3 {
  display: inline-block;
  position: absolute;
  width: 30%;
  height: 10vw;
  top: 19%;
  transform: translate(10%, 0%);
  font-family: serif;
  left: 0;
}

.contact_letter {
  display: inline-block;
  position: absolute;
  width: 80%;
  top: 35%;
  left: 0;
  transform: translate(10%, 0);
}

.contactus p a {
  display: block;
  position: absolute;
  font-family: serif;
  left: 50%;
  width: 40vw;
  z-index: 2;
  font-size: 3vw; 
  text-align: center;
  color: #f0f0f0;
  border-radius: 0;
  transform: translate(-50%, 600%);
  background-color: #0080f0;
  text-decoration: none;
  padding: 1.5vw 1vw 1.5vw 3.0vw;
  cursor: pointer;
}

.contactus p a:hover {
  background-color: #0050b0;
}

.contactus p a img {
  position: absolute;
  width: 5vw;
/*  margin-right: 0;*/
  transform: translate(-5vw, 0vw);
}


/* ----------------------------------- */
/*     responsive   over 960px        */
/* ----------------------------------- */
@media screen and (min-width: 960px){
  .pc { display: block !important; visibility: visible;}
  .sp { display: none  !important; visibility: hidden;}

  html{
    scroll-padding-top: 4rem;
  }

  /*////////////////////////*/
  /*  NEWS  img 1枚目-2枚目  */
  /*////////////////////////*/
  @keyframes fadeInAnime2{
    from { opacity: 0; }
    to   { opacity: 0.4; }
  }

  #shopLogo_mainvisual {
    width: 40%;
    height: auto;
/*    top:jsで指定 */
    transform: translate(-50%,100%);
  }

  .article1 h2, .article1 p{
  /*  top: jsで指定 */
  /*  font-size: jsで指定 */
    line-height: 3vw;
    margin-top: -5%;
  }

  .article1 h2:before {
    left: 50%;
    width: 10vw;
    transform: translate(-50%, 0%);
    border-bottom: 0.4vw #0080f0 solid;
  }

  .article1 p a {
  /*  top: jsで指定 */
    width: 15vw;
  /*  font-size: jsで指定 */ 
    padding: 0.75vw 0.5vw 0.75vw 1.5vw;
  }

  .article1 p a:hover {
  }

  .article1 p a img {
    width: 1.25vw;
    transform: translate(-170%, 50%);
  }

  /*========= scroll指示 ===============*/
  .arrowTop {
    position: absolute;
    margin-top: -25%;
    width: 7.5vw;
    left: 50%;
    transform: translate(-50%, -0%);
  }

  .arrowTop img{
    width: 7.5vw;
  }

  .a1 {
    width: 2.5vw;
    height: 3.525vw;
    margin-top: 1.5vw;
  }

  .a2{
    width: 2.5vw;
    height: 3.525vw;
    margin-top: 3vw;
  }
  .a3{
    width: 2.5vw;
    height: 3.525vw;
    margin-top: 4.5vw;
  }

  .a1, .a2, .a3 {
    stroke-width: 0.15vw;  
  }
  /*ここまで*/

  /*========= slick ===============*/
  .slider {
  }

  .slider-item img {
    width: 100%;
/*    height: jsで指定 */
  }

  /*/////////////////////*/
  /*  GOODS  slick 3枚目 */
  /*/////////////////////*/
  .screen3 {
    opacity: 0.6;
  }

  .goodslist {
    font-size: 1.5vw;
    line-height: 3vw;
  }

  #modamaItemLetter {
    width: 15vw;
    font-size: 2.5vw;
    transform: translate(30%, 0%);
  }

  #modamaItemLetter:before {
    height: 0.5vw;
    width: 40%;
    border-bottom: 0.4vw #0080f0 solid;
  }

  .explanations1 {
    width: 15%;
    height: 5vw;
    transform: translate(30%, 0%);
  }

  .goodslist ul {
    transform: translate(15%, 0);
  }

  .list_caution {
    transform: translate(8%, 50%);
  }

  /*///////////////////*/
  /*   SHOP  img 4枚目 */
  /*///////////////////*/
  @keyframes slide_right_to_left_anime
  {
      0% {right: -120%;}
    100% {right: 0;}
  }

  .screen4 {
    opacity: 0.6;
  }

  .shoplist {
    font-size: 1.5vw;
    line-height: 3vw;
  }

  #modamaShopLetter {
    width: 10vw;
    font-size: 2.5vw;
    transform: translate(-40%, 0%);
  }

  #modamaShopLetter:before {
    width: 5vw;
    border-bottom: 0.4vw #0080f0 solid;
  }

  .explanations2 {
    width: 15%;
    height: 5vw;
    transform: translate(-26%, 0%);
  }

  .map_letter {
    transform: translate(-4%, 0%);
  }

  .shoplist p a {
    right: 50%;
    width: 20vw;
    font-size: 1.5vw; 
    padding: 0.75vw 0.5vw 0.75vw 1.5vw;
  }

  .shoplist p a img {
    width: 1.25vw;
  }

  /*///////////////////*/
  /*   SHOP  img 5枚目 */
  /*///////////////////*/
  .screen5 {
    opacity: 0.6;
  }

  .contactus {
    font-size: 1.5vw;
    line-height: 3vw;
  }

  #modamaContactLetter {
    width: 15vw;
    font-size: 2.5vw;
    transform: translate(30%, 0%);
  }

  #modamaContactLetter:before {
    width: 30%;
    height: 1vw;
    border-bottom: 0.4vw #0080f0 solid;
  }

  .explanations3 {
    width: 15%;
    height: 5vw;
    transform: translate(30%, 0%);
  }

  .contact_letter {
    width: 80%;
  }

  .contactus p a {
    width: 20vw;
    font-size: 1.5vw; 
    padding: 0.75vw 0.5vw 0.75vw 1.5vw;
  }

  .contactus p a img {
    width: 2.5vw;
    transform: translate(-2.5vw, 0vw);
  }
}