@charset "euc-jp";

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #fff;
    background-image: url(https://img.shop-pro.jp/tmpl_img/73/bg.gif);
    color: #464e54;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
  }
  a {
    color: #464e54;
  }

  a:hover {
    color: #333;
    opacity: 0.6;
    text-decoration: none;
  }

  p,a,li,th,td,span,dt,dd {
   font-size: 16px;
  }
  @media screen and (max-width: 767px) {
   p,a,li,th,td,span,dt,dd {
   font-size: 14px;
   }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) {
   p,a,li,th,td,span,dt,dd {
   font-size: 14px;
   }
  }

  ul {
   margin: 0;
  }

  li {
   list-style: none;
  }

  button {
   border: none;  
   }
  }
  button:hover {
   opacity: 0.8;
   color: inherit;
   background-color: inherit;
  }

  /*
   * layout
   */
  @media screen and (max-width: 767px) {
  #wrapper {

    }
  }

  .container, #container {
   max-width: 1200px;
    margin: 0 auto;
  }
  @media screen and (max-width: 1024px) {
    .container {
    width: 95%;
    }
  }

  .section-start {
   margin-top: 120px;
   margin-bottom: 120px;
  }
  @media screen and (max-width: 1024px) {
  .section-start {
   margin-top: 80px;
   margin-bottom: 80px;
   }
  }

  /*
   * contents
   */

  #contents {
    width: 100%;
  }


  #contents .topicpath-nav {
    margin-bottom: 5px;
  }
    #contents .topicpath-nav li {
      padding: 0;
    }
    #contents .topicpath-nav a {
      margin-left: 5px;
    }

  /*
   * temp
   */

  /* font */
  .txt_l { text-align: left; }
  .txt_c { text-align: center; }
  .txt_r { text-align: right; }
  .txt_fwn { font-weight: normal; }
  .txt_fwb { font-weight: bold; }
  .txt_10 { font-size: 10px; }
  .txt_12 { font-size: 12px; }
  .txt_14 { font-size: 14px; }
  .txt_16 { font-size: 16px; }
  .txt_18 { font-size: 18px; }
  .txt_20 { font-size: 20px; }
  .txt_24 { font-size: 24px; }
  .txt_28 { font-size: 28px; }
  .txt_c_333 {color: #333;}

  /* background */
  .bgc_gray {
    background-color: #f1f1f1;
  }

  /* margin */
  .mar_auto { margin: 0 auto; }
  .mar_0 { margin: 0; }
  .mar_t_0 { margin-top: 0; }
  .mar_r_0 { margin-right: 0; }
  .mar_b_0 { margin-bottom: 0; }
  .mar_l_0 { margin-left: 0; }
  .mar_5 { margin: 5px; }
  .mar_t_5 { margin-top: 5px; }
  .mar_r_5 { margin-right: 5px; }
  .mar_b_5 { margin-bottom: 5px; }
  .mar_l_5 { margin-left: 5px; }
  .mar_t_10 { margin-top: 10px; }
  .mar_r_10 { margin-right: 10px; }
  .mar_b_10 { margin-bottom: 10px; }
  .mar_l_10 { margin-left: 10px; }
  .mar_t_20 { margin-top: 20px; }
  .mar_r_20 { margin-right: 20px; }
  .mar_b_20 { margin-bottom: 20px; }
  .mar_l_20 { margin-left: 20px; }
  .mar_t_30 { margin-top: 30px; }
  .mar_r_30 { margin-right: 30px; }
  .mar_b_30 { margin-bottom: 30px; }
  .mar_l_30 { margin-left: 30px; }
  .mar_t_50 { margin-top: 50px; }
  .mar_r_50 { margin-right: 50px; }
  .mar_b_50 { margin-bottom: 50px; }
  .mar_l_50 { margin-left: 50px; }

  /* padding */
  .pad_v_10 { padding: 10px 0; }
  .pad_v_20 { padding: 20px 0; }
  .pad_v_30 { padding: 30px 0; }
  .pad_0 { padding: 0; }
  .pad_t_0 { padding-top: 0; }
  .pad_r_0 { padding-right: 0; }
  .pad_b_0 { padding-bottom: 0; }
  .pad_l_0 { padding-left: 0; }
  .pad_5 { padding: 5px; }
  .pad_t_5 { padding-top: 5px; }
  .pad_r_5 { padding-right: 5px; }
  .pad_b_5 { padding-bottom: 5px; }
  .pad_l_5 { padding-left: 5px; }
  .pad_10 { padding: 10px; }
  .pad_t_10 { padding-top: 10px; }
  .pad_r_10 { padding-right: 10px; }
  .pad_b_10 { padding-bottom: 10px; }
  .pad_l_10 { padding-left: 10px; }
  .pad_20 { padding: 20px; }
  .pad_t_20 { padding-top: 20px; }
  .pad_r_20 { padding-right: 20px; }
  .pad_b_20 { padding-bottom: 20px; }
  .pad_l_20 { padding-left: 20px; }
  .pad_30 { padding: 30px}
  .pad_t_30 { padding-top: 30px; }
  .pad_r_30 { padding-right: 30px; }
  .pad_b_30 { padding-bottom: 30px; }
  .pad_l_30 { padding-left: 30px; }

  /* border */
  .bor_t_1 { border-top: 1px solid #333; }
  .bor_r_1 { border-right: 1px solid #333; }
  .bor_b_1 { border-bottom: 1px solid #333; }
  .bor_l_1 { border-left: 1px solid #333; }

  /* vertical align */
  .va-10 { vertical-align: -10%; }
  .va-20 { vertical-align: -20%; }
  .va-30 { vertical-align: -30%; }
  .va-35 { vertical-align: -35%; }
  .va-40 { vertical-align: -40%; }

  @media (max-width: 980px) {
    /* ~980px */
    #base_gmoWrapp,
    #gmo_CMSPbar {
      overflow: hidden;
      min-width: 100% !important;
      width: 100% !important;
    }
  }
  @media (max-width: 768px) {
    /* ~768px */
    #contents {
      padding-left: 0;
    }
    .container {
      padding: 0 5px;
   }
  }
  @media (max-width: 480px) {
    /* ~480px */

  }

  /*
   * icons
   */
  .icon-user { background-position: -208px 0px; }
  .icon-lg-b.icon-user { background-position: -312px 0px; }
  .icon-adduser { background-position: -240px 0px; }
  .icon-lg-b.icon-adduser { background-position: -360px 0px; }
  .icon-login { background-position: -48px -80px; }
  .icon-lg-b.icon-login { background-position: -72px -120px; }
  .icon-logout { background-position: -32px -80px; }
  .icon-lg-b.icon-logout { background-position: -48px -120px; }
  .icon-home { background-position: -176px -16px; }
  .icon-lg-b.icon-home { background-position: -264px -24px; }
  .icon-mail { background-position: -64px 0px; }
  .icon-lg-b.icon-mail { background-position: -96px 0px; }
  .icon-pencil { background-position: -96px 0px; }
  .icon-lg-b.icon-pencil { background-position: -144px 0px; }
  .icon-help { background-position: -272px -80px; }
  .icon-lg-b.icon-help { background-position: -408px -120px; }
  .icon-cart { background-position: -176px -64px; }
  .icon-lg-b.icon-cart { background-position: -264px -96px; }
  .icon-search { background-position: -208px -16px; }
  .icon-lg-b.icon-search { background-position: -312px -24px; }
  .icon-chevron_up { background-position: -0px -144px; }
  .icon-lg-b.icon-chevron_up { background-position: -0px -216px; }
  .icon-chevron_down { background-position: -352px -128px; }
  .icon-lg-b.icon-chevron_down { background-position: -528px -192px; }
  .icon-twitter { background-position: -96px -176px; }
  .icon-lg-b.icon-twitter { background-position: -144px -264px; }
  .icon-instagram { background-position: -112px -192px; }
  .icon-lg-b.icon-instagram { background-position: -168px -288px; }
  .icon-facebook { background-position: -128px -176px; }
  .icon-lg-b.icon-facebook {background-position: -192px -264px; }
  .icon-youtube { background-position: -128px -160px; }
  .icon-lg-b.icon-youtube { background-position: -191px -240px; }
  .icon-lg-b.icon-chevron_small_down {
    background-position: -72px -216px;
  }
  .icon-lg-b.icon-chevron_small_up {
    background-position: -96px -216px;
  }
  .icon-lg-b.icon-chevron_thin_up {
    background-position: -192px -216px;
  }
  .icon-lg-b.icon-chevron_thin_down {
    background-position: -168px -216px;
  }
  .icon-lg-w.icon-cart {
    background-position: -264px -96px;
  }
  .icon-b.icon-chevron_thin_up {
    background-position: -128px -144px;
  }
  .icon-b.icon-chevron_thin_down {
    background-position: -112px -144px;
  }
  .icon-lg-b.icon-chevron_thin_right {
    background-position: -216px -216px;
  }
  .icon-b.icon-plus {
    background-position: -208px -80px;
  }

  .icon-lg-b.icon-book {
    background-position: -216px -48px;
  }


  .icon-b,
  .icon-w {
    width: 16px;
    height: 16px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
  }
  .icon-lg-b,
  .icon-lg-w {
    width: 24px;
    height: 24px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
  }

  .icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_b.png); }
  .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_w.png); }
  .icon-lg-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_b.png); }
  .icon-lg-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_w.png); }

  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .icon-b,
    .icon-w {
      -webkit-background-size: 368px 320px;
      background-size: 368px 320px;
    }

    .icon-lg-b,
    .icon-lg {
      -webkit-background-size: 552px 480px;
      background-size: 552px 480px;
    }

    .icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_2x_b.png); }
    .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon16_2x_w.png); }
    .icon-lg-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_b.png); }
    .icon-lg-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_w.png); }
  }
  @media (max-width: 768px) {
    .icon-b { background-image: url(https://img.shop-
    .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_w.png); }
  }
  @media only screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 768px) and (min--moz-device-pixel-ratio: 2), only screen and (max-width: 768px) and (-o-min-device-pixel-ratio: 2 / 1), only screen and (max-width: 768px) and (min-device-pixel-ratio: 2), only screen and (max-width: 768px) and (min-resolution: 192dpi), only screen and (max-width: 768px) and (min-resolution: 2dppx) {
    .icon-b { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_b.png); }
    .icon-w { background-image: url(https://img.shop-pro.jp/tmpl_img/73/icon24_2x_w.png); }
  }

  /*　オリジナルCSSここから*/

  /*共通*/
  /*コンテンツ開始*/
  .start {
   margin-top: 120px;
  }
  @media screen and (max-width: 767px) {
  .start {
   margin-top: 80px;
  }
  }

  /*タイトル*/
  .title1 {
   display: flex;
   flex-direction: column;
    margin-bottom: 30px;
  }

  @media screen and (max-width: 767px) {
   .title1 {
     margin: 30px 0;
    }
  }

  .title1 .en {
   font-family: "Great Vibes", system-ui;
    font-weight: normal;
    font-size: 3.5rem;
  }
  @media screen and (max-width: 767px) {
   .title1 .en {
   font-size: 2.6rem;
   }
  }

  .title1 .ja {
    margin-top: -15px;
    font-size: 1.2rem;
  }
  @media screen and (max-width: 767px) {
  .title1 .ja {
    margin-top: -3px;
    font-size: .9rem;
   }
  }

.title-under {
 font-size: 1.5rem;
  font-weight: 500;
 border-bottom: 2px solid #EFDDB9;
 padding-bottom: 12px;
  margin-bottom: 20px;
}


.title-underline {
 font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
 border-bottom: 2px solid #EFDDB9;
 padding-bottom: 12px;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
.title-underline {
 font-size: 1.3rem;
  text-align: left;
　}
 }
@media screen and (min-width: 768px) and (max-width: 1024px) {
.title-underline {
  text-align: left;
　}
 }

.title-sideline {
position: relative;
  font-size: 1.3rem;
  padding-left: 20px;
  margin: 30px 0;
}
@media screen and (max-width: 767px) {
.title-sideline {
  font-size: 1.1rem;
  }
 }

.title-sideline::before {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 5px;
 height: 45px;
  background-color: #EFDDB9;
}

  /*ボタン*/
  .btn-block {
  text-align: center;
   margin-top: 15px;
   margin-bottom: 15px;
  }

  .btn-pink {
   background-color: #E91E63;
    position: relative;
     color: #fdfdfd;
   padding: 15px; 
    display: inline-block;
    text-align: center;
    margin: auto;
    width: 240px;
    border-radius: 40px; 
  }
  @media screen and (max-width: 767px) { 
    .btn-pink { 
    width: 70%;
    }
  }

  .btn-pink::after  {
     content: "";
     position: absolute;
     top:  45%;
     right: 10%;
     transform: translateX(-50%);
    transform: rotate(135deg); 
     width: 5px;
     height: 5px;
     border-left: 3px solid #fdfdfd;
     border-top: 3px solid #fdfdfd;
     transition: all 0.4s ease;
     z-index: 1;
   }
  @media screen and (max-width: 767px) { 
    .btn-pink::after { 
    right: 7%;
    }
  }

  /*--- 背景色 ---*/
  .back-color {
  background-color: #FFF9E7;
   padding: 180px 0 50px 0;
   clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
  }
  @media screen and (max-width: 767px) {
   .back-color {
   padding: 30px 0;
   }
  }
@media screen and (min-width:768px) and (max-width: 1024px) {
  .back-color {
  padding: 80px 0 50px 0;
  }
}

  .back-color2 {
  background-color: #FFF9E7;
   padding: 120px 0 50px 0;
   clip-path: polygon(0 0, 100% calc(0% + 12vw), 100% 100%, 0 100%);
  }
  @media screen and (max-width: 767px) {
   .back-color2 {
   padding: 30px 0;
   }
  }
@media screen and (min-width:768px) and (max-width: 1024px) {
  .back-color2 {
  padding: 50px 0 50px 0;
  }
}

  .back-color3 {
  background: #FFF9E7;
   padding: 40px 0;
  }
  @media screen and (max-width: 767px) {
    .back-color3 {
      padding: 20px 0;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .back-color3 {

    }
  }

  .back-color4 {
  background: #F9F9F9;
   padding: 160px 0 30px 0;
    position: relative;
    top: -100px;
      margin-bottom: -100px;
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .back-color4 {
    padding: 140px 0 10px 0;
    top: -80px;
     margin-bottom: -70px;
    }
  }


  /*--- ヘッダー  ---*/
  #header {
    margin-bottom: 15px;
  }

  @media screen and (max-width: 1024px) {
    #header {
      position: fixed;
      background: #fdfdfd;
      max-width: 100%;
      width: 100%;
      z-index: 10;
      top: 0;
      left: 0;
      border-bottom: 5px solid #EFEEEA;
    }
  }

  .top-price-free {
   text-align: center;
   padding: 8px;
   background-color: #FFF9E7;
  }
@media screen and (max-width: 767px) {
  .top-price-free {
    margin-bottom: 0;
  }
}

  .header-top {
   display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px;
  }
@media screen and (max-width: 767px) {
  .header-top {
    align-items: baseline;
  }
}
  @media screen and (min-width: 768px) and (max-width: 1024px) {
   .header-top {
     margin: 10px auto;
     align-items: baseline;
   }
  }

  .header-logo {
    display: flex;
    flex-direction: column;
   width: 30%;
  }
  @media screen and (max-width: 767px) {
    .header-logo {
     width: 45%;
    }
  }
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .header-logo {
  width: 40%;
  }
}

  .header-logo a {
   width: 60%;
    display: inline-block;
  }
  @media screen and (max-width: 767px) {
  .header-logo a{
    width: 100%;
    margin-right: 8px;
    margin-top: -5px;
   }
  }

  .header-logo a img {
   width: 100%;
  }
  @media screen and (max-width: 767px) {
     .header-logo img {
   width: 100%;
   }
  }

  .shop-name {
   margin-top: -15px;
    white-space: nowrap;
  }
  @media screen and (max-width: 767px) {
   .shop-name {
    font-size: .5rem;
     text-align: center;
   }
  }
@media screen and (min-width: 768px) and (max-width: 1024px) {
   .shop-name {
    margin-left: 20px;
   }
  }

  .header-right {
   width: 75%;
  }

  .header-right-top {
   display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .search {
   width: 45%;
  }

  .search__form {
   position: relative;
    margin-bottom: 0;
    margin-right: 20px;
  }
  @media screen and (max-width: 767px) {
  .search__form {
    align-items: center;
   }
  }

  .search__box {
    width: 100%;
    border: 1px solid #DDDDDD;
    height: 60px;
    border-radius: 30px;
    padding-left: 10px;
  }
  @media screen and (max-width: 767px) {
  .search__box {
   }
  }

  .search__btn {
   position: absolute;
   top: 12px;
   right: 10px;
    background: transparent;
    border: none;
  }

  .search__btn img {
   width: 30px;
   height: 30px;
  }

  .header-menu-icon {
   width: 55%;
   display: flex;
   justify-content: flex-end;
    align-items: center;
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
  .header-menu-icon {
   justify-content: space-between;
   }
  }

  .header-menu-icon li {
    margin-right: 10px;
  }

  .header-menu-icon li a {
    display: flex;
    align-items :center;
    flex-direction: column;
    font-size: .9rem;
  }

  .header-menu-icon li a img {
    width: 35px;
    height: 35px;
    margin-bottom: 5px;
  }

  /*ヘッダーメニュー*/
  .header-menu {
   margin-top: 40px;
  }

  .l-main-navi-list {
   display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: 600;
  }

  .sub-menu {
     display: none; 
      position: absolute; 
      background-color: #fdfdfd;
      top: 25px;
    z-index: 10;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
  }

  .sub-menu li {
     display: inline-block;
    padding: 15px 25px 15px 10px;
    width: 400px;  
  }

  .sub-menu li a {
    font-weight: 400;
    position: relative;
  }

.sub-menu li a::after {
 position: absolute;
 content: "";
 top: 10px;
 right: 0;
  width: 0.4em;
  height: 0.4em;
  border-top: 1px solid #808080;
  border-right: 1px solid #808080;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}



  .has-sub {
    position: relative;
  }

  .has-sub a {
    display: flex;
    align-items: center;
  }

  .icon-chevron_small_down {
      transition: transform 0.5s;
  }

  /*ヘーダー下ライン*/
  .header-line {
   width: 100%;
   border-top: 5px solid #EFEEEA;
  }

  .search__form-sp {
   display: none;
  }
  @media screen and (max-width: 767px) {
  .search__form-sp {
   display: block;
   position: relative;
    width: 65%;
    margin-left: 10px;
    }

    .search__box-sp {
    border: none;
    height: 50px;
    background: #eee;
    border-radius: 40px;
    width: 100%;
   }
    .search__btn-sp {
   position: absolute;
   top: 10px;
   right: 5px;
    background: transparent;
    border: none;
   }
  }


  /*ハンバーガーメニューSP*/
  .hamburger-menu {
    position: relative;
    width: 64px;
    height: 64px;
    cursor: pointer;
      z-index: 2000;
    position: relative;
  }

  .hamburger-menu.open-sp {
    position: relative;
    top: -25px;
  }

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .hamburger-menu.open-sp {
    top: -47px;
  }
}

  .hamburger-menu::after {
      content: 'メニュー';
      font-size: .7rem;
      position: absolute;
      top: 40px;
      right: 8px;
  }

  .hamburger-menu span {
    width: 1.6rem;
    height: 0.2rem;
    background: #333;
    position: absolute;
    top: 9px;
    left: 19px;
    transition: all 0.5s ease-in-out;
  }

  .hamburger-menu span:nth-child(2) {
   top: 19px;
  }
  .hamburger-menu span:nth-child(3) {
   top: 29px;
  }

  .hamburger-menu.open-sp span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-315deg);
  }

  .hamburger-menu.open-sp span:nth-child(2) {
    opacity: 0;
  }

  .hamburger-menu.open-sp span:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(315deg);
    transform: translateY(-10px) rotate(315deg);
  }
  .hamburger-menu.open-sp::after {
      content: '閉じる';
      font-size: .7rem;
      position: absolute;
      top: 40px;
      right: 13px;
      color: #333;
  }

  .menu-sp-right { 
   display: none;
  }

  @media screen and (max-width: 1024px) {
    .menu-sp-right {
     display: flex;
      justify-content: flex-end;
      margin-left: 10px;
    }

    .cart-sp  {
      display: inline-block;
     margin-right: 10px;
     position: relative;
    }

  .cart-sp::after {
      content: 'カート';
      font-size: .7rem;
      position: absolute;
      top: 40px;
      right: -1px;
  }

    .cart-sp img {
  	width: 36px;
      height: 36px;
    }

    .hamburger-menu {
      display: flex;
    }
    .header-right,
    .header-menu {
      display: none;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .menu-sp-right {
    justify-content: flex-end;
    padding-right: 15px; 
    }
  }

/*--- スマホ用メニュー ---*/
.pc-menu {
  display: none;
  flex-direction: column;
  background-color: #FFF9E7;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
  z-index: 1000;
  animation: slideIn 0.5s ease forwards;
  transform: translateX(100%);
}
@media screen and (max-width: 1024px) {
  .pc-menu {
    padding: 0;
  }
}

.pc-menu.open-pc{
 display: block;
 transform: translateX(0);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.pc-menu-header-logo {
  display: flex;
  align-items: center;
  width: 20%;
}
@media screen and (max-width: 767px) {
.pc-menu-header-logo {
   display: none;
  }
}

.pc-menu-header-logo a {
  display: inline-block;
  margin-right: 15px;
  width: 50%;
}

.pc-menu-header-logo a img {
 width: 100%;
}

.sp-menu-top {
 background-color: #fdfdfd;
 padding: 30px 0 10px 0;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.sp-menu-top {
 padding: 30px 0 20px 0;
 }
} 

.search__form-sp {
 display: none;
}
@media screen and (max-width: 767px) {
.search__form-sp {
 display: block;
 position: relative;
  width: 70%;
  margin-right: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .search__form-sp {
    display: block;
    position: relative;
    width: 50%;
    margin-left: 15px;
  }
  }
  
  .search__box-sp {
  border: none;
  height: 50px;
  background: #fdfdfd;
  color: #A3A3A3;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 30px;
 }
  .search__btn-sp {
 position: absolute;
 top: 12px;
 right: -40px;
  background: transparent;
  border: none;
　}
  .search__btn-sp img {
   width: 18%;
  }
}


.pc-menu-header-logo .shop-name {
 width: 50%;
 font-weight: 900;
  font-size: 1.3rem;
  white-space: nowrap;
  color: #333;
}

.pc-menu-list {
 max-width: 1200px;
 margin: 4% auto 0 auto;
}
@media screen and (max-width: 767px) {
  .pc-menu-list {
  max-width: 100%;
  }
}

.pc-menu-list .l-main-navi-list__item {
  padding: 20px 0;
 border-bottom: 1px solid #333;
}
@media screen and (max-width: 767px) {
.pc-menu-list .l-main-navi-list__item {
  padding: 10px 0;
 }
}

.pc-menu-list .l-main-navi-list__item:nth-child(1) {
 border-top: 1px solid #333;
}

.pc-menu-list .l-main-navi-list__item a {
  display: block;
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 767px) {
.pc-menu-list .l-main-navi-list__item a {
  font-size: 1.1rem;
  padding: 0 10px;
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.pc-menu-list .l-main-navi-list__item a {
  font-size: 1.3rem;
  padding: 0 10px;
 }
}

.pc-menu-list .l-main-navi-list__item a::before {
  display: block;
  content: "";
  position: absolute;
  top: 5px;
  right: 19px;
  width: 40px;
  height: 40px;
  margin-top: -8px;
  border-radius: 50%;  
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;  
  background: #FAFAFA;
}
@media screen and (max-width: 767px) {
.pc-menu-list .l-main-navi-list__item a::before {
  top: 7px;
  right: 19px;
  width: 30px;
  height: 30px;
  margin-top: -8px;
 }
}

.pc-menu-list .l-main-navi-list__item a::after {
content: "";
  position: absolute;
  top: 13px;
  right: 36px;
  width: 6px;  
  height: 6px; 
  border-top: 3px solid #CBCBCB;
  border-right: 3px solid #CBCBCB;
  transform: rotate(45deg);  
}
@media screen and (max-width: 767px) {
.pc-menu-list .l-main-navi-list__item a::after {
  top: 10px;
  right: 31px;
 }
}

.pc-menu-list .l-main-navi-list__item.has-sub-pc a::after {
  right: 34px;
 transform: rotate(135deg); 
 transition: all 0.5s ease-in-out;
}
@media screen and (max-width: 767px) {
.pc-menu-list .l-main-navi-list__item.has-sub-pc a::after {
  top: 9px;
  right: 29px;
 }
}

.pc-menu-list .l-main-navi-list__item.has-sub-pc.open a::after {
   transition: all 0.5s ease-in-out;
    transform: rotate(315deg);  
}

.sub-menu-pc {
    display: none;
}

.sub-menu-pc .l-mega-menu-list__item {
 margin: 8px 0;
}


.sub-menu-pc .l-mega-menu-list__item .l-mega-menu-list__link {
 font-size: 1rem;
}

.sub-menu-pc .l-mega-menu-list__item .l-mega-menu-list__link::before,.sub-menu-pc .l-mega-menu-list__item .l-mega-menu-list__link::after {
 content: none;
}

.pc-menu-bottom {
 display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 10px auto;
}

@media screen and (max-width: 1024px) {
  .pc-menu-bottom {
  max-width: 100%;
  }
}

.pc-menu-bottom li {
 margin: 5px 10px; 
}
@media screen and (max-width: 767px) {
  .pc-menu-bottom li {
  width: 43%;
  margin: 5px 6px; 
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .pc-menu-bottom li {
  width: 24%;
  }
}

.pc-menu-bottom li:nth-child(1) {
 margin-left: 0;
}
@media screen and (max-width: 767px) {
.pc-menu-bottom li:nth-child(1) {
 margin-left: 6px;
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .pc-menu-bottom li:nth-child(1) {
  margin-left: 10px;
  }
}

.pc-menu-bottom li a {
 color: #333;
}
@media screen and (max-width: 767px) {
.pc-menu-bottom li a {
 font-size: 12px;
 }
}

  /*メインレイアウト*/
  .main-contents {
   display: flex;
    justify-content: center;
  }
  @media screen and (max-width: 767px) {
  .main-contents {
   flex-direction: column;
   }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .main-contents {
    margin-top: 64px;
    }
  }


  /*最近チェックした商品*/
  .product-list {
   display: flex;
    flex-wrap: wrap;
  }
  @media screen and (max-width: 767px) { 
  .product-list {
   justify-content: space-between;
    margin-bottom: 50px;
   }
  }

  .product-item-h {
   width: calc(90%/4);
  margin: 0 10px 20px 10px;
  }

  @media screen and (max-width: 767px) { 
   .product-item-h {
   width: calc(90%/2);
  margin: 10px 5px;
   }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) { 
   .product-item-h {
   width: calc(90%/3);
   margin: 10px;
   }
  }

  .item-image-h {
   width: 100%;
    object-fit: cover;
    margin: 10px auto;
    text-align: center;
  }
  @media screen and (max-width: 767px) { 
  .item-image-h {
 
   }
  }


  .h-container {
   width: 100%;
  }

  .item-name-h {

  }

  .item-price {
    margin-top: 10px;
   text-align: right;
    font-weight: 400;
  }

  .soldout {
    text-align: right;
   color: red;
  }

  /*トップページお買い物ガイド*/
  .contents-list {
    display: flex;
    justify-content: space-around;
  }

  @media screen and (max-width: 767px) {
    .contents-list {
    flex-direction: column;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .contents-list {
    flex-wrap: wrap;
    }
  }


  @media screen and (max-width: 767px) {
  .contents-list .contents1 {
   width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
    }
    .contents-list .contents1:nth-child(4) {
    margin-bottom: 0;
    }
  }

  .contents-list .contents1 {
    width: 23%;
  }
  @media screen and (max-width: 767px) {
  .contents-list .contents1 {
   width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
    }
    .contents-list .contents1:nth-child(4) {
    margin-bottom: 0;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .contents-list .contents1 {
    width: 46%;
    margin-bottom: 20px;
    }
  }

  .contents1 a {
   background-color: #fdfdfd;
   display: block;
   text-align: center;
   padding: 20px;
  }

  .contents-title {
    font-weight: bold;
   font-size: 1.3rem;
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) { 
    .contents-title { 

    }
  }

  .contents1 a img {
   width: 25%;
   margin: 30px 0;
  }

  .contents-text {
   margin-bottom: 20px;
   text-align: left;
  }

  .contents-link {
   text-align: center;
   margin-top: 10px;
  }

  /*フッター*/
  /*フッターメニュー*/
  #footer {
   background-color: #F4F4F4;
    margin-top: 80px;
    padding-top: 60px;
    padding-bottom: 10px;
  }
  @media screen and (max-width: 1024px) {
    #footer {
     padding-top: 20px;
    }
  }

  .footer-contents {
   display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
  }
  @media screen and (max-width: 1024px) {
    .footer-contents {
    flex-direction: column;
    }
  }

  .footer-left {
   border-right: 1px solid #333;
   width: 35%;
  }
  @media screen and (max-width: 1024px) {
    .footer-left {
    width: 100%;
    text-align: center;
    border-right: none;
    }
  }
@media screen and (min-width: 768px) and (max-width: 1024px) {
     .footer-left {
       margin-bottom: 30px;
    }
  }

  .footer-logo {
   width: 50%
  }
  @media screen and (max-width: 767px) {
    .footer-logo {
   margin: 0 auto;
      width: 70%;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .footer-logo {
      width: 35%;
      margin: 0 auto;
    }
  }


  @media screen and (max-width: 767px) {
    .footer-shop-text p {
     margin-top: -10px;
    font-size: 1rem;
     line-height: 1.8rem;
    }
    .footer-info {
    text-align: left;
    display: inline-block;
    }
  }
@media screen and (min-width: 768px) and (max-width: 1024px) {
     .footer-shop-text p {
       margin-top: -20px;
    }
  }


  /*フッターSNS*/
  .footer-social {
   display: flex;
  }
  @media screen and (max-width: 1024px) { 
  .footer-social {
   justify-content: center;
   margin: 15px 0; 
   }
  }

  .footer-social li {
   margin-left: 5px;
  }
  .footer-social li:nth-of-type(1) {
   margin-left: 0;
  }

  .footer-social li a img {
   width: 40px;
   height: 40px;
  }

  .footer-menu {
    width: 60%;
    display: flex;
      justify-content: space-around
  }
  @media screen and (max-width: 767px) {
    .footer-menu {
      margin-top: 20px;
      width: 100%;
    flex-wrap: wrap;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .footer-menu {
    width: 95%;
     margin: 0 auto;
    }
  }

  .footer-menu .menu-contents {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px 50px;
    column-gap: 30px;
  }
  @media screen and (max-width: 767px) {
   .footer-menu .menu-contents {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 40px 40px 40px 40px;
     column-gap: 15px;
   }
  }

  .footer-menu .menu-contents > li > a {

  }
  @media screen and (min-width: 768px) and (max-width: 1024px) { 
   .footer-menu .menu-contents > li > a {

   }
  }

  /*copyright*/
  .footer-bottom {
   text-align: center;
  }

  .copy-right {
   font-size: .9rem;
  }


  /*〇〇円以上お買い上げの送料無料*/
  .top-guidance {
   text-align: center;
    color: #fdfdfd;
    background: #543832;
    padding: 10px 0;
    margin-top: 30px;
  }

  /*フリーページ共通*/
@media screen and (max-width: 1024px) {
  .free-wrapper {
  }
}

/*フリーページタイトル*/
.subpage-block {
 background-color: #FFF9E7;
  padding: 80px 100px 80px 30px;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .subpage-block {
  padding: 40px 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .subpage-block {
  padding: 50px 50px 50px 20px;
  }
}

.subpage-block h1 {
 font-size: 2.8rem;
}
@media screen and (max-width: 767px) {
 .subpage-block h1 {
 font-size: 1.8rem;
 }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.subpage-block h1 {
 font-size: 2.3rem;
 }
}

/*パンくずリスト*/
.breadcrumb {
  margin-top: 8px;
 margin-bottom: 50px;
}
@media screen and (max-width: 1024px) {
.breadcrumb {
 margin-bottom: 20px;
 }
}

.free-page-container section {
  margin-bottom: 120px; 
}
@media screen and (max-width: 1024px) {
.free-page-container section {
  margin-bottom: 50px; 
}
}

  /*trees Productsについてページ*/
.preface-contents {
 text-align: center;
}

.about-image {
 display: flex;
 margin: 30px auto;
}
@media screen and (max-width: 767px) {
.about-image {
 flex-direction: column;
 }
}

.about-image img {
 width: 50%;
}
@media screen and (max-width: 767px) {
.about-image img {
 width: 100%;
 }
}

.preface-contents p {
 width: 65%;
 margin: 0 auto;
 display: inline-block;
 text-align: left;
 line-height: 2rem;
}
@media screen and (max-width: 1024px) {
.preface-contents p {
 width: 100%;
 }
}

.series-contents {
 margin-bottom: 30px; 
}

.series-flow img {
 margin-right: 15px;
 width: 250px;
 height: 250px;
 object-fit: cover;
}
@media screen and (max-width: 767px) {
.series-flow img {
 height: 150px;
  }
}

.example-contents {
 display: flex;
 justify-content: space-between;
  margin-top: 80px;
}
@media screen and (max-width: 767px) {
  .example-contents {
   flex-direction: column;
    align-items: center;
    margin-top: 60px;
  }
}

.example-contents li {
 width: calc(95% / 3);
  position: relative;
}
@media screen and (max-width: 767px) {
  .example-contents li {
  width: 95%;
  margin-bottom: 40px;
  }
    .example-contents li:nth-child(3) {
  margin-bottom: 20px;
  }
}

.example-contents li span {
 position: absolute;
 top:  -60px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4rem;
  font-weight: 900;
 color: #E91E63;
}
@media screen and (max-width: 767px) {
  .example-contents li span {
  font-size: 3.5rem;
   top: -50px;
  }
}


.example-contents li img {
 width: 100%;
}

.example-contents h3 {
 text-align: center;
  margin: 12px 0;
  font-size: 1.3rem;
}
@media screen and (max-width: 1024px) {
  .example-contents h3 {
  font-size: 1rem;
  }
}

/*店舗紹介ページ*/
.shop-contents {
 margin: 30px auto;
}

.shop-left {
 display: flex;
 justify-content: space-around;
 align-items: center;
 margin-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .shop-left {
  flex-direction: column;
  margin-bottom: 50px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .shop-left {
  margin-bottom: 50px;
  }
}

.shop-left img {
 width: 46%;
}
@media screen and (max-width: 767px) {
  .shop-left img{
  width: 100%;
  }
}

.shop-info {
 width: 46%;
}
@media screen and (max-width: 767px) {
  .shop-info {
  width: 100%;
  }
}

.shop-right {
 display: flex;
 justify-content: space-around;
 align-items: center;
}
@media screen and (max-width: 767px) {
  .shop-right {
  flex-direction: column;
  }
}

.shop-right img {
 width: 46%;
}
@media screen and (max-width: 767px) {
  .shop-right img {
  width: 100%;
  order: 1;
  }
  .shop-right .shop-info {
  order: 2;
  }
}

.shop-info table { 
 border-collapse: separate;
 border-spacing: 20px 10px;
}
@media screen and (max-width: 767px) {
.shop-info table { 
 border-collapse: separate;
 border-spacing: 5px 10px;
 }
}


.shop-info table th, .shop-info table td { 
}

.shop-info table th {
  font-weight: 400;
}

  /*お買物ガイドページ*/
  .guide-link {
   max-width: 1200px;
    margin: 30px auto;
   display: flex;
   justify-content: space-between;
    align-items: center;
    text-align: center;
  }
  @media screen and (max-width: 767px) {
    .guide-link {
     max-width: 100%;
       justify-content: space-between;
      flex-wrap: wrap;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .guide-link {
     max-width: 90%;
       justify-content: center;
      flex-wrap: wrap;
    }
  }

.guide-link img {
 width: 40px;
 height: 40px;
 margin-right: 20px;
}
@media screen and (max-width: 767px) {
.guide-link img {
 width: 30px;
 height: 30px;
 margin-right: 10px;
  }
}

  .guide-link .btn-transparent2 {
   background:transparent;
   color: #333;
   padding: 10px 0; 
    position: relative;
    display: inline-block;
    width: 22%;
    border: 1px solid #EFDDB9;
    border-radius: 10px; 
  }
  @media screen and (max-width: 767px) {
  .guide-link .btn-transparent2 {
    width: 75%;
    margin: 0 auto 15px auto;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024px) {
   .guide-link .btn-transparent2 {
    width: 40%;
    margin-right: 40px;
    margin-bottom: 20px;
  }
}

  .guide-link .btn-transparent2:after{
  content: "";
    position: absolute;
    top: 23px;
    right: 15px;
    width: 6px;  
    height: 6px; 
    border-top: 1px solid #EFDDB9;
    border-right: 1px solid #EFDDB9;
    transform: rotate(135deg);  
  }
  @media screen and (max-width: 767px) {
    .guide-link .btn-transparent2:after{ 
    top: 19px;
    }
  }

  .guide-block {
    max-width: 1200px;
    margin: 120px auto;
  }
  @media screen and (max-width: 767px) {
    .guide-block {
    margin: 50px auto;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) { 
    .guide-block {
    margin: 80px auto;
    }
  }

  .guide-contents dl dt {
   margin: 30px 0;
    line-height: inherit;
  }

  .guide-contents dl dd, .guide-contents p {
    margin-left: 40px;
  }
  @media screen and (max-width: 767px) {
  .guide-contents dl dd, .guide-contents p {
    margin-left: 10px;
   }
  }

/*注文の方法*/
.guide-step-order {
 display: flex;
 justify-content: space-beteen;
  align-items: center;
 margin-bottom: 30px;
}
@media screen and (max-width: 767px) { 
 .guide-step-order {
   flex-direction: column;
 }
}

.guide-step-order .guide-step-test{
  width: 52%;
}
@media screen and (max-width: 767px) { 
.guide-step-order .guide-step-test{
  width: 100%;
 }
}

.guide-step-order img {
 width: 40%;
}
@media screen and (max-width: 767px) { 
.guide-step-order img {
  width: 100%;
 }
}

  #payment img {
   width: 30%;
    display: inline-block;
    margin: 20px 0;
  }
@media screen and (max-width: 767px) {
 #payment img {
   width: 90%;
  }
}

  #payment table {
   border: 1px solid #707070;
   width: 80%;
    margin: 30px auto;
  }

  #payment table th {
   font-weight: normal;
    padding: 8px 12px;
    border-bottom: 1px solid #707070;
    border-right: 1px solid #707070;
  }

  #payment table td {
   font-weight: normal;
    padding: 8px 12px;
     border-bottom: 1px solid #707070;
    border-right: 1px solid #707070;
  }

  #payment ul li {
   list-style: disc;
  }

  .pay-btn {
  text-align: center;
    margin: 30px auto;
  }
  .pay-btn a {
   border: 1px solid #333;
   padding: 20px 40px; 
    position: relative;
    display: inline-block;
    margin: auto;
    width: 50%;
    font-size: 1.5rem;
  }
  @media screen and (max-width: 767px) {
  .pay-btn a {
   padding: 10px 20px; 
    width: 80%;
    font-size: 1.1rem;
   }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
  .pay-btn a {
   padding: 20px; 
    width: 80%;
    font-size: 1.3rem;
  }
  }

  .pay-btn a::after {
  content: "";
    position: absolute;
    top: 32px;
    right: 30px;
    width: 10px;  
    height: 10px; 
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: rotate(45deg);  
  }
  @media screen and (max-width: 767px) {
  .pay-btn a::after {
    top: 18px;
    right: 15px;
   }
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
  .pay-btn a::after {
    top: 30px;
   }
  }

  .ar-red {
    color: #FF0000;
  }

  .bold {
   font-size: 1.4rem;
  }

  .bold-red {
   font-size: 1.3rem;
    font-weight: bold;
    color: #FF0000;
  }

  .include-img {
   display: inline-block;
    width: 80%;
    margin: 20px;
  }

  /*料金表ページ*/
  .postage {
   margin-bottom: 50px;
  }
  @media screen and (max-width: 1024px) {
    .postage {
     overflow-x: scroll;
    }
  }

  .postage table {
    width: 100%;
  }
  @media screen and (max-width: 1024px) {
    .postage table {
     white-space: nowrap;
    }
   }

  .postage table th, .postage table td {
    border: 1px solid #AFAFAF;
    padding: 10px 5px;
    text-align: center;
  }


  .postage .red {
    color: #E62323;
  }