@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; }
.pc-only {  }
.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:#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; }
.btn { max-width:35rem; width:100%; margin:2rem auto 0; position:relative; border-radius:15px; overflow:hidden; }
.btn a { display:block; padding:1rem 0; text-align:center; background:#A2A2A2; color:#fff; font-weight: bold; font-size:2rem; }
.btn.max { max-width:100%; }
.btn.big a { padding:2rem 0; }
.lead { font-size:2rem; text-align:center; font-weight:normal; margin:3rem auto; }
.lead.lead2 { font-size:1.8rem; text-align:left; margin-top:2rem; }
h2 { font-size:3.6rem; text-align:center; }
h3.line { font-size:3rem; text-align:center; padding-bottom:1rem; border-bottom:solid 1px #707070; }
h3.line span { position:relative; }
h3.line span:before,h3.line span:after {
  display:inline-block;
  position:absolute;
  content:"";
  background-image:url(../_img/2025_newyear/coloricon.png);
  background-size:contain;
  background-repeat:no-repeat;
  vertical-align:middle;
  max-width:7rem;
  width:100%;
  height:100%;
  top:0;
}
h3.line span:before { right:calc(100% + 1em); transform: rotate(180deg); }
h3.line span:after { left:calc(100% + 1em); }
h3.t2 { font-size:2.4rem; text-align:center; position:relative; }
h3.t2 img { max-width:21rem; width:100%; margin:0 auto; }
h3.t2 p { text-align:center; margin-top:2rem; }
h3.t2 span { display:block; }
h4 { font-size:2.4rem; font-weight: bold; }
h4.line { display:flex; align-items:center; justify-content:space-between; }
h4.line:before,h4.line:after {
  content:"";
  display:block;
  width:40%;
  height:1px;
  background:#707070;
}

.font-big { font-size:3.4rem; }
.font-mid { font-size:2.8rem; }
.font-df { font-size:2rem; }

.slick-dots { bottom:0; }
.slick-dots li { background:#B1B1B1; width:4rem; height:1rem; }
.slick-dots li.slick-active { background:#333; }
.slick-dots li button { display:none; }
.slick-dots li button:before { display:none; }

@media screen and (max-width:600px){
  #pageup { bottom:6rem; }
  .lead { line-height:1.6; }
  .lead.lead2 { font-size:1.6rem; }
  .btn { border-radius:10px; }
  h2 { font-size:3rem; }
  h3.line { font-size:2.4rem; }
  h3.t2 img { max-width:15rem; }
  h4 { font-size:2rem; }
}

/*============================== catch ==============================*/
#catch { background:#FBFFEF; padding-bottom:10rem; padding-top:5rem; }
#catch .haru {  }
#catch .haru p { width:80%; margin:2rem auto 4rem; }
#catch .lucky { margin-top:5rem; }
#catch .lucky .day { padding:4rem 2rem 2rem; border:solid 1px #707070; position:relative; margin-top:5rem; background:#fff; }
#catch .lucky .day.kaiun { width:80%; margin:5rem auto 0; }
#catch .lucky .day .ttl {
  position:absolute;
  font-size:2.4rem;
  top:-2.5rem;
  width:100%;
  left:0;
  text-align:center;
  font-weight: bold;
}
#catch .lucky .day .ttl span {
  display:inline-block;
  background:#fff;
  border:solid 1px #707070;
  padding:0.5rem 0;
  max-width:65rem;
  width:100%;
  margin:0 auto;
}
#catch .lucky .day .text { font-size:2.4rem; font-weight: bold; }
#catch .lucky .month {}
#catch .lucky .month ul { display:flex; justify-content:space-between; margin:4rem auto 0; max-width:80%; }
#catch .lucky .month ul li { width:32%; background:#fff; padding:2rem 4rem; }
#catch .lucky .month ul li .big { text-align:center; font-weight: bold; font-size:2.4rem; margin-bottom:1rem; }
#catch .lucky .month ul li div { display:flex; justify-content:space-between; width:100%; }
#catch .lucky .month ul li div p { font-size:1.8rem; font-weight: bold; }
#catch .lucky .month ul li div p:last-child { width:45%; }
#catch .lucky .day.day2 { padding-top:5rem; }
#catch .lucky .day.day2 .ttl { font-size:1.8rem; top:-3.5rem; }
#catch .lucky .day.day2 .text,
#catch .lucky .day.day2 .text2,
#catch .lucky .day.day2 .cap { width:80%; margin:0 auto; }
#catch .lucky .day.day2 .text2 { font-size:2.4rem; margin:2rem auto; }
#catch .lucky .day.day2 .cap { display:flex; justify-content:space-between; }
#catch .lucky .day.day2 .cap .btn { margin:0; border-radius:0; }
#catch .lucky .day.day2 .cap .btn a {  }

@media screen and (max-width:1000px) {
  #catch .lucky .day.day2 .text, #catch .lucky .day.day2 .text2, #catch .lucky .day.day2 .cap { width:100%; }
}
@media screen and (max-width:820px) {
  #catch .lucky .month ul li div p { font-size:1.6rem; }
  #catch .lucky .day.day2 .cap { display:block; }
  #catch .lucky .day.day2 .cap .btn { margin:2rem auto 0; }
}
@media screen and (max-width:600px) {  
  #catch .haru p,#catch .lucky .day.kaiun { width:100%; }
  #catch .lucky .day .ttl { font-size:1.8rem; }
  #catch .lucky .day .ttl span { max-width:70%; }
  #catch .lucky .day .text { font-size:1.8rem; }
  #catch .lucky .month ul { display:block; width:70%; }
  #catch .lucky .month ul li { width:100%; }
  #catch .lucky .month ul li:nth-of-type(n+2) { margin-top:2rem; }
  #catch .lucky .month ul li .big { font-size:2rem; }
  #catch .lucky .month ul li div p,#catch .lucky .day.day2 .text2 { font-size:1.8rem; }
}

/*============================== newitem ==============================*/
#newitem { padding:10rem 0; background:#fff; }
#newitem .slide-wrap { position:relative; }
#newitem .slide-wrap p {
  position:absolute;
  bottom:3rem;
  left:2rem;
  color:#fff;
  font-size:3rem;
  padding-left:1em;
  border-left:solid 10px #fff;
  transition:all ease-out 1.2s;
  font-weight: bold;
  z-index:10;
}
#newitem .slide-wrap p.colorchange { color:#4d4d4d; border-color:#4d4d4d; }
#newitem .content-wrap { width:80%; margin:4rem auto 0; }
#newitem .lc { margin-bottom:4rem; }
#newitem .lc ul { display:flex; justify-content:space-between; }
#newitem .lc ul li { width:48%; }
#newitem .lc ul li .ttl { padding-left:1em; border-left:solid 5px #707070; font-size:2.6rem; font-weight: bold; margin-bottom:2rem; }
#newitem .itemlist { display:flex; justify-content:space-between; flex-wrap:wrap; margin-bottom:5rem; }
#newitem .itemlist li { width:32%; }
#newitem .itemlist li:nth-of-type(n+4) { margin-top:2rem; }
#newitem .itemlist li a { display:flex; flex-direction:column; height:100%; }
#newitem .itemlist li a p { text-align:center; color:#707070; font-size:1.8rem; font-weight: bold; }
#newitem .itemlist li a p.price { margin-top:auto; }
#newitem .mark { max-width:21rem; width:100%; margin:5rem auto 0; }

@media screen and (max-width:820px) {
  #newitem .slide-wrap p { font-size:2.6rem; bottom:4rem; }
  #newitem .content-wrap { width:100%; }
}
@media screen and (max-width:600px) {
  #newitem { padding:5rem 0; }
  #newitem .slide-wrap { width:100vw; margin:0 calc(50% - 50vw); }
  #newitem .slide-wrap p { font-size:15px; border-width:5px; bottom:1rem; }
  #newitem .slick-dots { top:calc(100% + 1rem); }
  #newitem .lc ul { display:block; }
  #newitem .lc ul li { width:100%; }
  #newitem .lc ul li.text { margin-top:2rem; }
  #newitem .lc ul li .ttl { font-size:2rem; }
  #newitem .itemlist li { width:48%; }
  #newitem .itemlist li a p { font-size:1.6rem; }
  #newitem .slide-wrap p.colorchange { text-shadow:0 0 5px rgb(255,255,255,.9); }
  #newitem .mark { max-width:15rem; }
}
  
/*============================== luckybag ==============================*/
#luckybag { background:#F7FFF5; padding:10rem 0; }
#luckybag .mv { position:relative; }
#luckybag .mv p {
  position:absolute;
  bottom:2rem;
  left:2rem;
  font-size:3rem;
  border-left:solid 5px #707070;
  padding-left:1em;
  font-weight: bold;
}
#luckybag .catch { font-size:2.4rem; font-weight: bold; text-align:center; margin-top:5rem; }
#luckybag .leadtext { max-width:80%; margin:2rem auto 0; }
#luckybag .day {
  border:solid 1px #707070;
  position:relative;
  text-align:center;
  font-size:2rem;
  margin-top:5rem;
  font-weight: bold;
  letter-spacing:0.1em;
  padding:2rem 0;
  background:#fff;
}
/*
#luckybag .day:after,#luckybag .day:before{
  content:"";
  width:30px;
  height:100%;
  position:absolute;
  top:0;
  background-image: conic-gradient(#EBF0EA 0deg 90deg, #C53638 90deg 180deg, #EBF0EA 180deg 270deg, #C53638 270deg 360deg);
  background-size:30px 30px;
}
#luckybag .day:before{ left:0; }
#luckybag .day:after{ right:0; }
*/
#luckybag .item { display:flex; justify-content:space-between; margin-top:5rem; }
#luckybag .item li { width:46%; }
#luckybag .item li p { font-size:2rem; text-align:center; margin-top:1rem; font-weight: bold; }
#luckybag .item li p.price { margin-top:auto; }
#luckybag .item li .btn { margin-top:1rem;  }
#luckybag .cap { padding:4rem 2rem 2rem; border:solid 1px #707070; position:relative; margin:10rem auto 0; background:#fff; max-width:80%; }
#luckybag .cap .ttl {
  position:absolute;
  font-size:2.4rem;
  top:-2.5rem;
  width:100%;
  left:0;
  text-align:center;
  font-weight: bold;
}
#luckybag .cap .ttl span {
  display:inline-block;
  background:#fff;
  border:solid 1px #707070;
  padding:0.5rem 0;
  max-width:60%;
  width:100%;
  margin:0 auto;
}
#luckybag .cap ul li { font-size:1.8rem; font-weight: bold; }

@media screen and (max-width:820px) {
  #luckybag .leadtext { max-width:100%; }
  #luckybag .cap { max-width:100%; }
}
@media screen and (max-width:600px) {
  #luckybag { padding:5rem 0; }
  #luckybag .mv { width:100vw; margin:0 calc(50% - 50vw); }
  #luckybag .mv p { font-size:15px; text-shadow:0 0px 5px rgb(255,255,255,.8); }  
  #luckybag .catch { font-size:2rem; }
  #luckybag .item li p { font-size:1.8rem; }
  #luckybag .btn a { padding:1rem 0; }
  #luckybag .cap .ttl { font-size:1.8rem; }
  #luckybag .cap .ttl span { max-width:70%; }
  #luckybag .cap ul li { font-size:1.6rem; }
}
/*============================== recommend ==============================*/
#recommend { margin:10rem 0; }
#recommend .green { background:#EEFFE8; padding:10rem 0; }
#recommend .pink { background:#FFE2E2; padding:10rem 0; }
#recommend .content-box {  }
#recommend .flbbox { display:flex; justify-content:space-between;  }
#recommend .flbbox li.img { width:60%; }
#recommend .flbbox li.text { width:35%; }
#recommend .flbbox li.text .ttl { font-size:2.6rem; font-weight:bold; border-left:solid 5px #707070; padding-left:1em; }
#recommend .flbbox li.text .tx { margin-top:2rem; font-size:1.8rem; }
#recommend .pink .flbbox li.img { order:2; }
#recommend .itembox { margin-top:5rem; }
#recommend .itembox ul.item { display:flex; justify-content:space-around; }
#recommend .itembox ul.item li { width:18%;  }
#recommend .itembox ul.item li a { display:flex; flex-direction:column; height:100%; }
#recommend .itembox ul.item li img { border-radius:50%; aspect-ratio:1; object-fit:cover; }
#recommend .itembox ul.item li p { font-size:1.6rem; text-align:center; margin-top:1rem; font-weight: bold; color:#707070; }
#recommend .itembox ul.item li p.name {  }
#recommend .itembox ul.item li p.price { margin-top:auto; }

@media screen and (max-width:820px) {
  #recommend .green,#recommend .pink { padding:5rem 0; }
  #recommend .mid-ttl { margin-bottom:2rem; }
  #recommend .flbbox { display:block; }
  #recommend .flbbox li { width:100%!important; }
  #recommend .flbbox li.text { margin-top:2rem; }
}
@media screen and (max-width:600px) {
  #recommend { margin:5rem 0 10rem; }
  #recommend .itembox ul.item li { margin:0 1rem; }
  #recommend .itembox .slick-dots { bottom:-4rem; }
  #recommend .itembox .slick-dots li { width:4rem!important; margin:0 5px!important; }
}

/*============================== category ==============================*/
#category { padding:0 0 10rem; }
#category .colorbnr,#category .material { max-width:80rem; margin:2rem auto 8rem; }
#category ul.shape { display:flex; margin:2rem auto 8rem; flex-wrap:wrap; justify-content:space-between; max-width:80rem; }
#category ul.shape:after { display:none; }
#category ul.shape li { width:calc(50% - 1rem); margin-right:2rem; }
#category ul.shape li:nth-of-type(2n) { margin-right:0; }
#category ul.shape li:nth-of-type(n+3) { margin-top:2rem; }
#category ul.shape li a img { margin-right:auto; }
#category ul.shape li.nolink { pointer-events: none; position:relative; }
#category ul.shape 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.shape 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; width:100%; padding:1rem 0; color:#707070; }
#category .btn { margin-top:5rem; border:solid 1px #707070; border-radius:0; }
#category .btn a { padding:1rem 0; background:none; color:#707070; }
@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:820px){
  #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; }
  #category .budget { max-width:100%; }
}
@media screen and (max-width:600px){
  #category { padding-bottom:5rem; }
  #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; }
}


/*============================== shop ==============================*/
#shop { background:#fff; padding:10rem 0; }
#shop .inner { max-width:124rem; }
#shop h2 { margin-bottom:2rem; }
#shop .shop-tx { margin:2rem 0; font-size:2rem; text-align:center; }
#shop .btn { border:solid 1px #707070; }
#shop .btn a { background:none; color:#707070; }
#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 {  }
  #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 { padding-top:5rem; }
  #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; }
}