@charset "utf-8";
/* CSS Document */
.fs-c-heading.fs-c-heading--page {
  display: none;
}
.main-inn {
  max-width: none;
  padding-top: 0;
  background: #fff;
}
.main {
  background: none;
  padding: 0;
}
.mv-image {
  margin-top: 0;
}
.fs-l-main {
  margin-top: 0;
}
.common-header {
  margin-bottom: 0;
}
.fs-l-main {
  max-width: 100%;
  padding: 0;
  font-family: 'BIZ UDPGothic', sans-serif;
  margin: 0;
}
.c_inner {
  max-width: 1416px;
  margin: 0 auto;
  position: relative;
}
.c_title {
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  color: #652D07;
  margin: 0 0 80px;
}
@media (max-width: 1416px) {
  .c_title {
    margin-bottom: 5.649717514124294vw;
  }
}
@media (max-width: 768px) {
  .c_title {
    margin-bottom: 10.666666666666668vw;
  }
}
.c_title .ttl-sub {
  font-size: 22px;
  font-weight: bold;
  position: relative;
}
@media (max-width: 1416px) {
  .c_title .ttl-sub {
    font-size: 1.5536723163841808vw;
  }
}
@media (max-width: 768px) {
  .c_title .ttl-sub {
    font-size: 4.8vw;
    text-align: center;
  }
}
.c_title .ttl-sub::after {
  position: absolute;
  content: "";
  width: 36px;
  height: 36px;
  background: url("../../images/features/ud_socks/kind_title-right.webp") no-repeat 0 0;
  background-size: 36px;
  right: -61px;
  top: -5px;
}
@media (max-width: 1416px) {
  .c_title .ttl-sub::after {
    width: 2.5423728813559325vw;
    height: 2.5423728813559325vw;
    background-size: 2.5423728813559325vw;
    right: -4.307909604519774vw;
    top: -0.3531073446327684vw;
  }
}
@media (max-width: 768px) {
  .c_title .ttl-sub::after {
    width: 4.8vw;
    height: 4.8vw;
    background-size: 4.8vw;
    right: -7.466666666666668vw;
    top: -0.5333333333333333vw;
  }
}
.c_title .ttl-sub::before {
  position: absolute;
  content: "";
  width: 36px;
  height: 36px;
  background: url("../../images/features/ud_socks/kind_title-left.webp") no-repeat 0 0;
  background-size: 36px;
  left: -61px;
  top: -5px;
}
@media (max-width: 1416px) {
  .c_title .ttl-sub::before {
    width: 2.5423728813559325vw;
    height: 2.5423728813559325vw;
    background-size: 2.5423728813559325vw;
    left: -4.307909604519774vw;
    top: -0.3531073446327684vw;
  }
}
@media (max-width: 768px) {
  .c_title .ttl-sub::before {
    width: 4.8vw;
    height: 4.8vw;
    background-size: 4.8vw;
    left: -7.466666666666668vw;
    top: -0.5333333333333333vw;
  }
}
.c_title .ttl-mail {
  font-size: 40px;
  font-weight: bold;
  margin-top: 30px;
}
@media (max-width: 1416px) {
  .c_title .ttl-mail {
    font-size: 2.824858757062147vw;
    margin-top: 2.11864406779661vw;
  }
}
@media (max-width: 768px) {
  .c_title .ttl-mail {
    font-size: 6.4vw;
    margin-top: 4vw;
    text-align: center;
    line-height: 1.5;
  }
}
.c_title .image {
  position: absolute;
}
/*--------------------------------------------------------
fadein(jq)
--------------------------------------------------------*/
.fadein {
  opacity : 0.0;
  transform : translate(0, 50px);
  transition : all 1s;
}
.fadein.scrollin {
  opacity : 1.0;
  transform : translate(0, 0);
}
.fadein02 {
  opacity : 0.0;
  transform : translate(0, 50px);
  transition : all 1s;
}
.fadein02.active {
  opacity : 1.0;
  transform : translate(0, 0);
}

#mv {
  background: url("../../images/features/ud_socks/mv_bg.webp") no-repeat center 0;
  background-size: cover;
}
@media (max-width: 768px) {
  #mv {
    background: url("../../images/features/ud_socks/mv_bg_sp.webp") no-repeat center 0;
    background-size: cover;
  }
}
#mv .inner {
  max-width: 1387px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
#mv .mv-image {
  margin: 0;
}
#mv .mv-animation {
  position: absolute;
  width: 21.91%;
  max-width: 304px;
  left: 13.39%;
  top: 310px;
}
@media (max-width: 1387px) {
  #mv .mv-animation {
    left: 14.372746935832732vw;
    top: 22.35039653929344vw;
  }
}
@media (max-width: 1217px) {
  #mv .mv-animation {
    top: 264px;
    left: 173px;
  }
}
@media (max-width: 768px) {
  #mv .mv-animation {
    width: 54.66%;
    left: 50%;        
    transform: translateX(-50%);
    top: 106.66666666666667vw;
  }  
}
#mv .mv-movie {
  position: absolute;
  width: 40.23%;
  left: 5%;
  bottom: -60px;
}
@media (max-width: 1387px) {
  #mv .mv-movie {
    bottom: -4.325883201153569vw;
    left: 5%;
  }
}
@media (max-width: 768px) {
  #mv .mv-movie {
    width: 92%;
    left: 50%;        
    transform: translateX(-50%);
    bottom: -14.133333333333335vw;
    text-align: center;
  }
}
#mv .mv-movie video.vid {
  width: 100%;
  max-width: 558px;
}
#anchor-menu {
  background-color: #FFF9F4;
  padding-top: 150px;
}
@media (max-width: 1416px) {
  #anchor-menu {
    padding-top: 7.296610169491525vw;
  }
}
@media (max-width: 768px) {
  #anchor-menu {
    padding-top: 26.666666666666668vw;
  }
}
#anchor-menu .anchor-menu__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0;
}
#anchor-menu .anchor-menu__list li {
  padding: 0;
  margin: 0 2.18%;
}
@media (max-width: 768px) {
  #anchor-menu .anchor-menu__list li {
    margin: 0 1.33% 2.666666666666667vw;
  }
}
#anchor-menu .anchor-menu__list li a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.3;
  height: 179px;
}
@media (max-width: 1172px) {
  #anchor-menu .anchor-menu__list li a {
    font-size: 1.877133105802048vw;
    height: 19.273037542662117vw;
  }
}
@media (max-width: 768px) {
  #anchor-menu .anchor-menu__list li a {
    font-size: 3.733333333333334vw;
    height: 29.599999999999998vw;
  }
}

#anchor-menu .anchor-menu__list li a:hover {
  color: #fff;
}
#anchor-menu .anchor-menu__list li:nth-child(1) {
  width: 11.86%;
  background: url("../../images/features/ud_socks/menu01_bg.webp") no-repeat center center;
  background-size: 100%;
}
@media (max-width: 768px) {
  #anchor-menu .anchor-menu__list li:nth-child(1) {
    width: 27.73333333333333vw;
  }
}
#anchor-menu .anchor-menu__list li:nth-child(2) {
  width: 12.71%;
  background: url("../../images/features/ud_socks/menu02_bg.webp") no-repeat center center;
  background-size: 100%;
} 
@media (max-width: 768px) {
  #anchor-menu .anchor-menu__list li:nth-child(2) {
    width: 29.599999999999998vw;
  }
}
#anchor-menu .anchor-menu__list li:nth-child(3) {
  width: 12.78%;
  background: url("../../images/features/ud_socks/menu03_bg.webp") no-repeat center center;
  background-size: 100%;
} 
@media (max-width: 768px) {
  #anchor-menu .anchor-menu__list li:nth-child(3) {
    width: 29.599999999999998vw;
  }
}
#anchor-menu .anchor-menu__list li:nth-child(4) {
  width: 13.13%;
  background: url("../../images/features/ud_socks/menu04_bg.webp") no-repeat center center;
  background-size: 100%;
} 
@media (max-width: 768px) {
  #anchor-menu .anchor-menu__list li:nth-child(4) {
    width: 30.666666666666664vw;
  }
}
#anchor-menu .anchor-menu__list li:nth-child(5) {
  width: 11.93%;
  background: url("../../images/features/ud_socks/menu05_bg.webp") no-repeat center center;
  background-size: 100%;
} 
@media (max-width: 768px) {
  #anchor-menu .anchor-menu__list li:nth-child(5) {
    width: 28.26666666666667vw;
  }
}


#concept {
  background-color: #FFF9F4;
  padding-top: 100px;
  padding-bottom: 35px;
}
@media (max-width: 1172px) {
  #concept {
    padding-top: 8.532423208191126vw;
  }
}
@media (max-width: 768px) {
  #concept {
    padding-top: 10.666666666666668vw;
    padding-bottom: 6.666666666666667vw;
  }
}
#concept .title {
  text-align: center;
  font-size: 38px;
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
}
@media (max-width: 1172px) {
  #concept .title {
    font-size: 3.242320819112628vw;
  }
}
@media (max-width: 768px) {
  #concept .title {
    font-size: 6.4vw;
    line-height: 1.8;
  }
}
#concept .catchcopy {
  text-align: center;
  font-size: 22px;
  line-height: 1.2;
  padding-top: 40px;
}
@media (max-width: 1172px) {
  #concept .catchcopy {
    font-size: 1.877133105802048vw;
    padding-top: 3.4129692832764507vw;
    line-height: 1.83;
  }
}
@media (max-width: 768px) {
  #concept .catchcopy {
    font-size: 4.8vw;
    padding-top: 8vw;
  }
}
#concept .text {
  text-align: center;
  font-size: 16px;
  line-height: 1.875;
  padding-top: 40px;
  margin: 0 0 20px 0;
  font-weight: bold;
}
@media (max-width: 1172px) {
  #concept .text {
    font-size: 1.3651877133105803vw;
    padding-top: 3.4129692832764507vw;
  }
}
@media (max-width: 768px) {
  #concept .text {
    font-size: 4.266666666666667vw;
    padding-top: 8vw;
  }
}
@media (max-width: 768px) {
  #concept .image {
    width: 96%;
    margin: 0 auto;
  }
}

.pp-link {
  background: url("../../images/features/ud_socks/pp-link_bg.webp") no-repeat center center;
  background-size: cover;
  padding: 80px 0 50px;
}
@media (max-width: 1416px) {
  .pp-link {
    padding: 5.649717514124294vw 0 3.531073446327684vw;
  }
}
@media (max-width: 768px) {
  .pp-link {
    padding: 13.333333333333334vw 4vw 10.666666666666668vw;
  }
}
.pp-link .socks {
  position: absolute;
  right: 0;
  top: -120px;
  width: 23.72%;
}
@media (max-width: 1416px) {
  .pp-link .socks {
    top: -9.533898305084746vw;
  }
}
@media (max-width: 768px) {
  .pp-link .socks {
    display: none;
  }
}
.pp-link .title {
  text-align: center;
  color: #652D07;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding-bottom: 30px;
  background: url("../../images/features/ud_socks/pp-link_line.webp") no-repeat 50% 100%;
  background-size: 23.72%;
  margin: 0 0 50px 0;
}
@media (max-width: 1416px) {
  .pp-link .title {
    font-size: 2.401129943502825vw;
    padding-bottom: 2.11864406779661vw;
    margin-bottom: 3.531073446327684vw;
  }
}
@media (max-width: 768px) {
  .pp-link .title {
    font-size: 5.333333333333334vw;
    padding-bottom: 4.266666666666667vw;
    background-size: 85.2%;
    margin-bottom: 10.666666666666668vw;
  }
}
.pp-link .pp-link-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .pp-link .pp-link-list {
    display: block;
  }
}
.pp-link .pp-link-list .pp-link-list__item {
  width: 30.9%;
  margin: 0 1.21% 30px;
  position: relative;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item {
    margin-bottom: 2.11864406779661vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item {
    width: 100%;
    margin: 0 0 2.666666666666667vw;
  }
}

.pp-link .pp-link-list .pp-link-list__item.new::after {
  position: absolute;
  content: "NEW";
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  width: 40px;
  background-color: #F57C7C;
  border-radius: 50px;
  left: 6px;
  top: -12px;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item.new::after {
    font-size: 0.847457627118644vw;
    line-height: 2.824858757062147vw;
    width: 2.824858757062147vw;
    border-radius: 3.531073446327684vw;
    left: 0.423728813559322vw;
    top: -0.847457627118644vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item.new::after {
    font-size: 3.2vw;
    line-height: 10.666666666666668vw;
    width: 10.666666666666668vw;
    border-radius: 50px;
    left: -2.4vw;
    top: -1.6vw;
  }
}
.pp-link .pp-link-list .pp-link-list__item a {
  display: flex;
  position: relative;
  border-radius: 8px;
  background-color: #fff;
  border: 2px dotted #FFD4A4;
  height: 150px;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item a {
    height: 10.310734463276836vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item a {
    border: 3px dotted #FFD4A4;
    height: auto;
  }
}
.pp-link .pp-link-list .pp-link-list__item a:hover {
  color: #C50619;
}
.pp-link .pp-link-list .pp-link-list__item a .text-area {
  width: 55.5%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item a .text-area {
    width: 63.4%;
    padding: 5.333333333333334vw 0 2.666666666666667vw;
  }
}
.pp-link .pp-link-list .pp-link-list__item a .text-area .uds-logo {
  width: 69.42%;
}
.pp-link .pp-link-list .pp-link-list__item a .text-area .p-name {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.55;
  margin-top: 15px;
  text-align: center;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item a .text-area .p-name {
    font-size: 1.2711864406779663vw;
    margin-top: 1.059322033898305vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item a .text-area .p-name {
    font-size: 4vw;
    margin-top: 3.4666666666666663vw;
  }
}
.pp-link .pp-link-list .pp-link-list__item a .bg-img {
  width: 44.5%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item a .bg-img {
    width: 36.6%;
  }
}
.pp-link .pp-link-list .pp-link-list__item.item01 a .bg-img {
  background: url("../../images/features/ud_socks/pp-link_organic-crew_bg.webp") no-repeat center center;
  background-size: cover;
}
.pp-link .pp-link-list .pp-link-list__item.item02 a .bg-img {
  background: url("../../images/features/ud_socks/pp-link_organic-hight_bg.webp") no-repeat center center;
  background-size: cover;
}
.pp-link .pp-link-list .pp-link-list__item.item03 a .bg-img {
  background: url("../../images/features/ud_socks/pp-link_lambswool-crew_bg.webp") no-repeat center center;
  background-size: cover;
}
.pp-link .pp-link-list .pp-link-list__item.item04 a .bg-img {
  background: url("../../images/features/ud_socks/pp-link_acrylic-hight_bg.webp") no-repeat center center;
  background-size: cover;
}
.pp-link .pp-link-list .pp-link-list__item.item05 a .bg-img {
  background: url("../../images/features/ud_socks/pp-link_acrylic-crew_bg.webp") no-repeat center center;
  background-size: cover;
}
.pp-link .pp-link-list .pp-link-list__item.item06 a .bg-img {
  background: url("../../images/features/ud_socks/pp-link_angora-room_bg.webp") no-repeat center center;
  background-size: cover;
}
.pp-link .pp-link-list .pp-link-list__item a .variation {
  position: absolute;
}
.pp-link .pp-link-list .pp-link-list__item.item01 a .variation {
  width: 42.6%;
  bottom: 20px;
  right: 13%;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item.item01 a .variation {
    bottom: 1.4124293785310735vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item.item01 a .variation {
    width: 43.4%;
    bottom: 4vw;
    right: 2%;
  }
}
.pp-link .pp-link-list .pp-link-list__item.item02 a .variation {
  width: 47.9%;
  bottom: 17px;
  right: 7.7%;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item.item02 a .variation {
    bottom: 1.2005649717514124vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item.item02 a .variation {
    width: 48.5%;
    bottom: 4.533333333333333vw;
    right: 0;
  }
}
.pp-link .pp-link-list .pp-link-list__item.item03 a .variation {
  width: 44.2%;
  bottom: 12px;
  right: 9.1%;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item.item03 a .variation {
    bottom: 0.847457627118644vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item.item03 a .variation {
    width: 44.9%;
    bottom: 2.666666666666667vw;
    right: 1.1%;
  }
}
.pp-link .pp-link-list .pp-link-list__item.item04 a .variation {
  width: 34%;
  bottom: 16px;
  right: 22.5%;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item.item04 a .variation {
    bottom: 1.6242937853107344vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item.item04 a .variation {
    width: 34%;
    bottom: 6vw;
    right: 16%;
  }
}
.pp-link .pp-link-list .pp-link-list__item.item05 a .variation {
  width: 34.9%;
  bottom: 26px;
  right: 18%;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item.item05 a .variation {
    bottom: 1.8361581920903955vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item.item05 a .variation {
    width: 33.5%;
    bottom: 6.666666666666667vw;
    right: 10%;
  }
}
.pp-link .pp-link-list .pp-link-list__item.item06 a .variation {
  width: 37.4%;
  bottom: 23px;
  right: 13.6%;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item.item06 a .variation {
    bottom: 1.6242937853107344vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item.item06 a .variation {
    width: 35.5%;
    bottom: 6.4vw;
    right: 11%;
  }
}


#kindness {
  background-color: #FEF6E2;
  padding: 180px 0 100px;
}
@media (max-width: 1416px) {
  #kindness {
    padding: 12.711864406779661vw 0 7.062146892655368vw;
  }
}
@media (max-width: 768px) {
  #kindness {
    padding: 13.333333333333334vw 0 0;
    overflow: hidden;
  }
}
#kindness .c_title .image {
  right: 16.17%;
  top: 50%;
  transform: translateY(-50%);
  width: 9.39%;
}
@media (max-width: 768px) {
  #kindness .c_title .image {
    right: 7.2%;
    top: auto;
    bottom: -1.3333333333333335vw;
    transform: translateY(0);
    width: 16.5%;
  }
}
#kindness .kindness-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 768px) {
  #kindness .kindness-list {
    display: block;
  }
}
#kindness .kindness-list .kidness-list__item {
  width: 50%;
  margin-bottom: 100px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item {
    margin-bottom: 7.062146892655368vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item {
    width: 92%;
    margin: 0 auto 20vw;
  }
}
#kindness .kindness-list .kidness-list__item.kind01 {
  margin-bottom: 0;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item.kind01 {
    margin-bottom: 7.062146892655368vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind01 {
    margin: 0 auto;
  }
}
#kindness .kindness-list .kidness-list__item.kind02 {
  margin-bottom: 0;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item.kind02 {
    margin-bottom: 7.062146892655368vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind02 {
    margin: 0 auto;
  }
}
#kindness .kindness-list .kidness-list__item .number {
  position: absolute;
  width: 24.15%;
  font-size: 15px;
  text-align: center;
  height: 159px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: url("../../images/features/ud_socks/kind_no-bg.webp") no-repeat center center;
  background-size: cover;
  left: 30px;
  top: -50px;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item .number {
    font-size: 1.059322033898305vw;
    height: 11.228813559322035vw;
    left: 2.11864406779661vw;
    top: -3.531073446327684vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item .number {
    width: 28.11%;
    font-size: 2.1333333333333333vw;
    height: 26.666666666666668vw;
    left: -2.3%;
    top: -10.666666666666668vw;
  }
}
#kindness .kindness-list .kidness-list__item .number span {
  font-size: 50px;
  font-weight: bold;
  line-height: 1.0;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item .number span {
    font-size: 3.531073446327684vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item .number span {
    font-size: 7.466666666666668vw;
  }
}
#kindness .kindness-list .kidness-list__item .photo {
  width: 82%;
  margin-bottom: 30px;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item .photo {
    margin-bottom: 2.11864406779661vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item .photo {
    width: 100%;
    margin-bottom: 5.333333333333334vw;
  }
}
#kindness .kindness-list .kidness-list__item .text-area {
  position: relative;
  padding-top: 20px;
  padding-bottom: 60px;
  margin-bottom: 50px;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item .text-area {
    padding-top: 1.4124293785310735vw;
    padding-bottom: 4.23728813559322vw;
    margin-bottom: 3.531073446327684vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item .text-area {
    padding-top: 10.666666666666668vw;
    padding-bottom: 13.333333333333334vw;
    margin-bottom: 17.333333333333336vw;
  } 
}
#kindness .kindness-list .kidness-list__item.kind01 .text-area {
  width: 91.8%;
  background: url("../../images/features/ud_socks/kind_bobble01.webp") no-repeat 0 0;
  background-size: 100%;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind01 .text-area {
    width: 100%;
    background: url("../../images/features/ud_socks/kind_bobble01_sp.webp") no-repeat 0 0;
    background-size: 100%;
    margin-bottom: 21.333333333333336vw;
  }
}
#kindness .kindness-list .kidness-list__item.kind02 .text-area {
  width: 93.9%;
  background: url("../../images/features/ud_socks/kind_bobble02.webp") no-repeat 0 0;
  background-size: 100%;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind02 .text-area {
    width: 100%;
    background: url("../../images/features/ud_socks/kind_bobble02_sp.webp") no-repeat 0 0;
    background-size: 100%;
    padding-bottom: 18.666666666666668vw;
    margin-bottom: 6.666666666666667vw;
  }
}
#kindness .kindness-list .kidness-list__item.kind03 .text-area {
  width: 91.8%;
  background: url("../../images/features/ud_socks/kind_bobble03.webp") no-repeat 0 0;
  background-size: 100%;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind03 .text-area {
    width: 100%;
    background: url("../../images/features/ud_socks/kind_bobble03_sp.webp") no-repeat 0 0;
    background-size: 100%;
  }
}
#kindness .kindness-list .kidness-list__item.kind04 .text-area {
  width: 93.9%;
  background: url("../../images/features/ud_socks/kind_bobble04.webp") no-repeat 0 0;
  background-size: 100%;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind04 .text-area {
    width: 100%;
    background: url("../../images/features/ud_socks/kind_bobble04_sp.webp") no-repeat 0 0;
    background-size: 100%;
  }
}
#kindness .kindness-list .kidness-list__item.kind05 .text-area {
  width: 91.8%;
  background: url("../../images/features/ud_socks/kind_bobble05.webp") no-repeat 0 0;
  background-size: 100%;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind05 .text-area {
    width: 100%;
    background: url("../../images/features/ud_socks/kind_bobble05_sp.webp") no-repeat 0 0;
    background-size: 100%;
  }
}
#kindness .kindness-list .kidness-list__item.kind06 .text-area {
  width: 93.9%;
  background: url("../../images/features/ud_socks/kind_bobble06.webp") no-repeat 0 0;
  background-size: 100%;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind06 .text-area {
    width: 100%;
    background: url("../../images/features/ud_socks/kind_bobble06_sp.webp") no-repeat 0 0;
    background-size: 100%;
    padding-bottom: 18.666666666666668vw;
  }
}
#kindness .kindness-list .kidness-list__item .text-area .subtitle {
  text-align: center;
  color: #EC1818;
  font-size: 18px;
  font-weight: bold;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item .text-area .subtitle {
    font-size: 1.2711864406779663vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item .text-area .subtitle {
    font-size: 4.8vw;
  }
}
#kindness .kindness-list .kidness-list__item .text-area .mainttitle {
  text-align: center;
  color: #EC1818;
  font-size: 25px;
  font-weight: bold;
  margin: 5px 0 10px 0;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item .text-area .mainttitle {
    font-size: 1.765536723163842vw;
    margin: 0.3531073446327684vw 0 0.7062146892655368vw 0;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item .text-area .mainttitle {
    font-size: 5.866666666666666vw;
    margin: 1.3333333333333335vw 0; 
  }
}
#kindness .kindness-list .kidness-list__item .text-area .text {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.875;
  width: 85.69%;
  margin: 0 auto 10px;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item .text-area .text {
    font-size: 1.1299435028248588vw;
    margin-bottom: 0.7062146892655368vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item .text-area .text {
    font-size: 4.266666666666667vw;
    width: 75.6%;
    line-height: 1.8;
    margin-bottom: 0;
  }
}
#kindness .kindness-list .kidness-list__item .text-area .point-right {
  text-align: right;
  width: 85.69%;
  margin: 0 auto;
  font-size: 14px;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item .text-area .point-right {
    font-size: 0.9887005649717515vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item .text-area .point-right {
    text-align: center;
    font-size: 3.733333333333334vw;
  }
}
#kindness .kindness-list .kidness-list__item .text-area .point-left {
  width: 85.69%;
  margin: 0 auto;
  font-size: 14px;
}
@media (max-width: 1416px) {
  #kindness .kindness-list .kidness-list__item .text-area .point-left {
    font-size: 0.9887005649717515vw;
  }
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item .text-area .point-left {
    text-align: center;
    font-size: 3.733333333333334vw;
  }
}
#kindness .kindness-list .kidness-list__item .text-area .socks {
  position: absolute;
}
#kindness .kindness-list .kidness-list__item.kind01 .socks {
  width: 14.9%;
  left: 14%;
  bottom: -75px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind01 .socks {
    width: 21.73%;
    left: 34.78%;
    bottom: -9.866666666666667vw;
  }
}
#kindness .kindness-list .kidness-list__item.kind02 .socks {
  width: 12%;
  right: 15.6%;
  bottom: -55px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind02 .socks {
    width: 16.23%;
    right: 10.43%;
    bottom: 2.666666666666667vw;
  }
}
#kindness .kindness-list .kidness-list__item.kind03 .socks {
  width: 13.3%;
  right: 15.6%;
  bottom: -45px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind03 .socks {
    width: 19.42%;
    right: 41.73%;
    bottom: -6.666666666666667vw;
  }
}
#kindness .kindness-list .kidness-list__item.kind04 .socks {
  width: 13.3%;
  right: 15.6%;
  bottom: -45px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind04 .socks {
    width: 17.1%;
    right: 40.86%;
    bottom: -8vw;
  }
}
#kindness .kindness-list .kidness-list__item.kind05 .socks {
  width: 14.9%;
  left: 14%;
  bottom: -75px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind05 .socks {
    width: 20%;
    left: 37.68%;
    bottom: -6.666666666666667vw;
  }
}
#kindness .kindness-list .kidness-list__item.kind06 .socks {
  width: 12%;
  right: 15.6%;
  bottom: -35px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .kidness-list__item.kind06 .socks {
    width: 17.97%;
    right: 40.86%;
    bottom: -8vw;
  }
}
#kindness .kindness-list .staff-voice {
  width: 100%;
  margin-top: auto;
}
#kindness .kindness-list .staff-voice .inner {
  width: 77.68%;
  margin: 0 auto;
  background-color: #FFE7C4;
  border-radius: 10px;
  position: relative;
  padding: 25px 40px 25px 60px;
  font-size: 16px;
  line-height: 1.875;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice .inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 6.666666666666667vw 5.333333333333334vw 5.333333333333334vw;
    font-size: 4.266666666666667vw;
    line-height: 1.875;
  }
}
#kindness .kindness-list .staff-voice .voice-tag {
  position: absolute;
  left: 0;
  top: -25px;
  width: 131px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice .voice-tag {
    position: absolute;
    left: 0;
    top: -4.266666666666667vw;
    width: 35.65%;
  }
}
#kindness .kindness-list .staff-voice .voice-text {
  margin: 0;
}
#kindness .kindness-list .staff-voice .staff-image {
  position: absolute;
  bottom: 0;
}
#kindness .kindness-list .staff-voice.staff01 {
  margin-bottom: 100px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice.staff01 {
    margin-bottom: 22.666666666666664vw;
  }
}
#kindness .kindness-list .staff-voice.staff01 .inner {
  width: 47.24%;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice.staff01 .inner {
    width: 92%;
  }
}
#kindness .kindness-list .staff-voice.staff03 .inner {
  padding: 25px 60px 25px 40px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice.staff03 .inner {
    padding: 6.666666666666667vw 5.333333333333334vw 5.333333333333334vw;
  }
}
#kindness .kindness-list .staff-voice.staff05 .inner {
  padding: 25px 50px 25px 30px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice.staff05 .inner {
    padding: 6.666666666666667vw 5.333333333333334vw 5.333333333333334vw;
  }
}
#kindness .kindness-list .staff-voice.staff01 .staff-image {
  width: 91px;
  left: -44px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice.staff01 .staff-image {
    width: 21.15%;
    left: auto;
    right: 0;
    bottom: -10.666666666666668vw;
  }
}
#kindness .kindness-list .staff-voice.staff02 .staff-image {
  width: 91px;
  left: -44px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice.staff02 .staff-image {
    width: 17.39%;
    left: auto;
    right: -4%;
    bottom: -7.733333333333333vw;
  }
}
#kindness .kindness-list .staff-voice.staff03 .staff-image {
  width: 85px;
  right: -44px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice.staff03 .staff-image {
    width: 19.71%;
    right: -4%;
    bottom: -9.066666666666666vw;
  }
}
#kindness .kindness-list .staff-voice.staff04 .staff-image {
  width: 94px;
  left: -44px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice.staff04 .staff-image {
    width: 21.73%;
    left: auto;
    right: -7.53%;
    bottom: -4.8vw;
  }
}
#kindness .kindness-list .staff-voice.staff05 .staff-image {
  width: 75px;
  right: -44px;
}
@media (max-width: 768px) {
  #kindness .kindness-list .staff-voice.staff05 .staff-image {
    width: 17.39%;
    right: -1.44%;
    bottom: -5.866666666666666vw;
  }
}


#movie {
  padding: 120px 0 145px;
}
@media (max-width: 768px) {
  #movie {
    padding: 14.133333333333335vw 0 0;
  }
}
#movie .c_title .image {
  left: 23.23%;
  top: 50%;
  transform: translateY(-50%);
  width: 10.8%;
}
@media (max-width: 768px) {
  #movie .c_title {
    margin-bottom: 5.333333333333334vw;
  }
  #movie .c_title .image {
    position: relative;
    left: auto;
    top: auto;
    transform: translateY(0);
    width: 37.39%;
  }
}
#movie .vid_contents {
  width: 92%;
  text-align: center;
  margin: 0 auto 90px;
}
@media (max-width: 768px) {
  #movie .vid_contents {
    margin-bottom: 13.333333333333334vw;
  }
}
#movie video.vid_main {
  width: 100%;
  max-width: 812px;
}
#movie .subttl {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  color: #652D07;
  margin-bottom: 70px;
}
@media (max-width: 768px) {
  #movie .subttl {
    font-size: 6.933333333333333vw;
    margin-bottom: 8vw;
  }
}
#movie .subttl img {
  width: 40px;
  margin-right: 10px;
}
@media (max-width: 768px) {
  #movie .subttl img {
    width: 10.666666666666668vw;
    margin-right: 4vw;
  }
}
#movie .youtube-list {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  #movie .youtube-list {
    display: block;
  }
}
#movie .youtube-list .youtube-list__item {
  max-width: 560px;
  width: 39.54%;
  margin: 0 2.1%;
}
@media (max-width: 768px) {
  #movie .youtube-list .youtube-list__item {
    width: 92%;
    margin: 0 auto 12vw;
  }
}
#movie .youtube-list .youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
#movie .youtube-list .youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#movie .youtube-ttl {
  text-align: center;
  margin-top: 30px;
  font-size: 20px;
  font-weight: bold;
}
@media (max-width: 768px) {
  #movie .youtube-ttl {
    margin-top: 4.8vw;
    font-size: 4.8vw;
    line-height: 1.6;
  }
}


#review {
  background: url("../../images/features/ud_socks/review_bg.webp");
  padding: 150px 0 120px;
}
@media (max-width: 768px) {
  #review {
    padding: 14.666666666666666vw 0 120px;
  }
}
@media (max-width: 768px) {
  #review .c_title .ttl-sub::after {
    width: 8vw;
    height: 8vw;
    background-size: 8vw;
    right: -16vw;
    top: 4.8vw;
  }
  #review .c_title .ttl-sub::before {
    width: 8vw;
    height: 8vw;
    background-size: 8vw;
    left: -16vw;
    top: 4.8vw;
  }
}
#review .c_title .image {
  right: 19.63%;
  top: 50%;
  transform: translateY(-50%);
  width: 11.65%;
}
@media (max-width: 768px) {
  #review .c_title {
    margin-bottom: 0;
  }
  #review .c_title .image {
    position: relative;
    right: auto;
    top: auto;
    transform: translateY(0);
    width: 37.39%;
  }
}
#review .ud_socks-review-list {
  width: 78.38%;
  margin: 0 auto 40px;
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  #review .ud_socks-review-list {
    width: 82%;
    margin-bottom: 0;
    display: block;
  }
}
#review .ud_socks-review-list .ud_socks-review-list__item {
  width: 48.19%;
  margin-right: 3.62%;
  margin-bottom: 40px;
  background-color: #fff;
  border-right: 1px solid #DCDBDB;
  border-bottom: 1px solid #DCDBDB;
  padding: 30px;
  display: flex;
  flex-flow: column;
}
@media (max-width: 768px) {
  #review .ud_socks-review-list .ud_socks-review-list__item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 9.333333333333334vw;
    padding: 8vw 5.333333333333334vw;
  }
}
#review .ud_socks-review-list .ud_socks-review-list__item:nth-child(2n) {
  margin-right: 0;
}
#review .ud_socks-review-list .ud_socks-review-list__item .text {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  #review .ud_socks-review-list .ud_socks-review-list__item .text {
    font-size: 4.8vw;
    margin-bottom: 6.666666666666667vw;
  }
}
#review .ud_socks-review-list .ud_socks-review-list__item .name {
  font-size: 16px;
  margin-top: auto;
}
@media (max-width: 768px) {
  #review .ud_socks-review-list .ud_socks-review-list__item .name {
    font-size: 4.266666666666667vw;
    text-align: center;
  }
}
#review .ud_socks-review-list .ud_socks-review-list__item .star {
  font-size: 22px;
  color: #FFDF02;
  margin-top: 10px;
}
@media (max-width: 768px) {
  #review .ud_socks-review-list .ud_socks-review-list__item .star {
    font-size: 5.866666666666666vw;
    margin-top: 1.866666666666667vw;
    text-align: center;
  }
}
#review .button {
  width: 31%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  #review .button {
    width: 92%;
  }
}
#review .button a {
  display: block;
  background: url("../../images/features/ud_socks/arrow01.webp") no-repeat 16px 50% #C90D0D;
  background-size: 7px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 66px;
}
@media (max-width: 768px) {
  #review .button a {
    font-size: 4.8vw;
    line-height: 17.599999999999998vw;
  }
}


#variation {
  background-color: #FCEFCD;
  padding: 120px 0;
}
@media (max-width: 768px) {
  #variation {
    padding: 18.666666666666668vw 0 10.666666666666668vw;
  }
}
#variation .c_title .image {
  left: 26.12%;
  top: 50%;
  transform: translateY(-50%);
  width: 11.37%;
}
@media (max-width: 768px) {
  #variation .c_title {
    margin-bottom: 5.333333333333334vw;
  }
  #variation .c_title .image {
    position: relative;
    left: auto;
    top: auto;
    transform: translateY(0);
    width: 37.39%;
  }
}
#variation .variation-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  #variation .variation-list {
    display: block;
  }
}
#variation .variation-list .variation-list__item {
  width: 46.82%;
  margin: 0 1.59% 45px;
  background-color: #fff;
  box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  position: relative;
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item {
    width: 92%;
    margin: 0 auto 8vw;
  }
}
#variation .variation-list .variation-list__item.new::after {
  position: absolute;
  content: "NEW";
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  width: 40px;
  background-color: #F57C7C;
  border-radius: 50px;
  left: 6px;
  top: -12px;
}
@media (max-width: 1416px) {
  #variation .variation-list .variation-list__item.new::after {
    font-size: 0.847457627118644vw;
    line-height: 2.824858757062147vw;
    width: 2.824858757062147vw;
    border-radius: 3.531073446327684vw;
    left: 0.423728813559322vw;
    top: -0.847457627118644vw;
  }
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item.new::after {
    font-size: 3.2vw;
    line-height: 10.666666666666668vw;
    width: 10.666666666666668vw;
    border-radius: 50px;
    left: -2.4vw;
    top: -1.6vw;
  }
}
#variation .variation-list .variation-list__item a {
  display: flex;
  flex-flow: row-reverse;
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item a {
    display: block;
  }
}
#variation .variation-list .variation-list__item a .photo {
  width: 47.2%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
#variation .variation-list .variation-list__item.item01 a .photo {
  background: url("../../images/features/ud_socks/variation_organic-crew2.jpg") no-repeat center 0;
  background-size: cover;
}
#variation .variation-list .variation-list__item.item02 a .photo {
  background: url("../../images/features/ud_socks/variation_organic-hight.webp") no-repeat center 0;
  background-size: cover;
}
#variation .variation-list .variation-list__item.item03 a .photo {
  background: url("../../images/features/ud_socks/variation_lambswool-crew.webp") no-repeat center 0;
  background-size: cover;
}
#variation .variation-list .variation-list__item.item04 a .photo {
  background: url("../../images/features/ud_socks/variation_organic-hight.jpg") no-repeat center 0;
  background-size: cover;
}
#variation .variation-list .variation-list__item.item05 a .photo {
  background: url("../../images/features/ud_socks/variation_acrylic-crew.webp") no-repeat center bottom;
  background-size: cover;
}
#variation .variation-list .variation-list__item.item06 a .photo {
  background: url("../../images/features/ud_socks/variation_angora-room.webp") no-repeat center bottom;
  background-size: cover;
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item a .photo {
    background: none;
    width: 100%;
  }
}
#variation .variation-list .variation-list__item a .photo img {
  display: none;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 100%;
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item a .photo img {    
    display: block;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 0;
    border-top-left-radius: 8px;
  }
}
#variation .variation-list .variation-list__item a .text-area {
  width: 52.8%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0 30px;
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item a .text-area {
    width: 100%;
    padding: 6.666666666666667vw 3.2vw 11.733333333333333vw;
  }
}
#variation .variation-list .variation-list__item a .text-area .p-logo {
  width: 48%;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item a .text-area .p-logo {
    width: 48.69%;
    margin-bottom: 5.333333333333334vw;
  }
}
#variation .variation-list .variation-list__item a .text-area .p-name {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item a .text-area .p-name {
    font-size: 6.666666666666667vw;
  }
}
#variation .variation-list .variation-list__item a .text-area .p-text {
  font-size: 18px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item a .text-area .p-text {
    font-size: 4.8vw;
    margin-bottom: 6.666666666666667vw;
  }
}
#variation .variation-list .variation-list__item a .text-area .button {
  width: 51.7%;
  background-color: #C90D0D;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 42px;
}
@media (max-width: 768px) {
  #variation .variation-list .variation-list__item a .text-area .button {
    width: 52.46%;
    font-size: 4.266666666666667vw;
    line-height: 11.200000000000001vw;
  }
}


#gift {
  background: url("../../images/features/ud_socks/gift_bg.webp") no-repeat 0 0;
  background-size: cover;
  padding: 120px 0;
}
@media (max-width: 768px) {
  #gift {
    background: url("../../images/features/ud_socks/gift_bg_sp.webp") no-repeat 0 0;
    background-size: cover;
    padding: 22.666666666666664vw 0;
  }
} 
#gift .gift-box {
  width: 60.38%;
  margin: 0 auto;
  background-color: #E6ECBC;
  position: relative;
  display: flex;
}
@media (max-width: 768px) { 
  #gift .gift-box {
    width: 92%;
    margin: 0 auto;
    display: block;
  }
}
#gift .gift-box .text-area {
  width: 60.7%;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 45px 0 30px;
}
@media (max-width: 768px) {
  #gift .gift-box .text-area {
    width: 100%;
    padding: 16vw 0 10.666666666666668vw;
  }
}
#gift .gift-box .text-area .subtitle {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  #gift .gift-box .text-area .subtitle {
    font-size: 5.866666666666666vw;
    margin-bottom: 5.333333333333334vw;
  }
}
#gift .gift-box .text-area .maintitle {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  #gift .gift-box .text-area .maintitle {
    font-size: 8.533333333333333vw;
    margin-bottom: 5.333333333333334vw;
    text-align: center;
  }
}
#gift .gift-box .text-area .text {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.8;
  text-align: center;
  margin: 0;
}
@media (max-width: 768px) {
  #gift .gift-box .text-area .text {
    font-size: 4.8vw;
  }
}
#gift .gift-box .image {
  width: 39.3%;
  background-color: #D1BB82;
  padding: 18px 30px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  #gift .gift-box .image {
    width: 100%;
    padding: 4.8vw 8vw;
  }
}
#gift .gift-box .left {
  position: absolute;
  left: 0;
  top: 0;
  width: 9.25%;
}
@media (max-width: 768px) {
  #gift .gift-box .left { 
    width: 21.066666666666666vw;
  }
}
#gift .gift-box .right {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9.25%;
}
@media (max-width: 768px) {
  #gift .gift-box .right { 
    width: 21.066666666666666vw;
  }
}


#color {
  padding: 120px 0 20px;
}
@media (max-width: 768px) {
  #color {
    padding: 14.666666666666666vw 0 0;
  }
}
#color .c_title .image {
  right: 21.8%;
  top: 50%;
  transform: translateY(-50%);
  width: 11.01%;
}
@media (max-width: 768px) {
  #color .c_title .image {
    position: relative;
    right: auto;
    top: auto;
    transform: translateY(0);
    width: 37.39%;
  }
}
#color .clor-list__block {
  margin-bottom: 100px;
}
@media (max-width: 768px) {
  #color .clor-list__block {
    width: 91%;
    margin: 0 auto 10.666666666666668vw;
  }
}
#color .clor-list__block .p-logo {
  width: 18.14%;
  max-width: 257px;
  margin: 0 auto 20px;
}
@media (max-width: 768px) {
  #color .clor-list__block .p-logo {
    width: 68.53%;
    max-width: 257px;
    margin-bottom: 5.333333333333334vw;
  }
}
#color .clor-list__block .accordion-btn {
  font-size: 28px;
  text-align: center;
}
@media (max-width: 768px) {
  #color .clor-list__block .accordion-btn {
    font-size: 4.8vw;
    text-align: left;
    padding: 4vw 0 4vw 20vw;
    border: 1px dashed #C90D0D;
    position: relative;
  }
  #color .clor-list__block .accordion-btn span {
    display: block;
  }
  #color .clor-list__block .accordion-btn.list01 {
    background: url("../../images/features/ud_socks/organic-crew_mgray.webp") no-repeat 3% 50%;
    background-size: 15%;
  }
  #color .clor-list__block .accordion-btn.list02 {
    background: url("../../images/features/ud_socks/organic-hight_tomato.webp") no-repeat 3% 50%;
    background-size: 18%;
  }
  #color .clor-list__block .accordion-btn.list03 {
    background: url("../../images/features/ud_socks/lambswool_red.webp") no-repeat 3% 50%;
    background-size: 16%;
  }
  #color .clor-list__block .accordion-btn.list04 {
    background: url("../../images/features/ud_socks/acrylic-hight_charcoal.webp") no-repeat 3% 50%;
    background-size: 16%;
  }
  #color .clor-list__block .accordion-btn.list05 {
    background: url("../../images/features/ud_socks/acrylic-crew_winered.webp") no-repeat 3% 50%;
    background-size: 16%;
  }
  #color .clor-list__block .accordion-btn.list06 {
    background: url("../../images/features/ud_socks/angora-room_hpink.webp") no-repeat 3% 50%;
    background-size: 16%;
  }
  #color .accordion-btn::after{
    position: absolute;
    content: '▼';
    color: #C90D0D;
    font-size: 14px;
    right: 12px;
    bottom: 8px;
  } 
  #color .accordion-btn::before{
    position: absolute;
    content: 'OPEN';
    color: #C90D0D;
    font-size: 13px;
    right: 32px;
    bottom: 10px;
    font-weight: bold;
  }
  #color .accordion-btn.open::after{
      content: '▲';
      bottom: 8px;
  }
  #color .accordion-btn.open::before{
    content: 'CLOSE';
  }
}
#color .clor-list__block .accordion-content {
}
#color .socks-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px 0 10px;
}
@media (max-width: 768px) {
  #color .socks-list {
    justify-content: flex-start;
    padding: 10.666666666666668vw 3.2vw 4vw;
  }
}
#color .socks-list li {
  width: 16.66%;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  #color .socks-list li {
    width: 45.17%;
    margin-right: 9.66%;
    margin-bottom: 9.333333333333334vw;
  }
  #color .socks-list li:nth-child(2n) {
    margin-right: 0;
  }
}
#color .socks-list li span {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}
@media (max-width: 768px) {
  #color .socks-list li span {
    margin-top: 5.333333333333334vw;
    font-size: 3.733333333333334vw;
  }
}

#color .socks-list.list01 {
  width: 71.68%;
  margin: 0 auto;
}
#color .socks-list.list01 li {
  width: 14.2%
}
@media (max-width: 768px) {
  #color .socks-list.list01 {
    width: 100%;
  }
  #color .socks-list.list01 li {
    width: 45.17%;
  }
}
#color .socks-list.list02 {
  width: 61.44%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  #color .socks-list.list02 {
    width: 100%;
  }
}
#color .socks-list.list03 {
  width: 100%;
  margin: 0 auto;
}
#color .socks-list.list03 li {
  width: 10%;
}
@media (max-width: 768px) {
  #color .socks-list.list03 li {
    width: 45.17%;
  }
}
#color .socks-list.list05 {
  width: 71.68%;
  margin: 0 auto;
}
#color .socks-list.list05 li {
  width: 14.2%
}
@media (max-width: 768px) {
  #color .socks-list.list05 {
    width: 100%;
  }
  #color .socks-list.list05 li {
    width: 45.17%;
  }
}
#color .socks-list.list06 {
  width: 61.44%;
  margin: 0 auto;
}
@media (max-width: 768px) {
  #color .socks-list.list06 {
    width: 100%;
  }
}
#color .button {
  width: 38.6%;
  max-width: 547px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  #color .button {
    width: 85.6%;
  }
}
#color .button a {
  height: 88px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: #FCEFCD;
  font-size: 24px;
  font-weight: bold;
  background: url("../../images/features/ud_socks/arrow01.webp") no-repeat 16px 50% #C90D0D;
  background-size: 7px;
  border-radius: 10px;
  text-align: center;
}
@media (max-width: 768px) {
  #color .button a {
    height: 18.666666666666668vw;
    font-size: 3.733333333333334vw;
  }
}
#color .button a span {
  color: #fff;
  font-size: 20px;
}
@media (max-width: 768px) {
  #color .button a span {
    font-size: 4.8vw;
  }
}
#color .button a:hover {
  opacity: .6;
} 

a.no-click_a {
  pointer-events: none;
  cursor: default;
}
#variation .variation-list .variation-list__item a.no-click_a .text-area .p-text {
  visibility: hidden;
  position:relative;
  font-size: 14px;
}
#variation .variation-list .variation-list__item a.no-click_a .text-area .p-text::before {
  content:"COMMING SOON \A 11月中旬入荷予定";
  white-space: pre;
  visibility: visible;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -41%);
  -webkit-transform: translate(-50%, -41%);
  -ms-transform: translate(-50%, -41%);
  color: #C45E5E;
  font-weight: bold;
  font-size: 1.8rem;
}
#variation .variation-list .variation-list__item a.no-click_a .text-area .button {
  display: none;
  
}

#variation .variation-list .variation-list__item a.no-click_a .text-area .p-text::before {
  content:"COMING SOON \A 11月中旬入荷予定";
  white-space: pre;
  visibility: visible;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -41%);
  -webkit-transform: translate(-50%, -41%);
  -ms-transform: translate(-50%, -41%);
  color: #C45E5E;
  font-weight: bold;
  font-size: 1.8rem;
}
.pp-link .pp-link-list .pp-link-list__item a.no-click_a .text-area .p-name {
  margin-top: 5px;
  
}
.pp-link .pp-link-list .pp-link-list__item a.no-click_a .text-area .p-name::after {
  content:"COMING SOON";
  white-space: pre;
  visibility: visible;
  color: #C45E5E;
  display: block;
  text-align: center;
}
@media (max-width: 1416px) {
  .pp-link .pp-link-list .pp-link-list__item a.no-click_a .text-area .p-name {
    margin-top: 0.50vw;
  }
}
@media (max-width: 768px) {
  .pp-link .pp-link-list .pp-link-list__item a.no-click_a .text-area .p-name {
    margin-top: 1.4666666666666663vw;
  }
}

.mv-movie.youtube,
.vid_contents.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 590px;
}
.mv-movie.youtube iframe,
.vid_contents.youtube iframe {
  width: 100%;
  height: 100%;
}