@charset "UTF-8";
/*--------------------
共通設定
----------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a {
  text-decoration: none;
  color: #171717; }
  a:hover {
    transition: .4s; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }

ul, ol {
  list-style: none; }

.pc {
  display: block; }
  @media screen and (max-width: 1800px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 1800px) {
    .sp {
      display: block; } }

body {
  overflow-x: hidden; }

.wrapper {
  margin: 0 auto !important; }

main {
  max-width: 100%; }

.mainBox {
  margin: 0 auto !important; }

footer {
  position: relative;
  z-index: 9999; }

/*--------------------------------------------*/
#limited.lp_wrapper {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  letter-spacing: 0;
  color: #171717;
  font-size: 14px;
  text-align: center;
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
  /* lp_mainBox */ }
  #limited.lp_wrapper section {
    margin: 0 auto;
    padding-top: 60px;
    max-width: 620px; }
  #limited.lp_wrapper .lp_mainBox {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; }
    #limited.lp_wrapper .lp_mainBox .sidearea {
      position: fixed;
      top: 0;
      height: 100%;
      background: #e6e6e6; }
      #limited.lp_wrapper .lp_mainBox .sidearea.boxleft {
        left: 0;
        width: calc((100% - 620px) - 20%); }
        @media screen and (max-width: 1200px) {
          #limited.lp_wrapper .lp_mainBox .sidearea.boxleft {
            display: none; } }
        #limited.lp_wrapper .lp_mainBox .sidearea.boxleft img {
          object-fit: contain;
          position: absolute;
          top: calc(50% + 30px);
          left: 50%;
          transform: translate(-50%, -50%);
          height: calc(100% - 60px);
          width: auto; }
      #limited.lp_wrapper .lp_mainBox .sidearea.boxright {
        right: 0;
        height: 100%;
        width: 20%; }
        @media screen and (max-width: 1200px) {
          #limited.lp_wrapper .lp_mainBox .sidearea.boxright {
            width: calc(100% - 500px); } }
        @media screen and (max-width: 800px) {
          #limited.lp_wrapper .lp_mainBox .sidearea.boxright {
            display: none; } }
        #limited.lp_wrapper .lp_mainBox .sidearea.boxright .pc_box {
          position: absolute;
          bottom: 5%;
          left: 50%;
          transform: translateX(-50%);
          width: 80%;
          max-width: 300px;
          z-index: 1001; }
          #limited.lp_wrapper .lp_mainBox .sidearea.boxright .pc_box div a {
            display: block;
            font-size: min(1.2em, 3.5vw);
            padding: 1em 1.5em;
            border: 1px solid #171717;
            line-height: 1.0;
            margin-bottom: 1em;
            border-radius: 50vh;
            position: relative; }
            #limited.lp_wrapper .lp_mainBox .sidearea.boxright .pc_box div a::after {
              position: absolute;
              content: "";
              top: calc(50% - 4px);
              right: 1.5em;
              width: 8px;
              height: 8px;
              border: solid #171717;
              border-width: 0 1px 1px 0;
              transform: rotate(45deg) translateY(-50%); }
            #limited.lp_wrapper .lp_mainBox .sidearea.boxright .pc_box div a:hover {
              background: #171717;
              color: #ffffff; }
              #limited.lp_wrapper .lp_mainBox .sidearea.boxright .pc_box div a:hover::after {
                border-color: #ffffff; }
    #limited.lp_wrapper .lp_mainBox #box-content {
      position: relative;
      max-width: 620px;
      overflow: auto;
      -ms-overflow-style: none;
      z-index: 1000;
      margin: 0 20% 0 auto;
      /* drawer */ }
      @media screen and (max-width: 1200px) {
        #limited.lp_wrapper .lp_mainBox #box-content {
          margin: 0 auto 0 0;
          width: 500px;
          border: 0.5px solid #737373; } }
      @media screen and (max-width: 800px) {
        #limited.lp_wrapper .lp_mainBox #box-content {
          width: 100%;
          margin: 0 auto;
          border: none;
          max-width: none; } }
      #limited.lp_wrapper .lp_mainBox #box-content #drawer {
        padding: 0;
        position: relative;
        overflow: hidden;
        background: #ffffff;
        top: 0; }
        @media screen and (max-width: 1800px) {
          #limited.lp_wrapper .lp_mainBox #box-content #drawer {
            right: 0; } }
        @media screen and (max-width: 1200px) {
          #limited.lp_wrapper .lp_mainBox #box-content #drawer {
            width: 100%;
            margin: 0 auto; } }
        @media screen and (max-width: 800px) {
          #limited.lp_wrapper .lp_mainBox #box-content #drawer {
            max-width: none; } }

.mv {
  display: none; }
  @media screen and (max-width: 1200px) {
    .mv {
      display: block; } }

.txt {
  margin: 10% auto; }
  @media screen and (max-width: 800px) {
    .txt {
      margin: 25% auto; } }
  .txt h1 {
    font-size: min(1.4em, 3.8vw);
    font-weight: 600;
    margin: 10% auto;
    line-height: 1.8; }
  .txt p {
    font-size: min(1.1em, 3.2vw);
    line-height: 1.8; }

.anchorBox {
  width: 60%;
  max-width: 310px;
  margin: 10% auto;
  display: none; }
  @media screen and (max-width: 800px) {
    .anchorBox {
      display: block; } }
  .anchorBox a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: min(1em, 3.2vw);
    font-weight: 600;
    padding: .7em 3.0em;
    border: 1px solid #171717;
    line-height: 1.0;
    margin-bottom: 10%;
    border-radius: 50vh;
    position: relative; }
    .anchorBox a span {
      font-size: 90%;
      font-weight: 400; }
    .anchorBox a::after {
      position: absolute;
      content: "";
      top: calc(50% - 4px);
      right: 1.5em;
      width: 8px;
      height: 8px;
      border: solid #171717;
      border-width: 0 1px 1px 0;
      transform: rotate(45deg) translateY(-50%); }
    .anchorBox a:hover {
      background: #171717;
      color: #ffffff; }
      .anchorBox a:hover::after {
        border-color: #ffffff; }

.title h2 {
  width: 80%;
  margin: 10% auto;
  position: relative;
  font-size: min(1em, 3.2vw);
  font-weight: 600; }
  .title h2 span {
    font-size: 100%;
    background: #ffffff;
    padding: 0 3.0em;
    position: relative;
    z-index: +1; }
  .title h2::before {
    content: "";
    width: 100%;
    height: .02em;
    background: #171717;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); }

.pickup {
  width: 80%;
  margin: 0 auto; }
  .pickup .swiper-button-next, .pickup .swiper-button-prev {
    top: 22%; }
  .pickup .swiper-button-prev::after, .pickup .swiper-button-next::after {
    bottom: 0;
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    width: 18px;
    height: 18px;
    border-bottom: 1px solid #171717;
    border-left: 1px solid #171717; }
  .pickup .swiper-button-prev::after {
    transform: rotate(45deg); }
  .pickup .swiper-button-next::after {
    transform: rotate(-135deg); }
  .pickup .swiper-slide img {
    width: 50%; }
  .pickup .swiper-slide .detail {
    width: 80%;
    margin: 0 auto; }
    @media screen and (max-width: 800px) {
      .pickup .swiper-slide .detail {
        width: 90%; } }
    .pickup .swiper-slide .detail p {
      font-size: min(1em, 3.2vw);
      line-height: 2.0;
      margin-bottom: 3.0em; }
      @media screen and (max-width: 800px) {
        .pickup .swiper-slide .detail p {
          text-align: left; }
          .pickup .swiper-slide .detail p br {
            display: none; } }
      .pickup .swiper-slide .detail p.size {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.0; }
        .pickup .swiper-slide .detail p.size span {
          font-size: 85%;
          padding: 0 1.0em;
          border-left: 0.5px solid #171717;
          display: block; }
          .pickup .swiper-slide .detail p.size span:last-child {
            border-right: 0.5px solid #171717; }
      .pickup .swiper-slide .detail p.link {
        width: fit-content;
        margin: 0 auto 5%; }
        .pickup .swiper-slide .detail p.link a {
          padding: .5em 4.0em;
          font-size: min(1em, 3.2vw);
          line-height: 1.0;
          border: 1px solid #171717;
          border-radius: 50vh; }
          .pickup .swiper-slide .detail p.link a span {
            font-size: 100%; }
          .pickup .swiper-slide .detail p.link a:hover {
            background: #171717;
            color: #ffffff; }

#rank .rank ul {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 90%;
  margin: 10% auto;
  counter-reset: rank; }
  #rank .rank ul li {
    width: calc(100%/2 - 1%);
    margin-bottom: 2.0em;
    position: relative; }
    #rank .rank ul li::before {
      counter-increment: rank;
      content: counter(rank);
      position: absolute;
      font-size: min(1em, 3.2vw);
      left: 0.5em;
      top: 0.5em;
      line-height: 1.0;
      font-weight: 600; }
    #rank .rank ul li dl {
      width: 95%;
      margin: 2% auto;
      font-size: min(0.9em, 2.9vw); }
      #rank .rank ul li dl dd, #rank .rank ul li dl dt {
        font-size: 100%;
        line-height: 1.5; }

#lp_search .search-list {
  width: 90%;
  margin: 10% auto; }
#lp_search .js_target {
  display: none; }
  #lp_search .js_target.js_selected {
    display: block; }
#lp_search .selectBlock {
  position: relative;
  padding-bottom: 200px; }
  #lp_search .selectBlock::after {
    position: absolute;
    content: "";
    bottom: 50px;
    height: 150px;
    width: 1px;
    left: 50%;
    transform: translateX(-50%);
    background: #171717; }
#lp_search .selectBlock_wrapper {
  width: 85%;
  max-width: 350px;
  margin: 10% auto; }
  #lp_search .selectBlock_wrapper .selectBlock_ttl {
    font-size: min(1em, 3.7vw);
    margin-bottom: 2.0em; }
  #lp_search .selectBlock_wrapper .selectBlock_content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between; }
    #lp_search .selectBlock_wrapper .selectBlock_content p {
      font-size: min(0.9em, 3vw);
      width: calc(100%/2 - 4%);
      text-align: left;
      margin-bottom: 1.0em; }
      @media screen and (max-width: 800px) {
        #lp_search .selectBlock_wrapper .selectBlock_content p {
          width: calc(100%/2 - 2%); } }
    #lp_search .selectBlock_wrapper .selectBlock_content label {
      cursor: pointer;
      position: relative; }
    #lp_search .selectBlock_wrapper .selectBlock_content input[type=checkbox] {
      display: none; }
    #lp_search .selectBlock_wrapper .selectBlock_content input[type=checkbox] + label:before {
      display: inline-block;
      content: "";
      width: 20px;
      height: 20px;
      border: 2px solid #737373;
      border-radius: 4px;
      vertical-align: middle;
      margin-right: 8px; }
    #lp_search .selectBlock_wrapper .selectBlock_content input[type=checkbox]:checked + label::after {
      content: "";
      position: absolute;
      top: -4px;
      left: 7px;
      width: 11px;
      height: 18px;
      border: solid #171717;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg); }
  #lp_search .selectBlock_wrapper .func_box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between; }
    #lp_search .selectBlock_wrapper .func_box .selectBlock_content {
      width: calc(100%/2 - 4%); }
      #lp_search .selectBlock_wrapper .func_box .selectBlock_content p {
        width: 100%; }
#lp_search .list_ttl {
  font-weight: 600;
  font-size: min(1.2em, 4vw);
  margin-bottom: 10%; }
#lp_search .search-list__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 90%;
  margin: 5% auto 10%; }
  @media screen and (max-width: 800px) {
    #lp_search .search-list__list {
      width: 95%; } }
  #lp_search .search-list__list li {
    width: calc(100%/2 - 1%);
    margin-bottom: 3.0em; }
    #lp_search .search-list__list li span {
      visibility: hidden;
      white-space: nowrap; }
    #lp_search .search-list__list li a {
      display: block; }
      #lp_search .search-list__list li a.coloricon {
        position: relative; }
        #lp_search .search-list__list li a.coloricon::after {
          content: "公式限定カラー";
          position: absolute;
          top: 7px;
          right: 0;
          font-size: min(0.7em, 2.6vw);
          color: #ffffff;
          background: #737373;
          padding: 0.4em 1.0em 0.3em;
          line-height: 1.1;
          border-radius: 50vh; }
          @media screen and (max-width: 800px) {
            #lp_search .search-list__list li a.coloricon::after {
              top: 5px; } }
    #lp_search .search-list__list li img {
      margin-bottom: .5em; }
    #lp_search .search-list__list li p {
      font-size: min(0.8em, 2.9vw);
      letter-spacing: 0px;
      line-height: 1.8;
      width: 97%;
      margin: 0 auto; }
      @media screen and (max-width: 800px) {
        #lp_search .search-list__list li p {
          width: 100%; } }
      #lp_search .search-list__list li p.credit {
        padding-left: .5em;
        letter-spacing: 0.1em; }

#feauture {
  margin-bottom: 25%; }

.f-list {
  width: 80%;
  margin: 0 auto; }
  .f-list a {
    margin-bottom: 10%;
    display: block; }