@charset "utf-8";

/* common ----------------------------------------*/
*:after { display:none; }
main { font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }
main .inner { max-width: 124rem; padding:0 2rem; margin:0 auto; color:#606060; }

p { margin:0; }
section { margin-top:10rem; }
img { user-drag: none;-webkit-user-drag: none;-moz-user-select: none; }
.max { margin:0 calc(50% - 50vw); width:calc(100% + (50vw - 50%)); }
.btn { background:#A56D35; text-align:center; border-radius:15px; }
.btn a { display:block; padding:0.5rem 2rem; color:#fff; font-size:2rem; font-weight: bold; }
.tc { text-align:center; }
.anc { padding-top:10rem; margin-top:-10rem; }
.pc { display:block; }
.pc-inline { display:inline-block; }
.pc2 { display:block; }
.mid { display:none; }
.sp { display:none; }

@media screen and (max-width:1024px){
  .pc2 { display:none; }
}
@media screen and (max-width:768px){  
  .mid { display:block; }
}
@media screen and (max-width:600px){
  .pc { display:none; }
  .pc-inline { display:none; }
  .sp { display:block; }
}

h2 { font-size:2.6rem; }
h3 { font-size:3.2rem; text-align:center; margin-bottom:2rem; position:relative; }
h3:after {
  content:"";
  display:block!important;
  position:absolute;
  width:100rem;
  height:50%;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  background:#8FEEE8;
  z-index:-1;
}
.h3-sub { margin-bottom:3rem; text-align:center; font-size:1.8rem; line-height:1.8; }

@media screen and (max-width:1000px){
  h3:after { width:90%; }
}
@media screen and (max-width:600px){
  h2 { font-size:2rem; }
  h3 { font-size:2.4rem; }
}
@media screen and (max-width:320px){
  h3 { font-size:2.2rem; }
  .h3-sub { font-size:1.6rem; }
}

/* mv ----------------------------------------*/
#mv { margin-top:0; }
#mv .text-area { margin-top:3rem; }
#mv h2 { text-align:center; }

/* day ----------------------------------------*/
.day-area {}
.day-area p { font-weight: bold; font-size:2.6rem; text-align:center; margin:3rem 0; }
.day-area .btn { max-width:35rem; width:100%; margin:0 auto; }
.day-area {}

@media screen and (max-width:600px){
  .day-area p { font-size:2rem; }
}
@media screen and (max-width:320px){
  .day-area p { font-size:1.6rem; }
}

/* cont-block ----------------------------------------*/
/* common */
.cont-block div:after { display:none; }
.cont-block { background:#F2F2F2; padding:4rem; margin-top:5rem; }
.cont-block.fst { margin-top:0; }
.cont-block ul { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:5rem; }
.cont-block ul li { width:48%; font-size:1.8rem; }
.cont-block .sp-tt,.cont-block ul li p { font-weight: bold; font-size:2.6rem; margin-bottom:1rem; }
.cont-block .sp-tt { display:none; text-align:center; margin-bottom:2rem; }

/* slide */
.cont-block .slide { display:flex; justify-content:space-between; }
.cont-block .slide .item { width:25%; margin:0 10px; }
.cont-block .slide .item img { border-radius:50%; margin:auto; }
.cont-block .slide .item p { text-align:center; margin:1rem 0; font-weight: bold; }
.cont-block .slide .item .btn { background:#fff; border-radius:30px; margin:0; }
.cont-block .slide .item .btn a { color:#606060; font-size:1.6rem; }
.cont-block .btn { max-width:50rem; width:100%; margin:5rem auto 0; background:#fff; }
.cont-block .btn a { color:#606060; font-size:2.6rem; }

/* youtube */
.cont-block .youtube { width:70%; margin:0 auto 5rem; }
.cont-block .youtube div { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; }
.cont-block .youtube div iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
.cont-block .youtube .tt { text-align:center; font-size:3.2rem; font-weight: bold; margin-top:1rem; }
.cont-block .youtube div.lst { margin-top:3rem; }

@media screen and (max-width:820px){
  .cont-block { padding:2rem; }
  .cont-block .sp-tt , .cont-block ul { display:block; }
  .cont-block ul li { width:100%; }
  .cont-block ul li:first-child { margin-bottom:2rem; }
  .cont-block ul li p { display:none; }
}
@media screen and (max-width:600px){
  .cont-block .youtube { width:100%; padding:0 4rem; }
  .cont-block .youtube .tt { font-size:2rem; }
}
@media screen and (max-width:500px){
  .cont-block { padding:4rem 0; }
  .cont-block ul { padding:0 4rem; }
  .cont-block .slide .item .tc { padding:0 5rem; }
  .cont-block .slide .item .btn { max-width:70%; margin:0 auto; }
  .cont-block > .btn { max-width:80%; padding:1rem 0; margin-top:3rem; }
  .cont-block > .btn a { font-size:1.8rem; }
}
@media screen and (max-width:320px){
  .cont-block ul li { font-size:1.6rem; }
}
/* sec02 ----------------------------------------*/
#sec02 {  }
#sec02 .cont-block ul li p { position:relative; }
#sec02 .cont-block ul li p:before,#sec02 .cont-block .sp-tt:before { 
  position:absolute;
  bottom:100%;
  left:0;
  content:"NEW";
  display:block;
  background:#1BD974;
  color:#fff;
  font-weight: bold;
  font-size:1.6rem;
  line-height:1.6rem;
  padding:0.5rem 1rem;
  border-radius:15px;
}
#sec02 .cont-block .sp-tt:before { left:4rem; padding:0 2rem; line-height:1.8; font-size:1.8rem; bottom:initial; top:0; }
#sec02 .cont-block ul li div {  }
#sec02 .cont-block ul li div .price { text-align:right; font-size:2rem; margin:2rem 0; font-weight: bold;}
#sec02 .cont-block ul li div .btn { margin:0 auto; }
#sec02 .cont-block ul li div .btn a { font-size:2rem; }

@media screen and (max-width:320px){
  #sec02 .cont-block .sp-tt:before { top:-50%; left:4rem; }
}

/* shop ----------------------------------------*/
#shop { padding-bottom:10rem; position:relative; }
#shop .inner {  }
#shop ul.brand { display:flex; justify-content:space-between; }
#shop ul.brand:after {display:none;}
#shop ul.brand li { width:48%; text-align:center; }
#shop ul.brand li p { text-align:center; font-weight: bold; margin-top: 2rem; }
#shop ul.brand li .btn { width:60%; margin:2rem auto 0; border:solid 1px #333; }
#shop ul.brand li:first-child .btn { border-color:#8D5E0F; }
#shop ul.brand li:first-child .btn a { color:#8D5E0F; }
#shop ul.brand li .btn a { display:block; padding:1rem 2rem; color:#333; font-weight: bold; font-size:2rem; }
#shop ul.brand li:first-child p { color:#8D5E0F; }
#shop ul.link { display:flex; align-items: flex-end; max-width:80%; margin:5rem auto 0; }
#shop ul.link li {}
#shop ul.link li .tt { background:#209D39; color:#fff; font-size:2.8rem; font-weight: bold; text-align:center; }
#shop ul.link li .shop-list { padding:1rem 0; padding-left:2.5rem; margin-left:2.5rem; margin-top:1rem; border-left:solid 2px #707070; }
#shop ul.link li .shop-list p { line-height:2; }
#shop ul.link li .shop-list p a { font-size:1.8rem; color:#333; font-weight: bold; }
#shop ul.link li.btn { margin-left:10rem; border-color:#630; }
#shop ul.link li.btn a { color:#630; padding:0.5rem 4rem; }
#shop .btn { background:none; border-radius:0; border:solid 1px #333; }
#shop .btn2 { max-width:50rem; margin:5rem auto 0; border-color:#630; }
#shop .btn2 a { color:#630; }


/* slide */
.slick-arrow { z-index:10; }
.slick-arrow i { font-size:6rem; color:#606060; }
.slick-arrow:before { display:none; }
.slick-prev, .slick-next { top:30%; }
.slick-prev { left:10%; }
.slick-next { right:10%; }

/*========================================
               responsive
========================================*/

@media screen and (max-width:1024px){
  
  /* common --------------------*/
  .max { margin:0; width:100%; }
    
}

@media screen and (max-width:768px){
      
  /* sec --------------------*/
  #sec01 .inner , #sec02 .inner { padding:0; }
  #sec01 h3 , #sec01 .h3-sub , #sec02 h3 , #sec02 .h3-sub { padding:0 2rem; }
  /* shop --------------------*/
  #shop ul.brand li { width:45%; }
  #shop ul.brand li p { font-size: 1.5rem; }
  
  /* footer */
  #footer { margin-top:0!important; }
  
}

@media screen and (max-width:600px){
  
  /* common --------------------*/
  h3 { line-height:1.5; }
  h3:before { left:0; width:7rem; height:7rem; }
  
  /* shop --------------------*/
  #shop ul.brand { display:block; margin-top:5rem; }
  #shop ul.brand li {width: 100%;}
  #shop ul.brand li:first-child { margin-bottom:5rem; }
  #shop ul.brand li p { font-size: 1.6rem; }
  #shop ul.brand li img { width:70%; }
  #shop ul.link { display:block; }
  #shop ul.link li .tt { width:30%; }
  #shop ul.link li .shop-list p a { font-size:2.4rem; }
  #shop ul.link li.btn { margin:5rem auto 0; }
    
}

@media screen and (max-width:414px){
  section { margin-bottom:0; }
}

@media screen and (max-width:375px){
  
  /* common --------------------*/
  /* shop --------------------*/
  #calendar .box ul li { width:40%; }
  #calendar .box ul li:last-child { width:60%; font-size:2rem; }
    
}




/*============================================================
common animation
============================================================*/
.scroll-fadein {
  transform:translateY(100px);
  opacity:0;
  transition:.6s;
}
.scroll-fadein.active {
  transform:translateY(0)!important;
  opacity:1!important;
}