@charset "UTF-8";


html {
    font-size: 100%;    
  }
  body {
    font-size: 0.875rem;
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    line-height: 160%;
    text-align: center;
    margin: auto;
    color: #070707;
    background: #FAF349;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  @media screen and (min-width:1080px) {
    a:hover{
      opacity: 0.6;
    }

  }
  
  img {
    max-width: 100%;
  }
  p{
    max-width: 460px;
  }


.sp-frame{
display: flex;
flex-direction: column;
align-items: center;
}

.sp-frame {
  opacity: 0;
  animation: fadeIn 3s ease-in-out forwards;
}

@keyframes fadeIn {
  0% { 
    opacity: 0;
  }
  100% { 
    opacity: 1;
  }
}


 /*fv*/

  .fv{
    display: flex;
    padding: 0rem 1.25rem;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
  }

  .header{
    display: flex;
    height: 3.75rem;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;    
  }

  @media screen and (min-width:1080px) {
    .header{
      width: 1040px;
      margin: auto;
      height: 5rem;
    }
  }

.nav{
display: flex;
align-items: center;
gap: 1rem;
font-style: normal;
font-weight: 700;
font-size: 0.875rem
  }

.img-fv{
height: auto;
max-width: 1040px;
align-self: stretch;
margin: auto;
}



.loop_wrap {
  display: flex;
  width: 100vw;
  overflow: hidden;
  gap: 2%;
}
.loop_wrap img {

  height: 100%;
}
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}


 /*lead*/
 .lead{
  display: flex;
  padding: 3rem 1.25rem;
  gap: 2rem;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  background: #FFF58D;
 }
 
 @media screen and (min-width:1080px) {
  .lead{
    padding: 5rem 1.25rem;
    gap: 3.75rem;
  }
}
.aboutcbj{
  display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
align-self: stretch;
}
@media screen and (min-width:1080px) {
  .aboutcbj{
    gap: 1.125rem;
  }
}

 .daynight{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
 }

 @media screen and (min-width:1080px) {
  .daynight{
    width: 1040px;
    margin: auto;
  }
}

.daynight-container{
  display: flex;
  padding: 2rem 1.25rem;
  justify-content: center;
  align-items: flex-start;
  gap: 0.625rem;
  align-self: stretch;
  background: #F5F5F5;
 }

 @media screen and (min-width:1080px) {
  .daynight-container{
    padding: 3.75rem 1.25rem;
  }
}

.daynight-content{
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.img-daynight{
  align-self: stretch;
  height: auto;
max-width: 580px;
}
.night-container{
  display: flex;
  padding: 2rem 1.25rem;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  align-self: stretch;
  background: #2A2A2A;
}

@media screen and (min-width:1080px) {
  .daynight-container{
    padding: 3.75rem 1.25rem;
  }
}

.night-text{
  color: #FFF;
}

 /*goods*/
 .goods{
display: flex;
padding: 3rem 1.25rem;
gap: 2rem;
flex-direction: column;
align-items: center;
align-self: stretch;
background: #EFEFEF;
 }
 @media screen and (min-width:1080px) {
  .goods{
    padding: 5rem 1.25rem;
    gap: 3.75rem;
  }
}

.goods-1{
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3.75rem;
align-self: stretch;
max-width: 480px;
margin: auto;
}
.goods-2{
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3.75rem;
align-self: stretch;
}
.goods-3-a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  align-self: stretch;
}
.goods-3-a-title{
  display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
align-self: stretch;
}
.goods-3-a-text{
  align-self: stretch;
text-align: center;
font-weight: 500;
font-size: 1rem;
}
.button-buy{
display: flex;
padding: 0.25rem 0.625rem;
justify-content: center;
align-items: center;
gap: 0.625rem;
font-weight: 500;
background: #070707;
color: #FFF;
}
.goods3-b{
  display: flex;
justify-content: center;
align-items: flex-start;
gap: 0.9375rem;
align-self: stretch;
}

/*location*/
.location{
display: flex;
padding: 3rem 1.25rem;
gap: 2rem;
flex-direction: column;
align-items: center;
align-self: stretch;
}
@media screen and (min-width:1080px) {
  .location{
    padding: 5rem 1.25rem;
    gap: 3.75rem;
  }
}
.map {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  height: 0;
}
@media screen and (min-width:1080px) {
  .map{
    width: 1040px;
    padding-top: 580px;
  }
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.shopinfo{
  display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.time{
  display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.bold{
  font-weight: 900;
  line-height: 100%;
}
.bold-700{
  font-weight: 700;
  line-height: 100%;
}

/*footer*/

.footer{
  display: flex;
  padding: 2.5rem 2rem;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  gap: 5rem;
color: #FFF;
background: #070707;
}

@media screen and (min-width:1080px) {
  .footer{
    display: flex;
    padding: 5rem;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    height: auto;
    gap: 0rem;
  }
}

.footer-a{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
align-self: stretch;
}

.footer-text{
text-align: left;
color:inherit;
text-decoration:none;
}
.footer-b{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
  align-self: stretch;
}

.footer-nav{
  display: flex;
  align-items: flex-start;
  gap: 1.125rem;
}

@media screen and (min-width:1080px) {
  .footer-nav{
    display: flex;
    align-items: flex-start;
    gap: 3rem;
  }
}
.footer-nav-text{
font-weight: 700;
font-size: 0.750rem;
}
.text-10px{
  font-size: 0.625rem;
}