@charset "UTF-8";
.mask .common-color-list, .mask__wrap-01 .pic-01-wrap, .mask__wrap-02 .pic-02-wrap, .mask__wrap-02 .pic-02-wrap .comparison-list li, .mask__wrap-04 .pic-04-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mask__main .main-anchor-list, .mask__wrap-02 .pic-02-wrap .comparison-list, .mask__wrap-03 .pic-03-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.mask .common-info-list, .mask__wrap-06 .mask-other-item .list_search-result {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: left;
  justify-content: left;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.contents-area {
  width: 100%;
  margin: auto;
}

#ft_wos2 {
  margin-top: 0 !important;
}

.mask {
  background-color: #f2f2f2;
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  color: #000;
  line-height: 1.8;
  width: 100%;
  margin: auto;
  padding-bottom: 70px;
}
.mask a {
  display: block;
}
.mask a:hover {
  text-decoration: none;
  opacity: 0.8;
  transition: .2s;
}
.mask__main {
  background-color: #f2f2f2;
  width: 1190px;
  margin: auto;
  padding-bottom: 205px;
}
.mask__main .main-pic-wrap {
  height: 500px;
  margin-bottom: 90px;
  position: relative;
  overflow: hidden;
}
.mask__main .main-pic {
  position: absolute;
  top: 0;
}
.mask__main .main-ttl {
  position: absolute;
  top: 145px;
  right: 165px;
}
.mask__main .main-headline {
  font-size: 28px;
  letter-spacing: -1px;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 25px;
}
.mask__main .main-anchor-list {
  width: 1000px;
  margin: auto;
}
.mask .common-item-name {
  font-size: 30px;
  letter-spacing: -1px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 10px;
}
.mask .common-item-price {
  font-size: 16px;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
  margin-bottom: 30px;
}
.mask .common-item-price span {
  font-size: 12px;
}
.mask .common-color-list {
  margin-bottom: 30px;
}
.mask .common-color-list span {
  background-color: #000;
  border-radius: 50%;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin: 0 3px;
}
.mask .common-item-txt {
  font-size: 18px;
  letter-spacing: -1px;
  line-height: 1.8;
  text-align: center;
  margin-bottom: 50px;
}
.mask .common-info-list {
  width: 850px;
  margin: auto;
}
.mask .common-info-list li {
  font-size: 13px;
  letter-spacing: -1px;
  width: calc((100% - 120px) / 3);
  margin: 0 60px 70px 0;
}
.mask .common-info-list li:nth-child(3n) {
  margin-right: 0;
}
.mask .common-info-list li:nth-last-child(-n+3) {
  margin-bottom: 0;
}
.mask .common-info-list li .common-info-ttl {
  font-weight: bold;
}
.mask .common-btn {
  width: 400px;
  margin: auto;
}
.mask .common-btn a {
  background-color: #000;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  color: #fff;
  padding: 23px 0;
}
.mask__wrap-01 {
  background-color: #f2f2f2;
  padding-bottom: 200px;
}
.mask__wrap-01 .common-color-list span:nth-child(1) {
  border: 1px solid #d7d7d7;
  background-color: #fff;
}
.mask__wrap-01 .common-color-list span:nth-child(2) {
  border: 1px solid #d7d7d7;
  background-color: #d7d7d7;
}
.mask__wrap-01 .common-color-list span:nth-child(3) {
  border: 1px solid #b7a797;
  background-color: #b7a797;
}
.mask__wrap-01 .common-color-list span:nth-child(4) {
  border: 1px solid #936c4d;
  background-color: #936c4d;
}
.mask__wrap-01 .pic-01-wrap {
  width: 1000px;
  margin: 0 auto 90px;
}
.mask__wrap-01 .pic-01-wrap .pic-01-1, .mask__wrap-01 .pic-01-wrap .pic-01-2 {
  margin-bottom: 30px;
}
.mask__wrap-01 .pic-01-wrap .pic-01-3 a {
  margin-bottom: 20px;
}
.mask__wrap-01 .pic-01-wrap .pic-01-3 p {
  font-size: 13px;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
}
.mask__wrap-01 .common-info-list {
  margin-bottom: 50px;
}
.mask__wrap-01 .notes-txt-wrap {
  font-size: 12px;
  color: #808080;
  letter-spacing: -1px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 50px;
}
.mask__wrap-02 {
  background-color: #f2f2f2;
  padding-bottom: 200px;
}
.mask__wrap-02 .common-color-list span:nth-child(1) {
  border: 1px solid #dec8b8;
  background-color: #dec8b8;
}
.mask__wrap-02 .common-color-list span:nth-child(2) {
  border: 1px solid #958a90;
  background-color: #958a90;
}
.mask__wrap-02 .common-color-list span:nth-child(3) {
  border: 1px solid #777777;
  background-color: #777777;
}
.mask__wrap-02 .common-color-list span:nth-child(4) {
  border: 1px solid #5d90bc;
  background-color: #5d90bc;
}
.mask__wrap-02 .pic-02-wrap {
  width: 990px;
  margin: 0 auto 90px;
}
.mask__wrap-02 .pic-02-wrap .pic-02-1 {
  margin-bottom: 80px;
}
.mask__wrap-02 .pic-02-wrap .comparison-list {
  width: 990px;
  margin: auto;
}
.mask__wrap-02 .pic-02-wrap .comparison-list li {
  width: 318px;
}
.mask__wrap-02 .pic-02-wrap .comparison-list li .comparison-pic {
  margin-bottom: 12px;
}
.mask__wrap-02 .pic-02-wrap .comparison-list li p {
  font-size: 12px;
  letter-spacing: -1px;
  text-align: center;
  width: 50%;
}
.mask__wrap-02 .common-info-list {
  margin-bottom: 90px;
}
.mask__wrap-03 {
  background-color: #f2f2f2;
  padding-bottom: 200px;
}
.mask__wrap-03 .common-color-list span:nth-child(1) {
  border: 1px solid #d7d7d7;
  background-color: #fff;
}
.mask__wrap-03 .pic-03-wrap {
  width: 860px;
  margin: 0 auto 60px;
}
.mask__wrap-03 .pic-03-wrap .pic-03-2 {
  margin-top: 60px;
}
.mask__wrap-03 .pic-03-wrap .pic-03-2 a {
  margin-bottom: 15px;
}
.mask__wrap-03 .pic-03-wrap .pic-03-2 p {
  font-size: 12px;
  letter-spacing: -1px;
  text-align: center;
}
.mask__wrap-04 {
  background-color: #f2f2f2;
  padding-bottom: 200px;
}
.mask__wrap-04 .common-color-list span:nth-child(1) {
  border: 1px solid #d7d7d7;
  background-color: #fff;
}
.mask__wrap-04 .pic-04-wrap {
  width: 1000px;
  margin: 0 auto 60px;
}
.mask__wrap-04 .pic-04-wrap .pic-04-2 a {
  margin-bottom: 15px;
}
.mask__wrap-04 .pic-04-wrap .pic-04-2 p {
  font-size: 12px;
  letter-spacing: -1px;
  text-align: center;
}
.mask__wrap-05 {
  background-color: #f2f2f2;
  padding-bottom: 200px;
}
.mask__wrap-05 .common-item-price {
  margin-bottom: 60px;
}
.mask__wrap-05 .pic-05 {
  width: 640px;
  margin: 0 auto 60px;
}
.mask__wrap-06 .common-item-name {
  margin-bottom: 50px;
}
.mask__wrap-06 .mask-other-item {
  width: 1130px;
  margin: 0 auto 60px;
}
.mask__wrap-06 .mask-other-item .list_search-result .block_item {
  width: calc((100% - 80px) / 5);
  margin-right: 20px;
  display: block;
  position: relative;
}
.mask__wrap-06 .mask-other-item .list_search-result .block_item:nth-child(5n) {
  margin: 0 0 20px 0;
}
.mask__wrap-06 .mask-other-item .list_search-result .block_campaign, .mask__wrap-06 .mask-other-item .list_search-result .wrap_icon, .mask__wrap-06 .mask-other-item .list_search-result .block_campaign2 {
  display: none !important;
}
.mask__wrap-06 .mask-other-item .list_search-result .search-result__item--photo {
  margin-bottom: 10px;
}
.mask__wrap-06 .mask-other-item .list_search-result .gu_main_img {
  width: 100%;
  height: auto;
}
.mask__wrap-06 .mask-other-item .list_search-result .wrap_description {
  font-size: 11px;
  text-align: center;
}
.mask__wrap-06 .mask-other-item .list_search-result .wrap_description .txt_brand-name {
  font-weight: bold;
  margin-bottom: 10px;
}
.mask__wrap-06 .mask-other-item .list_search-result .txt_item-name {
  margin-bottom: 10px;
  /*15px*/
}
.mask__wrap-06 .mask-other-item .list_search-result .wrap_price {
  font-size: 11px;
  text-align: center;
}
.mask__btn-all {
  background-color: #fff;
  width: 400px;
  margin: auto;
}
.mask__btn-all a {
  border: 2px solid #000;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 21px 0;
}

.fadein__normal {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}
.fadein__normal.is-active {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.fadein__top-50 {
  top: 50px;
  opacity: 0;
  position: relative;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: 1s;
  transition: 1s;
}
.fadein__top-50.is-active {
  top: 0;
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.fadein__order-t li {
  opacity: 0;
  transform: translate(0, -30px);
}
.fadein__order-t.is-active li:nth-child(1) {
  -webkit-animation: inOrder 0.5s ease 0.6s 1 forwards;
  animation: inOrder 0.5s ease 0.6s 1 forwards;
}
.fadein__order-t.is-active li:nth-child(2) {
  -webkit-animation: inOrder 0.5s ease 0.8s 1 forwards;
  animation: inOrder 0.5s ease 0.8s 1 forwards;
}
.fadein__order-t.is-active li:nth-child(3) {
  -webkit-animation: inOrder 0.5s ease 1.0s 1 forwards;
  animation: inOrder 0.5s ease 1.0s 1 forwards;
}
.fadein__order-t.is-active li:nth-child(4) {
  -webkit-animation: inOrder 0.5s ease 1.2s 1 forwards;
  animation: inOrder 0.5s ease 1.2s 1 forwards;
}
.fadein__order-t.is-active li:nth-child(5) {
  -webkit-animation: inOrder 0.5s ease 1.4s 1 forwards;
  animation: inOrder 0.5s ease 1.4s 1 forwards;
}
.fadein__order-t.is-active li:nth-child(6) {
  -webkit-animation: inOrder 0.5s ease 1.6s 1 forwards;
  animation: inOrder 0.5s ease 1.6s 1 forwards;
}

.fadein__order-b li {
  opacity: 0;
  transform: translate(0, 30px);
}
.fadein__order-b.is-active li:nth-child(1) {
  -webkit-animation: inOrder 0.5s ease 0.6s 1 forwards;
  animation: inOrder 0.5s ease 0.6s 1 forwards;
}
.fadein__order-b.is-active li:nth-child(2) {
  -webkit-animation: inOrder 0.5s ease 0.8s 1 forwards;
  animation: inOrder 0.5s ease 0.8s 1 forwards;
}
.fadein__order-b.is-active li:nth-child(3) {
  -webkit-animation: inOrder 0.5s ease 1.0s 1 forwards;
  animation: inOrder 0.5s ease 1.0s 1 forwards;
}

@-webkit-keyframes inOrder {
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes inOrder {
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.fadein__l {
  position: relative;
  display: block;
  overflow: hidden;
}
.fadein__l::after {
  background: #f2f2f2;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  z-index: 100;
  transform: translate3d(0%, 0, 0);
}
.fadein__l.is-active::after {
  animation: sideL 1.5s cubic-bezier(0, 0, 0.4, 1);
  animation-fill-mode: forwards;
}

@keyframes sideL {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
.fadein__r {
  position: relative;
  display: block;
  overflow: hidden;
}
.fadein__r::after {
  background: #f2f2f2;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  z-index: 100;
  transform: translate3d(0%, 0, 0);
}
.fadein__r.is-active::after {
  animation: sideR 1.5s cubic-bezier(0, 0, 0.4, 1);
  animation-fill-mode: forwards;
}

@keyframes sideR {
  0% {
    transform: translate(0);
  }
  50%,60% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
.fadein__curtain {
  position: relative;
  display: block;
  overflow: hidden;
}
.fadein__curtain::before, .fadein__curtain::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  transition: transform 2s cubic-bezier(0.39, 0.575, 0.565, 1);
  background: #f2f2f2;
}
.fadein__curtain::before {
  width: 55%;
  left: -1%;
  transform-origin: left top;
}
.fadein__curtain::after {
  width: 55%;
  right: -1%;
  transform-origin: right top;
}
.fadein__curtain.is-active::after, .fadein__curtain.is-active::before {
  transform: scaleX(0);
}