@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; }
.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:#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;
}
.fo_goth { font-family: YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; }
.inner { max-width:114rem; width:100%; padding:0 2rem; margin:0 auto; }
h2 { font-size:1.8rem; letter-spacing:0.1em; max-width:60rem; margin:0 auto; line-height:1.8; font-weight:normal; }
h2 span { display:block; font-size:180%; font-weight:normal; padding-bottom:2rem; margin-bottom:2rem; border-bottom:solid 1px #707070; line-height:1; }
h3 { font-size:3.4rem; line-height:1; letter-spacing:0.1em; text-align:center; font-weight:normal!important; margin-bottom:3rem; }
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; }
.anc { margin-top:-9.8rem; padding-top:9.8rem; }

@media screen and (max-width:600px){
  #pageup { bottom:6rem; }
  h2 { line-height:1; }
  h2 span { margin-top:1rem; }
}

/* anchor ----------*/
#anchor { position:fixed; top:50%; left:2rem; transform:translateY(-50%); z-index:100; }
#anchor p { text-align:center; font-size:1.8rem; margin-bottom:1rem; }
#anchor ul {  }
#anchor ul li { width:8rem; height:8rem; background:#707070;  }
#anchor ul li:nth-of-type(n+2) { margin-top:2rem; }
#anchor ul li a { display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; color:#fff; font-size:1.4rem; height:100%; }
#anchor ul li a span {
  width:0;
  height:0;
  border-style:solid;
  border-width: 10px 15px 0 15px;
  border-color: #fff transparent transparent transparent;
  margin-top:10px;
}

@media screen and (max-width:820px){
  #anchor { top:auto; bottom:0; left:0; transform:none; width:100%; }
  #anchor p { display:none; }
  #anchor ul { display:flex; width:100%; }
  #anchor ul li { width:calc(100% / 3); height:auto; padding:1rem 0; border-right:solid 1px #fff; }
  #anchor ul li:nth-of-type(n+2) { margin-top:0; }
  #anchor ul li:last-child { border-right:none; }
}

/* day ----------*/
#day { margin-top:5rem; }
#day h2 p { text-align:center; margin-bottom:3rem; }
#day .day-block { position:relative; border:solid 1px #707070; margin-top:10rem; padding:6rem 2rem; }
#day .day-block .mark {
  border-radius:50%;
  width:20rem;
  height:20rem;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#BBBE60;
  color:#fff;
  text-align:center;
  position:absolute;
  left:-6rem;
  top:-6rem;
  font-size:2.4rem;
}
#day .day-block .text-area { width:80%; margin-left:auto; }
#day .day-block .text-area .big { font-size:3rem; }
#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 .harusaifu { margin-top:10rem; }
#day .harusaifu h3 { text-align:center; font-size:3rem; padding-bottom:2rem; margin-bottom:4rem; border-bottom:solid 1px #707070; letter-spacing:0.3em; }
#day .harusaifu ul { display:flex; justify-content:space-between; }
#day .harusaifu ul li { width:48%; }
#day .harusaifu ul li.tx {  }
#day .harusaifu ul li.tx .ttl { font-size:2.4rem; text-align:center; margin-bottom:1rem; }
#day .harusaifu ul li.tx .text {}
#day .harusaifu ul li.day {  }
#day .harusaifu ul li.day .ttl { background:#707070; color:#fff; font-size:2.4rem; text-align:center; padding:0.5rem 0; }
#day .harusaifu ul li.day .text { padding:1.5rem; border:solid 1px #707070; }

@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 h2 { line-height:1.6; font-size:1.6rem; }
  #day h2 span { font-size:170%; }
  #day .day-block { padding:4rem; }
  #day .day-block .text-area .big { font-size:2rem; }
  #day .day-block .mark { width:10rem; height:10rem; top:-6rem; left:-3rem; font-size:1.6rem; letter-spacing:0.1em; }
  #day .harusaifu ul { display:block; }
  #day .harusaifu ul li { width:100%; }
  #day .harusaifu ul li:last-child { margin-top:3rem; }
}

/* campaign ----------*/
#campaign { background:#9AB38C; margin-top:10rem; padding:5rem 0; color:#fff; }
#campaign .img { text-align:center; margin-top:3rem; position:relative; }
#campaign .tx { max-width:70%; width:100%; margin:2rem auto 0; }
#campaign .tx span { display:block; }
#campaign .tx span.ttl { margin-bottom:2rem; padding-bottom:1rem; font-size:2.4rem; border-bottom:solid 1px #fff; }
#campaign .tx span.cap { margin-top:1rem; }
#campaign .btn { border:none; margin-top:5rem; }
#campaign .btn a { background:#E7D083; color:#FF0000; font-weight: bold; font-size:1.8rem; }

@media screen and (max-width:600px){
  #campaign .tx { max-width:100%; }
  
}

/* newitem ----------*/
#newitem { padding:5rem 0; background:#FFF9F3; }
#newitem .back { transition:all ease-in 1.5s!important; }
#newitem .img-area { position:relative; margin-top:3rem; }
/*
#newitem .img-area:after {
  content:"";
  display:block;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:20%;
  background:linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 100%);
}
*/
#newitem .img-area .text-area { position:absolute; top:3rem; left:3rem; width:100%; color:#555; }
#newitem .img-area .text-area h3 { margin-bottom:2rem; text-align:left; }
#newitem .img-area .text-area .tx-block { width:45%; }
#newitem .img-area .text-area .tx-block .ttl { font-size:2rem; margin-bottom:2rem; }
#newitem .img-area .text-area .tx-block .btn { margin:2rem 0 0; border-color:#555; }
#newitem .img-area .text-area .tx-block .btn a { color:#555; font-size:1.8rem; }
#newitem .img-area .text-area .tx-block {}
#newitem .img-area .link-item {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  width:40%;
  margin-top:5rem;
  z-index:1;
}
#newitem .img-area .link-item li { width:30%; text-align:center; }
#newitem .img-area .link-item li:nth-of-type(n+4) { margin-top:3rem; }
#newitem .img-area .link-item li a { display:block; }
#newitem .img-area .link-item li p { text-align:center; color:#555; margin-top:1rem; font-size:1.4rem; font-weight: bold; }
#newitem .img-area .link-item li:nth-child(1) p { word-break:keep-all; }
#newitem .img-area .link-item li img { border-radius:50%; }

@media screen and (max-width:1050px){
  #newitem .img-area:after { display:none; }
  #newitem .img-area .link-item { position:initial; transform:none; margin:2rem auto 0; }
  #newitem .img-area .link-item li p { color:#707070; }
  #newitem .img-area .link-item li:nth-child(1) p { word-break:normal; }
/*  #newitem .img-area .back img { height:60rem; width:100%; object-fit:cover; object-position:50% 70%; }*/
  #newitem .img-area .text-area { position:initial; color:#707070; margin-top:2rem; }
  #newitem .img-area .text-area .tx-block { width:100%; }
  #newitem .img-area .text-area .tx-block .btn { border-color:#707070; margin:3rem auto 5rem; }
  #newitem .img-area .text-area .tx-block .btn a { color:#707070; }
}
@media screen and (max-width:600px){
/*  #newitem .img-area .back img { height:40rem; }*/
  #newitem .img-area .link-item { flex-wrap:wrap; justify-content:center; margin:0; width:100%; }
  #newitem .img-area .link-item li { width:calc(100% / 3 - 4rem / 3); margin-right:2rem; }
  #newitem .img-area .link-item li:nth-of-type(3n) { margin-right:0; }
  #newitem .img-area .link-item li:nth-of-type(n+4) { margin-top:3rem; }
  #newitem .img-area .link-item li:last-child { margin-right:0; }
}

/* youtube ----------*/
#youtube { margin:5rem 0; }
#youtube .wrap { aspect-ratio:16 / 9; width:100%; }
#youtube .wrap iframe { width:100%; height:100%; }
@media screen and (max-width:600px){
  #youtube { margin:3rem 0; }
}

/* recommend ----------*/
#recommend { padding:5rem 0; color:#fff; background:#9ab38c; }
#recommend .contents { height:0; overflow:hidden;  }
#recommend .contents.act { margin-top:3rem; height:auto; overflow:visible; }
#recommend .contents .owl-carousel { opacity:0; transition:all ease 2s; }
#recommend .contents.act .owl-carousel { opacity:1; }
#recommend .contents .slide {  }
#recommend .contents .tx {  }
#recommend .contents .tx span { display:block; margin-bottom:2rem; font-size:2.2rem; }
#recommend ul.sp-slide { display:flex; flex-wrap:wrap; justify-content:space-between; width:80%; margin:0 auto; }
#recommend ul.sp-slide li { width:30%; }
#recommend ul.sp-slide li p { text-align:center; color:#fff; margin-top:-3rem; }
#recommend .btn { border-color:#fff; margin-top:5rem; }
#recommend .btn a { color:#fff; }

#recommend .top { margin-top:5rem; }
#recommend .top ul { display:flex; justify-content:space-between; align-items:center; }
#recommend .top ul li { width:48%; }
#recommend .top ul li.tx .ttl { font-size:2rem; margin-bottom:3rem; }
#recommend .top ul li.tx .text {  }

#recommend .ranking { margin-top:10rem; }
#recommend .ranking h3 { margin-bottom:3rem; }
#recommend .ranking .block {}
#recommend .ranking .block:nth-of-type(n+2) { margin-top:5rem; }
#recommend .ranking .block .rank-ttl {
  background:#fff;
  display:inline-block;
  padding:1rem 0;
  min-width:35rem;
  color:#707070;
  text-align:center;
  font-size:2rem;
  font-weight: bold;
  margin-bottom:3rem;
}
#recommend .ranking .block .rank-slide { max-width:95%; margin:0 auto; }
#recommend .ranking .block .rank-slide .slick-slide { margin:0 1rem; }
#recommend .ranking .block .rank-slide div a { display:block; color:#fff; position:relative; }
#recommend .ranking .block .rank-slide div a span {
  position:absolute;
  top:0;
  left:0rem;
  width:4rem;
  height:4rem;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:2rem;
  background:#48C258;
  content:"";
}
#recommend .ranking .block .rank-slide div a span.num1 { background:#CFBE4F; }
#recommend .ranking .block .rank-slide div a span.num2 { background:#B1AFA1; }
#recommend .ranking .block .rank-slide div a span.num3 { background:#8B5611; }
#recommend .ranking .block .rank-slide p { text-align:center; margin-top:1rem; font-size:1.4rem; }

#recommend .search { margin:10rem auto; max-width:100rem; width:100%; }
#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; }
#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:1rem 0; text-align:center; border:solid 1px #fff; color:#fff; }

#recommend .slick-prev, #recommend .slick-next {
  border-bottom: solid 2px #fff;
  z-index: 100;
  width:20px;
  height:20px;
  top:28%;
}
#recommend .slick-prev { left: -20px; border-left: solid 2px #fff; transform: rotate(45deg); }
#recommend .slick-next { right: -20px; border-right: solid 2px #fff; transform: rotate(-45deg); }
.slick-prev:before, .slick-next:before { display:none; }
#recommend .owl-dots { display:flex; justify-content:center; margin:1rem 0 4rem; }
#recommend .owl-dots button { background:#fff; width:1.5rem; height:1.5rem; margin:0 0.5rem; }
#recommend .owl-dots button.active { background:#707070; }
#recommend .owl-dots button span { display:block; height:100%; }


@media screen and (max-width:600px){
  #recommend ul.sp-slide { display:block; }
  #recommend ul.sp-slide .slick-dots { position:initial; margin-top:2rem; }
  #recommend ul.sp-slide .slick-dots li { width:1.5rem; height:1.5rem; background:#fff; }
  #recommend ul.sp-slide .slick-dots li.slick-active { background:#707070; }
  #recommend ul.sp-slide .slick-dots li button { width:auto; height:auto; padding:0; }
  #recommend ul.sp-slide .slick-dots li button:before { display:none; }
  
  #recommend .top ul { display:block; }
  #recommend .top ul li { width:100%; }
  #recommend .top ul li:last-child { margin-top:3rem; }
  #recommend .ranking .block .rank-ttl { max-width:100%; display:block; }
  #recommend .slick-prev, #recommend .slick-next { width:15px; height:15px; }
  #recommend .slick-prev { left:-10px; }
  #recommend .slick-next { right:-10px; }
  
  #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; }
}


/* 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 .inner { max-width:124rem; }
#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 .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; }
}