@charset "UTF-8";
.box_sample {
  margin: 10px;
  padding: 10px;
}

.mincho {
  font-family: "游明朝", YuMincho, "Kozuka Mincho Pro", "Kozuka Mincho Std", "小塚明朝 Pro R", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
}

.ftEN {
  font-family: "Crimson Text", serif;
}

.inrWidth {
  position: relative;
  width: 1020px;
  margin-right: auto;
  margin-left: auto;
}

.outerWidth {
  position: relative;
  width: 1088px;
  margin-right: auto;
  margin-left: auto;
}

.fullWidth {
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 1210px) {
  .fullWidth {
    width: 1210px;
  }

  .outerWidth {
    width: 96%;
  }

  .inrWidth {
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .inrWidth {
    width: 95.5%;
  }

  .outerWidth {
    width: 86.6% !important;
  }
}
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  line-height: 1.75;
  font-size: 1.3333333333vw;
  font-weight: 300;
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  word-wrap: break-word;
  hanging-punctuation: allow-end;
}
@media only screen and (min-width: 1200px) {
  body {
    font-size: 16px;
  }
}
@media only screen and (max-width: 750px) {
  body {
    font-size: 3.4666666667vw;
  }
}

.mv {
  width: 100%;
  position: relative;
}
.mv-bg {
  display: block;
  width: 100%;
  z-index: 0;
}
.mv-bg img {
  display: block;
  width: 100%;
}
.mv-ttl {
  display: block;
  width: 45vw;
  position: absolute;
  top: 25.8333333333vw;
  left: 6.25vw;
  z-index: 100;
}
@media only screen and (max-width: 750px) {
  .mv-ttl {
    width: 88.8vw;
    top: 69.3333333333vw;
    left: 11.3333333333vw;
  }
}
.mv .jpLogo {
  display: block;
  width: 12.3333333333vw;
  position: absolute;
  top: 20vw;
  left: 19.5833333333vw;
}
@media only screen and (max-width: 750px) {
  .mv .jpLogo {
    width: 28.5333333333vw;
    top: 2.6666666667vw;
    left: inherit;
    right: 5.3333333333vw;
  }
}

main .read {
  width: 100%;
  margin-top: 3.3333333333vw;
  margin-bottom: 12.5vw;
  text-align: center;
  line-height: 2;
}
@media only screen and (min-width: 1200px) {
  main .read {
    margin-top: 40px;
    margin-bottom: 150px;
  }
}
@media only screen and (max-width: 750px) {
  main .read {
    margin-top: 6.6666666667vw;
    margin-bottom: 17.3333333333vw;
  }
}
main .read p {
  font-size: 1.5vw;
}
@media only screen and (min-width: 1200px) {
  main .read p {
    font-size: 18px;
  }
}
@media only screen and (max-width: 750px) {
  main .read p {
    font-size: 3.7333333333vw;
  }
}
main .style {
  display: block;
  width: 100vw;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) {
  main .style {
    width: 1200px;
  }
}
@media only screen and (max-width: 750px) {
  main .style {
    widht: 100%;
  }
}
main .style:not(:first-of-type) {
  margin-top: 11.6666666667vw;
}
@media only screen and (min-width: 1200px) {
  main .style:not(:first-of-type) {
    margin-top: 140px;
  }
}
@media only screen and (max-width: 750px) {
  main .style:not(:first-of-type) {
    margin-top: 18.6666666667vw;
  }
}
main .style__wrap {
  display: block;
  width: 83.3333333333vw;
  height: 60.8333333333vw;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap {
    width: 1000px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap {
    width: 100%;
    height: auto;
  }
}
main .style__wrap .styleNum {
  display: block;
  width: 13.3333333333vw;
  padding-top: 7.5vw;
  margin-left: 48.3333333333vw;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .styleNum {
    width: 160px;
    padding-top: 90px;
    margin-left: 580px;
    margin-right: auto;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .styleNum {
    width: 24vw;
    padding-top: 0;
    margin-left: 6.6666666667vw;
    margin-right: auto;
    margin-bottom: 4vw;
  }
}
main .style__wrap .imgBox {
  display: block;
  width: 41.6666666667vw;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .imgBox {
    width: 500px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .imgBox {
    width: 100%;
    position: relative;
    top: inherit;
    left: inherit;
  }
}
main .style__wrap .imgBox-bg {
  display: block;
  width: 40vw;
  height: 60.8333333333vw;
  position: absolute;
  top: 1.6666666667vw;
  left: 1.6666666667vw;
  background: #dfcce5;
  z-index: -10;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .imgBox-bg {
    width: 480px;
    height: 730px;
    top: 20px;
    left: 20px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .imgBox-bg {
    width: 90%;
    height: 138vw;
    top: 4vw;
    left: 50%;
    transform: translateX(-50%);
  }
}
main .style__wrap .imgBox a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
main .style__wrap .imgBox a img {
  display: block;
  width: 40vw;
  transition: 1s;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .imgBox a img {
    width: 480px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .imgBox a img {
    width: 90%;
  }
}
main .style__wrap .heading {
  margin-top: 2.5vw;
  margin-left: 48.3333333333vw;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .heading {
    margin-top: 30px;
    margin-left: 580px;
    margin-right: auto;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .heading {
    width: 86.6%;
    padding-top: 10.6666666667vw;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
  }
}
main .style__wrap .heading h1 {
  font-size: 2vw;
  font-weight: 500;
  font-family: "Noto Serif JP", serif;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .heading h1 {
    font-size: 24px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .heading h1 {
    white-space: nowrap;
    letter-spacing: 0vw;
    font-size: 5.8666666667vw;
  }
}
main .style__wrap .txtArea {
  display: block;
  width: 30.8333333333vw;
  padding-top: 2.0833333333vw;
  margin-left: 48.3333333333vw;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .txtArea {
    width: 370px;
    padding-top: 25px;
    margin-left: 580px;
    margin-right: auto;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .txtArea {
    width: 86.6%;
    padding-top: 4.6666666667vw;
    margin-left: auto;
    margin-right: auto;
  }
}
main .style__wrap .txtArea p {
  text-align: justify;
  letter-spacing: 0.2291666667vw;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .txtArea p {
    letter-spacing: 2.75px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .txtArea p {
    letter-spacing: 0.3666666667vw;
  }
}
main .style__wrap .detail {
  display: block;
  width: 35vw;
  margin-top: 2.9166666667vw;
  margin-left: 48.3333333333vw;
  margin-right: auto;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .detail {
    width: 420px;
    margin-top: 35px;
    margin-left: 580px;
    margin-right: auto;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail {
    width: 86.6%;
    margin-top: 7.3333333333vw;
    margin-left: auto;
    margin-right: auto;
  }
}
main .style__wrap .detail dl {
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 1;
  letter-spacing: 0;
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl {
    flex-wrap: wrap;
  }
}
main .style__wrap .detail dl.ex {
  align-items: flex-end;
  margin-bottom: 2.5vw;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .detail dl.ex {
    margin-bottom: 30px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl.ex {
    margin-bottom: 4vw;
  }
}
main .style__wrap .detail dl.ex .btn {
  position: relative;
  bottom: -0.8333333333vw;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .detail dl.ex .btn {
    bottom: -10px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl.ex .btn {
    bottom: -1.3333333333vw;
  }
}
main .style__wrap .detail dl.ex .size {
  margin-left: 4px;
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl.ex .size {
    margin-left: auto;
  }
}
main .style__wrap .detail dl:not(:first-of-type) {
  margin-top: 1.6666666667vw;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .detail dl:not(:first-of-type) {
    margin-top: 20px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl:not(:first-of-type) {
    margin-top: 4.6666666667vw;
  }
}
main .style__wrap .detail dl .name {
  width: auto;
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl .name {
    width: 29.3333333333vw;
  }
}
main .style__wrap .detail dl .name span {
  display: block;
  line-height: 2;
}
main .style__wrap .detail dl .price {
  display: flex;
  align-items: baseline;
  margin-left: auto;
}
main .style__wrap .detail dl .price .taxInc {
  font-size: 0.8333333333vw;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .detail dl .price .taxInc {
    font-size: 10px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl .price .taxInc {
    font-size: 2.1333333333vw;
  }
}
main .style__wrap .detail dl .btn {
  width: 8.1666666667vw;
  margin-left: 0.5vw;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .detail dl .btn {
    width: 98px;
    margin-left: 6px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl .btn {
    width: 29.3333333333vw;
    margin-left: 2.6666666667vw;
  }
}
main .style__wrap .detail dl .btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.5833333333vw;
  padding-bottom: 0.5833333333vw;
  line-height: 1;
  letter-spacing: 0.0833333333vw;
  font-size: 1.1666666667vw;
  border: 1px solid #6c6a65;
  background: #6c6a65;
  color: #fff;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .detail dl .btn a {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 14px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl .btn a {
    padding-top: 0.9333333333vw;
    padding-bottom: 0.9333333333vw;
    font-size: 3.4666666667vw;
    transition: inherit;
  }
}
main .style__wrap .detail dl .btn a:hover {
  background: #fff;
  color: #C9AAD3;
  border: 1px solid #C9AAD3;
  transition: 0.3s;
}
@media only screen and (max-width: 750px) {
  main .style__wrap .detail dl .btn a:hover {
    background: #6c6a65;
    color: #fff;
    border: 1px solid #6c6a65;
    transition: #C9AAD3;
  }
}
main .style__wrap .size {
  display: flex;
  margin-left: 0.5vw;
  letter-spacing: 0.0833333333vw;
  font-size: 1.1666666667vw;
}
@media only screen and (min-width: 1200px) {
  main .style__wrap .size {
    margin-left: 6px;
    letter-spacing: 1px;
    font-size: 14px;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .size {
    display: flex;
    justify-content: space-between;
    width: 29.3333333333vw;
    margin-top: 2.6666666667vw;
    margin-left: auto;
    font-size: 3.2vw;
  }
}
@media only screen and (max-width: 750px) {
  main .style__wrap .size a {
    text-decoration: underline;
  }
}
main .reverse .imgBox {
  left: inherit;
  right: 0;
}
main .reverse .styleNum, main .reverse .heading, main .reverse .txtArea, main .reverse .detail {
  margin-left: 0;
  margin-right: auto;
}
@media only screen and (max-width: 750px) {
  main .reverse .imgBox {
    right: inherit;
    left: inherit;
  }
  main .reverse img {
    margin-left: auto;
    marign-right: 0;
  }
  main .reverse .styleNum {
    margin-left: 6.6666666667vw;
  }
  main .reverse .heading, main .reverse .txtArea, main .reverse .detail {
    margin-left: auto;
    margin-right: auto;
  }
}
main .other {
  width: 37.5vw;
  position: relative;
  margin-top: 10.8333333333vw;
  margin-bottom: 8.3333333333vw;
  margin-left: auto;
  margin-right: auto;
  transition: 0.3s;
}
@media only screen and (min-width: 1200px) {
  main .other {
    width: 450px;
    margin-top: 130px;
    margin-bottom: 100px;
  }
}
@media only screen and (max-width: 750px) {
  main .other {
    width: 73.3%;
    margin-top: 20vw;
    margin-bottom: 24vw;
  }
}
main .other-txt {
  width: 35vw;
  position: absolute;
  top: 24.1666666667vw;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (min-width: 1200px) {
  main .other-txt {
    width: 420px;
    top: 290px;
  }
}
@media only screen and (max-width: 750px) {
  main .other-txt {
    width: 65.3333333333vw;
    top: 40vw;
  }
}
main .other:hover {
  opacity: 0.7;
  transition: 0.3s;
}
@media only screen and (max-width: 750px) {
  main .other:hover {
    opacity: inherit;
    transition: inherit;
  }
}

.footer {
  width: 100%;
  text-align: center;
}
.footer p {
  margin-bottom: 1vw;
  font-size: 1.1666666667vw;
  font-weight: 300;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 1200px) {
  .footer p {
    margin-bottom: 12px;
    font-size: 14px;
  }
}
@media only screen and (max-width: 750px) {
  .footer p {
    margin-bottom: 4vw;
    font-size: 3.4666666667vw;
  }
}
@media only screen and (max-width: 750px) {
  .footer ul:nth-of-type(2) {
    flex-direction: column;
  }
}
.footer .share_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4.1666666667vw;
}
@media only screen and (min-width: 1200px) {
  .footer .share_box {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 750px) {
  .footer .share_box {
    margin-bottom: 10.6666666667vw;
  }
}
.footer .share_box .icon {
  width: 2.5vw;
  margin-left: 0.9166666667vw;
  margin-right: 0.9166666667vw;
}
@media only screen and (min-width: 1200px) {
  .footer .share_box .icon {
    width: 30px;
    margin-left: 11px;
    margin-right: 11px;
  }
}
@media only screen and (max-width: 750px) {
  .footer .share_box .icon {
    width: 8vw;
    margin-left: 8vw;
    margin-right: 8vw;
  }
}
.footer .share_box .jpress {
  width: 12.3333333333vw;
  margin-right: 4.1666666667vw;
}
@media only screen and (min-width: 1200px) {
  .footer .share_box .jpress {
    width: 148px;
    margin-right: 50px;
  }
}
@media only screen and (max-width: 750px) {
  .footer .share_box .jpress {
    width: 35.2vw;
    margin-right: inherit;
    margin-bottom: 6.6666666667vw;
  }
}
.footer .share_box .insta {
  width: 4.6666666667vw;
}
@media only screen and (min-width: 1200px) {
  .footer .share_box .insta {
    width: 56px;
  }
}
@media only screen and (max-width: 750px) {
  .footer .share_box .insta {
    width: 14.1333333333vw;
  }
}
.footer .brand_box {
  width: 100%;
  padding-top: 2.5vw;
  padding-bottom: 2.5vw;
  background: #000;
}
@media only screen and (min-width: 1200px) {
  .footer .brand_box {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 750px) {
  .footer .brand_box {
    padding-top: 6vw;
    padding-bottom: 6vw;
  }
}
.footer .brand_box .owd {
  width: 12.5vw;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1.6666666667vw;
}
@media only screen and (min-width: 1200px) {
  .footer .brand_box .owd {
    width: 150px;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 750px) {
  .footer .brand_box .owd {
    width: 34.6666666667vw;
    margin-bottom: 4vw;
  }
}
.footer .brand_box .copy {
  color: #fff;
  font-size: 0.9166666667vw;
  font-weight: 300;
  font-family: "Noto Sans JP", sans-serif;
}
@media only screen and (min-width: 1200px) {
  .footer .brand_box .copy {
    font-size: 11px;
  }
}
@media only screen and (max-width: 750px) {
  .footer .brand_box .copy {
    font-size: 2.5333333333vw;
    margin-bottom: 10.6666666667vw;
  }
}
.footer img {
  width: 100%;
  display: block;
}

.totop {
  width: 1.6666666667vw;
  position: fixed;
  right: 2.5vw;
  bottom: 2.5vw;
  opacity: 0;
  transition: 0.3s;
  z-index: 100;
}
@media only screen and (min-width: 1200px) {
  .totop {
    width: 20px;
    right: 30px;
    bottom: 30px;
  }
}
@media only screen and (max-width: 750px) {
  .totop {
    width: 4vw;
    right: 4vw;
    bottom: 16vw;
  }
}
.totop img {
  width: 100%;
  display: block;
}

.hidden {
  visibility: hidden;
}

.hidden-s {
  visibility: hidden;
}
@media only screen and (max-width: 750px) {
  .hidden-s {
    display: none !important;
    visibility: inherit;
  }
}

.kana {
  letter-spacing: -0.1666666667vw;
}
@media only screen and (min-width: 1200px) {
  .kana {
    letter-spacing: -2px;
  }
}
@media only screen and (max-width: 750px) {
  .kana {
    letter-spacing: -1.0666666667vw;
  }
}
/*# sourceMappingURL=style.css.map */