@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700&display=swap";
@import "https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700&display=swap&subset=japanese";

.l_userSizeComparison {
  margin: 0 auto;
  background: #fff
}

.l_userProduct01 {
  margin: 0 auto;
  background: #f5f7fa;
  position: relative
}

.l_userProduct02 {
  margin: 0 auto;
  background: #edf1f6;
  position: relative
}

.l_userProduct03 {
  margin: 0 auto;
  background: #fff;
  position: relative
}

.l_userProduct04 {
  margin: 0 auto;
  background: #f5f7fa;
  position: relative
}

.userProductArea .m_section_ttl {
  color: #2097be;
  font-size: 3.2rem
}

.l_userSizeComparison .m_section_inner {
  padding: 0 0 20px
}

.sizeList {
  padding: 40px 100px;
  background: url(//fmv-img.static.pub/b/store/contents/ui3060/bg_03.png) repeat;
  border: 1px solid #d2dce6;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  font-family: noto sans jp, sans-serif;
  font-weight: 500
}

.sizeItem {
  width: calc((100% - 50px)/3);
  text-align: center
}

.sizeItemTxt {
  margin-top: 15px
}

.sizeItemRead {
  font-size: 1.8rem;
  margin-bottom: 5px
}

.m_txtLine01 {
  background: linear-gradient(#ffe4da 0%, #ffe4da 100%)
}

.m_txtLine03 {
  background: linear-gradient(#d9ffcd 0%, #d9ffcd 100%)
}

.m_txtLine04 {
  background: linear-gradient(#fffcae 0%, #fffcae 100%)
}

.sizeItemTxt ul {
  padding: 0 15px;
  text-align: left
}

.sizeItemTxt ul>li {
  padding-left: 20px
}

.sizeItemTxt ul>li a {
  position: relative
}

.sizeItemTxt ul>li span {
  padding-left: 10px
}

.sizeItemTxt ul>li+li {
  padding-top: 5px
}

.sizeItemTxt ul>li a::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle
}

.sizeItemAnchor01 a::before {
  background: #ffe4da;
  border: 2px dotted#bc654e
}

.sizeItemAnchor03 a::before {
  background: #d9ffcd;
  border: 2px dashed #57a84a
}

.sizeItemAnchor04 a::before {
  background: #fffcae;
  border: 2px solid #d8a852
}

.sizeList_cut {
  margin-top: 10px;
  text-align: right;
  font-size: 1.3rem
}

.userProductLayer01 {}

.userProductLayer02 {
  background: url(//fmv-img.static.pub/b/store/contents/ui3060/bg_03.png) repeat
}

.userProductBox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.userProduct_col02 {
  width: 480px
}

.userProductTtl {
  font-size: 3rem;
  font-family: noto sans jp, sans-serif;
  font-weight: 400
}

.l_userProduct01 .userProductTtl {
  color: #fff
}

.userProductTtl span {
  display: inline-block;
  background: #333;
  padding: 2px 10px 5px
}

.userProductTtl span+span {
  margin-top: 5px
}

.userProductRead {
  margin-top: 30px
}

.userProductRead span {
  font-size: 2rem
}

.productPointList {
  margin-top: 20px
}

.productPoint {
  list-style: disc;
  margin-left: 20px
}

.productPoint+li {
  margin-top: 3px
}

.productSpac01 {
  margin-top: 15px;
  padding: 10px;
  background: #fff;
  font-size: 1.2rem
}

.productSelection {
  margin-top: 15px
}

.productSelectionTtl {
  font-weight: 700
}

.productSelection ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: start;
  flex-wrap: wrap
}

.productSelection ul li {
  width: 49%
}

.productColer ul li:nth-of-type(2n),
.productOffice ul li:nth-of-type(2n) {
  margin-left: 2%
}

.productSelectionLabel {
  padding: 10px 8px;
  background: #fff;
  border-radius: 3px;
  margin-top: 10px;
  position: relative;
  display: block
}

.productSelectionLabel:hover {
  cursor: pointer;
  background: #fff8e5
}

.productSelectionLabel::before {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  content: "";
  display: block;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  border: 1px solid #ccc;
  border-radius: 3px
}

.productSelectionLabel:hover:before {
  height: calc(100% - 4px);
  width: calc(100% - 4px);
  border: 2px solid #0784e8
}

.productSelectionLabel input {
  cursor: pointer
}

.productColer .productSelectionLabel {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.productOffice .productSelectionLabel {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: start;
  align-items: center
}

.model_radio {
  margin-right: 10px !important
}

.productSelectionLabel img {
  margin-left: 10px
}

.productOffice_price {
  letter-spacing: 0;
  margin-top: 15px
}

.productOffice_price-red {
  color: #c00
}

.productOffice_price-red span {
  font-size: 3rem
}

.productPeriod {
  text-align: right;
  margin-top: 15px
}

.productCartBtn,
.productCartBtn02 {
  text-align: center;
  margin-top: 30px
}

.productCartBtn a,
.productCartBtn02 a {
  padding: 15px 30px 18px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 50px;
  color: #333;
  text-decoration: none;
  display: block;
  text-align: center;
  position: relative
}

.productCartBtn a:hover,
.productCartBtn02 a:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(15, 13, 13, 1) 0%, rgba(88, 88, 87, 1) 100%)
}

.productCartBtn a::after,
.productCartBtn02 a::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid #181818;
  border-right: 2px solid #181818;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  display: inline-block;
  position: absolute;
  right: 20px;
  top: 43%;
  bottom: 0
}

.productCartBtn a:hover:after,
.productCartBtn02 a:hover:after {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff
}

.userProduct_col01 {
  width: 770px;
  margin-left: -130px
}

.userProduct_slide .change-btn-wrapper {
  margin: 40px auto;
  position: relative;
  width: 58%
}

.userProduct_slide .change-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 25px;
  height: 25px;
  background-color: #606a76;
  cursor: pointer
}

.userProduct_slide .change-btn span {
  position: relative;
  display: block;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px
}

.userProduct_slide .change-btn span:hover {
  background-color: #fff;
  border: 1px solid #606a76
}

.userProduct_slide .prev-btn {
  left: 0
}

.userProduct_slide .prev-btn span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%)rotate(-45deg)
}

.userProduct_slide .prev-btn span:hover::before {
  border-top: 2px solid #606a76;
  border-left: 2px solid #606a76
}

.userProduct_slide .next-btn span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-70%, -50%)rotate(135deg)
}

.userProduct_slide .next-btn span:hover::before {
  border-top: 2px solid #606a76;
  border-left: 2px solid #606a76
}

.userProduct_slide .slides {
  padding: 0;
  box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .12);
  margin: 0 10px 10px 0
}

.userProduct_slide .slide {
  display: none
}

.userProduct_slide .slide_active {
  display: block
}

.userProduct_slide .index-btn-wrapper {
  padding: 5px 0;
  display: flex;
  justify-content: center;
  width: 58%;
  margin: 0 auto
}

.userProduct_slide .index-btn {
  background-color: #fff;
  border: 1px solid #606a76;
  width: 16px;
  height: 16px;
  margin: 0 5px;
  border-radius: 50px;
  cursor: pointer;
  z-index: 10
}

.userProduct_slide .index-btn:hover {
  background-color: #606a76
}

.userProduct_slide .index-btn_active {
  background-color: #606a76
}

.productSpacAccordion {
  margin-top: 30px;
  text-align: right
}

.productSpacBtn {
  text-decoration: underline;
  cursor: pointer;
  color: #003490;
  display: inline-block
}

.productSpacBtn:hover {
  color: #48c0eb
}

.productSpac02 {
  display: none
}

.productSpac02Box::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 40px;
  margin-top: -30px;
  border: 20px solid transparent;
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 20px;
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 20px;
  border-bottom: 20px solid #ffff;
  z-index: 2
}

.productSpac02Box {
  background: #fff;
  padding: 20px;
  margin-top: 30px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  font-size: 1.3rem;
  text-align: left;
  position: relative;
  letter-spacing: .05em
}

.productSpac02Box>div {
  width: 50%
}

.productSpac02Box>div dl {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between
}

.productSpac02Box>div dt,
.productSpac02Box>div dd {
  padding: 5px 5px 3px
}

.productSpac02Box>div dt {
  background: #edf1f6;
  width: 22%;
  text-align: right
}

.productSpac02Box>div dd {
  width: 77%
}

.l_userProduct02 .userProductLayer01 {
  background: url(//fmv-img.static.pub/b/store/contents/ui3060/bg_04_01.png) no-repeat right 97% top
}

.l_userProduct02 .userProductBox {
  flex-direction: row-reverse
}

.l_userProduct02 .userProductTtl {
  color: #ffe4da
}

.l_userProduct02 .userProduct_col01 {
  margin-right: -130px
}

.l_userProduct03 .userProductLayer01 {}

.l_userProduct03 .userProductBox {
  flex-direction: row-reverse
}

.l_userProduct03 .userProductTtl {
  color: #fff
}

.l_userProduct03 .userProduct_col01 {
  margin-right: -130px
}

.l_userProduct03 .productSpac01 {
  background: #edf1f6
}

.l_userProduct03 .productSpac02Box {
  background: #edf1f6
}

.l_userProduct03 .productSpac02Box::before {
  border-bottom: 20px solid #edf1f6
}

.l_userProduct03 .productSpac02Box>div dt {
  background: #dfe4ea
}

.l_userProduct04 .userProductLayer01 {
  background: url(//fmv-img.static.pub/b/store/contents/ui3060/bg_04_03.png) no-repeat right 97% top
}

.l_userProduct04 .userProductTtl {
  color: #fffcae
}

@media screen and (max-width:767px) {
  .userProductArea .m_section_ttl {
    font-size: 2.2rem
  }

  .l_userSizeComparison .m_section_inner {
    padding: 10px
  }

  .sizeListBox {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    margin-bottom: 5px
  }

  .sizeList {
    padding: 30px 15px;
    font-weight: 400;
    width: 230%;
    font-size: 1.2rem
  }

  .sizeItemImg {
    max-width: 210px;
    margin: 0 auto
  }

  .sizeItemTxt {
    margin-top: 10px
  }

  .sizeItemRead {
    font-size: 1.4rem
  }

  .sizeItemTxt ul {
    padding: 0
  }

  .sizeItemTxt ul>li {
    padding-left: 0;
    text-align: center
  }

  .userProductBox {
    display: block
  }

  .userProduct_col02 {
    width: 100%;
    margin: 30px auto 0
  }

  .userProductTtl {
    font-size: 2.5rem
  }

  .userProductRead span {
    font-size: 1.8rem
  }

  .productSelection ul {
    justify-content: space-between
  }

  .productSelectionLabel {
    min-height: 65px
  }

  .productSelection ul li img {
    width: 10%
  }

  .productCartBtn a,
  .productCartBtn02 a {
    width: 100%;
    padding: 10px 30px 13px
  }

  .userProduct_col01 {
    width: 100%;
    margin: 0 auto
  }

  .userProduct_slide .change-btn-wrapper {
    margin: 20px auto;
    width: 100%
  }

  .userProduct_slide .change-btn {
    width: 35px;
    height: 35px
  }

  .userProduct_slide .change-btn span {
    width: 35px;
    height: 35px
  }

  .userProduct_slide .slides {
    margin: 0 10px 10px
  }

  .userProduct_slide .index-btn-wrapper {
    width: 65%;
    flex-wrap: wrap;
    padding: 0
  }

  .userProduct_slide .index-btn {
    margin: 0 7px 10px
  }

  .productSpac02Box {
    padding: 10px;
    display: block
  }

  .productSpac02Box>div {
    width: 100%
  }

  .productSpac02Box>div dt {
    width: 32%
  }

  .productSpac02Box>div dd {
    width: 68%
  }

  .l_userProduct02 .userProduct_col01 {
    margin-right: 0
  }

  .l_userProduct03 .userProduct_col01 {
    margin-right: 0
  }
}