@charset "uff-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 ----------*/
.font-goth { font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif }
#header-new { background:rgba(255,255,255,.8)!important; }
#pageup { width:auto; right:10rem; bottom:3%; }
#pageup a { color:#fff; height:auto; width:auto; }
#pageup i { display:none; }
#pageup span { padding:0; }
@media screen and (max-width:1200px){
  #pageup { right:2rem; }
  #pageup a { width:3rem; }
}

.cont-mv { margin:0 calc(50% - 50vw); }
.catch { 
  font-size:2.4rem;
  letter-spacing:0.5rem;
  position:relative;
  min-height:7rem;
  display:flex;
  align-items:center;
  border-left:solid 5px #ababab;
  padding-left:1em;
}

/* pan ----------*/
.breadcrumbs { position:relative; margin:0 auto; }
.breadcrumbs .crumbList { position:absolute; top:10rem; color:#fff; }
.breadcrumbs .crumbList a { color:#fff; }
.breadcrumbs .crumbList span { color:#fff; }

/* common ----------*/
body { color:#707070; }
main {
  font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", "Times New Roman", Meiryo, serif;
  line-height:1.6;
}
.inner { max-width:104rem; width:100%; padding:0 2rem; margin:0 auto; }
h2 { 
  text-align:center;
  font-size:4rem;
  line-height:1;
  letter-spacing:5px;
  margin-bottom:3rem;
}
h2 span { font-size:40%; display:block; line-height:2; letter-spacing:5px; }
.btn { max-width:35rem; width:100%; margin:2rem auto 0; border:solid 1px #707070; position:relative; }
.btn a { display:block; padding:0.5rem 0; text-align:center; color:#707070; font-size:2rem; }
div:after, ul:after, cf:after { display:none; }
p { margin:0; }
div.fs-l-page { margin-top:0; }
.pc { display:block; }
.sp { display:none; }

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

/* mv ----------*/
#mv {  }
#mv .mv { position:relative; }
#mv .mv .more {
  position:absolute;
  bottom:15%;
  left:50%;
  transform:translateX(-50%);
  max-width:10rem;
  width:100%;
  animation-name: fadein2;
  animation-duration:3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
#mv .mv .more img { width:100%; }
#mv .text-area { max-width:80rem; margin:5rem auto 0; }
#mv .text-area .ttl { font-size:2.4rem; margin-bottom:2rem; }
#mv .text-area .tx { font-size:1.8rem; }
#mv ul.anchor-list { display:flex; justify-content:center; margin:5rem auto 10rem; }
#mv ul.anchor-list li { width:calc(100% / 3 - 6rem / 3); margin-right:2rem; text-align:center; border-right:solid 1px #707070; }
#mv ul.anchor-list li:first-child { border-left:solid 1px #707070; }
#mv ul.anchor-list li:last-child { margin-right:0; }
#mv ul.anchor-list li a { display:block; color:#707070; }

/* newitem ----------*/
#newitem {}
#newitem .btn-area ul { display:flex; justify-content:space-between; max-width:75rem; width:100%; margin:5rem auto; }
#newitem .btn-area ul li { 
  width:48%;
  padding:1.5rem 0;
  background:#CACBD0;
  color:#fff;
  cursor:pointer;
  text-align:center;
  font-size:2rem;
}
#newitem .btn-area ul li.cur { background:#5D946A; position:relative; }
#newitem .btn-area ul li.cur:after {
  content:"";
  display:block;
  width:100%;
  height:2px;
  background:#5d946a;
  position:absolute;
  top:120%;
  left:0;
  right:0;
}
#newitem .newitem-mv { position:relative; padding-top:10rem; }
#newitem .newitem-mv .catch { margin-top:3rem; }
#newitem .newitem-mv p { position:absolute; }
#newitem .newitem-mv p.title { 
  color:#C4C4C4;
  font-size:6rem;
  font-weight:bold;
  top:0;
  left:-5rem;
  letter-spacing:2rem;
}
#newitem .newitem-mv p.sub-title {
  font-size:3.6rem;
  writing-mode: vertical-rl;
  top:10rem;
  left:-5rem;
  line-height:1;
  letter-spacing:5px;
}
#newitem .newitem-mv .change-img { position:relative; padding-top:50%; }
#newitem .newitem-mv .change-img a { position:absolute; top:0; left:0; }
#newitem .newitem-mv .change-img a.active { z-index:99; }
#newitem .newitem-mv .change-img a:hover { opacity:1; }
#newitem .newitem-mv .change-img a p {
  position:absolute;
  bottom:3rem;
  width:40%;
  padding:1rem;
  border:solid 2px #fff;
  text-align:center;
  color:#fff;
  z-index:1;
  left:50%;
  font-weight: bold;
  transform:translateX(-50%);
  background:rgb(0,0,0,.3);
}
#newitem .newitem-mv ul { display:flex; margin-top:1rem; justify-content:center; }
#newitem .newitem-mv ul li {
  width:1.2rem;
  height:1.2rem;
  border-radius:50%;
  border:solid 1px #707070;
  margin-right:1.5rem;
  cursor:pointer;
}
#newitem .newitem-mv ul li.active { background:#333; pointer-events:none; }
#newitem .newitem-mv ul li:last-child { margin-right:0; }
#newitem div.thum { display:flex; flex-wrap:wrap; justify-content:center; margin:0 auto 0; }
#newitem div.thum div.thum-item { cursor:pointer; display:flex; flex-direction:column; }
#newitem div.thum div.thum-item p { text-align:center; }
#newitem div.thum div.thum-item .tt { margin-bottom:1rem; }
#newitem div.thum div.thum-item .price { margin-top:auto; }
/*
#newitem div.thum div.thum-item:nth-of-type(n+4) { margin-top:2rem; }
#newitem div.thum div.thum-item:nth-of-type(3n) { margin-right:0; }
*/
/*
#newitem .item2 div.thum div.thum-item { width:calc(100% / 4 - 3rem); }
#newitem .item2 div.thum div.thum-item:nth-of-type(3n) { margin-right:3rem; }
*/
#newitem .item2 div.thum div.thum-item:nth-of-type(4n) { margin-right:0; }
#newitem .item2 div.thum div.thum-item:nth-child(4) { margin-top:0; }
#newitem .item2 div.thum div.thum-item:nth-of-type(n+5) { margin-top:2rem; }
#newitem .lst-tx { font-size:2rem; margin-top:3rem; letter-spacing:.2em; line-height:1.8; }
#newitem .lst-tx a { text-decoration:underline; color:#707070; }
#newitem .btn { max-width:25rem; width:100%; margin-top:3rem; }
#newitem .btn a { font-size:1.8rem; }

#newitem .bagudda { display:none; }
#newitem .bagudda.show , #newitem .fermoir.show { display:block; }
#newitem .fermoir { display:none; }
/*
#newitem .fermoir div.thum div.thum-item { width:calc(100% / 4 - 3rem); }
#newitem .fermoir div.thum div.thum-item:nth-of-type(3n) { margin-right:3rem; }
*/
#newitem .fermoir div.thum div.thum-item:nth-of-type(4n) { margin-right:0; }
#newitem .fermoir div.thum div.thum-item:nth-child(4) { margin-top:0; }

#newitem .slick-track { display:flex; }
#newitem .slick-prev , #newitem .slick-next { border-bottom:solid 1px #707070; z-index:100; width:15px; height:15px; }
#newitem .slick-prev:before , #newitem .slick-next:before { content:""; }
#newitem .slick-prev { left:-10px; border-left:solid 1px #707070; transform:rotate(45deg); }
#newitem .slick-next { right:-10px; border-right:solid 1px #707070; transform:rotate(-45deg); }
#newitem .newitem-mv .change-img a p { width:50%; padding:0.5rem; bottom:2rem; }

/* recommend ----------*/
#recommend { margin-top:10rem; position:relative; background:#F1F1F1; }
#recommend .main { margin-top:2rem; }
#recommend .box { position:relative; padding:5rem 0; }
/*
#recommend .mens { background:#00331e; }
#recommend .ladies { background:#6D0505; }
*/
#recommend ul.anchor { display:flex; justify-content:center; max-width:75rem; width:100%; margin:0 auto; }
#recommend ul.anchor li { width:45%; cursor:pointer; position:relative; padding:1.5rem 0; background:#fff; }
#recommend ul.anchor li:first-child { margin-right:2rem; background:#BEC9CA; color:#fff; }
#recommend ul.anchor li:last-child { background:#FFFCEB; }
#recommend ul.anchor li.active:after {
  content:"";
  display:block;
  position:absolute;
  width:100%;
  height:2px;
  top:120%;
  left:50%;
  transform:translateX(-50%);
  background:#707070;
}
#recommend ul.anchor li p { text-align:center; font-size:2rem; }
#recommend .cont { margin:5rem 0; display:none; }
#recommend .cont.act { display:block; }
#recommend .cont .block { margin:5rem 0 0; }
#recommend .cont div.main .text-area { margin:2rem 0 0; }
#recommend .cont div.main .text-area p.catch { margin-bottom:2rem; }
#recommend .cont div.main .text-area .text { font-size:1.8rem; line-height:2; }
#recommend .cont ul.main { display:flex; justify-content:space-between; align-items:center; }
#recommend .cont ul.main li { width:48%; position:relative; }
#recommend .cont ul.main li.img { padding-top:36%; }
#recommend .cont ul.main li a { position:absolute; left:0; top:0; }
#recommend .cont ul.main li a:hover { opacity:1; }
#recommend .cont ul.main li a.show { z-index:99; }
#recommend .cont ul.main li a p {
  position:absolute;
  bottom:3rem;
  width:60%;
  padding:1rem;
  border:solid 2px #fff;
  text-align:center;
  color:#fff;
  z-index:1;
  left:50%;
  font-weight: bold;
  transform:translateX(-50%);
  background:rgb(0,0,0,.3);
}
#recommend .cont ul.main li.img ul { display:flex; margin-top:1rem; justify-content:center; }
#recommend .cont ul.main li.img ul li {
  width:1.2rem;
  height:1.2rem;
  border-radius:50%;
  border:solid 1px #707070;
  margin-right:1.5rem;
  cursor:pointer;
}
#recommend .cont ul.main li.img ul li.active { background:#333; pointer-events:none; }
#recommend .cont ul.main li .ttl { font-size:2.8rem; }
#recommend .cont ul.main li .read { font-size:2rem; margin:2rem 0; }
#recommend .cont div.link { display:flex; justify-content:space-between; max-width:80%; width:100%; margin:3rem auto 0; }
#recommend .cont div.link div.thum-item { width:24%; }
#recommend .cont div.link div.thum-item { 
  display:flex;
  flex-direction:column;
  color:#707070;
  padding:1rem;
  border:solid 1px transparent;
  cursor:pointer;
}
#recommend .cont div.link div.thum-item div { position:relative; }
#recommend .cont div.link div.thum-item div span { 
  position:absolute;
  bottom:0; left:0;
  display:block;
  background:#fff;
  border:solid 1px #707070;
  font-size:10px;
  padding:5px;
  line-height:1;
}
#recommend .cont div.link div.thum-item a:hover { border-color:#707070; }
#recommend .cont div.link div.thum-item p { text-align:center; }
#recommend .cont div.link div.thum-item img { border-radius:50%; transition:all .4s ease-out; }
#recommend .cont div.link div.thum-item a:hover img { transform:scale(1.1); }
#recommend .cont div.link div.thum-item .ttl { margin:1rem 0; font-size:1.4rem; }
#recommend .cont div.link div.thum-item .ttl span { display:block; margin-top:0.5rem; }
#recommend .cont div.link div.thum-item .ttl span span { display:inline-block; background:#fff; color:#333; padding:0px 1rem; }
#recommend .cont div.link div.thum-item .price { font-size:1.4rem; margin-top:auto; }

#search .shape { max-width:80%; width:100%; margin:10rem auto 0; }
#search .shape ul { display:flex; flex-wrap:wrap; margin-top:2rem; }
#search .shape ul li { width:calc(50% - 1rem); margin-right:1rem; }
#search .shape ul li:nth-of-type(2n) { margin-right:0; }
#search .shape ul li:nth-of-type(n+3) { margin-top:1rem; }
#search .material { max-width:80%; width:100%; margin:10rem auto 0; text-align:center; }
#search .material a { display:inline-block; }
#search .material a:hover { opacity:.6; }
#search .budget { max-width:80%; width:100%; margin:10rem auto 0; }
#search .budget ul { display:flex; margin-top:2rem; }
#search .budget ul li { width:calc(25% - 6rem / 4); margin-right:2rem; border:solid 1px #707070; text-align:center; }
#search .budget ul li:last-child { margin-right:0; }
#search .budget ul li a { display:block; padding:1rem 0; color:#707070; }
#search .btn { margin-top:5rem; }
#search .snow { position:absolute; left:0; top:77%; z-index:-1; }

#goodluck-day { margin-top:10rem; }
#goodluck-day .cont-mv { margin-bottom:3rem; }
#goodluck-day .textarea { margin-top:5rem; }
#goodluck-day .textarea .catch { margin-bottom:2rem; }
#goodluck-day .textarea .tx ul { display:flex; margin-bottom:1rem; }
#goodluck-day .textarea .tx ul li { }
#goodluck-day .textarea .tx ul li:first-child { width:20%; }
#goodluck-day .textarea .tx ul li:last-child {  }
#goodluck-day .img-area { margin-top:5rem; }
#goodluck-day .img-area .img {}
#goodluck-day .img-area ul { display:flex; justify-content:center; max-width:50%; width:100%; margin:2rem auto 0; }
#goodluck-day .img-area ul li { font-size:2rem; }
#goodluck-day .img-area ul li:first-child { width:50%; position:relative; }
#goodluck-day .img-area ul li:first-child:after {
  content:"";
  display:block;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #707070 transparent transparent transparent;
  transform:translateY(-60%);
  position:absolute;
  right:1rem;
  top:50%;
  z-index:-1;
}
#goodluck-day .img-area ul li:first-child select { padding:1rem; cursor:pointer; border:solid 1px #707070; background:none; }


/* shop ----------*/
#shop { margin-top:15rem; margin-bottom:10rem; }
#shop h2 { margin-bottom:2rem; }
/*
#shop ul { display:flex; justify-content:center; margin-top:2rem; }
#shop ul li { font-size:2rem; }
#shop ul li.tx {}
#shop ul li.btn { margin:0 0 0 2rem; }
#shop ul li.btn a { display:flex; align-items:center; justify-content:center; height:100%; padding:1rem 0; }
*/
#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-top:10rem; }
#shop .cap { margin-top:3rem; border:solid 1px #707070; padding:2rem; }
#shop .cap p { line-height:2; }
#shop ul.brand { display:flex; justify-content:space-between; margin-top:5rem; }
#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:#B1B1B1; 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:#707070; }
#shop .btn2 a { color:#707070; }



@media screen and (max-width:1140px){
  #newitem .newitem-mv { padding-top:0; }
  #newitem .newitem-mv p.title,#newitem .newitem-mv p.sub-title { position:initial; text-align:center; }
  #newitem .newitem-mv p.title { font-size:4rem; }
  #newitem .newitem-mv p.sub-title { font-size:2.4rem; writing-mode:horizontal-tb; margin-bottom:2rem; }
  #newitem .bagudda .item2 { margin-top:5rem; }
}
@media screen and (max-width:1100px){
  #gift .grn { padding:10rem 10rem 5rem 10rem; }
  #search .snow { top:90%; }
}
@media screen and (max-width:768px){
  #gift .grn { padding:10rem 4rem 5rem 4rem; }
  #search { margin-top:15rem; }
  #search .red ul.anchor { padding:0 2rem; }
  #search .red .cont ul.link { max-width:100%; }
  #search .red .cont ul.main { display:block; }
  #search .red .cont ul.main li { width:100%; }
  #search .red .cont ul.main li .ttl { margin-top:2rem; }
  #search .snow { top:92%; }
  #shop { margin-top:15rem; }
  #shop ul { display:block; }
  #shop ul li.tx { text-align:center; font-size:1.8rem; }
  #shop ul li.btn { margin:1rem auto 0; }
}
@media screen and (max-width:600px){
  #pageup { right:2rem; }
  h2 { font-size:3rem; }
  .btn { max-width:100%; }
  .catch { font-size:1.8rem; }
  
  #mv .mv .mv-text { width:90%; top:40%; }
  #mv .mv .more { bottom:2%; }
  #mv ul.anchor-list { flex-wrap:wrap; max-width:80%; }
  #mv ul.anchor-list li { width:auto!important; margin:0; flex-grow:1; }
  #mv .delivery { margin-top:8rem; width:calc(100% - 4rem); padding:4rem 2rem 2rem; }
  #mv .delivery .ttl { width:80%; }
  #mv .delivery ul { margin:2rem 0; }
  
  #newitem .newitem-mv .change-img { padding-top:75%; }
  #newitem div.thum { max-width:calc(100% - 40px); }
  #newitem div.thum div.thum-item { margin:0 1rem!important; padding:1rem; }
  #newitem div.thum div.thum-item .tt { font-size:1.4rem; }
  
  #recommend .main > img { height:25rem; object-fit:cover; }
  #recommend .cont { margin:0 0 5rem; }
  #recommend .cont div.main .text-area .ttl { font-size:2.4rem; }
  #recommend .cont div.main .text-area .text { font-size:1.6rem; }
  #recommend .cont ul.main { display:block; }
  #recommend .cont ul.main li { width:100%; }
  #recommend .cont ul.main li.img { padding-top:75%; }
  #recommend .cont ul.main li.text { margin-top:2rem; }
  #recommend .cont ul.main li .ttl { font-size:2.4rem; }
  #recommend .cont ul.main li .read { font-size:1.8rem; margin:1rem 0; }
  #recommend .cont ul.main li a p { padding:0.5rem; width:60%; bottom:2rem; }
  #recommend .cont div.link { flex-wrap:wrap; max-width:calc(100% - 40px); }
  #recommend .cont div.link .slick-track { display:flex; }
  #recommend .cont div.link div.thum-item { width:calc(50% - 1rem); margin:0 1rem; padding:1rem; }
  #recommend .cont div.link div.thum-item p { text-align:center; }
  #recommend .cont div.link div.thum-item div span { width:100%; text-align:center; }
  #recommend .slick-prev , #recommend .slick-next { border-bottom:solid 1px #707070; z-index:100; width:15px; height:15px; }
  #recommend .slick-prev:before , #recommend .slick-next:before { content:""; }
  #recommend .slick-prev { left:-10px; border-left:solid 1px #707070; transform:rotate(45deg); }
  #recommend .slick-next { right:-10px; border-right:solid 1px #707070; transform:rotate(-45deg); }
  #recommend ul.anchor { margin-bottom:5rem; }
  #recommend ul.anchor li { width:50%; padding:0; }
  #recommend ul.anchor li p { padding:1rem; }
  #recommend .box { padding:0; padding-bottom:3rem; }
  
  #goodluck-day .textarea .tx ul li:first-child { width:40%; }
  #goodluck-day .img-area ul { max-width:100%; }
  #goodluck-day .img-area ul li:first-child { width:60%; }
  
  #search { margin-top:5rem; }
  #search .shape,#search .red .material,#search .red .budget { max-width:100%; width:calc(100% - 4rem); margin-top:5rem; }
  #search .budget ul { display:block; }
  #search .budget ul li { width:100%; }
  #search .shape ul li { width:48%; }
  #search .shape ul li:nth-of-type(n+3) { margin-top:1rem; }
  #search .budget ul li:nth-of-type(n+2) { margin-top:1rem; }
  #search .budget { margin-top:5rem; margin-bottom:5rem; }
  #search .budget ul li a { padding:1rem 0; }
  #search .red .cont ul.main li .tx { font-size:1.4rem; }
  #search .snow { top:98%; }
  #search .red .btn { margin:10rem 2rem 0; width:calc(100% - 4rem); }
  #search .material { margin-top:5rem; }
    
  /* shop --------------------*/
  #shop { margin-top:10rem; }
  #shop .mark { max-width:70%; margin:10rem auto 0; }
  #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; }
  
}