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

/* common ----------*/
body { 
  color:#414141;
}
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:136rem; width:100%; padding:0 2rem; margin:0 auto; }
h2.line { border-left:5px solid #707070; padding-left:1em; font-size:3rem; letter-spacing:5px; margin-bottom:2rem; line-height:1.6; }
h2.line span { font-size:1.8rem; display:block; }
h2.nml { line-height:1; margin-bottom:4rem; font-size:3rem; letter-spacing:5px; }
h2.tc { font-size:3.6rem; text-align:center; }
h2.tc span { display:block; font-size:1.8rem; }
h3 { font-size:2.4rem; }
.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; }


/* cont01 ----------*/
#cont01 { margin-top:4rem;  }
#cont01 ul { display:flex; justify-content:space-between; }
#cont01 ul li {}
#cont01 ul li.img { width:50%; }
#cont01 ul li.tx { width:45%; }
#cont01 ul li.tx p { font-size:1.8rem; margin-top:2rem; line-height:2; }
#cont01 ul li.tx .btn a { font-weight: bold; }
#cont01 .day { background:#14AC59; margin-top:5rem; }
#cont01 .day p { padding:1rem 0; font-size:3.4rem; text-align:center; color:#fff; }
#cont01 .cyui { margin-top:5rem; }
#cont01 .cyui .tt { font-size:2rem; }
#cont01 .cyui .tx { margin-top:1rem; }

/* recommend ----------*/
#recommend { margin-top:10rem; }
#recommend .block { margin-top:10rem; }
#recommend .block ul { display:flex; justify-content:space-between; }
#recommend .block ul li.img { width:60.607%; font-size:1.8rem; }
#recommend .block ul li.img img { margin-bottom:2rem; }
#recommend .block ul li.item { width:35%; }
#recommend .block ul li .item-box { display:flex; flex-wrap:wrap; justify-content:space-between; }
#recommend .block ul li .item-box:nth-of-type(n+2) { margin-top:5rem; }
#recommend .block ul li .item-box img { width:25%; }
#recommend .block ul li .item-box .tx { width:70%; display:flex; flex-direction:column; font-size:1.8rem; }
#recommend .block ul li .item-box .tx .price-btn { display:flex; justify-content:space-between; margin-top:1rem; align-items:center; }
#recommend .block ul li .item-box .tx .price-btn .btn { width:45%; max-width:100%; margin:0; text-align:center;}
#recommend .block ul li .item-box .tx .price-btn .btn a { font-size:1.6rem; text-align:center; display:inline-block; font-weight: bold; }
#recommend .block ul li .last-btn { max-width:30rem; width:100%; margin:10rem auto 0; }
#recommend .block ul li .last-btn a { display:block; text-align:center; border:solid 1px #707070; color:#333; padding:1rem; font-weight: bold; }
#recommend .block .blog { margin-top:5rem; padding:4rem 7rem; border:solid 1px #707070; }
#recommend .block .blog .tt { font-size:2.6rem; margin-bottom:2rem; }
#recommend .block .blog ul { display:flex; }
#recommend .block .blog ul li { width:calc(100% / 3 - 8rem / 3); margin-right:4rem; }
#recommend .block .blog ul li:last-child { margin-right:0; }
#recommend .block .blog ul li a { color:#414141; }
#recommend .block .blog ul li p { text-align:center; margin-top:1rem; font-size:2.4rem; }
#recommend .etc-btn { max-width:30rem; width:100%; text-align:center; margin:10rem auto 0; }
#recommend .etc-btn a { display:block; font-size:1.8rem; color:#333; border:solid 1px #707070; padding:1rem 2rem; }

/* search ----------*/
#search .inner { max-width:124rem; }
/* 形で探す */
#search .wrap .shape { max-width:80%; width:100%; margin:10rem auto 0; }
#search .wrap .shape ul { display:flex; flex-wrap:wrap; margin-top:2rem; }
#search .wrap .shape ul li { width:calc(50% - 1rem); margin-right:1rem; }
#search .wrap .shape ul li:nth-of-type(2n) { margin-right:0; }
#search .wrap .shape ul li:nth-of-type(n+3) { margin-top:1rem; }
/* 素材で探す */
#search .wrap .material { max-width:80%; width:100%; margin:10rem auto 0; text-align:center; }
#search .wrap .material a { display:inline-block; margin-top:2rem; }
#search .wrap .material a img { transition:all 0.3s ease-out; }
#search .wrap .material a:hover img { opacity:.6; }
/* 予算で探す */
#search .wrap .budget { max-width:80%; width:100%; margin:10rem auto 0; }
#search .wrap .budget ul { display:flex; margin-top:2rem; }
#search .wrap .budget ul li { width:calc(25% - 2.5rem); margin-right:2rem; border:solid 1px #707070; text-align:center; }
#search .wrap .budget ul li:last-child { margin-right:0; }
#search .wrap .budget ul li a { display:block; padding:1rem 0; color:#707070; }
#search .wrap .btn { margin-top:5rem; }

/* 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.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:#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; 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 { margin-left:10rem; border-color:#333; }
#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; }


@media screen and (max-width:990px){
  #recommend .block .blog { padding:3rem; }
  #recommend .block .blog .tt { text-align:center; }
  #recommend .block .blog ul { justify-content:space-between; }
  #recommend .block .blog ul li { width:31%; margin-right:0; }
}
@media screen and (max-width:900px){
  /* cont01 */
  #cont01 ul { display:block; }
  #cont01 ul li.img,#cont01 ul li.tx { width:100%; }
  #cont01 ul li.img { text-align:center; }
  #cont01 ul li.tx { margin-top:2rem; }
  #cont01 ul li.tx p { font-size:1.6rem; margin-top:1rem; }
  
  /* recommend */
  #recommend .block:first-child { margin-top:5rem; }
  #recommend .block ul { display:block; }
  #recommend .block ul li.img,#recommend .block ul li.item { width:100%; }
  #recommend .block ul li.item { margin-top:3rem; }
  #recommend .block ul li .item-box { align-items:center; }
  #recommend .block ul li .item-box img { width:20%; }
  #recommend .block ul li .item-box .tx { width:75%; }
}

@media screen and (max-width:768px){
  #search { margin-top:15rem; } 
  #search .wrap .tree { top:-6rem; }
  #search .wrap ul.anchor { padding:0 2rem; }
  #search .wrap .cont ul.link { max-width:100%; }
  #search .wrap .cont ul.main { display:block; }
  #search .wrap .cont ul.main li { width:100%; }
  #search .wrap .cont ul.main li .ttl { margin-top:2rem; }
  #search .wrap .budget { max-width:100%; }
  #search .wrap .budget ul { flex-wrap:wrap; }
  #search .wrap .budget ul li { width:calc(50% - 2rem); }
  #search .wrap .budget ul li:nth-of-type(2n){ margin-right:0; }
  #search .wrap .budget ul li:nth-of-type(n+3){ margin-top:2rem; }
  #search .wrap .budget ul li a { display:flex; justify-content:center; align-items:center; height:100%; }
  
  /* 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){
  h2 { font-size:2rem!important; }
  h2.nml { line-height:1.6; margin-bottom:2rem; }
  h2.tc { font-size:2.4rem!important; }
  h3 { font-size:2rem; }
  
  #mv { margin-bottom:3rem; }
  
  #cont01 { margin-top:0; }
  #cont01 h2.line { border-left:none; padding:0 0 1rem 0; border-bottom:solid 2px #707070; text-align:center; }
  #cont01 .day p { font-size:2rem; }
  #cont01 .cyui .tt { font-size:1.6rem; }
  #cont01 .cyui .tx { font-size:1.4rem; }
  
  #recommend .block .blog { padding:2rem; } 
  #recommend .block .blog .tt { font-size:2rem; }
  #recommend .block .blog ul li p { font-size:1.4rem; }
  #recommend .block ul li .last-btn,#recommend .etc-btn { margin:5rem auto 0; }
  
  #search { margin-top:10rem; }
  #search .wrap .shape,#search .wrap .material,#search .wrap .budget { max-width:100%; width:100%; margin-top:5rem; }
  #search .wrap .budget ul { display:block; }
  #search .wrap .budget ul li { width:100%; }
  #search .wrap .shape ul li { width:100%; margin-right:0; }
  #search .wrap .shape ul li:nth-of-type(n+2) { margin-top:1rem; }
  #search .wrap .budget ul li:nth-of-type(n+2) { margin-top:1rem; }
  #search .wrap .budget { margin-bottom:5rem; }
  #search .wrap .budget ul li a { padding:1rem 0; }
  #search .wrap .cont ul.main li .tx { font-size:1.4rem; }
  #search .snow { top:98%; }
  #search .wrap .btn { margin:5rem auto 0; width:calc(100% - 4rem); }
  
  #shop { margin-top:10rem; }
}