@charset "utf-8";

/* fade animation ----------*/
.fade { opacity:0; transition:all 1s ease-out!important; }
.fade-left { transform:translateX(-100%); }
.fade-right { transform:translateX(100%); }
.fade-up { transform:translateY(100px); }
.fade-down { transform:translateY(-100px); }
.fade.active {
  transform:translate(0,0)!important;
  opacity:1!important;
}

/* common parts ----------*/
#header-new { background:rgba(255,255,255,.8)!important; }
div:after,ul:after { display:none; }
p { margin:0; }
.bold { font-weight: bold; }
.pc { display:block; }
.pc-only { display:block; }
.mid { display:none; }
.sp-only { display:none; }

@media screen and (max-width:820px){
  .pc-only { display:none; }
  .mid { display:block }
}
@media screen and (max-width:600px){
  .pc { display:none; }
  .sp-only { display:block; }
}


/* pan ----------*/
.breadcrumbs { position:relative; margin:0 auto; max-width:1240px; z-index:10; }
.breadcrumbs .crumbList { position:absolute; top:1rem; color:#fff; }
.breadcrumbs .crumbList a { color:#fff; }
.breadcrumbs .crumbList span { color:#fff; }

/* mvをheaderに被せる場合ON ----------*/
div.fs-l-page { margin-top:0!important; }
.breadcrumbs .crumbList { top:11rem; }
@media screen and (max-width:768px){
  .breadcrumbs .crumbList { top:9rem; }
}

/* common ----------*/
body { 
  color:#333;
}
main {
/*  font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman", Meiryo, serif;*/
  font-family:"Kiwi Maru", YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  font-weight:400;
  font-style:normal;
  line-height:1.6;
  font-size:1.8rem;
}
.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; }
.inner { max-width:114rem; width:100%; padding:0 2rem; margin:0 auto; }
h2 { font-size:3.6rem; text-align:center; }
h2.under span { display:inline-block; padding:0 1.5em; border-bottom:solid 5px #333; padding-bottom:1rem }
h2.line { background:#C10000; color:#fff; padding:3rem 0; }

ul.cont { display:flex; justify-content:space-between; margin-top:5rem; }
ul.cont li { width:46%; }
ul.cont li .ttl { font-size:2.6rem; border-bottom:solid 3px #333; margin-bottom:3rem; padding-bottom:1rem; font-weight: bold; }
ul.cont li .text {  }
ul.cont:nth-of-type(even) li:first-child { order:2; }

@media screen and (max-width:600px){
  #pageup { bottom:6rem; }
}


/* mv ----------*/
#mv {}
#mv .mv { position:relative; }
#mv .mv p { position:absolute; bottom:5%; left:5%; letter-spacing:0.1em; font-size:4rem; font-weight: bold; }
#mv .mv p span { display:block; font-size:50%; font-weight: bold; }
@media screen and (max-width:820px){
  #mv .mv p { font-size:3rem; }
}
@media screen and (max-width:600px){
  #mv .mv p { font-size:3rem; width:100%; right:0; left:0; text-align:center; }
}

/* top ----------*/
#top { margin:5rem 0; }
#top .catch { font-size:2.4rem; border-left:solid 5px #707070; padding-left:1em; }
#top .icon { text-align:center; margin:5rem 0; }

/* recommend ----------*/
#recommend { margin-top:15rem; }
#recommend .itemWrap { margin-top:15rem; }
#recommend .itemWrap .mainImg { position:relative; }
#recommend .itemWrap .mainImg .name {
  background:#c10000;
  color:#fff;
  padding:1em 3em;
  font-size:3.6rem;
  display:inline-block;
  position:absolute;
  top:-3vw;
  left:-3vw;
}
#recommend .itemWrap.r .mainImg .name { left:auto; right:-3vw; }
#recommend .itemWrap .mainImg .text {
  position:absolute;
  top:25%;
  left:5%;
  border-left:solid 5px #333;
  padding-left:1em;
  max-width:40rem;
  width:100%;
}
#recommend .itemWrap.r .mainImg .text { left:auto; right:5%; }
#recommend .itemList { display:flex; justify-content:space-between; }
#recommend .itemList li { width:23%; }
#recommend .itemList li a { color:#333; display:flex; flex-direction:column; align-items:center; height:100%; }
#recommend .itemList li p { text-align:center; }
#recommend .itemList li .itemname { margin-bottom:1rem; }
#recommend .itemList li .price { margin:auto 0 0.5rem; }
#recommend .itemList li i { background:#8B4E20; color:#fff; padding:0.5rem 1rem; font-style:normal; font-size:1.4rem; border-radius:5px; }
#recommend .itemList li i.hide { opacity:0; }
#recommend .linkarea { text-align:center; margin-top:10rem; }
#recommend .linkarea .icon { margin-top:10rem; }



/* gift ----------*/
#gift { margin-top:15rem; }
#gift .btn { max-width:58rem; width:100%; margin:5rem auto 0; border-radius:15px; overflow:hidden; }
#gift .btn a { display:block; background:#717171; color:#fff; text-align:center; font-size:2.4rem; padding:1rem 0; }



@media screen and (max-width:820px){
  
  h2.under span { display:block; padding:0 0 1rem 0; }
  ul.cont { display:block; }
  ul.cont li { width:100%; }
  ul.cont li:last-child { margin-top:2rem; }
  ul.cont li .ttl { margin-bottom:2rem; }
  
  #mv {}
  #mv .mv p { position:initial; padding:0 2rem; margin-top:3rem; text-align:center; }
  
  #top { margin-top:3rem; }
  
  #recommend { margin-top: 10rem; }
  #recommend .itemWrap { margin-top:5rem; }
  #recommend .itemWrap .mainImg { width:100vw; margin:0 calc(50% - 50vw); }
  #recommend .itemWrap .mainImg .name { padding:2rem 4rem; left:0; top:0; }
  #recommend .itemWrap.r .mainImg .name { right:0; }
  #recommend .itemWrap .mainImg .text { left:2rem; top:35%; text-shadow:0px 0px 10px rgb(255,255,255,.8); max-width:30rem; }
  #recommend .linkarea .icon { margin-top:5rem; }
  
  #gift { margin-top: 10rem; }
  #gift ul.cont { margin-top: 0; }
  #gift ul.cont li:first-child { width:100vw; margin:0 calc(50% - 50vw); }
  
}
@media screen and (max-width:600px){
  
  main { font-size:1.6rem; }
  h2 { font-size:2.1rem; }
  h2.under span { border-width:3px; }
  ul.cont li .ttl { font-size:1.8rem; }
  
  #mv .mv p { font-size:2rem; }
  
  #top .catch { font-size:1.8rem; }
  #top .icon { max-width:6rem; margin:5rem auto; }
  
  #recommend .itemWrap .mainImg img { min-height:30rem; object-fit:cover; }
  #recommend .inner .itemWrap:nth-child(2) .mainImg img { object-position:50% 60%; }
  #recommend .itemWrap .mainImg .name { font-size:2rem; }
  #recommend .itemWrap .mainImg .text {
    position:initial;
    margin:2rem auto 0;
    max-width:90%;
  }
  #recommend .itemList { flex-wrap:wrap; }
  #recommend .itemList li { width:48%; }
  #recommend .linkarea .icon { max-width:6rem; width:100%; margin:5rem auto; }
  
  #gift .btn a { font-size:2rem; }
  
}









/* shop ----------*/
#shop { margin-top:10rem; margin-bottom:10rem; }
#shop .box { border:solid 1px #707070; padding:2rem; margin:0 auto 5rem; max-width:90rem; }
#shop .box p { line-height:2; }
#shop h3 { margin-bottom:4rem; }
#shop .shop-tx { margin:2rem 0; font-size:2rem; text-align:center; }
#shop .btn.last { margin-top:10rem; }
#shop .btn.last a { padding:1rem 0; }
#shop .mark { text-align:center; margin:1rem 0; }
#shop .cap { margin-top:3rem; border:solid 1px #707070; padding:2rem; }
#shop .cap p { line-height:2; }
#shop ul.link li .tt { width:48%; }
#shop ul.top { display:flex; justify-content:space-between; }
#shop ul.top > li { width:48%; }

#shop ul.brand { display:flex; justify-content:space-between; margin-top:10rem; }
#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; flex-direction:column; height:100%; }
#shop ul.link li {  }
#shop ul.link li .tt { background:#630; 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; margin-bottom:1rem; border-left:solid 2px #333; }
#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 { border-color:#333; margin:auto 0 0; max-width:100%; width:100%; }
#shop ul.link li.btn a { display:block; text-align:center; color:#000; padding:0.5rem 4rem; }

#shop .btn { background:none; border-radius:0; border:solid 1px #333; }
#shop .btn a { line-height:2; }
#shop .btn2 { max-width:50rem; margin:5rem auto 0; border-color:#333; }
#shop .btn2 a { display:block; text-align:center; color:#333; padding:1rem 0; }

#shop .mark { margin-top:5rem; }

@media screen and (max-width:768px){  
  /* shop --------------------*/
  #shop { margin-top:10rem; }
  #shop .mark { max-width:70%; margin:10px auto; }
  #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%; font-size:2.4rem; }
  #shop ul.link li .shop-list p a { font-size:2rem; }
  #shop ul.link li.btn { margin:5rem auto 0; }
  #shop .cap p { font-size: 2rem; line-height:1.6; }
}
@media screen and (max-width:600px){  
  #shop { margin:5rem 0 0; }
  #shop ul.top { display:block; }
  #shop ul.top > li { width:100%; }
  #shop ul.top > li.tenpo { margin-top:3rem; }
  #shop ul.link li.btn { max-width:30rem; margin-top:2rem; }
  #shop .mark { margin-top:3rem; }
}