@charset "UTF-8";
/* -----------------------------------------------------------------------
## base ##################################################
----------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&display=swap");
.pane-contents > .container {
  width: auto; }

.pane-contents .container .pane-right-menu {
  width: auto;
  display: flex;
  margin: auto;
  justify-content: center; }

.green {
  color: #039bab; }

/* -----------------------------------------------------------------------
## media ##################################################
----------------------------------------------------------------------- */
.pc {
  display: block; }
  @media screen and (max-width: 767px) {
    .pc {
      display: none; } }

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

/* -----------------------------------------------------------------------
## columu##################################################
----------------------------------------------------------------------- */
.col-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  align-items: start; }
  @media screen and (max-width: 767px) {
    .col-2 {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px; } }

.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: start; }
  @media screen and (max-width: 767px) {
    .col-3 {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px; } }

.col-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: start; }
  @media screen and (max-width: 767px) {
    .col-4 {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px; } }

.col-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  align-items: start; }
  @media screen and (max-width: 767px) {
    .col-5 {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px; } }

.col-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
  align-items: start; }
  @media screen and (max-width: 767px) {
    .col-6 {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px; } }

.gap-10 {
  gap: 10px !important; }

.gap-pc-10 {
  gap: 10px !important; }

@media screen and (max-width: 767px) {
  .gap-sp-10 {
    gap: 10px !important; } }
.gap-20 {
  gap: 20px !important; }

.gap-pc-20 {
  gap: 20px !important; }

@media screen and (max-width: 767px) {
  .gap-sp-20 {
    gap: 20px !important; } }
.gap-30 {
  gap: 30px !important; }

.gap-pc-30 {
  gap: 30px !important; }

@media screen and (max-width: 767px) {
  .gap-sp-30 {
    gap: 30px !important; } }
.gap-40 {
  gap: 40px !important; }

.gap-pc-40 {
  gap: 40px !important; }

@media screen and (max-width: 767px) {
  .gap-sp-40 {
    gap: 40px !important; } }
/* -----------------------------------------------------------------------
## Font  Padding##################################################
----------------------------------------------------------------------- */
/* ============================================
   8px刻みの余白ユーティリティ
   .mb-32 → margin-bottom: 32px
=============================================== */
/* 使いたいpx値をリスト化（自由に追加OK） */
/* PC・共通 margin */
.mb-10 {
  margin-bottom: 10px !important; }

.mt-10 {
  margin-top: 10px !important; }

.ml-10 {
  margin-left: 10px !important; }

.mr-10 {
  margin-right: 10px !important; }

.my-10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important; }

.mb-20 {
  margin-bottom: 20px !important; }

.mt-20 {
  margin-top: 20px !important; }

.ml-20 {
  margin-left: 20px !important; }

.mr-20 {
  margin-right: 20px !important; }

.my-20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important; }

.mb-30 {
  margin-bottom: 30px !important; }

.mt-30 {
  margin-top: 30px !important; }

.ml-30 {
  margin-left: 30px !important; }

.mr-30 {
  margin-right: 30px !important; }

.my-30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important; }

.mb-40 {
  margin-bottom: 40px !important; }

.mt-40 {
  margin-top: 40px !important; }

.ml-40 {
  margin-left: 40px !important; }

.mr-40 {
  margin-right: 40px !important; }

.my-40 {
  margin-top: 40px !important;
  margin-bottom: 40px !important; }

.mb-60 {
  margin-bottom: 60px !important; }

.mt-60 {
  margin-top: 60px !important; }

.ml-60 {
  margin-left: 60px !important; }

.mr-60 {
  margin-right: 60px !important; }

.my-60 {
  margin-top: 60px !important;
  margin-bottom: 60px !important; }

.mb-100 {
  margin-bottom: 100px !important; }

.mt-100 {
  margin-top: 100px !important; }

.ml-100 {
  margin-left: 100px !important; }

.mr-100 {
  margin-right: 100px !important; }

.my-100 {
  margin-top: 100px !important;
  margin-bottom: 100px !important; }

/* PC・共通 padding */
.pb-10 {
  padding-bottom: 10px !important; }

.pt-10 {
  padding-top: 10px !important; }

.pl-10 {
  padding-left: 10px !important; }

.pr-10 {
  padding-right: 10px !important; }

.py-10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important; }

.pb-20 {
  padding-bottom: 20px !important; }

.pt-20 {
  padding-top: 20px !important; }

.pl-20 {
  padding-left: 20px !important; }

.pr-20 {
  padding-right: 20px !important; }

.py-20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important; }

.pb-30 {
  padding-bottom: 30px !important; }

.pt-30 {
  padding-top: 30px !important; }

.pl-30 {
  padding-left: 30px !important; }

.pr-30 {
  padding-right: 30px !important; }

.py-30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important; }

.pb-40 {
  padding-bottom: 40px !important; }

.pt-40 {
  padding-top: 40px !important; }

.pl-40 {
  padding-left: 40px !important; }

.pr-40 {
  padding-right: 40px !important; }

.py-40 {
  padding-top: 40px !important;
  padding-bottom: 40px !important; }

.pb-60 {
  padding-bottom: 60px !important; }

.pt-60 {
  padding-top: 60px !important; }

.pl-60 {
  padding-left: 60px !important; }

.pr-60 {
  padding-right: 60px !important; }

.py-60 {
  padding-top: 60px !important;
  padding-bottom: 60px !important; }

.pb-100 {
  padding-bottom: 100px !important; }

.pt-100 {
  padding-top: 100px !important; }

.pl-100 {
  padding-left: 100px !important; }

.pr-100 {
  padding-right: 100px !important; }

.py-100 {
  padding-top: 100px !important;
  padding-bottom: 100px !important; }

/* SP専用 */
@media screen and (max-width: 767px) {
  .sp-mb-10 {
    margin-bottom: 10px !important; }

  .sp-mt-10 {
    margin-top: 10px !important; }

  .sp-ml-10 {
    margin-left: 10px !important; }

  .sp-mr-10 {
    margin-right: 10px !important; }

  .sp-my-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important; }

  .sp-pb-10 {
    padding-bottom: 10px !important; }

  .sp-pt-10 {
    padding-top: 10px !important; }

  .sp-pl-10 {
    padding-left: 10px !important; }

  .sp-pr-10 {
    padding-right: 10px !important; }

  .sp-py-10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important; }

  .sp-mb-20 {
    margin-bottom: 20px !important; }

  .sp-mt-20 {
    margin-top: 20px !important; }

  .sp-ml-20 {
    margin-left: 20px !important; }

  .sp-mr-20 {
    margin-right: 20px !important; }

  .sp-my-20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important; }

  .sp-pb-20 {
    padding-bottom: 20px !important; }

  .sp-pt-20 {
    padding-top: 20px !important; }

  .sp-pl-20 {
    padding-left: 20px !important; }

  .sp-pr-20 {
    padding-right: 20px !important; }

  .sp-py-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important; }

  .sp-mb-30 {
    margin-bottom: 30px !important; }

  .sp-mt-30 {
    margin-top: 30px !important; }

  .sp-ml-30 {
    margin-left: 30px !important; }

  .sp-mr-30 {
    margin-right: 30px !important; }

  .sp-my-30 {
    margin-top: 30px !important;
    margin-bottom: 30px !important; }

  .sp-pb-30 {
    padding-bottom: 30px !important; }

  .sp-pt-30 {
    padding-top: 30px !important; }

  .sp-pl-30 {
    padding-left: 30px !important; }

  .sp-pr-30 {
    padding-right: 30px !important; }

  .sp-py-30 {
    padding-top: 30px !important;
    padding-bottom: 30px !important; }

  .sp-mb-40 {
    margin-bottom: 40px !important; }

  .sp-mt-40 {
    margin-top: 40px !important; }

  .sp-ml-40 {
    margin-left: 40px !important; }

  .sp-mr-40 {
    margin-right: 40px !important; }

  .sp-my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important; }

  .sp-pb-40 {
    padding-bottom: 40px !important; }

  .sp-pt-40 {
    padding-top: 40px !important; }

  .sp-pl-40 {
    padding-left: 40px !important; }

  .sp-pr-40 {
    padding-right: 40px !important; }

  .sp-py-40 {
    padding-top: 40px !important;
    padding-bottom: 40px !important; }

  .sp-mb-60 {
    margin-bottom: 60px !important; }

  .sp-mt-60 {
    margin-top: 60px !important; }

  .sp-ml-60 {
    margin-left: 60px !important; }

  .sp-mr-60 {
    margin-right: 60px !important; }

  .sp-my-60 {
    margin-top: 60px !important;
    margin-bottom: 60px !important; }

  .sp-pb-60 {
    padding-bottom: 60px !important; }

  .sp-pt-60 {
    padding-top: 60px !important; }

  .sp-pl-60 {
    padding-left: 60px !important; }

  .sp-pr-60 {
    padding-right: 60px !important; }

  .sp-py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important; }

  .sp-mb-100 {
    margin-bottom: 100px !important; }

  .sp-mt-100 {
    margin-top: 100px !important; }

  .sp-ml-100 {
    margin-left: 100px !important; }

  .sp-mr-100 {
    margin-right: 100px !important; }

  .sp-my-100 {
    margin-top: 100px !important;
    margin-bottom: 100px !important; }

  .sp-pb-100 {
    padding-bottom: 100px !important; }

  .sp-pt-100 {
    padding-top: 100px !important; }

  .sp-pl-100 {
    padding-left: 100px !important; }

  .sp-pr-100 {
    padding-right: 100px !important; }

  .sp-py-100 {
    padding-top: 100px !important;
    padding-bottom: 100px !important; } }
/* ============================================
   フォントサイズ（rem換算）
=============================================== */
/* ============================================
   セクション余白（数字＝px 方式）
=============================================== */
.bold {
  font-weight: 900; }

.center {
  text-align: center;
  display: block;
  margin: 0 auto; }

h1, h2, h3, h4 {
  font-weight: 900; }

.summersale {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #585858;
  letter-spacing: 0.08em;
  line-height: 1.8;
  overflow-x: hidden;
  width: 100%; }

/* ============================================
   font
=============================================== */
.maru_gothic {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal; }

/* -----------------------------------------------------------------------
## Common ##################################################
----------------------------------------------------------------------- */
/* 800px, 900px, 1000px, 1200px のセットを生成 */
.lp-wrapper-1000 {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .lp-wrapper-1000 {
      width: 92%; } }

.lp-wrapper-1100 {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .lp-wrapper-1100 {
      width: 92%; } }

.lp-wrapper-800 {
  max-width: 800px;
  width: 100%;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .lp-wrapper-800 {
      width: 92%; } }

/* -----------------------------------------------------------------------
## btn ##################################################
----------------------------------------------------------------------- */
.gender-title {
  color: #ffffff;
  font-size: 1.25em;
  line-height: 1.0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 40px;
  width: 300px;
  margin: 0 auto 30px;
  border-radius: 999px;
  text-align: center;
  z-index: 1; }
  .gender-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent; }
  .gender-title.__ladies {
    background-color: #fa87aa; }
    .gender-title.__ladies::after {
      border-top: 14px solid #fa87aa; }
  .gender-title.__mens {
    background-color: #3488db; }
    .gender-title.__mens::after {
      border-top: 14px solid #3488db; }
  @media screen and (max-width: 767px) {
    .gender-title {
      display: none; } }

.gender-tabs {
  display: none; }
  @media screen and (max-width: 767px) {
    .gender-tabs {
      display: flex; } }

.gender-tabs {
  height: 50px;
  margin: 0 auto 30px;
  padding: 5px;
  background-color: #ecebeb;
  border-radius: 999px; }
  .gender-tabs.white {
    background-color: #ffffff; }

.gender-tab {
  width: 50%;
  border: none;
  border-radius: 999px;
  background-color: transparent;
  color: #999898;
  font-weight: 700;
  font-size: 1.125em;
  font-family: "Zen Maru Gothic", sans-serif;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; }
  @media screen and (max-width: 767px) {
    .gender-tab {
      font-size: 1.911rem; } }
  .gender-tab.is-active {
    background-color: #fa87aa;
    color: #ffffff; }
  .gender-tab[data-tab="mens"].is-active {
    background-color: #3488db; }

@keyframes tabFadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.gender-contents .gender-panel {
  display: block;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .gender-contents .gender-panel {
      display: none; }
      .gender-contents .gender-panel.is-active {
        display: block;
        animation: tabFadeIn 0.75s ease both; } }
.gender-contents .gender-lead {
  font-size: 1.125em;
  color: #585858;
  margin-bottom: 24px;
  font-weight: 700; }
  @media screen and (max-width: 767px) {
    .gender-contents .gender-lead {
      font-size: 1.911rem; } }
  @media screen and (max-width: 767px) {
    .gender-contents .gender-lead {
      margin-bottom: 20px; } }
  .gender-contents .gender-lead span {
    color: #039bab; }

@media screen and (min-width: 768px) {
  .ttl {
    text-align: center; }
    .ttl > picture {
      display: block;
      width: fit-content;
      margin-inline: auto;
      width: 100%;
      max-width: 1100px; }
    .ttl > picture img {
      display: block;
      width: auto;
      max-width: 100%;
      height: auto; } }

.page-Campaign_PriceNormal span[id^="goods_discount_rate_"]:before {
  display: none; }

.page-Campaign_PriceNormal span[id^="goods_discount_rate_"] {
  display: none; }

/* -----------------------------------------------------------------------
## Animation ##################################################
----------------------------------------------------------------------- */
@keyframes imageFade {
  0% {
    opacity: 0; }
  54.9% {
    opacity: 0; }
  55% {
    opacity: 1; }
  94.9% {
    opacity: 1; }
  95% {
    opacity: 0; }
  100% {
    opacity: 0; } }
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease; }
  .fade-up.is-show {
    opacity: 1;
    transform: translateY(0); }

/* -----------------------------------------------------------------------
## main ##################################################
----------------------------------------------------------------------- */
#main .mv {
  width: 100%;
  position: relative;
  overflow: hidden;
  line-height: 0; }
  #main .mv picture,
  #main .mv img {
    display: block; }
  #main .mv img {
    width: 100%;
    height: auto; }
  #main .mv svg {
    display: none; }
  @media screen and (min-width: 768px) {
    #main .mv {
      height: 340px;
      background: url("/lp/summersale/26/images/mv_bg.jpg") no-repeat center center/cover; }
      #main .mv picture {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 800px;
        max-width: calc(100% - 40px);
        z-index: 3; }
      #main .mv svg {
        display: block;
        position: absolute;
        left: 0;
        bottom: -10px;
        width: 100%;
        height: auto;
        z-index: 2; } }
#main .intro {
  background-color: #faf06f;
  color: #039bab; }
  #main .intro p {
    font-size: 1.125em;
    letter-spacing: 0.04em; }
    @media screen and (max-width: 767px) {
      #main .intro p {
        font-size: 1.911rem; } }
    #main .intro p .marker {
      background: linear-gradient(transparent 65%, #fff 65%, #fff 88%, transparent 88%);
      padding: 0 0.15em; }
  #main .intro .navarea {
    gap: 25px 15px; }
    #main .intro .navarea.grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr); }
      @media screen and (max-width: 767px) {
        #main .intro .navarea.grid-3 {
          gap: 25px 7px; } }
      @media screen and (min-width: 768px) {
        #main .intro .navarea.grid-3 {
          grid-template-columns: repeat(3, 1fr);
          width: 800px;
          margin: 0 auto; } }
      @media screen and (max-width: 767px) {
        #main .intro .navarea.grid-3 li {
          height: 110px; } }
      @media screen and (min-width: 768px) {
        #main .intro .navarea.grid-3 li:nth-child(3) {
          grid-column: auto;
          justify-self: stretch;
          width: auto; } }
    #main .intro .navarea.grid-4 {
      display: grid;
      grid-template-columns: repeat(2, 1fr); }
      @media screen and (min-width: 768px) {
        #main .intro .navarea.grid-4 {
          grid-template-columns: repeat(4, 1fr); } }
    #main .intro .navarea li {
      background-color: #ffffff;
      text-align: center;
      border: 3px solid #039bab;
      border-radius: 5px;
      height: 80px;
      line-height: 1.3;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      font-size: 1.125em;
      letter-spacing: 0.04em; }
      @media screen and (min-width: 768px) {
        #main .intro .navarea li {
          height: 90px;
          line-height: 1.4;
          letter-spacing: 0.08em; }
          #main .intro .navarea li:hover {
            transform: translateY(5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
            opacity: 1.0; } }
      @media screen and (max-width: 767px) {
        #main .intro .navarea li {
          font-size: 1.699rem; } }
      #main .intro .navarea li .large {
        font-size: 1.25em; }
        @media screen and (max-width: 767px) {
          #main .intro .navarea li .large {
            font-size: 2.123rem; } }
      #main .intro .navarea li::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -17px;
        transform: translateX(-50%);
        width: 25px;
        height: 25px;
        background: url("/lp/summersale/26/images/icon_bottom.svg") no-repeat center/contain; }
      #main .intro .navarea li a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center; }
        #main .intro .navarea li a:hover {
          opacity: 1.0; }
        #main .intro .navarea li a p {
          line-height: 1.3; }
#main .wavearea {
  background-color: #faf06f; }
  #main .wavearea .wave {
    position: relative;
    top: 5px;
    width: 100%;
    height: auto; }

#category .gender-lead {
  text-align: center;
  font-size: 1.25em; }
#category .category-contents .gender-contents {
  display: block; }
  @media screen and (min-width: 768px) {
    #category .category-contents .gender-contents {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 80px; } }
  #category .category-contents .gender-contents .gender-panel {
    display: none; }
    #category .category-contents .gender-contents .gender-panel.is-active {
      display: block;
      animation: tabFadeIn 0.75s ease both; }
    @media screen and (min-width: 768px) {
      #category .category-contents .gender-contents .gender-panel {
        display: block;
        text-align: center; } }
  #category .category-contents .gender-contents .gender-lead {
    font-size: 1.125em;
    color: #585858;
    font-weight: 700; }
    @media screen and (max-width: 767px) {
      #category .category-contents .gender-contents .gender-lead {
        font-size: 1.911rem; } }
    #category .category-contents .gender-contents .gender-lead span {
      color: #039bab; }
  #category .category-contents .gender-contents .category-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 14px;
    margin: 0 auto;
    padding: 0;
    list-style: none; }
    @media screen and (min-width: 768px) {
      #category .category-contents .gender-contents .category-list {
        gap: 30px 10px; } }
    #category .category-contents .gender-contents .category-list li {
      text-align: center; }
      #category .category-contents .gender-contents .category-list li a {
        display: block;
        text-decoration: none;
        color: inherit; }
        @media screen and (min-width: 768px) {
          #category .category-contents .gender-contents .category-list li a img {
            width: 80%;
            margin: 0 auto; } }
        #category .category-contents .gender-contents .category-list li a p {
          margin-top: 10px;
          line-height: 1.4; }
        @media screen and (min-width: 768px) {
          #category .category-contents .gender-contents .category-list li a {
            transition: transform 0.3s ease, box-shadow 0.3s ease; }
            #category .category-contents .gender-contents .category-list li a:hover {
              transform: translateY(-6px);
              opacity: 1.0; } }
  #category .category-contents .gender-contents .gender-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 85%;
    margin: 0 auto;
    height: 70px;
    border: 3px solid;
    border-radius: 5px;
    font-size: 1.125em;
    font-family: "Zen Maru Gothic", sans-serif;
    background-color: #ffffff;
    color: #585858; }
    @media screen and (max-width: 767px) {
      #category .category-contents .gender-contents .gender-btn {
        font-size: 1.911rem; } }
    @media screen and (min-width: 768px) {
      #category .category-contents .gender-contents .gender-btn {
        max-width: 350px;
        transition: background-color 0.3s ease; }
        #category .category-contents .gender-contents .gender-btn:hover {
          opacity: 1.0; }
          #category .category-contents .gender-contents .gender-btn:hover::after {
            transform: translateY(-50%) translateX(5px);
            -webkit-transform: translateY(-50%) translateX(5px);
            -ms-transform: translateY(-50%) translateX(5px); } }
    #category .category-contents .gender-contents .gender-btn::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      width: 20px;
      height: 20px; }
      @media screen and (min-width: 768px) {
        #category .category-contents .gender-contents .gender-btn::after {
          right: 20px;
          transition: transform 0.3s ease; } }
    #category .category-contents .gender-contents .gender-btn.ladies-btn {
      border-color: #fa87aa; }
      #category .category-contents .gender-contents .gender-btn.ladies-btn::after {
        background: url("/lp/summersale/26/images/icon_right_l.svg") no-repeat center/contain; }
      #category .category-contents .gender-contents .gender-btn.ladies-btn:hover {
        background-color: #fff0f5; }
    #category .category-contents .gender-contents .gender-btn.mens-btn {
      border-color: #3488db; }
      #category .category-contents .gender-contents .gender-btn.mens-btn::after {
        background: url("/lp/summersale/26/images/icon_right_m.svg") no-repeat center/contain; }
      #category .category-contents .gender-contents .gender-btn.mens-btn:hover {
        background-color: #f0f8ff; }

#mustbuy {
  background-color: #d4f1f3; }
  @media screen and (min-width: 768px) {
    #mustbuy .mustbuy-contents {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto; } }
  #mustbuy .mustbuy-contents .gender-lead {
    text-align: center;
    font-size: 1.25em; }
  #mustbuy .mustbuy-contents .gender-contents {
    display: block; }
    @media screen and (min-width: 768px) {
      #mustbuy .mustbuy-contents .gender-contents {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 60px; } }
    #mustbuy .mustbuy-contents .gender-contents .item-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 10px;
      margin: 0 auto;
      padding: 0;
      list-style: none; }
      @media screen and (min-width: 768px) {
        #mustbuy .mustbuy-contents .gender-contents .item-list {
          gap: 22px 16px; } }
      #mustbuy .mustbuy-contents .gender-contents .item-list .item-card {
        width: 100%; }
        #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a {
          display: block;
          text-decoration: none;
          color: inherit;
          position: relative;
          padding-bottom: 15px;
          transition: transform 0.3s ease, filter 0.3s ease; }
          @media screen and (min-width: 768px) {
            #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a:hover {
              transform: translateY(-10px);
              filter: drop-shadow(0 0 14px rgba(34, 185, 194, 0.28));
              opacity: 1.0; } }
          #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a > picture {
            display: block;
            overflow: hidden;
            line-height: 0; }
            #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a > picture img {
              display: block;
              width: 100%;
              height: auto; }
          #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__visual {
            position: relative;
            overflow: hidden; }
            #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__visual .item-card__img {
              display: block;
              width: 100%;
              overflow: hidden;
              line-height: 0; }
              #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__visual .item-card__img img {
                display: block;
                width: 100%;
                height: auto;
                vertical-align: bottom; }
            #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__visual .item-card__img--02 {
              position: absolute;
              inset: -1px 0 0 0;
              opacity: 0;
              animation: imageFade 6s linear infinite;
              backface-visibility: hidden;
              -webkit-backface-visibility: hidden; }
          #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0px 10px 15px;
            text-align: left;
            background-color: #f3fdfe; }
            #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__name {
              margin-bottom: 3px;
              white-space: nowrap; }
            #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__price {
              margin-top: 3px; }
              #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__price .page-Campaign_Price {
                display: block;
                margin: 0; }
            #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__name, #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__price {
              display: block;
              width: fit-content;
              font-weight: 500;
              letter-spacing: 0;
              font-size: 1em;
              background-color: #ffffff;
              padding: 0 2px; }
              @media screen and (max-width: 767px) {
                #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__name, #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__price {
                  font-size: 1.5rem; } }
            #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__btn {
              color: #ffffff;
              font-size: 1.125em;
              text-align: center;
              border-radius: 5px;
              background-color: #039bab;
              margin-top: 10px;
              height: 35px;
              display: flex;
              justify-content: center;
              align-items: center;
              position: relative; }
              @media screen and (max-width: 767px) {
                #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__btn {
                  font-size: 1.699rem; } }
              @media screen and (min-width: 768px) {
                #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__btn {
                  height: 40px; } }
              #mustbuy .mustbuy-contents .gender-contents .item-list .item-card a .item-card__info .item-card__btn::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                width: 13px;
                height: 13px;
                background: url("/lp/summersale/26/images/icon_right.svg") no-repeat center/contain; }

#onayami .onayami-contents .gender-lead {
  text-align: center;
  font-size: 1.25em; }
#onayami .onayami-contents .gender-contents {
  display: block; }
  @media screen and (min-width: 768px) {
    #onayami .onayami-contents .gender-contents {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 100px; } }
  #onayami .onayami-contents .gender-contents .onayami-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
    margin: 0 auto;
    padding: 0;
    list-style: none; }
    @media screen and (min-width: 768px) {
      #onayami .onayami-contents .gender-contents .onayami-list {
        gap: 20px; } }
    #onayami .onayami-contents .gender-contents .onayami-list li {
      text-align: center; }
      #onayami .onayami-contents .gender-contents .onayami-list li a {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: transform 0.3s ease; }
        @media screen and (min-width: 768px) {
          #onayami .onayami-contents .gender-contents .onayami-list li a:hover {
            transform: translateY(-8px);
            opacity: 1.0; } }
        #onayami .onayami-contents .gender-contents .onayami-list li a p {
          margin-top: 10px;
          line-height: 1.4; }

#ranking {
  background-color: #d4f1f3; }
  #ranking .ranking-contents .gender-contents {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px; }
    @media screen and (min-width: 768px) {
      #ranking .ranking-contents .gender-contents .gender-panel {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative; }
        #ranking .ranking-contents .gender-contents .gender-panel::before {
          content: "";
          position: absolute;
          top: 20px;
          left: 0;
          width: 100%;
          border-top: 4px dotted;
          z-index: 0; }
        #ranking .ranking-contents .gender-contents .gender-panel.__ladies::before {
          border-color: #fa87aa; }
        #ranking .ranking-contents .gender-contents .gender-panel.__mens::before {
          border-color: #3488db; } }
    #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider {
      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      overflow: hidden; }
      @media screen and (min-width: 768px) {
        #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider {
          display: grid !important;
          grid-template-columns: repeat(5, 1fr);
          gap: 20px;
          width: 100% !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
          overflow: visible !important;
          padding-left: 0; } }
      #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .is-dummy {
        visibility: hidden;
        pointer-events: none; }
      #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-arrow {
        display: none !important; }
      #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-prev::before,
      #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-next::before {
        content: none !important;
        display: none !important; }
      #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-list {
        padding-right: 18vw;
        box-sizing: border-box; }
      #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-dots {
        position: relative !important;
        left: 50% !important;
        width: 100vw;
        margin: 20px 0 0 !important;
        padding: 0 !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        justify-content: center;
        align-items: center; }
        #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-dots li button {
          width: 2.5rem; }
          #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-dots li button::before {
            background: #ffffff !important;
            opacity: 1 !important; }
        #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-dots li.slick-active button::before {
          background: #039bab !important;
          opacity: 1 !important; }
      #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-track {
        display: flex;
        padding-left: 4%; }
      #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .slick-slide {
        height: auto; }
      #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .ranking-item {
        margin-right: 20px; }
        @media screen and (min-width: 768px) {
          #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .ranking-item {
            margin-right: 0;
            text-align: center; }
            #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .ranking-item a {
              transition: transform 0.3s ease; }
              #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .ranking-item a:hover {
                transform: translateY(-8px);
                opacity: 1.0; } }
        #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .ranking-item .number {
          display: flex;
          justify-content: center;
          margin-bottom: 10px; }
          #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .ranking-item .number img {
            height: 35px; }
            @media screen and (min-width: 768px) {
              #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .ranking-item .number img {
                height: 40px; } }
        #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .ranking-item .item-info {
          margin-top: 10px; }
          #ranking .ranking-contents .gender-contents .gender-panel .ranking-slider .ranking-item .item-info .item-info__name {
            font-weight: 500;
            line-height: 1.4; }
  #ranking .ranking-contents .ranking-notes {
    font-size: 0.875em;
    text-align: center;
    font-weight: 500;
    line-height: 1.5; }
    @media screen and (max-width: 767px) {
      #ranking .ranking-contents .ranking-notes {
        font-size: 1.486rem; } }
  #ranking .ranking-contents .page-Campaign_Price {
    white-space: nowrap; }

#reason {
  background-color: #f2feff; }
  #reason .reason-ttl {
    font-size: 2em;
    line-height: 1.5;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #reason .reason-ttl {
        font-size: 2.972rem; } }
  #reason .reason-txt {
    font-weight: 500;
    font-size: 1.125em;
    text-align: center; }
    @media screen and (max-width: 767px) {
      #reason .reason-txt {
        font-size: 1.699rem; } }
  #reason .reason-list {
    display: grid;
    grid-template-columns: repeat(1fr);
    gap: 40px; }
    @media screen and (min-width: 768px) {
      #reason .reason-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px; } }
    #reason .reason-list li .reason-list__image {
      position: relative;
      margin-right: calc(50% - 50vw); }
      @media screen and (min-width: 768px) {
        #reason .reason-list li .reason-list__image {
          margin-right: 0; } }
      #reason .reason-list li .reason-list__image p {
        position: absolute;
        top: 90%;
        left: 20px; }
        #reason .reason-list li .reason-list__image p span {
          background-color: #ffffff;
          padding: 10px;
          border-radius: 5px;
          font-size: 1.25em;
          display: block;
          width: fit-content;
          line-height: 1.0;
          white-space: nowrap; }
          @media screen and (max-width: 767px) {
            #reason .reason-list li .reason-list__image p span {
              font-size: 2.548rem; } }
          @media screen and (min-width: 768px) {
            #reason .reason-list li .reason-list__image p span {
              padding: 5px 10px; } }
        #reason .reason-list li .reason-list__image p span + span {
          margin-top: 5px; }
          @media screen and (min-width: 768px) {
            #reason .reason-list li .reason-list__image p span + span {
              margin-top: 3px; } }
    #reason .reason-list li .reason-list__txt {
      font-size: 1em;
      padding-top: 30px;
      padding-left: 20px;
      font-weight: 500; }
      @media screen and (max-width: 767px) {
        #reason .reason-list li .reason-list__txt {
          font-size: 1.911rem; } }
      @media screen and (min-width: 768px) {
        #reason .reason-list li .reason-list__txt {
          padding-top: 20px; } }
    #reason .reason-list li:last-child .reason-list__txt {
      padding-top: 80px; }
      @media screen and (min-width: 768px) {
        #reason .reason-list li:last-child .reason-list__txt {
          padding-top: 50px; } }

#summersale_btnarea .btnarea {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px; }
  @media screen and (min-width: 768px) {
    #summersale_btnarea .btnarea {
      grid-template-columns: repeat(2, 1fr);
      max-width: 800px;
      width: 100%;
      margin: 0 auto; } }
  #summersale_btnarea .btnarea .summersale-btn {
    color: #ffffff;
    font-size: 1.125em;
    line-height: 1.3;
    text-align: center;
    border-radius: 5px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; }
    @media screen and (max-width: 767px) {
      #summersale_btnarea .btnarea .summersale-btn {
        font-size: 1.911rem; } }
    @media screen and (min-width: 768px) {
      #summersale_btnarea .btnarea .summersale-btn {
        height: 80px;
        transition: filter 0.3s ease, transform 0.3s ease; }
        #summersale_btnarea .btnarea .summersale-btn:hover {
          filter: brightness(1.08);
          opacity: 1.0; }
          #summersale_btnarea .btnarea .summersale-btn:hover:hover::after {
            transform: translateY(-50%) translateX(6px); } }
    #summersale_btnarea .btnarea .summersale-btn::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      width: 16px;
      height: 16px;
      background: url(/lp/summersale/26/images/icon_right.svg) no-repeat center/contain;
      transition: transform 0.3s ease; }
    #summersale_btnarea .btnarea .summersale-btn.ladies-btn {
      background-color: #fa87aa; }
    #summersale_btnarea .btnarea .summersale-btn.mens-btn {
      background-color: #3488db; }