@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 ----------*/
#header-new { background:rgba(255,255,255,.8)!important; }
#pageup { width:auto; right:10rem; }
#pageup a { color:#fff; }
#pageup i { right:auto; left:50%; transform:translateX(-50%); }

/* 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 { 
  background:#111822;
  color:#fff;
  
}
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:124rem; 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 #fff; position:relative; }
.btn a { display:block; padding:0.5rem 0; text-align:center; color:#fff; 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 .mv-text { 
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  animation-name: fadein;
  animation-duration:3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
#mv .mv .more {
  position:absolute;
  bottom:10%;
  left:50%;
  transform:translateX(-50%);
  max-width:15rem;
  width:100%;
  animation-name: fadein2;
  animation-duration:3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
#mv .mv .more img { width:100%; }
#mv ul.anchor-list { max-width:80rem; width:100%; display:flex; justify-content:center; margin:10rem auto; }
#mv ul.anchor-list li { width:calc(100% / 4 - 6rem / 4); margin-right:2rem; }
#mv ul.anchor-list li:last-child { margin-right:0; }
#mv ul.anchor-list li a {  }
#mv .delivery { max-width:70rem; width:100%; margin:5rem auto 0; padding:4rem 6rem; position:relative; border:solid 1px #fff; position:relative; z-index:1; }
#mv .delivery .ttl { 
  position:absolute;
  width:60%;
  text-align:center;
  top:-2rem;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  font-size:2.6rem;
  color:#111822;
  line-height:4rem;
}
#mv .delivery p.main { font-size:2.2rem; }
#mv .delivery ul { margin:2rem 0; }
#mv .delivery ul li { text-indent:-1em; padding-left:1em; }
#mv .delivery p.cap { font-size:1.2rem; }

/* newitem ----------*/
#newitem { margin-top:10rem; position:relative; }
#newitem .item { position:relative; }
#newitem .item .back {
  position:absolute;
  width:100vw;
  margin:0 calc(50% - 50vw);
  left:0;
  top:0;
  z-index:-1;
}
#newitem .item ul { display:flex; justify-content:space-between; }
#newitem .item ul li.img { width:55%; }
#newitem .item ul li.cont { width:40%; }
#newitem .item ul li.cont div.newitem-slide01-thum .slick-list ,
#newitem .item ul li.cont div.newitem-slide02-thum .slick-list { height:auto!important; }
#newitem .item ul li.cont div.newitem-slide01-thum .slick-track,#newitem .item ul li.cont div.newitem-slide02-thum .slick-track
{ display:flex; justify-content:space-between; flex-wrap:wrap; height:auto!important; }
#newitem .item ul li.cont .flex-img { width:calc(50% - 0.5rem)!important; margin-right:1rem; cursor:pointer; position:relative; }
#newitem .item ul li.cont .flex-img:after {
  position:absolute;
  content:"";
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgb(0,0,0,.5);
  z-index:1;
}
#newitem .item ul li.cont .flex-img.slick-current:after{
  background:none;
  outline:solid 5px #fff;
  outline-offset:-5px;
}
#newitem .item ul li.cont .slick-track div:nth-of-type(2n) { margin-right:0; }
#newitem .item ul li.cont .slick-track div:nth-of-type(n+3) { margin-top:1rem; }
#newitem .item ul li.cont .ttl { font-size:2rem; line-height:1.2; margin-top:2rem; }
#newitem .item ul li.cont .en { font-size:1.4rem; margin-top:1rem; }
#newitem .item ul li.cont .price { font-size:2rem; margin-top:1rem; }
#newitem .item .tx { margin-top:3rem; background:rgba(17,24,34,.8); padding:2rem; position:relative; }
#newitem .item .btn { max-width:35rem; width:100%; margin:2rem auto 0; border:solid 1px #fff; position:relative; }
#newitem .item .btn a { display:block; padding:0.5rem 0; text-align:center; color:#fff; }

/* gift ----------*/
#gift { margin-top:15rem; position:relative; }
#gift .grn { background:#00331E; padding:15rem 15rem 5rem 15rem; position:relative; }
#gift .grn .tree { position:absolute; top:-8rem; left:50%; transform:translateX(-50%); max-width:15rem; width:100%; }
#gift .grn .item-box { margin-top:2rem; }
#gift .grn .item-box.fst { margin-bottom:10rem; }
#gift .main { display:flex; }
#gift .main .slide01 , #gift .main .slide02 { width:80%; }
#gift .main .slide01 img , #gift .main .slide02 img{ height:100%; object-fit:cover; }
#gift .main .slide01-thum , #gift .main .slide02-thum { width:20%; }
#gift .slide01-thum .slick-track , #gift .slide02-thum .slick-track { transform: unset!important; }
#gift .slick-vertical .slick-slide { border:none; }
#gift .slick-list ,#gift .slick-slider .slick-track { height:100%; }
#gift .slide01-thum .item , #gift .slide02-thum .item { position:relative; cursor:pointer; }
#gift .slide01-thum .item:after , #gift .slide02-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;
}
#gift .slide01-thum .item.slick-current:after , #gift .slide02-thum .item.slick-current:after { 
  background:none;
  outline:solid 5px #fff;
  outline-offset:-5px;
}
#gift .ttl { font-size:2.2rem; margin-top:2rem; }
#gift .tx { margin-top:1rem; }
#gift .snow { position:absolute; left:0; top:70%; z-index:-1; }

/* search ----------*/
#search { margin-top:30rem; position:relative; }
#search .red { background:#6D0505; position:relative; padding:15rem 0 5rem; }
#search .red.mens { background:#00331e; }
#search .red.ladies { background:#6D0505; }
#search .red .tree { position:absolute; top:-8rem; left:50%; transform:translateX(-50%); max-width:15rem; width:100%; }
#search .red .main { margin-top:2rem; }
#search .red ul.anchor { display:flex; justify-content:center; max-width:75rem; width:100%; margin:5rem auto; }
#search .red ul.anchor li { width:45%; border:solid 1px #fff; cursor:pointer; position:relative; }
#search .red ul.anchor li:first-child { margin-right:2rem; }
#search .red ul.anchor li.active:after {
  content:"";
  display:block;
  position:absolute;
  width:90%;
  height:1px;
  top:120%;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
}
#search .red ul.anchor li p { text-align:center; font-size:2rem; }
#search .red ul.anchor li p span { display:block; }
#search .red .cont { margin:5rem 0; display:none; }
#search .red .cont.act { display:block; }
#search .red .cont .block { margin:10rem 4rem 0; }
#search .red .cont div.main .text-area { margin:2rem 4rem 0; }
#search .red .cont div.main .text-area p { text-align:center; }
#search .red .cont div.main .text-area .ttl { font-size:2.8rem; margin-bottom:1rem; }
#search .red .cont div.main .text-area .text { font-size:1.8rem; line-height:2; }
#search .red .cont ul.main { display:flex; justify-content:space-between; align-items:center; }
#search .red .cont ul.main li { width:48%; }
#search .red .cont ul.main li .ttl { font-size:2.8rem; }
#search .red .cont ul.main li .read { font-size:2rem; margin:2rem 0; }
#search .red .cont ul.link { display:flex; justify-content:space-between; max-width:80%; width:100%; margin:3rem auto 0; }
#search .red .cont ul.link li { width:24%; }
#search .red .cont ul.link li a { display:flex; flex-direction:column; height:100%; color:#fff; padding:1rem; }
#search .red .cont ul.link li a:hover { border:solid 1px #fff; }
#search .red .cont ul.link li img { border-radius:50%; }
#search .red .cont ul.link li .ttl { margin:1rem 0; font-size:1.4rem; }
#search .red .cont ul.link li .ttl span { display:block; margin-top:0.5rem; }
#search .red .cont ul.link li .ttl span span { display:inline-block; background:#fff; color:#333; padding:0px 1rem; }
#search .red .cont ul.link li .price { font-size:1.4rem; margin-top:auto; }
#search .red .shape { max-width:80%; width:100%; margin:10rem auto 0; }
#search .red .shape ul { display:flex; flex-wrap:wrap; margin-top:2rem; }
#search .red .shape ul li { width:calc(50% - 1rem); margin-right:1rem; }
#search .red .shape ul li:nth-of-type(2n) { margin-right:0; }
#search .red .shape ul li:nth-of-type(n+3) { margin-top:1rem; }
#search .red .material { max-width:80%; width:100%; margin:10rem auto 0; text-align:center; }
#search .red .material a { display:inline-block; }
#search .red .budget { max-width:80%; width:100%; margin:10rem auto 0; }
#search .red .budget ul { display:flex; margin-top:2rem; }
#search .red .budget ul li { width:calc(25% - 2.5rem); margin-right:2rem; border:solid 1px #fff; text-align:center; }
#search .red .budget ul li:last-child { margin-right:0; }
#search .red .budget ul li a { display:block; padding:1rem 0; color:#fff; }
#search .red .btn { margin-top:10rem; }
#search .snow { position:absolute; left:0; top:77%; z-index:-1; }

/* 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 .btn.last { margin-top:10rem; }
#shop .btn.last a { padding:1rem 0; }
#shop .mark { text-align:center; margin-top:10rem; }



@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; }
  #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%; }
  
  #mv .mv .mv-text { width:90%; top:40%; }
  #mv .mv .more { bottom:20%; }
  #mv ul.anchor-list { flex-wrap:wrap; max-width:80%; }
  #mv ul.anchor-list li { width:calc(50% - 3rem); margin-right:3rem; }
  #mv ul.anchor-list li:nth-of-type(2n) { margin-right:0; }
  #mv ul.anchor-list li:nth-of-type(n+3) { margin-top:3rem; }
  #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 .item ul { display:block; }
  #newitem .item ul li { width:100%!important; }
  #newitem .item ul li.cont { margin-top:1rem; }
  #newitem .item ul li.cont div.newitem-slide01-thum .slick-track, #newitem .item ul li.cont div.newitem-slide02-thum .slick-track
  { flex-wrap:nowrap; }
  #newitem .item ul li.cont .flex-img { width:calc(25% - 3rem / 4); margin-right:1; }
  #newitem .item ul li.cont .flex-img.slick-current:after { outline:solid 3px #fff; outline-offset:-3px; }
  #newitem .item ul li.cont .slick-track div:nth-of-type(2n) { margin-right:1rem; }
  #newitem .item ul li.cont .slick-track div:nth-of-type(n+3) { margin-top:0; }
  #newitem .item ul li.cont .slick-track div:last-child { margin-right:0; }
  #newitem .item .tx { margin-top:2rem; padding:0; font-size:1.4rem; }
  #newitem .item .back { top:55%; }
  #newitem .item .back img { height:50rem; object-fit:cover; opacity:.4; }
  
  #gift .grn { padding:10rem 2rem 5rem; }
  #gift .main { display:block; }  
  #gift .tx { font-size:1.4rem; }
  #gift .main .slide01-thum, #gift .main .slide02-thum , #gift .main .slide01, #gift .main .slide02{ width:100%; }
  #gift .slide01-thum .item, #gift .slide02-thum .item { width:50%; }
  #gift .slide01-thum .slick-list , #gift .slide01-thum .slick-list .slick-track { height:auto!important; }
  #gift .slide02-thum .slick-list , #gift .slide02-thum .slick-list .slick-track { height:auto!important; }
  #gift .slide01-thum .slick-list .slick-track,#gift .slide02-thum .slick-list .slick-track { display:flex; }
  #gift .snow { top:95%; }
  #gift .main .slide01 img, #gift .main .slide02 img { height:auto; object-fit:none; }
  #gift .slide01-thum .item.slick-current:after, #gift .slide02-thum .item.slick-current:after { outline:solid 3px #fff; outline-offset:-3px; }
  
  #search .red .cont { margin:0 0 5rem; }
  #search .red .cont .block { margin:5rem 2rem 0; }
  #search .red .cont div.main .text-area { margin:2rem 2rem 0; }
  #search .red .cont div.main .text-area .ttl { font-size:2.4rem; }
  #search .red .cont div.main .text-area .text { font-size:1.6rem; }
  #search .red .cont ul.main li .ttl { font-size:2.4rem; }
  #search .red .cont ul.main li .read { font-size:1.8rem; margin:1rem 0; }
  #search .red .cont ul.link { flex-wrap:wrap; }
  #search .red .cont ul.link li { width:calc(50% - 1rem); margin-right:2rem; }
  #search .red .cont ul.link li:nth-of-type(2n) { margin-right:0; }
  #search .red .cont ul.link li:nth-of-type(n+3) { margin-top:2rem; }
/*
  #search .red ul.anchor { display:block; }
  #search .red ul.anchor li { width:100%; margin-bottom:5px; }
  #search .red ul.anchor li.active { background:#fff; color:#6d0505; }
  #search .red ul.anchor li.active:after { display:none; }
*/
  #search .red ul.anchor li { width:50%; }
  #search .red ul.anchor li p { font-size:1.8rem; padding:1rem; }
  #search .red ul.anchor li.active:after { top:110%; }
  #search .red .shape,#search .red .material,#search .red .budget { max-width:100%; width:calc(100% - 4rem); margin-top:5rem; }
  #search .red .budget ul { display:block; }
  #search .red .budget ul li { width:100%; }
  #search .red .shape ul li { width:48%; }
  #search .red .shape ul li:nth-of-type(n+3) { margin-top:1rem; }
  #search .red .budget ul li:nth-of-type(n+2) { margin-top:1rem; }
  #search .red .budget { margin-bottom:5rem; }
  #search .red .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); }
  
  #shop { margin-top:10rem; }
  #shop .mark { max-width:70%; margin:10rem auto 0; }
  
}




@keyframes fadein {
  0% {
    opacity: 0;
    transform:translate(-50%,-10%);
  }
  100% {
    opacity: 1;
    transform:translate(-50%,-50%);
  }
}
@keyframes fadein2 {
  0% {
    opacity: 0;
    transform:translate(-50%,80%)
  }
  100% {
    opacity: 1;
    transform:translate(-50%,0);
  }
}