@charset "UTF-8";
html {
  font-size: 62.5%;
  width: 100%;
}

body {
  font-family: "ヒラギノ角ゴシック", "游ゴシック", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgb(71, 70, 69);
  background-color: #fff;
  margin: 0;
  letter-spacing: normal;
}

a {
  color: rgb(177, 0, 35);
  font-weight: 400;
  text-decoration: none;
}

img {
  width: 100%;
  vertical-align: bottom;
}

h1 {
  font-family: "ヒラギノ角ゴシック", sans-serif;
  font-size: 5rem;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.7rem;
}
@media (max-width: 960px) {
  h1 {
    font-size: 2.6rem;
    letter-spacing: 0.1rem;
    font-weight: 700;
  }
}

h2 {
  font-family: "凸版文久ゴシック", sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  margin: 0;
  line-height: 5rem;
  left: 10rem;
}
@media (max-width: 960px) {
  h2 {
    font-size: 1.6rem;
    line-height: 3rem;
  }
}

h3 {
  font-family: "ヒラギノ角ゴシック", sans-serif;
  font-size: 3.5rem;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 960px) {
  h3 {
    font-size: 1.8rem;
  }
}

h4 {
  font-family: "ヒラギノ角ゴシック", sans-serif;
  font-size: 3rem;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 960px) {
  h4 {
    font-size: 1.6rem;
  }
}

h5 {
  font-family: "凸版文久ゴシック", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 960px) {
  h5 {
    font-size: 1.2rem;
  }
}

h6 {
  font-family: "凸版文久ゴシック", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 960px) {
  h6 {
    font-size: 0.8rem;
  }
}

p {
  font-family: "游ゴシック体", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 960px) {
  p {
    font-size: 0.8rem;
  }
}

.sp {
  display: none;
}
@media (max-width: 960px) {
  .sp {
    display: inline;
  }
}

.max-w {
  max-width: 1280px;
  margin: auto;
}
@media (max-width: 960px) {
  .max-w {
    max-width: 375px;
  }
}

.max-w-catch {
  max-width: 1440px;
  margin: auto;
}
@media (max-width: 960px) {
  .max-w-catch {
    max-width: 375px;
  }
}

.firstview {
  position: relative;
  top: 0;
}

.firstview-img {
  position: relative;
  width: 100%;
  z-index: -1;
  height: 84vh;
  overflow: hidden;
  margin: 0 auto;
}
.firstview-img .img-1,
.firstview-img .img-2,
.firstview-img .img-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.firstview-img .img-1 {
  background-image: url("../image/firstview-1.webp");
  -webkit-animation: slide-animation-01 10s infinite;
          animation: slide-animation-01 10s infinite;
}
@media (max-width: 960px) {
  .firstview-img .img-1 {
    background-image: url("../image/firstview-1-sp.webp");
  }
}
.firstview-img .img-2 {
  background-image: url("../image/firstview-2.webp");
  -webkit-animation: slide-animation-02 10s infinite;
          animation: slide-animation-02 10s infinite;
}
@media (max-width: 960px) {
  .firstview-img .img-2 {
    background-image: url("../image/firstview-2-sp.webp");
  }
}
.firstview-img .img-3 {
  background-image: url("../image/firstview-3.webp");
  -webkit-animation: slide-animation-03 10s infinite;
          animation: slide-animation-03 10s infinite;
}
@media (max-width: 960px) {
  .firstview-img .img-3 {
    background-image: url("../image/firstview-3-sp.webp");
  }
}
@-webkit-keyframes slide-animation-01 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    transform: scale(1.15);
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-animation-01 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0;
    transform: scale(1.15);
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes slide-animation-02 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
    transform: scale(1.1);
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide-animation-02 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
    transform: scale(1.1);
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes slide-animation-03 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
    transform: scale(1);
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
@keyframes slide-animation-03 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
    transform: scale(1);
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}

.catch-title {
  position: absolute;
  color: white;
  background-color: rgba(65, 65, 65, 0.5);
  padding: 4rem;
  z-index: 1;
  transform: translate(10%, 24%);
}
@media (max-width: 960px) {
  .catch-title {
    padding: 2rem 1rem;
    letter-spacing: 0.1rem;
    transform: translate(10%, 100%);
  }
}
.catch-title p {
  font-family: "ヒラギノ角ゴシック", sans-serif;
  font-size: 5rem;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.3rem;
}
@media (max-width: 960px) {
  .catch-title p {
    font-size: 2.6rem;
    font-weight: 700;
    font-family: "ヒラギノ角ゴシック", sans-serif;
    letter-spacing: -0.1rem;
  }
}

.firstview-bottom {
  position: absolute;
  z-index: 1;
  width: 100%;
  top: 68%;
}
@media (max-width: 960px) {
  .firstview-bottom {
    top: 74%;
  }
}

.logo {
  position: relative;
  background-color: rgba(65, 65, 65, 0.5);
  padding: 2% 0 2% 4%;
  -webkit-animation-name: fadeLeftAnime;
          animation-name: fadeLeftAnime;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@media (max-width: 960px) {
  .logo {
    padding: 6% 0 6% 4%;
  }
}
@-webkit-keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.logo img {
  width: 30%;
}
@media (max-width: 960px) {
  .logo img {
    width: 60%;
  }
}

.fadein {
  position: relative;
}
.fadein .pink-s {
  position: absolute;
  width: 16%;
  z-index: 5;
  left: 38%;
  transform: translate(0, -20%);
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@media (max-width: 960px) {
  .fadein .pink-s {
    width: 30%;
    left: 5%;
    transform: translate(0, 40%);
  }
}
@-webkit-keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadein .nb-l {
  position: absolute;
  width: 22%;
  z-index: 4;
  left: 44%;
  transform: translate(0, -40%);
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@media (max-width: 960px) {
  .fadein .nb-l {
    width: 36%;
    left: 18%;
    transform: translate(0, 16%);
  }
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadein .bk {
  position: absolute;
  width: 28%;
  z-index: 3;
  left: 54%;
  transform: translate(0, -56%);
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@media (max-width: 960px) {
  .fadein .bk {
    width: 40%;
    left: 36%;
    transform: translate(0, -10%);
  }
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadein .gray {
  position: absolute;
  width: 40%;
  z-index: 2;
  left: 58%;
  transform: translate(0, -70%);
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}
@media (max-width: 960px) {
  .fadein .gray {
    width: 50%;
    left: 46%;
    transform: translate(0, -32%);
  }
}
@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.main-catch {
  margin-top: 24rem;
  text-align: center;
}
@media (max-width: 960px) {
  .main-catch {
    text-align: left;
    margin-top: 16rem;
  }
}
.main-catch .main-h1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
@media (max-width: 960px) {
  .main-catch .main-h1 {
    flex-direction: column;
    margin-left: 4rem;
    line-height: 5rem;
  }
}
@media (max-width: 960px) {
  .main-catch .main-h1 .p1 {
    letter-spacing: 0.54rem;
  }
}
.main-catch .main-h1 p {
  font-family: "ヒラギノ角ゴシック", sans-serif;
  font-size: 5rem;
}
@media (max-width: 960px) {
  .main-catch .main-h1 p {
    font-size: 2.6rem;
    letter-spacing: 0.1rem;
    font-weight: 700;
  }
}
.main-catch h2 {
  margin-top: 10rem;
}
@media (max-width: 960px) {
  .main-catch h2 {
    margin: 4rem 0 0 4rem;
  }
}

.main-img {
  margin-top: 17rem;
  position: relative;
}
@media (max-width: 960px) {
  .main-img {
    text-align: center;
    margin-top: 4rem;
  }
}
.main-img img {
  width: 90%;
}
.main-img .image-text {
  position: absolute;
  font-family: "凸版文久ゴシック", sans-serif;
  top: 60%;
  left: 12%;
  font-size: 2.5rem;
  line-height: 4.8rem;
}
@media (max-width: 960px) {
  .main-img .image-text {
    top: 52%;
    left: 12%;
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-align: left;
  }
}
.main-img .image-text .sp-p {
  font-family: "凸版文久ゴシック", sans-serif;
  font-size: 2.5rem;
  display: flex;
  flex-direction: row;
}
@media (max-width: 960px) {
  .main-img .image-text .sp-p {
    font-size: 1.2rem;
    letter-spacing: 0.25rem;
    flex-direction: column;
  }
}
.main-img .image-text .sp-p p {
  font-family: "凸版文久ゴシック", sans-serif;
  font-size: 2.5rem;
}
@media (max-width: 960px) {
  .main-img .image-text .sp-p p {
    font-size: 1.2rem;
    letter-spacing: 0.34rem;
  }
}

.under-catch {
  text-align: center;
  display: flex;
  flex-direction: column;
  margin-top: 50rem;
}
@media (max-width: 960px) {
  .under-catch {
    margin-top: 12rem;
  }
}
.under-catch .under-catch-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
@media (max-width: 960px) {
  .under-catch .under-catch-title {
    flex-direction: column;
  }
}
.under-catch .under-catch-title p {
  font-family: "ヒラギノ角ゴシック", sans-serif;
  font-size: 5rem;
  font-weight: 400;
  letter-spacing: 0.7rem;
}
@media (max-width: 960px) {
  .under-catch .under-catch-title p {
    font-size: 2.6rem;
    letter-spacing: -0.02rem;
    font-weight: 700;
  }
}
.under-catch a {
  color: rgb(71, 70, 69);
  font-size: 3rem;
  margin: 14rem 0 3rem 0;
}
@media (max-width: 960px) {
  .under-catch a {
    font-size: 2rem;
    margin: 9.6rem 0 2rem 0;
  }
}
.under-catch .insta {
  margin: auto;
  width: 5rem;
  height: 5rem;
}

.product {
  margin-top: 35rem;
}
@media (max-width: 960px) {
  .product {
    margin-top: 8rem;
  }
}

.product-catch {
  text-align: center;
}
@media (max-width: 960px) {
  .product-catch {
    text-align: left;
    margin-left: 4rem;
  }
}
@media (max-width: 960px) {
  .product-catch h1 {
    line-height: 5rem;
  }
}
.product-catch h2 {
  margin-top: 7.4rem;
}
@media (max-width: 960px) {
  .product-catch h2 {
    margin-top: 4rem;
  }
}

.product-container-left {
  margin: 0 5rem;
}
@media (max-width: 960px) {
  .product-container-left {
    margin: 0;
  }
}
.product-container-left .product-sample {
  position: absolute;
  width: 46%;
  transform: translate(0, 130%);
}
@media (max-width: 960px) {
  .product-container-left .product-sample {
    width: 80%;
  }
}
.product-container-left .product-img {
  position: absolute;
  left: 46%;
  top: 0;
}
@media (max-width: 960px) {
  .product-container-left .product-img {
    left: 0;
  }
}
.product-container-left .product-img img {
  width: 100%;
}
.product-container-left .product-introduction {
  margin-top: 40rem;
  margin-left: auto;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 960px) {
  .product-container-left .product-introduction {
    width: 90%;
    margin: auto;
    margin-top: 32rem;
  }
}

.product-container-right {
  margin: 0 5rem;
  margin-top: 15rem;
}
@media (max-width: 960px) {
  .product-container-right {
    margin-top: 0;
    margin: auto;
  }
}
.product-container-right .three-product-container::before {
  left: 50%;
}
.product-container-right .two-product-container::before {
  left: 50%;
}
.product-container-right .product-sample {
  position: relative;
  margin-left: auto;
  width: 40%;
  transform: translate(0, 140%);
}
@media (max-width: 960px) {
  .product-container-right .product-sample {
    width: 80%;
    transform: translate(0, 130%);
  }
}
.product-container-right .product-img {
  position: absolute;
  width: 54%;
}
@media (max-width: 960px) {
  .product-container-right .product-img {
    width: 100%;
  }
}
.product-container-right .product-img img {
  width: 100%;
}
.product-container-right .product-introduction {
  margin-top: 10rem;
  margin-right: auto;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 960px) {
  .product-container-right .product-introduction {
    width: 90%;
    margin: auto;
    margin-top: 56rem;
  }
}
.product-container-right .product-table .product-introduction {
  margin-top: -12rem;
}
@media (max-width: 960px) {
  .product-container-right .product-table .product-introduction {
    margin-top: 48rem;
  }
}

.three-product-container {
  position: relative;
}
@media (max-width: 960px) {
  .three-product-container {
    margin-top: 8rem;
  }
}

.three-product-container::before {
  position: absolute;
  content: "";
  left: 4%;
  width: 46%;
  height: 54rem;
  z-index: -1;
}
@media (max-width: 960px) {
  .three-product-container::before {
    width: 88%;
    height: 42rem;
    z-index: -1;
    transform: translate(9%, 24rem);
  }
}

.two-product-container {
  position: relative;
}

.two-product-container::before {
  position: absolute;
  content: "";
  left: 2%;
  width: 48%;
  height: 54rem;
  z-index: -1;
}
@media (max-width: 960px) {
  .two-product-container::before {
    width: 88%;
    height: 36rem;
    z-index: -1;
    transform: translate(12%, 16rem);
  }
}

.pouch-s {
  position: relative;
}
.pouch-s .three-product-container::before {
  background-color: rgb(170, 221, 221);
  top: 8rem;
}
@media (max-width: 960px) {
  .pouch-s .three-product-container::before {
    top: 10rem;
  }
}
.pouch-s .product-container {
  width: 50%;
  margin: 32rem 0 0 6%;
}
@media (max-width: 960px) {
  .pouch-s .product-container {
    width: 100%;
    margin: 0;
    padding: 50rem 0 0;
  }
}
.pouch-s .product-box-1 {
  position: relative;
  left: 20%;
  height: 0;
  top: 2rem;
  width: 40%;
}
@media (max-width: 960px) {
  .pouch-s .product-box-1 {
    left: 34%;
    top: 0;
  }
}
.pouch-s .product-box-1 .product-color {
  position: absolute;
  top: 14rem;
  left: 76%;
}
@media (max-width: 960px) {
  .pouch-s .product-box-1 .product-color {
    top: 9rem;
    left: 70%;
  }
}
.pouch-s .product-box-2 {
  position: relative;
  left: 0;
  height: 0;
  top: 20rem;
  width: 40%;
}
@media (max-width: 960px) {
  .pouch-s .product-box-2 {
    top: 12rem;
    left: 14%;
  }
}
.pouch-s .product-box-2 .product-color {
  position: absolute;
  top: 17rem;
  left: 50%;
}
@media (max-width: 960px) {
  .pouch-s .product-box-2 .product-color {
    top: 11rem;
    left: 40%;
  }
}
.pouch-s .product-box-3 {
  position: relative;
  height: 0;
  left: 40%;
  top: 21rem;
  width: 40%;
}
@media (max-width: 960px) {
  .pouch-s .product-box-3 {
    transform: translate(36%, -9rem);
  }
}
.pouch-s .product-box-3 .product-color {
  position: absolute;
  top: 16rem;
  left: 60%;
}
@media (max-width: 960px) {
  .pouch-s .product-box-3 .product-color {
    top: 11rem;
    left: 70%;
  }
}

.pouch-l {
  position: relative;
}
.pouch-l .three-product-container::before {
  background-color: rgb(191, 172, 230);
  top: 24%;
}
@media (max-width: 960px) {
  .pouch-l .three-product-container::before {
    left: 0;
    transform: translate(0, 26rem);
    top: 50%;
    height: 36rem;
  }
}
.pouch-l .product-container {
  width: 50%;
  margin-left: auto;
  position: absolute;
  right: 0;
  top: 10%;
}
@media (max-width: 960px) {
  .pouch-l .product-container {
    width: 80%;
    top: 250%;
    transform: translate(-26%, 0);
  }
}
.pouch-l .product-box-1 {
  position: relative;
  left: 30%;
  height: 0;
  width: 40%;
}
@media (max-width: 960px) {
  .pouch-l .product-box-1 {
    left: 34%;
  }
}
.pouch-l .product-box-1 .product-color {
  position: absolute;
  top: 14rem;
  left: 70%;
}
@media (max-width: 960px) {
  .pouch-l .product-box-1 .product-color {
    top: 7rem;
    left: 60%;
  }
}
.pouch-l .product-box-2 {
  position: relative;
  left: 10%;
  height: 0;
  top: 17rem;
  width: 40%;
}
@media (max-width: 960px) {
  .pouch-l .product-box-2 {
    transform: translate(20%, -6rem);
    left: 0;
  }
}
.pouch-l .product-box-2 .product-color {
  position: absolute;
  top: 15rem;
  left: 50%;
}
@media (max-width: 960px) {
  .pouch-l .product-box-2 .product-color {
    left: 30%;
    top: 8rem;
  }
}
.pouch-l .product-box-3 {
  position: relative;
  transform: translate(130%, 17rem);
  height: 0;
  width: 40%;
}
@media (max-width: 960px) {
  .pouch-l .product-box-3 {
    transform: translate(140%, 11rem);
    left: 0;
  }
}
.pouch-l .product-box-3 .product-color {
  position: absolute;
  top: 15rem;
  left: 70%;
}
@media (max-width: 960px) {
  .pouch-l .product-box-3 .product-color {
    top: 8rem;
    left: 60%;
  }
}

.pccase {
  position: relative;
}
.pccase .two-product-container::before {
  background-color: rgb(237, 190, 213);
  top: 10rem;
}
@media (max-width: 960px) {
  .pccase .two-product-container::before {
    top: 20rem;
  }
}
.pccase .product-container {
  width: 50%;
  margin: 15rem 0 0;
}
@media (max-width: 960px) {
  .pccase .product-container {
    margin: 0;
    padding: 44rem 0 0 24%;
    margin-top: 8rem;
  }
}
.pccase .product-box-1 {
  position: relative;
  transform: translate(40%, 4rem);
  height: 0;
  width: 40%;
}
@media (max-width: 960px) {
  .pccase .product-box-1 {
    width: 70%;
    transform: translate(40%, 2rem);
  }
}
.pccase .product-color {
  position: absolute;
  top: 16rem;
  left: 60%;
}
@media (max-width: 960px) {
  .pccase .product-color {
    top: 9rem;
    left: 60%;
  }
}
.pccase .product-box-2 {
  position: relative;
  transform: translate(120%, 24rem);
  height: 0;
  width: 40%;
}
@media (max-width: 960px) {
  .pccase .product-box-2 {
    transform: translate(80%, 16rem);
    width: 70%;
  }
}
.pccase .product-box-2 .product-color {
  position: absolute;
  top: 17rem;
  left: 70%;
}
@media (max-width: 960px) {
  .pccase .product-box-2 .product-color {
    top: 9rem;
    left: 60%;
  }
}

.table {
  position: relative;
}
@media (max-width: 960px) {
  .table {
    margin-top: 12rem;
  }
}
.table .two-product-container::before {
  background-color: rgb(255, 255, 187);
  top: 20%;
}
@media (max-width: 960px) {
  .table .two-product-container::before {
    left: 0;
    transform: translate(0, 70%);
  }
}
.table .product-container {
  width: 50%;
  margin-left: auto;
  position: absolute;
  right: 0;
  top: 10%;
}
@media (max-width: 960px) {
  .table .product-container {
    top: 160%;
    right: 52%;
  }
}
.table .product-box-1 {
  position: relative;
  left: 20%;
  width: 40%;
  height: 0;
  top: 0;
}
@media (max-width: 960px) {
  .table .product-box-1 {
    width: 80%;
    transform: translate(0, 6rem);
  }
}
.table .product-color {
  position: absolute;
  top: 16rem;
  left: 70%;
}
@media (max-width: 960px) {
  .table .product-color {
    top: 10rem;
    left: 80%;
  }
}
.table .product-box-2 {
  position: absolute;
  width: 40%;
  right: 10%;
  transform: translate(0, 18rem);
  height: 0;
}
@media (max-width: 960px) {
  .table .product-box-2 {
    width: 80%;
    transform: translate(80%, 18rem);
  }
}
.table .product-box-2 .product-color {
  position: absolute;
  top: 16rem;
  left: 72%;
}
@media (max-width: 960px) {
  .table .product-box-2 .product-color {
    top: 10rem;
    left: 70%;
  }
}
.table .product-sample {
  transform: translate(0, 42rem);
}
@media (max-width: 960px) {
  .table .product-sample {
    transform: translate(0, 110%);
    width: 50%;
  }
}

.product-name {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.price {
  margin-left: auto;
  margin-top: 3rem;
  margin-right: 8rem;
}
@media (max-width: 960px) {
  .price {
    margin-top: 2rem;
    margin-right: 4rem;
  }
}

.color-variation {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 90%;
  margin-top: 2.4rem;
}
@media (max-width: 960px) {
  .color-variation {
    margin-top: 0.8rem;
  }
}
.color-variation .bk-circle {
  background-color: black;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
}
@media (max-width: 960px) {
  .color-variation .bk-circle {
    width: 1.2rem;
    height: 1.2rem;
  }
}
.color-variation .cr-circle {
  background-color: rgb(221, 172, 163);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
}
@media (max-width: 960px) {
  .color-variation .cr-circle {
    width: 1.2rem;
    height: 1.2rem;
  }
}
.color-variation .nb-circle {
  background-color: rgb(70, 102, 149);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
}
@media (max-width: 960px) {
  .color-variation .nb-circle {
    width: 1.2rem;
    height: 1.2rem;
  }
}
.color-variation .g-circle {
  background-color: rgb(95, 94, 94);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
}
@media (max-width: 960px) {
  .color-variation .g-circle {
    width: 1.2rem;
    height: 1.2rem;
  }
}
.color-variation .variation-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(166, 167, 167);
  margin-bottom: -1px;
  padding: 2.5rem 0;
}
@media (max-width: 960px) {
  .color-variation .variation-link {
    padding: 1.2rem 0;
  }
}
.color-variation .variation-link .color {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.color-variation .variation-link .color h6 {
  margin-left: 1rem;
}
.color-variation .variation-link .button {
  display: flex;
  flex-direction: row;
  width: 52%;
  justify-content: space-between;
}
@media (max-width: 960px) {
  .color-variation .variation-link .button {
    width: 60%;
  }
}
.color-variation .variation-link .button .purchase {
  color: white;
  background-color: rgb(177, 0, 35);
  padding: 0.8rem 1rem;
  border-radius: 5rem;
}
@media (max-width: 960px) {
  .color-variation .variation-link .button .purchase {
    font-size: 0.8rem;
  }
}
.color-variation .variation-link .button a {
  font-size: 1.4rem;
  border: 2px solid rgb(177, 0, 35);
  background-color: white;
  padding: 0.8rem 1rem;
  border-radius: 5rem;
}
@media (max-width: 960px) {
  .color-variation .variation-link .button a {
    font-size: 0.8rem;
  }
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 16.4rem auto 7rem;
}
@media (max-width: 960px) {
  .footer {
    margin: auto;
    flex-direction: column-reverse;
  }
}
.footer .logo-bottom {
  border-right: 1px solid rgb(166, 167, 167);
  padding-right: 5rem;
}
@media (max-width: 960px) {
  .footer .logo-bottom {
    border: none;
    padding: 0;
  }
}
.footer .logo-bottom img {
  width: 30rem;
}
@media (max-width: 960px) {
  .footer .logo-bottom img {
    width: 15rem;
    margin: 2rem 0 8rem 0;
  }
}
.footer .company {
  margin-left: 5rem;
}
@media (max-width: 960px) {
  .footer .company {
    margin: 12rem 0 0;
  }
}