@charset "utf-8";

/* back color */
.back_bk{ background:#000; }
.back_pi{ background:#eb738f; }
.back_lpi{ background:#f7baa5; }
.back_bl{ background:#0e6eb8; }
.back_org{ background:#ea591d; }
.back_cme{ background:#c99e2a; }
.back_brn{ background:#7f4e20; }
.back_nev{ background:#161b61; }
.back_blk { background:#221814; }
.back_gry { background:#c9c9ca; }
.back_grn { background:#006834; }
.back_wine { background:#a11251; }
.back_lgrn { background:#9dbb87; }
.back_pp { background:#920681; }
.back_red { background:#ea000e; }
.back_yelw { background:#fff100; }
.back_bge { background:#FFC5A2; }

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

/* 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; }
.sp-only { display:none; }

@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:#333; }
.breadcrumbs .crumbList a { color:#333; }
.breadcrumbs .crumbList span { color:#333; }

/* common ----------*/
body { 
  color:#4d4d4d;
}
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;
}
.inner { max-width:114rem; width:100%; padding:0 2rem; margin:0 auto; }
h2 { font-size:3.6rem; text-align:center; letter-spacing:0.1em; }
h2 span { display:block; text-align:center; font-size:60%; letter-spacing:0.5em; margin-bottom:1rem; }
h3 { font-size:3rem; line-height:1; letter-spacing:0.1em; }
h3 span { font-size:1.6rem; display:block; margin-top:1rem; }
.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; }
.lead { font-size:2rem; text-align:center; font-weight:normal; margin:3rem auto; }

@media screen and (max-width:600px){
  #pageup { bottom:6rem; }
  h2 { font-size:3rem; }
  h2 span { margin-bottom:2rem; line-height:1; }
  .lead { line-height:1.6; }
}
.anchor { padding-top:9.7rem; margin-top:-9.7rem; }
@media screen and (max-width: 768px) {
  .anchor { padding-top:8rem; margin-top:-8rem; }
}

/*============================== CatchCont ==============================*/
#CatchCont {}
#CatchCont {}
#CatchCont .catch-slide { margin-top:10px; }
#CatchCont .slick-slide { margin:0 10px; }
#CatchCont .slick-dots { position:initial; margin-top:2rem; }
#CatchCont .slick-dots li.slick-active { background:#111822; }
#CatchCont .slick-dots li { width:4rem; height:1rem; background:#9a9a9a; }
#CatchCont .slick-dots li button { width:auto; height:auto; }
#CatchCont .slick-dots li button:before { display:none; }

/*============================== day ==============================*/
#day { margin-top:15rem; }
#day h2 p { text-align:center; margin-bottom:3rem; }
#day .day-block { position:relative; border:solid 1px #707070; max-width:90rem; margin:0 auto; padding:6rem 2rem; }
#day .day-block .ttl {
  position:absolute;
  top:-3.5rem;
  left:50%;
  transform:translateX(-50%);
  width:65%;
  height:7rem;
  line-height:7rem;
  text-align:center;
  display:block;
  background:#656565;
  color:#fff;
  font-size:3rem;
}
#day .day-block .text-area { width:90%; margin:auto; }
#day .day-block .text-area .big { font-size:3.6rem; letter-spacing:0.1em; font-weight: bold; }
#day .day-block .text-area ul{ margin:2rem 0; }
#day .day-block .text-area .flb { display:flex; }
#day .day-block .text-area .flb .btn { margin-top:0; }
#day .anchor { margin-top:5rem; }
#day .anchor ul { display:flex; justify-content:space-between; width:80%; margin:2rem auto 0; }
#day .anchor ul li { width:30%; position:relative; }
#day .anchor ul li a { display:block; background:#9A9A9A; color:#fff; text-align:center; padding:1rem 0; }
#day .anchor ul li:after {
  content:"";
  display:block;
  text-align:center;
  border-bottom: solid 4px #9A9A9A;
  border-right: solid 4px #9A9A9A;
  width: 24px;
  height: 24px;
  transform:translateX(-50%) rotate(45deg);
  position:absolute;
  bottom:-3rem;
  left:50%;
  transition:all ease-out .3s;
}
#day .anchor ul li:hover:after {
  bottom:-4rem;
}

@media screen and (max-width:1200px){
  #day .day-block { width:90%; margin-left:auto; }
  #day .day-block .mark { width:15rem; height:15rem; }
  #day .day-block .text-area { width:90%; }
  #day .day-block .text-area .flb { display:block; }
  #day .day-block .text-area .flb .btn { margin:2rem 0 0; }
}
@media screen and (max-width:820px){
  #day .day-block { width:90%; margin:10rem auto 0; padding:6rem 6rem 4rem; }
  #day .day-block .mark { width:12rem; height:12rem; font-size:2rem; left:-4rem; top:-4rem; }
  #day .day-block .text-area { width:100%; }
  #day .day-block .text-area .big { font-size:2.6rem; }
  #day .day-block .text-area .flb .btn { max-width:100%; }
}
@media screen and (max-width:600px){
  #day { margin-top:8rem; }
  #day .day-block { margin-top:0; padding:4rem; width:100%; }
  #day .day-block .text-area .big { font-size:2rem; }
  #day .day-block .ttl { font-size:2.4rem; line-height:5rem; height:5rem; top:-2.5rem; }
  #day .anchor ul { width:100%; }
}

/*============================== LinkArea ==============================*/
#LinkArea { background:#D1D1D1; margin-top:10rem; padding:5rem 0 0; }
#LinkArea h2 { font-size:3rem; color:#fff; letter-spacing:0.5em; line-height:1; }
#LinkArea ul { padding:5rem 0; display:flex; justify-content:space-between; }
#LinkArea ul li { width:25%; }
#LinkArea ul li .img { position:relative; }
#LinkArea ul li .img:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0;
  background:#333;
  opacity:0.5;
  width:100%;
  height:100%;
  transition:all ease-out .4s;
}
#LinkArea ul li .img .textBox { display:flex; flex-direction:column; position:absolute; top:0; left:0; width:100%; height:100%; padding:2rem;color:#fff; z-index:10; }
#LinkArea ul li .img .ttl { display:block; text-align:center; font-size:150%; font-weight: bold; }
#LinkArea ul li .img .text { font-size:1.4rem; margin:1rem 0; }
#LinkArea ul li .img .tri {
  display:block;
  width: 0;
  height: 0;
  border-style: solid;
  border-right:2rem solid transparent;
  border-left:2rem solid transparent;
  border-top:2.5rem solid #fff;
  border-bottom: 0;
  margin:auto auto 0;
}
#LinkArea ul li a:hover .img:after {
  background:#fff;
  opacity:.7;
}
#LinkArea ul li a:hover .img .textBox { color:#4d4d4d; }
#LinkArea ul li a:hover .img .tri { border-top:2.5rem solid #4d4d4d; }

@media screen and (max-width:1100px){
  #LinkArea ul li .img .ttl { font-size:120%; }
  #LinkArea ul li .img .text { font-size:1.2vw; }
}
@media screen and (max-width:820px){
  #LinkArea ul li .img .ttl { font-size:2vw; }
  #LinkArea ul li .img .tri {
    border-right:1rem solid transparent;
    border-left:1rem solid transparent;
    border-top:1.5rem solid #fff;
  }
}
@media screen and (max-width:600px){
  #LinkArea ul { flex-wrap:wrap; }
  #LinkArea ul li { width:50%; }
  #LinkArea ul li .img .ttl { font-size:1.8rem; }
  #LinkArea ul li .img .text { font-size:1.4rem; }
}

/*============================== Arrival ==============================*/
.arrivalBlock { display:flex; justify-content:space-between; align-items:center; }
.arrivalBlock .textWrap { text-align:center; }
.arrivalBlock .textWrap.l { margin-left:-10%; padding-right:10rem }
.arrivalBlock .textWrap.r { margin-right:-10%; padding-left:10rem; }
.arrivalBlock .textWrap img { width:2.08vw; }
.arrivalBlock .contWrap { width:100%; }
@media screen and (max-width:1300px){
  .arrivalBlock .textWrap.l { margin-left:0; padding-right:2rem; }
  .arrivalBlock .textWrap.r { margin-right:0; padding-left:2rem; }
  .arrivalBlock .textWrap { width:10%; }
  .arrivalBlock .textWrap img { width:3vw; }
  .arrivalBlock .contWrap { width:90%; }
}

/*============================== Raffine ==============================*/
#Raffine { margin:5rem 0; }
#Raffine .mainImg { width:80%; }
#Raffine ul.image { display:flex; justify-content:space-between; align-items:flex-end; margin-top:-20%; }
#Raffine ul.image li { width:45%; }
#Raffine ul.image li:first-child { order:2; }
#Raffine ul.image li:first-child img { box-shadow:0 3px 6px rgb(0,0,0,.15); }
#Raffine ul.item { display:flex; justify-content:space-between; margin-top:5rem; }
#Raffine ul.item li { width:15%; }
#Raffine ul.item li a { display:block; }
#Raffine ul.item li a img { border-radius:50%; }
#Raffine ul.item li a p { text-align:center; font-size:1.4rem; font-weight: bold; margin-top:1rem; color:#4d4d4d; }

@media screen and (max-width:1300px){
  #Raffine ul.item { display:flex; flex-wrap:wrap; }
  #Raffine ul.item li { width:30%; }
  #Raffine ul.item li:nth-of-type(n+4) { margin-top:2rem; }
  #Raffine .btn { margin-top:5rem; }
}
@media screen and (max-width:820px){
  #Raffine ul.image { margin-top:-15%; }
}
@media screen and (max-width:600px){
  #Raffine .mainImg  { width:100%; }
  #Raffine ul.image { display:block; margin-top:2rem; }
  #Raffine ul.image li { width:100%; }
  #Raffine ul.image li img { height:25rem; width:100%; object-fit:cover; }
  #Raffine ul.image li:nth-child(2) { margin-top:2rem; }
  #Raffine ul.item li a p { font-size:1.3rem; }
}

/*============================== key ==============================*/
#key { background:#C9C9C9; padding:5rem 0; }
#key ul.item {  }
#key ul.item > li { width:53%; position:relative; }
#key ul.item > li:nth-of-type(even) { margin-left:auto; z-index:10; }
#key ul.item > li:nth-of-type(n+2) { margin-top:-30%; }
#key ul.item > li p { text-align:center; margin-top:2rem; font-size: 2rem; }
#key ul.item > li img { box-shadow:0 3px 6px rgb(0,0,0,.15); }
#key .btn { max-width:24rem; border:none; }
#key .btn a { background:#fff; }
#key .arrivalBlock .contWrap { position:relative; }
#key .arrivalBlock .contWrap .absText {
  position:absolute;
  max-width:40rem;
  width:100%;
  bottom:10%;
  right:6%;
}
@media screen and (max-width:1300px){
  #key .arrivalBlock .contWrap .absText { max-width:100%; width:53%; padding:0 10%; right:0; }
}
@media screen and (max-width:1050px){
  #key .arrivalBlock .contWrap .absText { bottom:0; padding-right:0; }
}
@media screen and (max-width:600px){
  #key ul.item > li { width:100%; }
  #key ul.item > li:nth-of-type(n+2) { margin-top:5rem; }
  #key .arrivalBlock .contWrap .absText { position:initial; width:100%; padding:0; margin-top:6rem; }
  #key ul.item p { text-align:center; margin-top:2rem; font-size:1.8rem; }
  #key .btn { max-width:100%; }
  
  #key .slick-slide { margin:0 2rem; }
  #key .slick-dots { bottom:-5rem; }
  #key .slick-dots li.slick-active { background:#111822; }
  #key .slick-dots li { width:4rem; height:1rem; background:#9a9a9a; }
  #key .slick-dots li button { width:auto; height:auto; }
  #key .slick-dots li button:before { display:none; }
}
/*
@media screen and (max-width:414px){
  #key .slick-dots { bottom:31%; }
}
@media screen and (max-width:375px){
  #key .slick-dots { bottom:30%; }
}
*/

/*============================== recommend ==============================*/
#recommend { background:#F9F9F9; padding:10rem 0; }
#recommend .switch {display:flex; justify-content:space-between; }
#recommend .switch li {
  width:49%;
  font-weight:bold;
  font-size:3rem;
  text-align:center;
  background:#D2D2D2;
  padding:1rem 0;
  cursor:pointer;
  transition:all ease-out .4s;
}
#recommend .switch li.men:hover { background:#fff;  }
#recommend .switch li.ladies:hover { background:#0A5362; color:#fff; }
#recommend .switch li.active { cursor:auto; }
#recommend .switch li.men.active { background:#fff; }
#recommend .switch li.ladies.active { background:#0A5362; color:#fff; }
#recommend .switch li.ladies.active a { color:#fff; }
#recommend .contBox {  }

#recommend .contBox .itemList { display:flex; flex-wrap:wrap; }
#recommend .contBox .itemList > li { width:calc(100% / 3 - 4rem / 3); margin-right:2rem; }
#recommend .contBox .itemList > li:nth-of-type(3n) { margin-right:0; }
#recommend .contBox .itemList > li:nth-of-type(n+4) { margin-top:4rem; }
#recommend .contBox .itemList > li a { color:#fff; }
#recommend .contBox .itemList > li p { font-weight: bold; }
#recommend .contBox .itemList > li .name { font-size:1.8rem; margin:1rem 0; }
#recommend .contBox .itemList > li .price { font-size:1.4rem; }
#recommend .contBox .itemList > li ul.color { justify-content:flex-start; }
#recommend .contBox .contBlock { display:none; }
#recommend .contBox .contBlock.act { display:block; }

#recommend .contBox .forMen { background:#fff; padding:3rem; }
#recommend .contBox .forLadies { background:#0A5362; padding:3rem; }

#recommend .contBox .forMen { background:#A6AAAE; padding:3rem; }
#recommend .switch li.men.active { background:#A6AAAE; color:#fff; }
#recommend .switch li.men:hover { background:#A6AAAE; color:#fff; }
#recommend .contBox .forMen .itemList > li a { color:#fff; }

#recommend .color li { border:solid 1px #fff; }
@media screen and (max-width:600px){
  #recommend { padding-top:5rem; }
  #recommend .switch li { font-size:2.4rem; margin-bottom:-1px; }
  #recommend .contBox .itemList > li { width:calc(50% - 2rem / 2); margin-right:2rem; }
  #recommend .contBox .itemList > li:nth-of-type(3n) { margin-right:2rem; }
  #recommend .contBox .itemList > li:nth-of-type(2n) { margin-right:0; }
  #recommend .contBox .itemList > li:nth-of-type(n+3) { margin-top:4rem; }
  #recommend .contBox .itemList > li .name { font-size:1.4rem; }
  #recommend .contBox .itemList > li .price { font-size:1.2rem; }
}

/*============================== category ==============================*/
#category { background:#F9F9F9; padding:0 0 10rem; }
#category ul.material { display:flex; margin-top: 3rem; flex-wrap:wrap; justify-content:space-between; background:#fff; padding:2rem; }
#category ul.material:after { display:none; }
#category ul.material li { width:24%; border:solid 1px #333; }
#category ul.material li:nth-of-type(n+5) { margin-top:2rem; }
#category ul.material li a { display:flex; align-items:center; padding:0.5rem 1rem; }
#category ul.material li a img { margin-right:auto; }
#category ul.material li a p { text-align:right; font-weight: bold; color:#333; }
#category ul.material li.nolink { pointer-events: none; position:relative; }
#category ul.material li.nolink .mask { position:absolute; display:flex; align-items:center; top:0; left:0; right:0; background:rgba(0,0,0,0.6); width:100%; height:100%; }
#category ul.material li.nolink .mask p { color:#fff; font-size: 2rem; font-weight: bold; text-align:center; width:100%; }
#category .budget { max-width:80%; width:100%; margin:10rem auto 0; }
#category .budget ul { display:flex; margin-top:2rem; }
#category .budget ul li { width:calc(25% - 6rem / 4); margin-right:2rem; border:solid 1px #707070; display:flex; justify-content:center; align-items:center; text-align:center; }
#category .budget ul li:last-child { margin-right:0; }
#category .budget ul li a { display:block; padding:1rem 0; color:#707070; }
#category .btn { margin-top:5rem; }
#category .btn a { padding:1rem 0; }
@media screen and (max-width:910px){
	#category ul.material li a { padding:0.5rem 1rem; }
	#category ul.material li a p { font-size: 1.5rem; }
}
@media screen and (max-width:768px){
  #category ul.material li { width:32%; }
  #category ul.material li:nth-of-type(n+4) { margin-top:2rem; }
  #category ul.material li a p { font-size: 1.4rem; }
}
@media screen and (max-width:600px){
  #category ul.material { padding:0 2rem; }
  #category ul.material li { width:48%; }
  #category ul.material li:nth-of-type(n+3) { margin-top:2rem; }
	#category ul.material li a img { width:60px; }
    #category .budget ul { display:block; }
    #category .budget ul li { width:100%; }
    #category .budget ul li:nth-of-type(n+2) { margin-top:1rem; }
    #category .budget { margin-top:5rem; margin-bottom:5rem; }
    #category .budget ul li a { padding:1rem 0; }
  #category .btn { max-width:80%; }
}
@media screen and (max-width:375px){
	#category ul li a p { font-size: 1.4rem; }
	#category ul li a img { width:40px; }
}
@media screen and (max-width:320px){
	#category ul li a p { font-size: 1.2rem; }
}

/*============================== gift ==============================*/
#gift { background:#0A5362; padding:5rem 0; color:#fff; }
#gift ul { display:flex; justify-content:space-between; margin-top:5rem; }
#gift ul li {}
#gift ul li.img { width:60%; }
#gift ul li.text { width:36%; }
#gift ul:nth-of-type(even) li.img { order:2; }
#gift ul li.text .ttl { font-size:2.6rem; font-weight: bold; }
#gift ul li.text .tx { margin:1rem 0 3rem; }
#gift ul li.text .tx span { display:block; font-size:80%; margin-top:1rem; }
#gift ul li.text .btn { max-width:100%; border:solid 1px #fff; }
#gift ul li.text .btn a { color:#fff; }

@media screen and (max-width:820px){
  #gift ul li.img { width:55%; }
  #gift ul li.text { width:40%; }
  #gift .btn a { font-size:1.6rem; }
}
@media screen and (max-width:600px){
  #gift ul { display:block; }
  #gift ul li.img,#gift ul li.text { width:100%; }
  #gift ul li.text { margin-top:2rem; }
  #gift .btn a { font-size:1.8rem; }
}

/*============================== shop ==============================*/
#shop { margin-top:10rem; margin-bottom:10rem; }
#shop .inner { max-width:124rem; }
#shop h2 { margin-bottom:2rem; }
#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 .btn2 { max-width:50rem; margin:5rem auto 0; border-color:#333; }
#shop .btn2 a { color:#333; }

#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; }
}