@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:#414141;
}
main {
/*  font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman", Meiryo, serif;*/
  font-family: YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  line-height:1.6;
}
.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.ct { text-align:center; font-size:3rem; letter-spacing:0.3em; }
h2.ct span { display:block; text-align:center; font-size:50%; letter-spacing:0.2em; }
h2.line { border-left:solid 5px #fff; padding-left:1em; font-size:3rem; letter-spacing:0.3em; }
h2.line span { display:flex; justify-content:space-between; align-items:center; font-size:1.6rem; letter-spacing:0.2em; }
h2.line span span { display:inline-block; text-align:right; font-size:130%; }
h3 { font-size:3rem; line-height:1; letter-spacing:0.3em; }
h3 p { display:inline-block; position:relative; padding-right:2em; }
h3 span { display:block; font-size:1.2rem; margin-top:1rem; letter-spacing:0.5em; }
h3 p:before {
  content:"";
  width:1000px;
  height:1px;
  background:#fff;
  position:absolute;
  top:calc(100% + 0.5rem);
  right:0;
}
.ttl { font-size:2rem; margin:2rem 0; letter-spacing:0.3em; font-weight: bold;}
.tx {  }
.btn { max-width:35rem; width:100%; margin:2rem auto 0; border:solid 1px #414141; position:relative; }
.btn a { display:block; line-height:3; text-align:center; color:#414141; font-size:1.8rem; font-weight: bold; }
.anc { margin-top:-9.8rem; padding-top:9.8rem; }

.anchor { padding-top:10rem; margin-top:-10rem; }
#anc-new.anchor { padding-top:5rem; margin-top:-5rem; }

@media screen and (max-width:600px){
  #pageup { bottom:6rem; }
  h2 { line-height:1; }
  h2 span { margin-top:1rem; }
  h2.line { font-size:2rem; letter-spacing:0.1em; }
  h2.line span { display:block; }
  h2.line span span { display:block; font-size:100%; }
  h2.ct { font-size:2.4rem; }
  .ttl { font-size:1.6rem; }
  .anchor { padding-top:8rem; margin-top:-8rem; }  
}


/* mv ----------*/
#mv {}
#mv .mv { position:relative; }
#mv .mv p { position:absolute; bottom:5%; right:5%; font-size:5rem; letter-spacing:0.3em; color:#fff;   }
#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:3.4rem; width:100%; right:0; left:0; text-align:center; }
}

/* top ----------*/
#top { margin-top:5rem; }
#top .catch { font-size:3rem; text-align:center; letter-spacing:0.3em; }
#top .day { text-align:center; font-size:3rem; margin:3rem 0; letter-spacing:0.3em; }
#top .day span.min { font-size:1.4rem; display:block; text-align:center; color:#603928; }
#top .day span.b { font-size:200%; vertical-align:baseline; }
#top .lead { max-width:100rem; width:100%; margin:0 auto; font-size:1.6rem; line-height:2; font-weight:normal; }
#top .menu {}
#top .menu p { font-size:3rem; text-align:center; display:flex; align-items:center; max-width:50rem; margin:5rem auto 3rem; letter-spacing:0.3em; }
#top .menu p:before,#top .menu p:after {
  content:"";
  height:1px;
  width:100%;
  background:#414141;
}
#top .menu p:before { margin-right:1em; }
#top .menu p:after { margin-left:1em; }
#top .menu ul { display:flex; justify-content:space-between; max-width:85rem; margin:0 auto; }
#top .menu ul li { width:32%; }
#top .menu ul li a { display:block; text-align:center; background:#A85F34; color:#fff; padding:1rem 0; }
#top .menu ul li a span { display:block; font-size:1.8rem; }

@media screen and (max-width:600px){
  #top .day { font-size:2.2rem; }
  #top .menu ul li a span { font-size:1.4rem; white-space:nowrap; }
}

/* newitem ----------*/
#newitem { margin-top:5rem; padding:5rem 0; background:#895737; color:#fff; }
#newitem h2 { margin-bottom:3rem; }
#newitem .slide-wrap { display:flex; justify-content:space-between; margin-bottom:2rem; }
#newitem .newitem-slide { width:78%; }
#newitem .newitem-slide img { height:100%; object-fit:cover; }
#newitem .newitem-slide-thum { width:20%; }
#newitem .newitem-slide-thum .slick-track { transform: unset!important; }
#newitem .slick-vertical .slick-slide { border:none; }
#newitem .slick-list ,#newitem .slick-slider .slick-track { height:100%; }
#newitem .newitem-slide-thum .item { position:relative; cursor:pointer; }
#newitem .newitem-slide-thum .item:after {
  position:absolute;
  content:"";
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgb(0,0,0,.5);
  z-index:1;
  transition:all ease-out .4s;
}
#newitem .newitem-slide-thum .item.slick-current:after { 
  background:none;
  outline:solid 5px #fff;
  outline-offset:-5px;
}
#newitem .btn { border:solid 3px #fff; margin-top:5rem; }
#newitem .btn a { letter-spacing:0.3em; color:#fff; }

@media screen and (max-width:600px){
  #newitem .slide-wrap { display:block; }
  #newitem .newitem-slide , #newitem .newitem-slide-thum { width:100%; }
  #newitem .newitem-slide-thum { margin-top:1rem; }
  #newitem .newitem-slide-thum .slick-list , #newitem .newitem-slide-thum .slick-list .slick-track { height:auto!important; }
  #newitem .newitem-slide-thum .slick-list { height:auto!important; }
  #newitem .newitem-slide-thum .slick-list .slick-track { display:flex; }
  #newitem .main .slide01 img { height:auto; object-fit:none; }
  #newitem .newitem-slide-thum .item.slick-current:after { outline:solid 3px #fff; outline-offset:-3px; }
  #newitem .text-wrap .ttl { margin-bottom:1rem; }
  #newitem .text-wrap .tx { font-size:1.4rem; }
}

/* recommend ----------*/
#recommend { padding:5rem 0; background:#684221; color:#fff; }
#recommend .main-wrap { max-width:90rem; margin:3rem auto 10rem; }
#recommend .main-wrap p { margin-top:2rem; font-size:1.8rem; font-weight: bold; }
#recommend h3 { margin-top:5rem; }
#recommend h3.fade-left { transform:translateX(-50%); }
#recommend ul.item { display:flex; margin-top:3rem; }
#recommend ul.item.fst { margin-bottom:10rem; }
#recommend ul.item li { width:calc(100% / 4 - 6rem / 4); margin-right:2rem; }
#recommend ul.item li:last-child { margin-right:0; }
#recommend ul.item li a { color:#fff; display:flex; flex-direction:column; height:100%; }
#recommend ul.item li .img { margin-bottom:1rem; }
#recommend ul.item li p { font-weight: bold; }
#recommend ul.item li p.name { font-size:1.6rem; margin-bottom:1rem; }
#recommend ul.item li p.name span { display:block; font-size:1.4rem; }
#recommend ul.item li p.price { margin-top:auto; }
#recommend .btn { border:solid 3px #fff; margin-top:5rem; }
#recommend .btn a { color:#fff; }

#recommend .search { margin:10rem auto 0; max-width:100rem; width:100%; }
#recommend .search h3 { text-align:center; margin-bottom:2rem; font-weight:normal!important; }
#recommend .search ul.katachi { display:flex; justify-content:center; flex-wrap:wrap; margin:2rem 0 10rem; }
#recommend .search ul.katachi li { width:calc(100% / 3 - 2rem / 3); margin-right:1rem; }
#recommend .search ul.katachi li:nth-of-type(3n) { margin-right:0; }
#recommend .search ul.katachi li:nth-of-type(n+4) { margin-top:1rem; }
#recommend .search .material { margin:0 auto 10rem; max-width:70rem; text-align:center; }
#recommend .search ul.yosan { display:flex; justify-content:space-between; margin-top:2rem; }
#recommend .search ul.yosan li { width:23%; }
#recommend .search ul.yosan li a { display:block; padding:1.5rem 0; text-align:center; border:solid 1px #fff; color:#fff; }
#recommend .search .btn { border:solid 1px #fff; margin-top:5rem; }
#recommend .search .btn a {line-height:1.6; padding:2rem 0; }

@media screen and (max-width:820px){
  #recommend h3 { max-width:90%; margin:5rem auto 0; }
  #recommend ul.item { max-width:90%; margin:3rem auto 0; }
} 
@media screen and (max-width:600px){
  #recommend ul.item { flex-wrap:wrap; }
  #recommend ul.item li { width:calc(50% - 1rem); }
  #recommend ul.item li:nth-of-type(2n) { margin-right:0; }
  #recommend ul.item li:nth-of-type(n+3) { margin-top:2rem; }
  #recommend ul.item li p.name { font-size:1.4rem; }
  #recommend ul.item li p.name span { font-size:1.2rem; }
  
  #recommend .search { margin-bottom:0; }
  #recommend .search ul.katachi { justify-content:space-between; }
  #recommend .search ul.katachi li { width:calc(50% - 0.5rem); margin:0; }
  #recommend .search ul.katachi li:nth-of-type(n+3) { margin-top:1rem; }
  #recommend .search ul.yosan { flex-wrap:wrap; }
  #recommend .search ul.yosan li { width:calc(50% - 0.5rem); margin-right:1rem; }
  #recommend .search ul.yosan li:nth-of-type(2n) { margin-right:0; }
  #recommend .search ul.yosan li:nth-of-type(n+3) { margin-top:1rem; }
  #recommend .search ul.yosan li a { padding:2rem 0; }
}

/* service ----------*/
#service { background:#895737; color:#fff; padding:5rem 0; }
#service h2.line { border-color:#fff; }
#service .cont-wrap {  }
#service .cont-wrap:last-child { margin-top:5rem; }
#service .cont-wrap ul.cont { display:flex; justify-content:space-between; margin-top:3rem; }
#service .cont-wrap ul.cont li.slide { width:60%; }
#service .cont-wrap ul.cont li.slide .slick-dots { bottom:-2.5rem; line-height:1; }
#service .cont-wrap ul.cont li.slide .slick-dots li { background:#A2A2A2; width:1.5rem; height:1.5rem; }
#service .cont-wrap ul.cont li.slide .slick-dots li.slick-active { background:#fff; }
#service .cont-wrap ul.cont li.slide .slick-dots li button { padding:0; margin:0; width:auto; height:auto; }
#service .cont-wrap ul.cont li.slide .slick-dots li button:before { display:none; }
#service .cont-wrap ul.cont li.text { width:35%; }
#service .cont-wrap ul.cont li.text .ttl { font-size:2rem; font-weight:normal; }
#service .cont-wrap ul.cont li.text .btn { max-width:100%; border-color:#fff; }
#service .cont-wrap ul.cont li.text .btn a { color:#fff; }
#service .cont-wrap ul.cont.rev {}
#service .cont-wrap ul.cont.rev li.slide { order:2; }

@media screen and (max-width:820px){
  #service .cont-wrap ul.cont { align-items:flex-start; }
} 
@media screen and (max-width:600px){
  #service .cont-wrap ul.cont { display:block; }
  #service .cont-wrap ul.cont li.slide , #service .cont-wrap ul.cont li.text { width:100%; }
  #service .cont-wrap ul.cont li.text { margin-top:1rem; }
  #service .cont-wrap:last-child { margin-top:8rem; }
  #service .cont-wrap ul.cont li.text .ttl { font-size:1.8rem; margin-bottom:1rem; }
  #service .cont-wrap ul.cont li.text .tx { font-size:1.4rem; margin-bottom: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 { 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 { 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; }
}