/* setting */
.ttl-top {
  margin-bottom: clamp(0.9375rem, -0.0606796117rem + 4.2475728155vw, 3.125rem);
  color: #004680;
  font-size: clamp(1.625rem, 1.3398058252rem + 1.213592233vw, 2.25rem);
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}

.swiper-box {
  position: relative;
  margin-inline: auto;
  padding: 0 calc(6% + 7px);
}
.swiper-box .swiper-button-next,
.swiper-box .swiper-button-prev {
  width: 15.3409090909px;
  height: var(25px);
  color: #004680;
}
.swiper-box .swiper-button-next:after,
.swiper-box .swiper-button-prev:after {
  font-size: 25px;
}
.swiper-box .swiper-button-next {
  right: -2%;
}
.swiper-box .swiper-button-prev {
  left: -2%;
}
.swiper-box .swiper-pagination-bullet-active {
  background: #004680;
}

#mv .mv-wrap {
  position: relative;
}
#mv .mv-wrap .mv-cont {
  position: absolute;
  left: 0;
  right: 0;
  width: min(92%, 1800px);
  height: 100%;
  margin: auto;
}
#mv .mv-wrap .mv-cont-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  width: min(60%, 600px);
  z-index: 3;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#mv .mv-wrap .mv-cont .mv-maincopy {
  color: #004680;
  font-size: clamp(1.375rem, 0.8616504854rem + 2.1844660194vw, 2.5rem);
  font-weight: bold;
}
#mv .mv-wrap .mv-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 3;
  margin: auto;
}

#pickup {
  position: relative;
  z-index: 1;
  padding: clamp(1.25rem, 0.3944174757rem + 3.640776699vw, 3.125rem) 0 0;
}
#pickup:before {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
  height: clamp(6.25rem, 1.6868932039rem + 19.4174757282vw, 16.25rem);
  background: #D6E7F5;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}
#pickup .ttl-top {
  margin: 0 auto clamp(2.8125rem, 1.2439320388rem + 6.6747572816vw, 6.25rem);
}

#rank .rank-tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#rank .rank-tab li {
  width: 49%;
  margin-bottom: min(2%, 10px);
  padding: 10px 0;
  background: #F3F3F3;
  border-radius: 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-size: clamp(1rem, 0.942961165rem + 0.2427184466vw, 1.125rem);
  text-align: center;
}
#rank .rank-tab li.active, #rank .rank-tab li:hover {
  background: #004680;
  color: #fff;
}
#rank .rank-conts {
  padding: clamp(1.25rem, -0.6037621359rem + 7.8883495146vw, 5.3125rem) 0 clamp(1.25rem, -0.6037621359rem + 7.8883495146vw, 5.3125rem) 4%;
  background: #004680;
}
#rank .rank-conts-inner {
  width: 100%;
  overflow: hidden;
}
#rank .rank-conts .post-list:not(:first-child) {
  display: none;
}
#rank .rank-conts .post-box {
  margin-bottom: 0;
}
#rank .rank-conts .post-box a {
  background: #fff;
  border-radius: 10px;
}
#rank .rank-conts .post-box .post-thum {
  margin-bottom: 0;
  border-radius: 10px 10px 0 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
#rank .rank-conts .post-box .post-txt {
  padding: clamp(0.3125rem, 0.1699029126rem + 0.6067961165vw, 0.625rem) clamp(0.9375rem, 0.7949029126rem + 0.6067961165vw, 1.25rem) clamp(0.9375rem, 0.7949029126rem + 0.6067961165vw, 1.25rem);
}
#rank .rank-conts .rank-arrow {
  position: relative;
  margin: 20px 4% 0 auto;
  width: 50px;
}
#rank .rank-conts .rank-arrow:before, #rank .rank-conts .rank-arrow:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  content: "";
}
#rank .rank-conts .rank-arrow:before {
  height: 1px;
  width: 100%;
  background: #fff;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#rank .rank-conts .rank-arrow:after {
  width: 6px;
  height: 6px;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}

#guide .guide-inner {
  height: min(60vh, 600px);
  overflow-y: scroll;
}
#guide .guide-ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: clamp(0.625rem, 0.3398058252rem + 1.213592233vw, 1.25rem);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#guide .guide-ttl .guide-icon {
  display: block;
  width: min(10vw, 40px);
}
#guide .guide-ttl .guide-ttl-parts {
  width: calc(98% - min(10vw, 40px));
  font-size: clamp(1.125rem, 1.0109223301rem + 0.4854368932vw, 1.375rem);
  font-weight: bold;
}
#guide .guide-list > li {
  margin-bottom: clamp(2.5rem, 1.9296116505rem + 2.427184466vw, 3.75rem);
}
#guide .guide-conts {
  padding: 0 4%;
}
#guide .guide-conts li a {
  display: block;
  position: relative;
  padding: clamp(0.625rem, 0.3398058252rem + 1.213592233vw, 1.25rem) clamp(1.25rem, 0.6796116505rem + 2.427184466vw, 2.5rem) clamp(0.625rem, 0.3398058252rem + 1.213592233vw, 1.25rem) clamp(0.625rem, 0.3398058252rem + 1.213592233vw, 1.25rem);
  border-bottom: 1px dashed #A9A9A9;
}
#guide .guide-conts li a:after {
  content: "";
  position: absolute;
  right: 4%;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  width: 8px;
  aspect-ratio: 1/1;
  border-right: 1px solid;
  border-top: 1px solid;
}

#faq .faq-inner {
  background: #D6E7F5;
  padding: clamp(1.25rem, 0.3944174757rem + 3.640776699vw, 3.125rem) 4%;
}
#faq .faq-list li {
  margin-bottom: min(4%, 20px);
  padding: clamp(0.9375rem, 0.7949029126rem + 0.6067961165vw, 1.25rem);
  background: #fff;
  border-radius: 10px;
}
#faq .faq-list li .faq-ttl {
  position: relative;
  color: #004680;
  font-size: clamp(1.125rem, 1.0109223301rem + 0.4854368932vw, 1.375rem);
  font-weight: bold;
}
#faq .faq-list li .faq-ttl::before {
  content: "Q.";
  padding-right: 5px;
  font-size: 130%;
  line-height: 0;
}
#faq .faq-list li .faq-ttl .faq-mark {
  position: absolute;
  right: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#faq .faq-list li .faq-ttl .faq-mark:before, #faq .faq-list li .faq-ttl .faq-mark:after {
  display: block;
  content: "";
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  height: 3px;
  background: #004680;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#faq .faq-list li .faq-ttl .faq-mark:before {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#faq .faq-list li .faq-ttl .faq-mark:after {
  -webkit-transform: translateY(-50%) rotate(90deg);
          transform: translateY(-50%) rotate(90deg);
}
#faq .faq-list li .faq-txt {
  margin-top: 10px;
  padding: 0 3%;
  font-size: clamp(0.875rem, 0.817961165rem + 0.2427184466vw, 1rem);
}
#faq .faq-list li.active .faq-ttl .faq-mark:after {
  -webkit-transform: translateY(-50%) rotate(0deg);
          transform: translateY(-50%) rotate(0deg);
}
#faq .faq-list li:not(:first-child) .faq-txt {
  display: none;
}

#voice {
  background: #EDF5FB;
  padding: clamp(1.25rem, 0.3944174757rem + 3.640776699vw, 3.125rem) 0;
}
#voice .ttl-top {
  margin-bottom: 15px;
}
#voice .voice-copy {
  margin-bottom: clamp(1.25rem, -0.1759708738rem + 6.067961165vw, 4.375rem);
  text-align: center;
  font-size: clamp(0.875rem, 0.7609223301rem + 0.4854368932vw, 1.125rem);
}
#voice .voice-list .voice-comnt {
  position: relative;
  margin-bottom: 30px;
  padding: clamp(1.25rem, 0.9648058252rem + 1.213592233vw, 1.875rem);
  background: #fff;
  border-radius: 10px;
}
#voice .voice-list .voice-comnt .voice-ttl {
  margin-bottom: 5px;
  color: #579ED7;
  font-size: clamp(1.125rem, 1.067961165rem + 0.2427184466vw, 1.25rem);
  font-weight: bold;
  line-height: 1.5;
}
#voice .voice-list .voice-comnt .voice-txt {
  font-size: clamp(0.875rem, 0.817961165rem + 0.2427184466vw, 1rem);
}
#voice .voice-list .voice-comnt .voice-txt .voice-mark {
  font-weight: bold;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #F3E600));
  background: linear-gradient(transparent 60%, #F3E600 60%);
}
#voice .voice-list .voice-comnt:after {
  display: block;
  content: "";
  position: absolute;
  left: calc(70px + 4%);
  bottom: -30px;
  width: 40px;
  height: 30px;
  background: #fff;
  clip-path: polygon(30% 0, 100% 0, 0 100%);
}
#voice .voice-list .voice-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#voice .voice-list .voice-user .voice-icon {
  width: 70px;
}
#voice .voice-list .voice-user .voice-name {
  width: calc(96% - 70px);
  font-size: clamp(0.8125rem, 0.7839805825rem + 0.1213592233vw, 0.875rem);
}

@media screen and (min-width: 767px) {
  .swiper-box {
    padding: 0 4%;
  }
  #mv .mv-wrap {
    height: min(60vw, 700px);
  }
  #mv .mv-wrap .swiper {
    height: 100%;
  }
  #mv .mv-wrap .swiper img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #mv .mv-wrap .mv-cont-wrap {
    top: 40%;
    width: min(50%, 660px);
  }
  #mv .mv-wrap .mv-cont .mv-maincopy {
    letter-spacing: 0.15rem;
    margin-bottom: 10px;
    line-height: 1.4;
  }
  #mv .mv-wrap .mv-cont .mv-copy {
    font-size: clamp(15px, 1.9vw, 17px);
    margin-bottom: 15px;
  }
  #mv .mv-wrap .mv-btn {
    bottom: 2rem;
    margin: 0;
  }
  #mv .mv-wrap .mv-btn a {
    width: min(50%, 600px);
  }
  #pickup:before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%, 0 100%);
  }
  #pickup .pickup-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #pickup .pickup-list .post-box {
    width: 48%;
  }
  #rank .rank-tab {
    margin-bottom: 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
  }
  #rank .rank-tab li {
    width: 19.5%;
    margin: 0 0.25%;
  }
  #rank .rank-tab li.active {
    border-radius: 10px 10px 0 0;
    padding-bottom: 5px;
  }
  #rank .rank-tab li:not(.active) {
    margin-bottom: 5px;
    border-radius: 0;
  }
  #rank .rank-tab li:hover {
    background: #004680;
    color: #fff;
    border-radius: 10px 10px 0 0;
  }
  #guide .guide-inner {
    height: 100%;
    overflow-y: inherit;
  }
  #guide .guide-conts {
    padding: 0;
  }
  #guide .guide-conts li a:hover {
    background: #f2f2f2;
  }
  #faq .faq-list li {
    cursor: pointer;
  }
}
@media screen and (min-width: 991px) {
  .swiper-box {
    padding: 0;
  }
  .swiper-box .swiper-button-next {
    right: -4%;
  }
  .swiper-box .swiper-button-prev {
    left: -4%;
  }
  #mv .mv-wrap .mv-cont-wrap {
    top: 50%;
  }
  #mv .mv-wrap .mv-cont .mv-copy {
    margin-bottom: 5%;
  }
  #mv .mv-wrap .mv-cont .satei-ai {
    margin: 0;
    padding-bottom: min(4%, 20px);
  }
  #mv .mv-wrap .mv-cont .satei-ai .sell-title {
    margin-bottom: min(3%, 15px);
    font-size: clamp(22px, 2.2vw, 26px);
  }
  #mv .mv-wrap .mv-cont .satei-ai .sell-title-inner {
    padding: 5px 0;
    padding-left: min(30%, 70px);
  }
  #mv .mv-wrap .mv-cont .satei-ai .sell-title-inner .sell-icon {
    width: min(25%, 60px);
  }
  #mv .mv-wrap .mv-cont .satei-ai .sell-copy {
    font-size: clamp(15px, 1.5vw, 18px);
  }
  #mv .mv-wrap .mv-cont .satei-ai .mainContents_input-wrap {
    padding: min(3%, 15px) min(6%, 40px) min(4%, 20px);
  }
  #mv .mv-wrap .mv-cont .satei-ai .mainContents_input-box .mainContents_label {
    font-size: 15px;
  }
  #mv .mv-wrap .mv-cont .satei-ai .mainContents_input-box select {
    font-size: 15px;
  }
  #mv .mv-wrap .mv-cont .satei-ai .sell-estimate-button__wrap .sell-button-area {
    height: min(12vw, 60px);
  }
  #rank .rank-conts {
    padding-left: 4%;
    padding-right: 4%;
  }
  #guide .guide-ttl {
    display: block;
    margin-bottom: 10px;
  }
  #guide .guide-ttl .guide-icon {
    margin: auto;
  }
  #guide .guide-ttl .guide-ttl-parts {
    width: 100%;
    text-align: center;
  }
  #guide .guide-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0;
  }
  #guide .guide-list > li {
    width: 30%;
  }
}
@media screen and (min-width: 1200px) {
  #voice .voice-slide {
    max-width: 1200px;
    margin: auto;
    padding: 0;
  }
  #recom .recom-wrap {
    max-width: 100%;
    padding: 0 6%;
  }
  #rank .rank-conts {
    padding-left: 0;
    padding-right: 0;
  }
  #rank .rank-conts .post-list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
}
@media screen and (min-width: 1320px) {
  #recom .recom-wrap {
    max-width: 1200px;
    padding: 0;
  }
}