@charset "uff-8";

/* color */
.back_bk{ background:#000; }
.back_wt{ background:#FDFDFD; }
.back_pi{ background:#eb738f; }
.back_lpi{ background:#f7baa5; }
.back_bl{ background:#0e6eb8; }
.back_org{ background:#ea591d; }
.back_cme{ background:#c99e2a; }
.back_ylw{ background:#FFF100; }
.back_brn{ background:#7f4e20; }
.back_brn2{ background:#6A3906; }
.back_nev{ background:#161b61; }
.back_blk { background:#221814; }
.back_gry { background:#c9c9ca; }
.back_grn { background:#006834; }
.back_d-grn { background:#056823; }
.back_wine { background:#a11251; }
.back_lgrn { background:#9dbb87; }
.back_pp { background:#920681; }
.back_red { background:#ea000e; }
.back_red2 { background:#E60012; }
.back_pp { background:#E984FC; }
.back_lgrn { background:#13DB5C; }

/* 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:#630; }
#pageup i { right:auto; left:50%; transform:translateX(-50%); }

/* 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:#414141;
  
}
main {
  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 { 
  text-align:center;
  font-size:3.6rem;
  line-height:1;
  letter-spacing:2rem;
  font-weight:normal!important;
}
h2 img { display:block; margin:0 auto 5rem; }
h2 span { display:block; font-size:50%; font-weight:normal; letter-spacing:10px; margin-top:2rem; }
h3 { text-align:center; font-size:3.6rem; line-height:1; letter-spacing:5px; margin-bottom:2rem; font-weight:normal; }
h3 span { font-size:50%; display:block; line-height:2; letter-spacing:5px; }
h3.line { text-align:left; border-left:solid 8px #707070; font-weight: bold; padding:0.5rem 0 0.5rem 1em; }
h3.line span { font-weight:normal; line-height:1; margin-top:1rem; }
h4 { font-size:2.4rem; font-weight:normal!important; padding-left:2em; }
h4.tc { text-align:center; padding:0; }
.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; }
div:after, ul:after, cf:after { display:none; }
p { margin:0; }
div.fs-l-page { margin-top:0; }
.pc { display:block!important; }
.sp-only { display:none!important; }

.icon { text-align:center; margin:5rem 0; }

ul.itemlist { width:80%; margin:0 auto; display:flex; flex-wrap:wrap; }
ul.itemlist li { width:calc(100% / 3 - 2rem); margin-right:3rem; height:100%; }
ul.itemlist li:nth-of-type(n+4) { margin-top:3rem; }
ul.itemlist li:nth-of-type(3n) { margin-right:0; }
ul.itemlist li a { display: flex; flex-direction:column; }
ul.itemlist li .text { display: flex; flex-direction:column; }
ul.itemlist li .text p { color:#414141; font-size:1.8rem; }
ul.itemlist li .text .name { margin:1rem 0; line-height:1.6; }
ul.itemlist li .text .price { margin-top:auto; }
ul.itemlist li .text .price.line { margin-top:1.6em; }
.sp-text { display:none; }

@media screen and (max-width:600px){
  .pc { display:none!important; }
  .sp-only { display:block!important; }
}

/* mv ----------*/
#mv {  }
#mv .mv { position:relative; }

/* catch ----------*/
#catch { margin:5rem 0; }
#catch .read { font-size:3.6rem; text-align:center; font-weight: bold; }
#catch .read  span { display:block; margin-top:3rem; font-size:50%; }
#catch .day { border:solid 2px #707070; padding:4rem 2rem; text-align:center; border-radius:15px; margin:5rem 0; }
#catch .day p { text-align:center; }
#catch .anchor {  }
#catch .anchor p { text-align:center; font-size:3rem; font-weight: bold; letter-spacing:1em; }
#catch .anchor ul { display:flex; margin:2rem auto 0; width:100%; }
#catch .anchor ul li { flex-grow:1; border-right:solid 2px #707070; }
#catch .anchor ul li:last-child { border-right:none; }
#catch .anchor ul li a { display:block; text-align:center; padding:1rem 0; line-height:1; }
#catch .anchor ul li a span:after {
  content:"";
  display:block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 15px 0 15px;
  border-color: #fff transparent transparent transparent;
  margin:1rem auto 0;
}
#catch .delivery { background:#DAA583; padding:5rem 0; color:#fff; border-radius:30px; margin-top:5rem; }
#catch .delivery .text { max-width:50%; margin:0 auto; }
#catch .delivery .text p.ttl { font-size:3.6rem; border:solid 1px #fff; padding:0 1em; text-align:center; margin-bottom:3rem; }
#catch .delivery .text p.main { font-size:3rem; margin-bottom:2rem; }
#catch .delivery .text p.main span { font-weight:bold; border-bottom:solid 1px #fff; display:inline-block; }
#catch .delivery .text ul { margin-bottom:2rem; }
#catch .delivery .text ul li { text-indent:-1em; padding-left:1em; }
#catch .delivery .text ul li:last-child { margin-top:1rem; }
#catch .delivery .text ul li span { font-size:2rem; font-weight: bold; }

/* new ----------*/
#new { margin-top:10rem; }
#new .main { margin-top:5rem; }
#new .itemlist { display:flex; justify-content:center; }
#new .itemlist .item { max-width:30rem; width:100%; }
#new .itemlist .item a { color:#414141; }
#new .itemlist .item p { text-align:center; font-size:1.8rem; color:#414141; }
#new .itemlist .item p.name { margin:1rem 0; }
#new .item { margin-top:5rem; }
#new .btn { max-width:36rem; margin:5rem auto 0; }
#new .btn a {}
#new .btn a p { text-align:center; }

/*
#new ul.glasses-slide { justify-content:center; }
#new ul.glasses-slide li { width:calc(100% / 4); }
#new ul.glasses-slide li .text { height:30%; }
#new ul.glasses-slide li .color { display:flex; margin:0 0 1rem; }
#new ul.glasses-slide li .color li { width:3rem; height:3rem; display:block; margin-right:1rem; border-radius:50%; }
#new ul.glasses-slide li .color li:last-child { margin-right:0; }
.slick-prev, .slick-next { width:2rem; height:3.5rem; }
.slick-next:before,.slick-prev:before { 
  content:"";
  display:block;
  width:2rem;
  height:3.5rem;
  background-image:url(../_img/2023_mothersday/arrow.svg);
  background-size:contain;
}
.slick-next:before { transform:rotate(180deg); }
*/


/* recommend */
#recommend { background:#FFF8F8; padding:10rem 0; }
#recommend .main { margin:5rem 0 3rem; }
#recommend .submain { width:80%; margin:3rem auto 0; }
#recommend .submain a { color:#414141; }
#recommend .subttl { background:#ccc; color:#fff; font-size:3.6rem; padding:1rem 0; max-width:27rem; margin:0 auto; text-align:center; border-radius:9px; letter-spacing:0.5em; }
#recommend .itemtx { margin-top:1rem;  }
#recommend .itemtx p { text-align:center; }
#recommend .recblock { margin-top:8rem; }
#recommend ul { justify-content:center; margin-top:5rem; }

/* search ----------*/
#search { margin-top:10rem; position:relative; }
#search .wrap {  }
#search .wrap .main { margin-top:2rem; }
#search .wrap .cont { margin:5rem 0; }
#search .wrap .cont .block.fst { margin-top:0; }
#search .wrap .cont .block { margin-top:10rem; }
#search .wrap .cont div.main .text-area { margin:2rem 4rem 0; }
#search .wrap .cont div.main .text-area p { text-align:center; }
#search .wrap .cont div.main .text-area .ttl { font-size:2.8rem; margin-bottom:1rem; }
#search .wrap .cont div.main .text-area .text { font-size:1.8rem; line-height:2; }
#search .wrap .cont ul.main { display:flex; justify-content:space-between; align-items:center; }
#search .wrap .cont ul.main li { width:48%; }
#search .wrap .cont ul.main li .ttl { font-size:2.8rem; }
#search .wrap .cont ul.main li .read { font-size:2rem; margin:2rem 0; }
#search .wrap .cont ul.link { display:flex; justify-content:space-between; max-width:80%; width:100%; margin:3rem auto 0; }
#search .wrap .cont ul.link li { width:24%; }
#search .wrap .cont ul.link li a { display:flex; flex-direction:column; height:100%; color:#fff; padding:1rem; }
#search .wrap .cont ul.link li a:hover { border:solid 1px #fff; }
#search .wrap .cont ul.link li img { border-radius:50%; }
#search .wrap .cont ul.link li p { text-align:center; }
#search .wrap .cont ul.link li .ttl { margin:1rem 0; font-size:1.4rem; }
#search .wrap .cont ul.link li .ttl span { display:block; margin-top:0.5rem; }
#search .wrap .cont ul.link li .ttl span span { display:inline-block; background:#fff; color:#707070; padding:0px 1rem; }
#search .wrap .cont ul.link li .price { font-size:1.4rem; margin-top:auto; }
/* 形で探す */
#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 .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; }

/* gift ----------*/
#gift { margin-top:10rem; }
#gift ul { margin-top:5rem; }
#gift ul li { position:relative; }
#gift ul li .text { position:absolute; top:5rem; max-width:45%; color:#fff; }
#gift ul li:before {
  position:absolute;
  content:"";
  display:block;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background:#000;
  opacity:.3;
}
#gift ul li:nth-of-type(odd) .text { right:5%; }
#gift ul li:nth-of-type(even) .text { left:5%; }
#gift ul li .text .ttl { font-size:3.6rem; border-left:solid 5px #fff; padding-left:2rem; line-height:1.2; margin-bottom:2rem; }
#gift ul li .text .tx { font-size:1.8rem; }
#gift ul li .text .btn { max-width:25rem; margin:3rem 0 1rem; border-color:#fff; }
#gift ul li .text .btn a { font-size:2rem; color:#fff; }

/* shop ----------*/
#shop { margin-top:10rem; margin-bottom:10rem; }
#shop h2 { margin-bottom:3rem; }
#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:5rem 0 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:center; 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 #707070; }
#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:#707070; 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 #707070; }
#shop ul.link li .shop-list p { line-height:2; }
#shop ul.link li .shop-list p a { font-size:1.8rem; color:#707070; font-weight: bold; }
#shop ul.link li.btn { margin-left:10rem; border-color:#707070; }
#shop ul.link li.btn a { color:#000; padding:0.5rem 4rem; }
#shop .btn { background:none; border-radius:0; border:solid 1px #707070; }
#shop .btn2 { max-width:50rem; margin:5rem auto 0; border-color:#707070; }
#shop .btn2 a { color:#707070; }


@media screen and (max-width:1400px){
  #gift ul li .text { max-width:50%; }
  #gift ul li .text .ttl { font-size:3rem; }
  #gift ul li .text .tx,#gift ul li .text .btn a { font-size:1.6rem; }
  #gift ul li .text .cap { font-size:1.2rem; }
}
@media screen and (max-width:1200px){
  #gift ul li .text { max-width:80%; width:100%; left:50%!important; right:auto; top:50%; transform:translate(-50%,-50%); }
  #gift .min-none { display:none; }
}
@media screen and (max-width:1040px){
  /* common */
  ul.item-slide { max-width:90%; margin:0 auto; }
  ul.item-slide li .text p { font-size:1.4rem; }
  
  #catch .delivery .text { max-width:80%; }
  
  #gift ul { width:100vw; margin:5rem calc(50% - 50vw) 0; }
}
@media screen and (max-width:900px){
  #new ul.glasses-slide li .color li { width:2rem; height:2rem; }
  #recommend ul.item-slide li .text { height:35%; }
  
  #gift ul li .text { max-width:90%; }
  #gift ul li .text .ttl { font-size:2rem; }
  #gift ul li .text .tx,#gift ul li .text .btn a { font-size:1.6rem; }
  #gift ul li .text .btn { margin-top:2rem; }
}
@media screen and (max-width:820px){
  
  h3 { font-size:3rem; }
  ul.item-slide li .text p { font-size:1.4rem; }
  
  #catch .read { font-size:3rem; }
  
  #recommend .submain,#recommend ul.itemlist { width:100%; }
  
  #search { margin-top:10rem; } 
  #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 .snow { top:92%; }
  #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%; }
  
  #gift ul li .text .ttl { font-size:2rem; }
  #gift ul li .text .tx,#gift ul li .text .btn a { font-size:1.4rem; }
  #gift ul li .text .cap { font-size:1rem; }
  
  /* shop --------------------*/
  #shop { margin-top:10rem; }
  #shop .mark { max-width:70%; margin:3rem auto 0; }
  #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){
  #pageup { right:2rem; }
  h2 { font-size:3rem; }
  h2,h3 { line-height:1.6; }
  h4 { font-size:2rem; }
  
  .icon img ,h2 img { max-width:10rem; }
  
  .btn { max-width:100%; }
  .sp-text { display:block; margin-top:2rem; }
  .sp-text .ttl { border-left:solid 3px #707070; font-size:2.4rem; padding-left:1em; font-weight: bold; }
  .sp-text .ttl span { display:block; font-size:1.8rem; }
  .sp-text .sub { font-size:2rem; margin:2rem 0; }
  .sp-text .tx {}
  ul.itemlist li .text .price.line { margin-top:auto; }
  
  #mv .mv .mv-text { width:90%; top:40%; }
  #mv .mv .more { bottom:20%; }
  
  #new .main img,#recommend .main img { aspect-ratio:1; object-fit:cover; }
  #new .main img {  }
  #recommend .main img { object-position:50%; }
  
  #catch .read { font-size:3rem; font-weight: bold; text-align:center; }
  #catch .read span { font-size:2rem; font-weight:normal; text-align:left; }
  #catch .anchor p { max-width:40%; margin:0 auto 3rem; }
  #catch .anchor ul { flex-wrap:wrap; justify-content:space-between;}
  #catch .anchor ul li { position:relative; flex-grow:initial; width:49%; border-right:none; }
  #catch .anchor ul li:after {
    position:absolute;
    content:"";
    display:block;
    top:0;
    left:101.5%;
    height:100%;
    width:1px;
    background:#707070;
  }
  #catch .anchor ul li:nth-of-type(2n):after { display:none; }
  #catch .anchor ul li:nth-child(n+3) { border-top:solid 1px #707070; }
  #catch .anchor ul li a { padding:2rem 0; }
  #catch .anchor ul li a img { max-height:4rem; }
  #catch .delivery .text { max-width:90%; }
  #catch .delivery .text p.ttl { font-size:2.8rem; }
  #catch .delivery .text p.main { font-size:2.4rem; }
  
  ul.item-slide li .text p { font-size:2rem; text-align:center;}
  #new ul.glasses-slide li .color { justify-content:center; }
  
  #recommend .subttl { font-size:2.4rem; padding:0; line-height:2; max-width:20rem; }
  #recommend ul.itemlist { justify-content:space-between; margin-top:3rem; }
  #recommend ul.itemlist li { width:48%; margin-right:0; }
  #recommend ul.itemlist li:nth-of-type(n+3) { margin-top:2rem; }
  
    
  #gift .min-none { display:block; }
  #gift ul li .text { position:initial; transform:none; color:#707070; margin:2rem 2rem 0; }
  #gift ul li .text .ttl { font-size:2.4rem; font-weight: bold; border-color:#707070; }
  #gift ul li .text .btn { border-color:#707070; margin:2rem auto 1rem; }
  #gift ul li .text .btn a { font-size:2rem; color:#707070; }
  #gift ul li:before { display:none; }
  #gift ul li:nth-of-type(n+2) { margin-top:3rem; }
  #gift ul li .text .cap { max-width:25rem; margin:0 auto; }
  
  #search .wrap .cont { margin:0 0 5rem; }
  #search .wrap .cont .block { margin:5rem 0 0; }
  #search .wrap .cont div.main .text-area { margin:2rem 2rem 0; }
  #search .wrap .cont div.main .text-area .ttl { font-size:2.4rem; }
  #search .wrap .cont div.main .text-area .text { font-size:1.6rem; }
  #search .wrap .cont ul.main li .ttl { font-size:2.4rem; }
  #search .wrap .cont ul.main li .read { font-size:1.8rem; margin:1rem 0; }
  #search .wrap .cont ul.link { flex-wrap:wrap; }
  #search .wrap .cont ul.link li { width:calc(50% - 1rem); margin-right:2rem; }
  #search .wrap .cont ul.link li:nth-of-type(2n) { margin-right:0; }
  #search .wrap .cont ul.link li:nth-of-type(n+3) { margin-top:2rem; }
  #search .wrap ul.anchor li { width:50%; }
  #search .wrap ul.anchor li p { font-size:1.8rem; padding:1rem; }
  #search .wrap ul.anchor li.active:after { top:110%; }
  #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; }
  
  #shop { margin-top:10rem; }
  #shop .mark { max-width:70%; }
  #shop .shop-tx { font-size:1.8rem; }
  
  #footer { margin-top:0!important; }
  
}




@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);
  }
}