@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%); }
@media screen and (max-width:820px){
  #pageup { right:2rem; }
}

/* 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:#3D3D3D;
  background:#FFFCF2;
}
main {
  font-family: "fot-tsukuardgothic-std", sans-serif;
  /*font-family:YuGothic,"游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;*/
  line-height:1.6;
}
h2 { text-align:center; font-size:2.4rem; line-height:1; }
h2 p { text-align:center; margin-bottom:1rem; }
h2 img { height:3.5rem; }
h2 .lead {
  display:block;
  text-align:center;
  position:relative;
  padding-top:2rem;
  font-size:1.6rem;
  font-weight:normal;
  line-height:1.8;
}
h2 .lead:before {
  content:"";
  display:block;
  max-width:68rem;
  width:100%;
  height:1px;
  background:#3d3d3d;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
}
.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; }
.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; }
.sp-text { display:none; }
.anc { margin-top:-9rem; padding-top:9rem; }

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

/* mv ----------*/
#mv {  }
#mv .mv { position:relative; }
#mv .mv p {
  position:absolute;
  bottom:10%;
  left:5%;
  font-size:2.6vw;
  color:#fff;
}
#mv .obi {
  background:url(../_img/2024_mothersday/obi.jpg);
  padding:5rem 0;
}
#mv .obi p { text-align:center; }


/* day ----------*/
#day { margin-top: 5rem; }
#day .wrap { border:solid 3px #F2CECE; padding:4rem 10rem; max-width:85rem; width:100%; margin:0 auto; }
#day .wrap .ttl { max-width:43rem; width:100%; margin:0 auto; text-align:center; border:solid 1px #707070; font-size:2.4rem; line-height:2; }
#day .wrap ul { margin-top:3rem; }
#day .wrap ul li { font-size:2rem; margin-bottom:4rem; }
#day .wrap ul li p { font-weight: bold; }
#day .wrap ul li b { text-decoration:underline; }
#day .wrap ul li:nth-child(2) { margin-bottom:2rem; }
#day .wrap ul li p.time { font-size:1.6rem; text-indent:-1em; padding-left:1em; }
#day .wrap ul li p.time span { font-size:2rem; }
#day .wrap ul li:last-child { font-size:1.6rem; margin-bottom:0; }

/* anchor ----------*/
#anchor { margin:10rem 0 5rem; }
#anchor ul { max-width:85rem; width:100%; margin:0 auto; display:flex; }
#anchor ul li { width:calc(25% - 3rem / 4); margin-right:1rem; }
#anchor ul li:last-child { margin-right:0; }
#anchor ul li a { display:block; text-align:center; font-size:2.4rem; font-weight:bold; color:#fff; background:#C9C9C9; line-height:1.2; padding:1rem 0; }

/* special ----------*/
#special {  }
#special h2 { margin-bottom:4rem; }
#special .wrap { background:#fff; box-shadow:10px 10px 6px rgb(0,0,0,.16); padding:5rem 0; }
#special ul { width:90%; margin:0 auto; }
#special ul li { position:relative; }
#special ul li p {
  position:absolute;
  left:3rem;
  bottom:3rem;
  width:40%;
  color:#fff;
  padding:2rem;
  background:rgb(0,0,0,.2);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
#special ul li p span { display:block; margin-bottom:3rem; font-size:2.4rem; font-weight: bold; }
#special ul li p span small { font-size:75%; opacity:1; font-weight: bold; }
#special ul li .cap { font-size:1.4rem; display:inline-block; font-weight:normal; margin:1rem 0 0; }
#special ul:nth-of-type(even) li p { left:auto; right:3rem; }
#special .slick-dots { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); }
#special .slick-dots li { width:1.5rem; height:1.5rem; }
#special .slick-dots button { padding:0; background:#fff; border-radius:50%; width:100%; height:100%; }
#special .slick-dots button:before { display:none; }
#special .slick-dots li.slick-active button { background:#3d3d3d; }



/* recommend ----------*/
#recommend { margin-top:10rem; }
#recommend h2 { margin-bottom:4rem; }
#recommend ul.block { display:flex; justify-content:space-between; margin-bottom:4rem; }
#recommend ul.block li { border-radius:30px; }
#recommend ul.block li.text {
  width:55%;
  background:url(../_img/2024_mothersday/bg_recommend_box.jpg);
  background-size:cover;
  padding:4rem 9rem;
}
#recommend ul.block li.text .ttl { display:flex; justify-content:space-between; align-items:center; }
#recommend ul.block li.text .ttl img { width:20%; }
#recommend ul.block li.text .ttl p { width:75%; font-size:2.4rem; color:#fff; font-weight: bold; }
#recommend ul.block li.text .ttl p span { display:block; font-size:66.66%; }
#recommend ul.block li.text .sub { background:#fff; color:#E6A4A4; font-weight:bold; padding:1rem 2rem; border-radius:15px; margin:1rem 0; font-size:2rem; }
#recommend ul.block li.text .tx { background:#fff; color:#E6A4A4; padding:1rem 2rem; border-radius:15px; }
#recommend ul.block li.text .tx span { display:block; font-size:125%; font-weight:bold; padding-bottom:1rem; margin-bottom:1rem; border-bottom:solid 1px #e6a4a4; }
#recommend ul.block li.img { width:42%; position:relative; border-radius:30px; overflow:hidden; }
#recommend ul.block li.img a { color:#777272; }
#recommend ul.block li.img img { height:100%; object-fit:cover; transition:all ease-out .4s; }
#recommend ul.block li.img div.tx {
  position:absolute;
  bottom:2rem;
  left:0;
  width:100%;
  padding:0 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#recommend ul.block li.img div.tx .price { width:50%; font-size:1.8rem; font-weight: bold; letter-spacing:0.1em; }
#recommend ul.block li.img div.tx .price .color { display:flex; align-items:center; }
#recommend ul.block li.img div.tx .price .color li { width:2rem; height:2rem; margin-right:5px; border-radius:50%; }
#recommend ul.block li.img div.tx .price .color li:first-child { width:auto; border-radius:none; }
#recommend ul.block li.img div.tx .price .color li:last-child { margin-right:0; }
#recommend ul.block li.img div.tx .btn { width:45%; background:#fff; color:#8E8E8E; text-align:center; border-radius:5px; padding:1rem 0; font-weight: bold; border:none; letter-spacing:0.1em; }
#recommend ul.block li.img a:hover img { transform:scale(1.1); }





/* column ----------*/
#column { margin-top:15rem; }
#column h2 p { margin-bottom:1rem; }
#column .wrap { background:#fff; box-shadow:10px 10px 6px rgb(0,0,0,.16); padding:3rem 10rem; }
#column ul { display:flex; flex-direction:row-reverse; justify-content:space-between; margin-top:3rem; }
#column ul li { width:46%; }
#column ul li:first-child {  }
#column ul li:first-child img { height:100%; object-fit:cover; }
#column ul li:last-child {  }
#column ul li:last-child p { font-size:1.8rem; }
#column ul li:last-child p span { display:block; font-size:130%; margin-bottom:1rem; letter-spacing:0.1em; }
#column ul li:last-child .btn { border-radius:10px; max-width:60%; }
#column ul li:last-child .btn a {  }



/* search ----------*/
#search { margin-top:15rem; }
#search .wrap {  }
#search h2 { margin-bottom:5rem; }
#search h2 p { margin-bottom:1rem; }
#search .block { color:#e9c3c3; margin-bottom:5rem; }
#search .block:last-child { margin-bottom:0; }
#search .block .ttl { font-size:2.4rem; text-align:center; padding-bottom:2rem; margin-bottom:2rem; border-bottom:solid 3px #E9C3C3; line-height:1; }
#search .block ul { display:flex; justify-content:space-between; flex-wrap:wrap; width:90%; margin:0 auto; }
#search .block ul li { width:23%; }
#search .block ul li a { display:block; text-align:center; padding:1rem 0; border:solid 1px #E9C3C3; color:#e9c3c3; border-radius:30px; font-weight: bold; }
#search .block ul li:nth-of-type(n+5) { margin-top:2rem; }
#search .block ul.color { width:75%; justify-content:normal; }
#search .block ul.color li { width:8rem; height:8rem; border-radius:50%; margin:1rem; font-weight: bold; color:#fff; }
#search .block ul.color li a { border:none; font-size:1.2rem; display:flex;justify-content:center; align-items:center; height:100%; color:#fff; }
#search .btn { border:none; margin-top:7rem; }
#search .btn a { background:#e9c3c3; color:#fff; font-weight:bold; padding:2rem 0; }


/* service ----------*/
#service { margin-top:15rem; }
#service h2 { margin-bottom:4rem; }
#service h2 p { margin-bottom:1rem; }
#service .wrap { background:#fff; box-shadow:10px 10px 6px rgb(0,0,0,.16); padding:5rem 0; }
#service .block { width:90%; margin:0 auto 5rem; }
#service .block:last-child { margin-bottom:0; }
#service .ttl { border-left:solid 5px #e9c3c3; padding-left:1em; font-weight: bold; font-size:2.4rem; }
#service .cont { position:relative; margin-top:2rem; }
#service .cont .text {
  position:absolute;
  right:3rem;
  bottom:3rem;
  width:40%;
  color:#fff;
  padding:2rem;
  background:rgb(0,0,0,.2);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
#service .cont .text .tx-ttl { font-size:2rem; text-align:center; }
#service .cont .text .tx { margin:10% 0; }
#service .cont .text .btn { border:none; max-width:70%; }
#service .cont .text .btn a { border:solid 1px #fff; color:#fff; border-radius:10px;  }
#service .block:nth-of-type(even) .text { right:auto; left:3rem; }

/* shop ----------*/
#shop { margin-top:10rem; margin-bottom:10rem; }
#shop h2 { margin-bottom:3rem; }
#shop h2 p { margin-bottom:1rem; }
#shop .shop-img { width:90%; margin:0 auto; }
#shop .shop-tx { margin:2rem 0; font-size:2.4rem; letter-spacing:0.2em; 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:space-between; margin:5rem auto 0; width:80%; }
#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:65%; 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:1100px){
  #mv .obi p { width:60%; margin:0 auto; }
  
  #special ul li p { font-size:1.6vw; bottom:5%; left:3%; }
  #special ul:nth-of-type(even) li p { right:3%; }
  #special ul li p span { font-size:2vw; margin-bottom:5%; }
  #special ul li .cap { font-size:1.3vw; margin-top:3%; }
  
  #recommend ul.block li.text { padding:4rem; }
  #recommend ul.block li.img div.tx .price p { font-size:1.5vw; }
  #recommend ul.block li.img div.tx .price .color { font-size:1.5vw; }
  #recommend ul.block li.img div.tx .price .color li { width:calc(65% / 4 - 6%); margin-right:2%; aspect-ratio:1 / 1; height:auto; }
  #recommend ul.block li.img div.tx .price .color li:last-child { margin-right:0; }
  #recommend ul.block li.img div.tx .price .color li:first-child { width:45%; aspect-ratio:initial; }
  #recommend ul.block li.img div.tx .btn { margin:0 0 0 auto; font-size:1.6vw; }
  
  #column ul li:last-child p { font-size:1.6vw; }
  
  #service .cont .text .tx-ttl { font-size:2vw; }
  #service .cont .text .tx { font-size:1.6vw; }
  #service .cont .text .btn a { font-size:1.6vw; }
  
  #shop ul.link {}
  #shop ul.link li:first-child { width:40%; }
  #shop ul.link li:last-child { max-width:50%; margin-left:5%; }
}
@media screen and (max-width:1000px){
}
@media screen and (max-width:900px){
  #mv .mv p { font-size:2.4rem; }
  
  #recommend ul.block li.text .sub { font-size:2vw; }
  #recommend ul.block li.text .tx { font-size:1.6vw; }
  
  #column .wrap { padding:3rem 6rem; }
  
  #shop ul.link { max-width:80%; }
  #shop ul.brand { width:100%; }
}
@media screen and (max-width:768px){
  
  #search .block ul.color { width:100%; }
  
  /* 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:first-child { width:100%; }
  #shop ul.link li:last-child { max-width:35rem; margin-left:0; }
  #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; padding:0 2rem; }
  h2 img { height:3.2rem; }
  
  #mv .mv p { font-size:3rem; bottom:3rem; }
  #mv .obi { padding:3rem 0; background-size:contain; }
  #mv .obi p { width:80%; }
  
  #day .wrap { padding:4rem; }
  
  #anchor ul { flex-wrap:wrap; }
  #anchor ul li { width:calc(50% - 1rem); margin-right:1rem; }
  #anchor ul li:nth-of-type(n+3) { margin-top:1rem; }
  #anchor ul li a { font-size:1.8rem; }
  
  #special ul {  }
  #special ul li { margin-bottom:3rem; }
  #special ul li p { position:initial; width:100%; font-size:1.6rem; background:none; color:#3d3d3d; }
  #special ul li p span { font-size:2rem; }
  #special ul li .cap { font-size:1.2rem; }
  #special .slick-dots { bottom:auto; top:52%; }
  #special .slick-dots li { margin-bottom:0; }
  
  #recommend ul.block { flex-direction:column; }
  #recommend ul.block li.text,#recommend ul.block li.img { width:100%; }
  #recommend ul.block li.text { border-radius:30px 30px 0 0; }
  #recommend ul.block li.text .sub { font-size:1.8rem; }
  #recommend ul.block li.text .tx { font-size:1.6rem; }
  #recommend ul.block li.text .tx span { font-size:110%; }
  #recommend ul.block li.img { border-radius:0 0 30px 30px; }
  #recommend ul.block li.img div.tx .price p { font-size:1.6rem; }
  #recommend ul.block li.img div.tx .price .color li:first-child { font-size:1.6rem; }
  #recommend ul.block li.img div.tx .btn { font-size:1.8rem; }
  #recommend ul.block li.img img { height:auto; }
  
  #column .wrap { padding:3rem 2rem; }
  #column ul { flex-direction:column; }
  #column ul li { width:100%; }
  #column ul li:first-child img { height:auto; }
  #column ul li:last-child { margin-top:2rem; }
  #column ul li:last-child p { font-size:1.6rem; }
  
  #search .block ul li a { font-size:1.2rem; }
  #search .block:first-child ul li { width:49%; }
  #search .block:first-child ul li:nth-of-type(n+3) { margin-top:2rem; }
  #search .block:nth-child(2) ul li { width:32%; }
  #search .block:nth-child(2) ul li:nth-of-type(n+4) { margin-top:2rem; }  
  #search .block ul.color { width:80%; }
  #search .block ul.color li { width:calc(100% / 4 - 10px); height:auto; aspect-ratio:1 / 1; margin:5px; }
  #search .block ul.color li a { font-size:2.4vw; }
  
  #service .cont .text { width:100%; position:initial; background:none; }
  #service .cont .text p { color:#3d3d3d; }
  #service .cont .text .tx-ttl { font-size:1.8rem; }
  #service .cont .text .tx { margin:2rem; font-size:1.6rem; }
  #service .cont .text .btn a { font-size:1.6rem; color:#3d3d3d; border-color:#3d3d3d; }
  
  #shop { margin-top:10rem; }
  #shop .mark { max-width:70%; }
  #shop .shop-tx { font-size:3.2vw; }
  
  #footer { margin-top:0!important; }
  
}
@media screen and (max-width:400px){
  #special .slick-dots { top:50%; }
}
@media screen and (max-width:375px){
  #day .wrap ul li { font-size:1.8rem; }
  #day .wrap ul li:last-child { font-size:1.4rem; }
  
  #special .slick-dots { top:47%; }
}



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