@charset "utf-8";



/* common */
.back_bk{ background:#000; }
.back_wt{ background:#FDFDFD; }
.back_pi{ background:#eb738f; }
.back_lpi{ background:#f7baa5; }
.back_bl{ background:#0e6eb8; }
.back_org{ background:#ea591d; }
.back_cme{ background:#c99e2a; }
.back_ylw{ background:#FFF100; }
.back_brn{ background:#7f4e20; }
.back_brn2{ background:#6A3906; }
.back_nev{ background:#161b61; }
.back_blk { background:#221814; }
.back_gry { background:#c9c9ca; }
.back_grn { background:#006834; }
.back_d-grn { background:#056823; }
.back_wine { background:#a11251; }
.back_lgrn { background:#9dbb87; }
.back_pp { background:#920681; }
.back_red { background:#ea000e; }
.back_red2 { background:#E60012; }

body { 
  font-family: YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;  
  color:#fff;
  background:#005479;
}
p { margin:0; }
header { background:#fff; }
header .inner { padding:0; }
nav,header,.breadcrumbs { font-family: YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }
ul:after { display:none; }

/* パンクズ */
.breadcrumbs { max-width:100%; background:#fff; margin:0; }
.breadcrumbs .inner { max-width:1100px; padding:0; }
.inner { max-width:124rem; padding:0 2rem; margin:0 auto; }

.flb { display:flex; }
.fo_goth { font-family: YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }
.fo_min { font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman", Meiryo, serif; }

.shadow { box-shadow:5px 5px 15px -10px rgba(0,0,0,0.6); }
.btn { border:solid 1px #707070; display:inline-block; box-shadow:5px 5px 15px -10px rgba(0,0,0,0.6); background:#fff;}
.btn a { position:relative; display:block; padding:0.5rem 4rem 0.5rem 2rem; color:#707070; text-align:center; font-weight: bold;}
.btn a i { position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-size:4rem; }
.tc { text-align:center; }
.pc { display:block; }
.sp { display:none; }
  
.cont-mv-area  { position:relative; }
.cont-mv-area .mv-text { position:absolute; bottom:3rem; z-index:100; font-size:2rem; line-height:1.4; }
.cont-mv-area .mv-text.r { right:3rem; }
.cont-mv-area .mv-text.l { left:3rem; }
.cont-mv-area .mv-text p { font-weight: bold; margin-bottom:1rem; }
.cont-mv-area .mv-text span { display:block; font-weight: bold; }
.cont-mv-area .mv-text ul { margin-top:1rem; }
.cont-mv-area .mv-text.r p , .cont-mv-area .mv-text.r span { text-align:right; }
.cont-mv-area .mv-text.r ul { justify-content:center; }

@media screen and (max-width:414px){
  .cont-mv-area .mv-text { position:initial; margin-top:1rem; }
  .cont-mv-area .mv-text p , .cont-mv-area .mv-text span , .cont-mv-area .mv-text.r p , .cont-mv-area .mv-text.r span { text-align:center; }
  .cont-mv-area .mv-text ul { justify-content:center; }
}

ul.color { display:flex; }
ul.color li { width:3rem; height:3rem; border-radius:50%; margin-right:1rem; }
ul.color li:last-child { margin-right:0; }

h2 { border-bottom:solid 3px #fff; margin-bottom:5rem; }
h2 img {  }
h2 span { display:block; font-weight: bold; font-size:2.4rem; margin-top:1rem; }
h3 { margin-bottom:-4rem; position:relative; z-index:100; }
h3 img {  }
h4 { color:#ffd35c; font-size:3rem; font-weight: bold; border-bottom:solid 1px #fff; text-align:center; margin-bottom:2rem; }

@media screen and (max-width:1024px){
  .mob-none { display: none; }
}
@media screen and (max-width:768px){
  .mid-tc { text-align:center; }
  .pc { display:none; }
  h3 { margin-bottom:-3rem; }
}
@media screen and (max-width:414px){
  .flb { display:block; }
  .sp-tc { text-align:center; }
  .sp { display:block; }
  .sp-none { display:none; }
  h2 { text-align:center; }
  h2 span { font-size:2rem; }
  h2 img { width:80%; margin-bottom:1rem;}
  h3 { text-align:center; width:80%; margin:0 auto 3rem;}
  h4 { text-align:left; font-size:2.6rem; }
}
@media screen and (max-width:375px){
  h2 span{ font-size:1.8rem; }
  h4 {  }
}

/* mv */
#mv { }
#mv .inner{ }
#mv .mv-area { position:relative; text-align: center; }
#mv .mv-area .text-area { position:absolute; bottom:5rem; left:5rem; text-align:center; color:#fff; padding:1rem 2rem; min-width:68rem;}
#mv .mv-area .text-area h2 { font-size:4rem; font-weight: bold; }
#mv .mv-area .text-area p { font-size:2rem; margin:0; text-align:center; }
@media screen and (max-width:1480px){
  #mv .mv-area .text-area { bottom:2rem; }
  #mv .mv-area .text-area h2 { font-size:3rem; }
  #mv .mv-area .text-area p { font-size: 1.8rem; }
}
@media screen and (max-width:1280px){
  #mv .mv-area .text-area { bottom:2rem; }
  #mv .mv-area .text-area h2 { font-size:2.4rem; }
  #mv .mv-area .text-area p { font-size: 1.6rem; }
}
@media screen and (max-width:1150px){
  #mv .mv-area .text-area { position:initial; transform:none; min-width:auto; background:none; }
  #mv .mv-area .text-area h2 { font-size:3rem; margin-bottom: 1rem; }
  #mv .mv-area .text-area p { font-size: 2rem; }
}
@media screen and (max-width:414px){
  #mv { margin-bottom:3rem; }
  #mv div:after { display:none; }
  #mv .mv-area .text-area h2 { font-size: 2.8rem; }
  #mv .mv-area .text-area p { font-size: 1.6rem; }
}
@media screen and (max-width:320px){
  #mv .mv-area .text-area { padding:0 2rem; }
  #mv .mv-area .text-area h2 { font-size: 2rem; }
  #mv .mv-area .text-area p { font-size:1.5rem; }
}



/* anchor */
#anchor { position:fixed; top:50%; left:0; transform:translateY(-50%); z-index:99999; display:none; }
#anchor img.p { width:35%; position:absolute; top:50%; left:0; transform:translateY(-50%); }
#anchor img.s { display:none; }
#anchor ul { padding-left:8rem; }
#anchor ul li { background:#FFD35C; margin-bottom:2rem; text-align:center; }
#anchor ul li:last-child { margin-bottom:0; }
#anchor ul li a { color:#005479; font-weight: bold; font-style:oblique; width:12rem; height:12rem; display:flex; align-items:center; justify-content:center; padding:1rem 0;}

@media screen and (max-width:1650px){
  #anchor img.p { display:none; }
  #anchor img.s { width:40%; position:initial; padding-left:2rem; transform:none; display:block; margin:auto auto 3rem; }
  #anchor ul { padding-left:2rem; }
  #anchor ul li {}
  #anchor ul li a { width:8rem; height:8rem; font-size:1.2rem; }
}

@media screen and (max-width:1440px){
  #anchor { bottom:0; top:initial; transform:none; }
  #anchor img { display:none!important; }
  #anchor ul { display:flex; padding-left:0; width:100vw; }
  #anchor ul li { width:25%; height:auto; margin-bottom:0; border-right:solid 1px #005479; }
  #anchor ul li:last-child { border-right:none; }
  #anchor ul li a { width:100%; height:auto; display:block; color:#005479; font-size:1.6rem; }
}

/* day */
#day { margin-top:10rem; }
#day .box { border:solid 5px #fff; position:relative; padding:5rem 10rem 3rem; }
#day .box p.tt { 
  position:absolute; 
  top:-3rem; 
  left:50%;
  letter-spacing:2px;
  font-size:2rem;
  transform:translateX(-50%); 
  background:#fff; 
  padding:0.5em 0; 
  color:#005479; 
  font-weight: bold;
  width:35%;
  text-align:center;
}
#day .box p.tx-big { font-size:3.6rem; font-weight: bold; margin-bottom:2rem; }
#day .box p.tx-big span { color:#ffd35c; border-bottom:solid 1px #ffd35c; }
#day .box p.kome { margin-bottom:5rem }
#day .s-min { display:none; }

@media screen and (max-width:1100px){
  #day .box { padding:5rem 5rem 3rem; }
  #day .box p.tt { width:40%; }
}
@media screen and (max-width:980px){
  #day .box { padding:5rem 5rem 3rem; }
  #day .box p.tx-big { font-size:3rem; }
}
@media screen and (max-width:890px){
  #day .box p.tt { width:50%; }
  #day .box p.tx-big { font-size:2.6rem; }
}
@media screen and (max-width:414px){
  #day { margin-top:5rem; }
  #day .box { padding:6rem 2rem 3rem; }
  #day .box p.tt { width:80%; font-size:1.8rem; top:-4rem; }
  #day .box p.tx-big { font-size:2.4rem; }
  #day .box p.kome { font-size:1.4rem; margin-bottom:3rem; }
}
@media screen and (max-width:375px){
  #day .box p.tx-big { font-size:2.2rem; }
  #day .box p.kome { font-size:1.2rem; }
}
@media screen and (max-width:320px){
  #day .box { padding:6rem 2rem 3rem; }
  #day .box p.tx-big { font-size:1.8rem; }
  
}

/* special */
#special { margin-top:10rem; }
#special .img-area { position:relative; }
#special .img-area .text { position:absolute; bottom:3rem; right:3rem; z-index:1000; }
#special .img-area .text p { margin-bottom:1rem; font-weight: bold; font-size:1.8rem; line-height:1.4; }
#special .img-area .text span { display:block; font-weight: bold; font-size:1.8rem; margin-bottom:1rem; }
#special .tx-area { margin-top:3rem; }
#special .tx-area p { width:60%; margin:auto; font-size:1.8rem; }
#special .text-sp { display:none; }

@media screen and (max-width:768px){
  #special .tx-area p { width:100%; }
}
@media screen and (max-width:414px){
  #special { margin-top:5rem; }
  #special .tx-area p { font-size:1.6rem; }
  #special .img-area .text { display:none; }
  #special .text-sp { margin-top:2rem; text-align:center; }
  #special .text-sp p , #special .text-sp span{ font-weight: bold; text-align:center; font-size:1.8rem; }
  #special .text-sp ul { justify-content:center; margin-top:1rem; }
}

/* wrapping */
#wrapping { margin:10rem 0; }
#wrapping .inner > img { margin-top:5rem; }
#wrapping .inner .top-tx { font-size:2rem; line-height:1.5; margin-top:3rem; }
#wrapping h3 { margin-bottom:-7rem; }
#wrapping h4 { text-align:left; line-height:1.5;}
#wrapping ul { display:flex; justify-content:space-between; margin-top:3rem;}
#wrapping ul li { width:58%; }
#wrapping ul li:last-child p { margin:2rem 0; font-size:1.8rem; }
#wrapping ul li:last-child { width:38%; position:relative; }
#wrapping ul li .btn {  }

@media screen and (max-width:1060px){
  #wrapping ul { display:block; }
  #wrapping ul li { width:100%; }
  #wrapping ul li:first-child { text-align:center; }
  #wrapping ul li:last-child { width:100%; margin-top:2rem; }
  #wrapping ul li .mid-tc { text-align:center; }
  #wrapping ul li .btn { position:initial; margin-top:3rem; }
}

@media screen and (max-width:768px){
  #wrapping h3 { margin-bottom:-6rem; }
}
@media screen and (max-width:414px){
  #wrapping { margin-top:5rem; }
  #wrapping h3 { margin-bottom:3rem; }
  #wrapping h3 img { width:85%; }
  #wrapping ul li:last-child p { font-size:1.6rem; }
}

/* reccomend */
#recommend {}
#recommend .img-area { position:relative; }
#recommend .img-area .text { position:absolute; bottom:3rem; left:3rem; }
#recommend .img-area .text p { font-weight: bold; font-size:1.8rem; line-height:1.4; margin-bottom:1rem; }
#recommend .img-area .text span { display:block; font-weight: bold; font-size:1.8rem; margin-bottom:1rem; }
#recommend .text-area { margin:3rem auto; width:80%; }
#recommend .text-area p { font-size:1.8rem; }
#recommend .pc-area {  }
#recommend .pc-area > ul { display:flex; }
#recommend .pc-area > ul > li { width:calc(25% - 3rem * 1/3); margin-right:3rem; position:relative; }
#recommend .pc-area > ul > li:last-child { margin-right:0; }
#recommend .pc-area > ul > li a { display:block; }
#recommend .pc-area > ul > li a p { text-align:center; font-weight: bold; color:#fff;}
#recommend .pc-area > ul > li a p span { display:block; padding-bottom:5rem; }
#recommend .pc-area .color { position:absolute; bottom:0; left:50%; transform:translateX(-50%);justify-content:center; margin-top:2rem; }
#recommend .btn { margin-top:5rem; }
#recommend .btn a { padding:2rem 4rem 2rem 2rem; }
#recommend .sp-area { display:none; }
#recommend .img-area .text { display:none; }

#recommend .youtube { width:80%; height:50rem; margin:auto; }
#recommend .youtube-tx { width:80%; margin:3rem auto 0; font-size:1.8rem; }

#goods { margin-top:5rem; }
#goods h3 { text-align:right; }

@media screen and (max-width:768px){
  #recommend .text-area { width:100%; }
  #recommend .pc-area > ul { flex-wrap:wrap; }
  #recommend .pc-area > ul > li { width:calc(50% - 2rem * 1/2); margin:0 2rem 2rem 0; }
  #recommend .pc-area > ul > li:nth-of-type(2n) { margin-right:0; }
  #recommend .youtube { width:100%; height:50rem; }
  #recommend .youtube-tx { width:100%; }
}

@media screen and (max-width:414px){
  #recommend h3 { width:35%; }
  #recommend .text { position:initial; text-align:center; margin-top:3rem; }
  #recommend .text p { text-align:center; font-weight: bold; margin-bottom:1rem; }
  #recommend .text p span { display:block; }
  #recommend .text ul { justify-content:center; }
  #recommend .pc-area { display:none; }
  #recommend .sp-area { display:block; }
  #recommend .sp-area ul { justify-content:center; margin-top:2rem; }
  #recommend .sp-area p { text-align:center; font-weight: bold; color:#fff; }
  #recommend .sp-area p span { display:block; }
  
  #recommend .youtube { width:100%; height:30rem; }
}


/* category */
#search { margin:10rem 0; }
#search ul { display:flex; }
#search ul li { width:calc(25% - 3rem *1/3); margin-right:3rem; }
#search ul li:last-child { margin-right:0; }
#search ul li .btn { width:100%; }
#search ul li .btn a { font-size:2rem; padding:2rem 4rem 2rem 2rem;}

#category ul li { text-align:center; }
#category ul li a { color:#fff; font-weight: bold; }
#category ul li a img { border-radius:50%; }
#category ul li p { text-align:center; margin-top:1rem; }

#price { margin-top:5rem; }

#category h3 , #price h3 { text-align:center; margin-bottom:3rem;}
#category h3 img, #price h3 img { width:auto; }

@media screen and (max-width:780px){
  #price ul { flex-wrap:wrap; }
  #price ul li { width:calc(50% - 2rem * 1/2); margin:0 2rem 2rem 0; }
  #price ul li:nth-of-type(2n) { margin-right:0; }
}
@media screen and (max-width:414px){
  #search { margin:5rem 0; }
  #search ul { flex-wrap:wrap; }
  #search ul li { width:calc(50% - 2rem * 1/2); margin:0 2rem 2rem 0; }
  #search ul li:nth-of-type(2n) { margin-right:0; }
  #search h2 img { width:60%; }
  #category h3 { width:50%; }
  #price h3 { width:30%; }
}

/* shop */
#shop { padding:10rem 0; background:#fff; }
#shop .btn { box-shadow:none; }
#shop .bnr { margin:0 0 3rem; text-align:center; }
#shop ul { display:flex; justify-content:space-between; }
#shop ul:after {display:none;}
#shop ul li { width:48%; text-align:center; }
#shop ul li p { text-align:center; font-weight: bold; margin-top: 2rem; color:#333; }
#shop ul li .btn { width:60%; margin:2rem auto 0; border:solid 1px #333; }
#shop ul li .btn a { display:block; padding:1rem 2rem; color:#333; font-weight: bold; font-weight: bold; }
#shop .xmas-img { text-align:center; margin-top:5rem;}

@media screen and (max-width:768px){
  #shop ul li { width:45%; }
  #shop ul li p { font-size: 1.5rem; }
}
@media screen and (max-width:414px){
  #shop { padding:5rem 0; }
  #shop ul { display:block; }
  #shop ul li {width: 100%;}
  #shop ul li:first-child { margin-bottom: 3rem; }
  #shop ul li p { font-size: 1.6rem; }
  #shop ul li img { width:70%; }
}


/* slide */
.owl-carousel { display:block; }
.owl-carousel .item {}
.owl-carousel .item a img { transition:all .5s;  }
.owl-carousel .item a:hover img { transform:scale(1.2); }
.owl-carousel .item a p { color:#fff; font-size: 2rem; text-align:center; margin-top:1rem; font-weight: bold;}

/* slide nav */
.owl-nav { display: flex; }
.owl-nav button { position:absolute; top:50%; transform:translate(0,-50%); color:#fff; font-weight: normal; font-size:8rem; z-index:10; }
.owl-nav .owl-prev { left:10px; }
.owl-nav .owl-next { right:10px; }
.owl-nav button i { font-size:6rem; }
.owl-nav button span { padding:5rem 2rem; }
@media screen and (max-width:768px){  
  .owl-nav button { font-size: 6rem; }
}
@media screen and (max-width:414px){
  .owl-carousel { display:block; }
  .owl-nav .owl-prev { left:20px; }
  .owl-nav .owl-next { right:20px; }
}

/* slide dots */
.owl-dots { position:absolute; left:0; right:0; bottom:2rem; text-align:center; }
.owl-dots button { margin-right:2rem; }
.owl-dots button:last-child { margin-right:0; }
.owl-dots button span { display:block; width:2rem; height:2rem; background:#fff; border-radius:50%; }
.owl-dots button.active span { background:#aaa; }
@media screen and (max-width:414px){
  .sp-area .owl-dots { display:none; }
  .owl-dots { position:initial; margin-top:1rem; }
  .owl-dots button span { width:1.5rem; height:1.5rem; }
}
@media screen and (max-width:375px){
  .owl-dots {  }
}

/* フェードイン */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


#pageup { bottom:60px; }