:root{
  /*color*/
  --color-base: #F2EFE6;
  --color-navy: #EAEAEA;
  --color-gray: #F5F5F5;
  --text-color-main: #4E4E4E;
  --text-color-navy: #4B4F54;
  --text-color-gray: #6D5947;
  /*font-family*/
  --font-mincho: "Shippori Mincho", serif;
  --font-libre: "Libre Baskerville", serif;
  --font-base: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "yu-gothic-pr6n", "メイリオ", Meiryo, sans-serif;
  /*font-size*/
  --f-size-10: 2.67vw;
  --f-size-12: 3.2vw;
  --f-size-14: 3.73vw;
  --f-size-16: 4.27vw;
  --f-size-20: min(5.33vw,20px);
  --f-size-22: 5.87vw;
  --f-size-24: 6.4vw;
  --f-size-26: 6.93vw;
  --f-size-28: 7.47vw;
  --f-size-30: 8vw;
  --f-size-32: 8.53vw;
  --f-size-36: 9.6vw;
  --f-size-48: 12.8vw;
  --f-size-52: 13.87vw;
  --f-size-56: 14.93vw;
  --f-size-60: 16vw;
  --f-size-70: 18.67vw;
}
@media screen and (min-width: 768px) {
  :root{
    --f-size-10: 10px;
    --f-size-12: 12px;
    --f-size-14: 14px;
    --f-size-16: 16px;
    --f-size-20: min(1.4vw,20px);
    --f-size-22: min(1.53vw,22px);
    --f-size-24: min(1.67vw,24px);
    --f-size-26: min(1.8vw,26px);
    --f-size-28: min(1.94vw,28px);
    --f-size-30: min(2vw,30px);
    --f-size-32: min(2.22vw,32px);
    --f-size-36: min(2.5vw,36px);
    --f-size-48: min(3.33vw,48px);
    --f-size-52: min(3.61vw,52px);
    --f-size-56: min(3.89vw,56px);
    --f-size-60: min(4.17vw,60px);
    --f-size-70: min(4.86vw,70px);
  }
}

      /*==============================
      # 共通
      ==============================*/
      body {
        width: 100%;
        margin: 0;
        padding: 0;
        font-family: var(--font-base);
        font-size: var(--f-size-14);
        line-height: 1.6em;
      }
      img {
        height: auto;
        max-width: 100%;
        vertical-align: top;
      }
      @media (min-width: 1200px) {
        img {
          image-rendering: -webkit-optimize-contrast;
        }
      }

      @media (min-width: 1200px) {
        .u-sp {
          display: none;
        }
      }
      .u-pc {
        display: none;
      }
      @media (min-width: 1200px) {
        .u-pc {
          display: block;
        }
      }

.mincho {
  font-family: var(--font-mincho);
  font-weight: 400;
  font-style: normal;
}

.libre {
  font-family: var(--font-libre);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

      .bold{
        font-weight: bold;
      }

      .f_main, a.f_main {
        color: #A39085;
      }

      .f_extra-light-glay, a.f_extra-light-glay {
        color: #FAF8F8;
      }

      .f_light-glay, a.f_light-glay {
        color: #EFEFEF;
      }

      .f_dark-middle-glay, a.f_dark-middle-glay {
        color: #7E7E7E;
      }

      .f_middle-glay, a.f_middle-glay {
        color: #5D5D5D;
      }

      .f_dark-glay, a.f_dark-glay {
        color: #464646;
      }

      .f_white, a.f_white {
        color: #fff;
      }

      .f_black, a.f_black {
        color: #000;
      }

      .bg-main {
        background: #A39085;
      }

      .bg-light-main {
        background: #F2EEEA;
      }

      .bg-extra-light-glay {
        background: #FAF8F8;
      }

      .main {
        position: relative;
        font-size: var(--f-size-14);
        color: var(--text-color-main);
        font-family: var(--font-base);
        font-weight: 400;
        line-height: 1.6em;
      }
      @media (min-width: 1200px) {
        .main {
          font-size: 14px;
        }
      }

      .section__button {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        border: 1px solid #000;
        width: 266px;
        height: 50px;
        margin: 20px auto;
        box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.231372549);
        background-color: #fff;
        transition: background-color 0.3s, color 0.3s, color 0.3s, opacity 0.3s;
        font-size: 13px;
      }
      .section__button::after {
        position: absolute;
        content: "";
        right: 7%;
        top: 38%;
        width: 5px;
        height: 10px;
        background-image: url("/ec/img/usr/pg/snscontents/post263/icon-arrow-right.svg");
        background-repeat: no-repeat;
        background-size: cover;
      }
      .section__button:hover {
        background-color: #A39085;
        color: #fff;
        border: 1px solid rgba(163, 126, 102, 0.7529411765);
        opacity: 1;
      }
      .section__button:hover::after {
        background-image: url("/ec/img/usr/pg/snscontents/post263/icon-arrow-right-w.svg");
      }
      .section__button-area {
        display: block;
        text-align: center;
      }
      li{
        list-style: none;
      }
      a{
        text-decoration: none;
      }

/*==============================
      # price
      ==============================*/
      .price_area{
        width: 80vw;
        margin: 0 auto var(--f-size-30);
      }
      @media screen and (min-width: 768px) {
        .price_area{
          display: flex;
          align-items: center;
          width: min(37.29vw,537px);
          justify-content: flex-end;
        }
      }
      .price_area .check_img{
        display: block;
        width: 75%;
        margin: 0 auto var(--f-size-20);
      }
      @media screen and (min-width: 768px) {
        .price_area .check_img{
          width: min(12vw,174px);
          margin-right: 10px;
        }
      }

      .price_area .price_list{
        width: 75%;
        margin: 0 auto;
      }
      @media screen and (min-width: 768px) {
        .price_area .price_list{
          width: 200px;
        }
      }
      .price_area .price_item{
        margin-bottom: 12px;
      }
      .price_area .price_item:last-child{
        margin-bottom: 0;
      }
      .price_area .price_item a{
        display: flex;
        justify-content: space-between;
        color: var(--text-color-main);
        font-size: var(--f-size-12);
        font-weight: 700;
        line-height: 1em;
      }
      @media screen and (min-width: 768px) {
        .price_area .price_item a{
          font-size: 12px;
        }
      }
      .price_area .item_name{
        display: inline-block;
        width: 30vw;
      }
      @media screen and (min-width: 768px) {
        .price_area .item_name{
          width: 90px;
        }
      }
      .price_area .check{
        color: #fff;
        background-color: var(--text-color-main);
        font-weight: 400;
        padding: 1px 8px 2px;
      }
      /*==============================
      # ページ内リンク
      ==============================*/
      .menu-wrap{
        background-color: var(--color-base);
        height: 35vw;
      }
      @media screen and (min-width: 768px) {
        .menu-wrap{
          height: 190px;
        }
      }
      .section__front-memu{
        position: relative;
      }
      @media screen and (min-width: 768px) {
        .section__front-memu.is-fixed {
          position: fixed;
          top: 70px !important;
          left: 0;
          right: 0;
          z-index: 999;
        }
      }      
      .section__front-memu.is-fixed {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 999;
      }

      .section__front-memu .menu_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap:var(--f-size-12) 0;
        background-color: #fff;
        font-size: var(--f-size-14);
        padding: var(--f-size-10) 0;
      }
      @media screen and (min-width: 768px) {
        .section__front-memu .menu_list{
          flex-wrap: nowrap;
          justify-content: space-around;
          width: min(93.3vw,1200px);
          padding: 14px 0;
          margin: 0 auto;
        }
      }
      .section__front-memu .menu_list li{
        border-right: 1px solid #D9D9D9;
      }
      @media screen and (min-width: 768px) {
        .section__front-memu .menu_list li{
          flex: 2;
        }
        .section__front-memu .menu_list .first,
        .section__front-memu .menu_list .last{
          flex: 3;
        }
      }
      .section__front-memu .menu_list .mb-none,
      .section__front-memu .menu_list .bd-none{
        border-right: none;
      }
      @media screen and (min-width: 768px) {
        .section__front-memu .menu_list .mb-none{
          border-right: 1px solid #D9D9D9;
        }
      }
      .section__front-memu .menu_list a{
        text-align: center;
        display: block;
        font-weight: 700;
        padding: 0 var(--f-size-14);
      }
      @media screen and (min-width: 768px) {
        .section__front-memu .menu_list a{
          padding: 0;
        }
      }


/*==============================
      # page-unique
      ==============================*/
      br.br-pc{
        display: none;
      }
      br.br-mb{
        display: inline;
      }
      @media (min-width: 768px){
        br.br-pc{
          display: inline;
        }
        br.br-mb{
        display: none;
        }
      }

      .lp-container{
        position: relative;
        width: min(93.3vw,1200px);
        margin: 0 auto;
      }

      #top{
        background-color: var(--color-base);
        text-align: center;
      }
      @media screen and (min-width: 768px) {
        #top img{
          width: min(100vw,1280px);
        }
      }

      #top h2{
        font-size: var(--f-size-22);
        line-height: 1.6em;
        margin-top: var(--f-size-48);
        text-align: center;
      }
      @media screen and (min-width: 768px) {
        #top h2{
          font-size: var(--f-size-30);
          margin-top: min(6.25vw,90px);
        }
      }
      #top .sub{
        font-size: var(--f-size-16);
        line-height: 1.6em;
        letter-spacing: 0.1em;
        margin-bottom: var(--f-size-48);
      }
      @media screen and (min-width: 768px) {
        #top .sub{
          font-size: var(--f-size-24);
        }
      }
      #top .comment{
        text-align: left;
        line-height: 2.3em;
        letter-spacing: 0.1em;
        width: 85vw;
        margin: var(--f-size-32) auto 0;
      }
      @media screen and (min-width: 768px) {
        #top .comment{
          text-align: center;
        }
      }

      #item_menu{
        background-color: var(--color-base);
        padding-top: var(--f-size-70);
        padding-bottom: var(--f-size-30);
      }
      @media screen and (min-width: 768px) {
        #item_menu{
          padding-top: min(8vw,115px);
          padding-bottom: var(--f-size-48);
        }
      }
      #item_menu .item_all{
        background-color: #fff;
        border-top: 3px solid var(--text-color-main);
        padding: 0 7%;
        margin-bottom: var(--f-size-36);
      }
      @media screen and (min-width: 768px) {
        #item_menu .item_all{
          margin-bottom:  min(6.25vw,90px);
          padding: 0 min(7%,95px);
        }
      }
      #item_menu .comment{
        display: grid;
        align-items: center;
        grid-template-rows:21.33vw 1fr;
        grid-template-columns:21.33vw 1fr;
        gap: var(--f-size-14) var(--f-size-26);
        background-color: #EEEDE9;
        padding: var(--f-size-20);
        margin-bottom: var(--f-size-20);
      }
      @media screen and (min-width: 768px) {
        #item_menu .comment{
          grid-template-rows:1fr 2fr;
          grid-template-columns:114px 1fr;
          gap: 0 var(--f-size-26);
        }
      }
      #item_menu #comment_title{
        font-size: var(--f-size-16);
        font-weight: bold;
      }
      #item_menu #comment_text{
        grid-row: 2 / 3;
        grid-column: 1 / 3;
      }
      @media screen and (min-width: 768px) {
        #item_menu #comment_img{
          grid-row: 1/3;
        }
        #item_menu #comment_title{
          align-self: end;
        }
        #item_menu #comment_text{
          grid-column: 2/3;
          align-self: start;
        }

      }
      #item_menu h2{
        text-align: center;
        margin-bottom: var(--f-size-24);
      }
      #item_menu h2 img{
        width: min(53.3vw,283px);
      }
      @media screen and (min-width: 768px) {
        #item_menu h2{
          margin-bottom: 0;
          margin-right: min(3.89vw,56px);
        }
        #item_menu .item_title{
          display: flex;
          align-items: center;
          margin:min(2.78vw,40px) 0 var(--f-size-48);
        }
      }
      #item_menu h3{
        text-align: center;
        color: var(--text-color-main);
        font-family: var(--font-libre);
        font-weight: 700;
        font-size: var(--f-size-36);
        border-top: 1px solid var(--text-color-main);
        padding-top: var(--f-size-10);
        margin-bottom: var(--f-size-26);
      }
      @media screen and (min-width: 768px) {
        #item_menu h3{
          font-size: min(2.92vw,42px);
          padding-top: var(--f-size-20);
        }
      }
      #item_menu h4{
        text-align: center;
        color: var(--text-color-main);
        font-family: var(--font-libre);
        font-weight: 700;
        font-size: var(--f-size-24);
        border-top: 1px solid var(--text-color-main);
        padding-top: var(--f-size-10);
        margin-bottom: var(--f-size-22);
      }

      #item_menu .item_cate ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: var(--f-size-32);
      }
      #item_menu .item_cate li{
        width: 37.3vw;
        margin-bottom: var(--f-size-14);
      }
      #item_menu #item_tops li{
        width: 25.87vw;
        margin-bottom: var(--f-size-12);
      }
      #item_menu #item_other li{
        text-align: center;
        width: 24vw;
      }
      @media screen and (min-width: 768px) {
        #item_menu .item_list{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
        }
        #item_menu #item_jacket{
          width: 44%;
        }
        #item_menu #item_jacket li{
          width: min(14.38vw,207px);
        }
        #item_menu #item_bottom{
          width: 53%;
        }
        #item_menu #item_bottom li{
          width: min(11.53vw,166px);
        }
        #item_menu #item_tops{
          width: 48.5%;
        }
        #item_menu #item_tops ul{
          justify-content: start;
        }
        #item_menu #item_tops li{
          width: 113px
        }
        #item_menu #others{
          width: 49.5%;
        }
        #item_menu #item_other li{
          width: min(30%,155px);
        }
      }
      #item_menu .item_link{
        display: none;
        position: relative;
        background-color: #4E4E4E;
        color: #fff;
      }
      @media screen and (min-width: 768px) {
        #item_menu .item_link{
          display: block;
          width: 322px;
          font-size: 16px;
          text-align: center;
          padding: 20px 0;
          margin: 0 auto 90px;
        }
        #item_menu .item_link::after{
          display: block;
          position: absolute;
          content: "";
          background: url("/ec/img/usr/pg/cont/post271/btn_allow.svg") no-repeat;
          height: 6px;
          width: 18px;
          top: 28px;
          right: 40px;
        }
      }
      #item_menu .menu_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      #item_menu .menu_list li{
        width: 28.8vw;
        margin-bottom: 5px;
      }
      @media screen and (min-width: 768px) {
        #item_menu .menu_list li{
          width: min(12.78vw,184px);
        }
      }

      .color-logo{
        position: absolute;
        color: #FFF;
        text-align: right;
        font-size: 24vw;
        font-family: var(--font-libre);
        opacity: 0.5;
        top: -3vw;
        right: 3vw;
        line-height: 22px;
      }
      @media screen and (min-width: 768px) {
        .color-logo{
          font-size: min(11.11vw,160px);
          top: -20px;
          line-height: 22px;
        }
      }

      .style{
        padding-bottom: var(--f-size-60);
      }
      @media screen and (min-width: 768px) {
        .style{
          padding-bottom: 0;
        }
      }
      .style .style_title{
        position: relative;
        margin-bottom: var(--f-size-28);
      }
      .style .style_title .lp-container::before{
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: 24vw;
        content: "";
      }
      .style .style_title::after{
        position: absolute;
        width: 100%;
        height: 1px;
        top: 20vw;
        left: 0;
        content: "";
      }
      @media screen and (min-width: 768px) {
        .style .style_title .lp-container::before{
          left: 100px;
        }
        .style .style_title::after{
          top: 125px;
        }
      }

      .style .style_title a{
        position: absolute;
        top: 25vw;
        left: 5vw;
      }
      .style .style_title img{
        width: 10.67vw;
      }
      @media screen and (min-width: 768px) {
        .style .style_title a{
          top: 150px;
          left: 0;
        }
        .style .style_title img{
          width: var(--f-size-60);
        }
      }
      .style .style_title h3{
        text-align: center;
        font-family: var(--font-libre);
        font-size: var(--f-size-36);
        padding-top: 30vw;
        padding-bottom: var(--f-size-36);
      }
      .style .style_title h3 .sub{
        font-size: var(--f-size-56);
      }
      @media screen and (min-width: 768px) {
        .style .style_title h3{
          text-align: left;
          font-size: var(--f-size-60);
          padding-top: 195px;
          padding-left: 175px;
          padding-bottom: 60px;
        }
        .style .style_title h3 .sub{
          font-size: min(5.56vw,80px);
        }
      }

      @media screen and (min-width: 768px) {
        .style .style_contents{
          display: flex;
          justify-content: center;
          margin-bottom: 122px;
        }
        .style .style_detail{
          width: 55%;
        }
      }
      .style .style_code img{
        display: block;
        width: 88.53vw;
        margin: 0 auto var(--f-size-52);
      }
      @media screen and (min-width: 768px) {
        .style .style_code img{
          width: min(49.44vw,712px);
          margin: 0 auto 20px;
        }
      }
      .style .style_text{
        position: relative;
        width: 80vw;
        font-size: var(--f-size-16);
        line-height: 1.6em;
        font-family: var(--font-mincho);
        text-align: center;
        background-color: #fff;
        border-radius: 0 15px 0 15px;
        margin: 0 auto 3vw;
        padding: var(--f-size-16) 0;
      }
      .style .style_text::after{
        display: block;
        position: absolute;
        content: "";
        width: var(--f-size-32);
        height: var(--f-size-36);
        top: -5vw;
        left: -4vw
      }
      @media screen and (min-width: 768px) {
        .style .style_text{
          font-size: var(--f-size-22);
          width: min(37.29vw,537px);
          padding: 32px 30px;
          margin: 0 auto 20px;
        }
        .style .style_text::after{
          width: 40px;
          height: 44px;
          top: -22px;
          left: -20px
        }
      }
      .style .style_comment{
        width: 80vw;
        margin: 0 auto var(--f-size-32);
      }
      @media screen and (min-width: 768px) {
        .style .style_comment{
          width: min(37.29vw,537px);
          margin: 0 auto 32px;
        }
      }

      #navy{
        position: relative;
        background-color: var(--color-navy);
        padding-bottom: 33.33vw;
      }
      @media screen and (min-width: 768px) {
        #navy{
          padding-bottom: 1px;
        }
      }
      #navy .style .style_title .lp-container::before,
      #navy .style .style_title::after{
        background-color: var(--text-color-navy);
      }
      #navy .style .style_text{
        color: var(--text-color-navy);
      }
      #navy .style .style_text::after{
        background: url(/ec/img/usr/pg/cont/post271/style_point_navy.svg) no-repeat center;
        background-size: contain;
      }
      #gray{
        position: relative;
        background-color: var(--color-gray);
        padding-bottom: var(--f-size-70);
      }
      #gray .style .style_title .lp-container::before,
      #gray .style .style_title::after{
        background-color: var(--text-color-gray);
      }
      #gray .style .style_text{
        color: var(--text-color-gray);
      }
      #gray .style .style_text::after{
        background: url(/ec/img/usr/pg/cont/post271/style_point_gray.svg) no-repeat center;
        background-size: contain;
      }
      @media screen and (min-width: 768px) {
        #gray .style .style_contents{
          flex-direction: row-reverse;
        }
      }

      #bottom{
        background-color: var(--color-base);
        padding: var(--f-size-48) 0;
      }
      #bottom a{
        display: block;
        margin-bottom: var(--f-size-24);
      }
      @media screen and (min-width: 768px) {
        #bottom .lp-container{
          width: min(55.56vw,800px);
        }
        #bottom a{
          margin-bottom: var(--f-size-32);
        }
      }
      /*==============================
      # slider
      ==============================*/
      .slide_area{
        width: 80vw;
        height: fit-content;
        margin: 0 auto;
      }
      @media screen and (min-width: 768px) {
        .slide_area{
          width: min(34.72vw,500px);
          margin: 0 30px;
          padding-top: 20px;
        }
      }

      .slide_area .splide__arrow{
        background: none;
        width: var(--f-size-14);
        opacity: 1;
      }
      @media screen and (min-width: 768px) {
        .slide_area .splide__arrow{
          width: 20px;
          height: 11px;
        }
      }
      .slide_area .splide__arrow--prev{
        left: -6vw;
      }
      .slide_area .splide__arrow--next{
        right: -6vw;
      }
      @media screen and (min-width: 768px) {
        .slide_area .splide__arrow--prev{
          left: -30px;
        }
        .slide_area .splide__arrow--next{
          right: -30px;
        }
      }

      .slide_area .splide__pagination{
        bottom: -6vw;
      }
      @media screen and (min-width: 768px) {
        .slide_area .splide__pagination{
          bottom: -30px;
        }
      }
      .slide_area .splide__pagination__page{
        width: 5px;
        height: 5px;
        background-color: var(--text-color-main);
        opacity: 1;
      }
      .slide_area .splide__pagination__page.is-active{
            transform: scale(1.5);
      }
      @media screen and (min-width: 768px) {
        .slide_area .splide__pagination__page{
          width: 7px;
          height: 7px;
        }
      }
      /*==============================
      # bottom-link
      ==============================*/
      .bottom-link {
        margin-top: 100px;
        margin-bottom: 100px;
      }
      @media (min-width: 1200px) {
        .bottom-link {
          margin-top: 100px;
          margin-bottom: 110px;
        }
      }
      .bottom-link__inner {
        margin: 0 auto;
        width: 90%;
        padding: 0 10px;
      }
      @media (min-width: 1200px) {
        .bottom-link__inner {
          width: 100%;
          padding: 0 15px;
        }
      }
      .bottom-link__item {
        max-width: 400px;
        text-align: center;
        margin: 0 auto;
      }
      .bottom-link__item a {
        position: relative;
        display: block;
        width: 100%;
        align-items: center;
        border: 0;
      }
      .bottom-link__item a::after {
        display: inline-block;
        position: absolute;
        content: "";
        background-image: url("/ec/img/usr/pg/snscontents/post263/icon-arrow-right-w.svg");
        background-repeat: no-repeat;
        background-size: 100%;
        right: 7%;
        top: 48%;
        width: 8px;
        height: 12px;
      }
      .bottom-link__img {
        display: flex;
        position: relative;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 252px;
        position: relative;
      }
      @media (min-width: 1200px) {
        .bottom-link__img {
          height: 300px;
        }
      }
      .bottom-link__img img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
          object-fit: cover;
      }
      .bottom-link__text {
        color: #fff;
        z-index: 10;
        font-weight: bold;
      }