@charset "UTF-8";
@import url("https://use.typekit.net/vee1vze.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Play:wght@400;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
/* base */
.ftool-wrapper > .article,
.ftool-wrapper .description,
.ss-article-main-image,
.ftool-wrapper p {
  padding-bottom: 0 !important;
}

.ftool-wrapper p {
  margin-bottom: 0;
}

#sec01 {
  margin: 0 calc(50% - 50vw);
  width: calc(100vw - 8px);
  max-width: calc(100vw - 8px);
  padding-bottom: 0;
  overflow: hidden;
}
#sec01 .mb60,
#sec01 .description {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  #sec01 {
    max-width: calc(100% + 20px);
    width: calc(100% + 20px);
    margin-left: -10px;
    padding-bottom: 0;
  }
}

body,
html {
  overflow-x: clip;
}

body,
p,
dd,
ul,
li {
  margin: unset;
  margin-block-start: unset;
  margin-block-end: unset;
  margin-inline-start: unset;
  margin-inline-end: unset;
  padding-inline-start: unset;
}

ul,
li {
  list-style: none;
}

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

.pc {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}

:root {
  font-size: 10px;
}

.ftool-wrapper .col--02--C {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .ftool-wrapper .col--02--C {
    width: 100%;
    margin-inline: auto;
  }
}
.ftool-wrapper .ref-item {
  margin-bottom: 10px;
}
.ftool-wrapper .ref-item .thumb {
  width: 50px;
  display: none;
}
.ftool-wrapper .ref-item .brand,
.ftool-wrapper .ref-item .name,
.ftool-wrapper .ref-item .price {
  margin-left: 0px;
  color: currentColor;
}
.ftool-wrapper .ref-item .brand {
  display: none;
}
.ftool-wrapper .ref-item .name {
  font-size: 11px;
}
.ftool-wrapper .ref-item .price {
  font-size: 10px;
}

body {
  overflow-x: clip;
}

.contents {
  background: #fff;
  width: 100%;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .contents {
    display: block;
  }
}
.contents img {
  width: 100%;
}

.kv {
  max-width: 1080px;
  width: 100%;
  margin-inline: auto;
  position: relative;
  margin-top: 3%;
  margin-bottom: 3%;
}
@media screen and (max-width: 768px) {
  .kv {
    margin-top: 8vw;
    margin-bottom: 8vw;
  }
}
.kv_inner {
  margin-bottom: 2.34vw;
  width: 90%;
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .kv_inner {
    margin-bottom: 8vw;
    display: block;
    width: 100%;
  }
}
.kv_title {
  font-family: "presicav", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: min(10.94vw, 130px);
  line-height: 0.86;
}
@media screen and (max-width: 768px) {
  .kv_title {
    font-size: 16vw;
    margin-left: 5%;
  }
}
.kv_tag {
  max-width: 260px;
  width: 28%;
  position: absolute;
  top: -1%;
  right: 10%;
}
@media screen and (max-width: 768px) {
  .kv_tag {
    width: 34.67vw;
    top: -2%;
    right: 0;
  }
}
.kv .img {
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2%;
  row-gap: 1.2vw;
  margin-bottom: 2.34vw;
}
@media screen and (max-width: 768px) {
  .kv .img {
    margin-bottom: 8vw;
  }
}
.kv .img li {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.kv .img.is-show li {
  opacity: 1;
}

.lead {
  font-size: min(1.02vw, 12.5px);
  line-height: 1.8;
  width: 60%;
  margin-right: 10%;
  margin-left: 10%;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .lead {
    width: 80%;
    margin-left: 5%;
    font-size: 11px;
    margin-bottom: 8vw;
  }
}
@media screen and (max-width: 768px) and (min-width: 769px) and (max-width: 1023px) {
  .lead {
    font-size: clamp(11px, 11px + (12px - 11px) * (100vw - 769px) / (254px), 12px);
  }
}
@media screen and (max-width: 768px) and (min-width: 1024px) {
  .lead {
    font-size: 12px;
  }
}

.lead_line {
  width: 1px;
  height: 80px;
  margin: 30px auto 30px;
  background: #000;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}
.lead_line.scrollin {
  transform: scaleY(1);
  opacity: 1;
}

.contents .article {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 700px;
}
.contents .articles {
  display: grid;
  gap: 0.94vw;
}
@media screen and (max-width: 768px) {
  .contents .articles {
    display: grid;
    gap: 1.6vw;
  }
}
.contents .article-img.img-bk {
  background: #000;
}
.contents .article-img.img-bk img {
  opacity: 0.8;
}
.contents .article .memo {
  position: absolute;
  bottom: 40%;
  width: 42%;
}
.contents .article .memo-right {
  right: 0;
}
.contents .article .memo-left {
  left: 0;
}

.look {
  position: relative;
}

body.modal-open {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  overflow: hidden;
}

section#modalWrap {
  background-color: #f9f9f9;
  width: 100%;
  height: 100%;
  padding: 10% 0;
  margin: 0;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  overflow: scroll;
  display: none;
  -webkit-overflow-scrolling: touch;
}
section#modalWrap .modal {
  position: relative;
  max-width: 800px;
  width: 90%;
  margin: 0 auto 10%;
}
@media screen and (max-width: 768px) {
  section#modalWrap .modal {
    width: 80%;
  }
}
section#modalWrap .modal-content_img {
  margin-bottom: 10px;
}
section#modalWrap .modal#modal19 {
  padding-bottom: 10%;
}

/*-----モーダルオープンの＋ボタン、モーダル閉じのXボタン設定-----*/
[class*=btn-] {
  cursor: pointer;
  z-index: 10;
}

a.js-modal-open {
  cursor: pointer;
  position: relative;
  display: block;
}

.btn-open {
  font-family: "presicav", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: min(1.25vw, 18px);
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: #fff;
  padding: 1px 5px;
}
@media screen and (max-width: 768px) {
  .btn-open {
    bottom: 5%;
    right: 5%;
    font-size: min(3.2vw, 18px);
  }
}
.btn-close {
  position: fixed;
  z-index: 100;
  width: 36px;
  height: 36px;
  top: 5%;
  right: 5%;
}
@media screen and (max-width: 768px) {
  .btn-close {
    top: 3%;
  }
}
.btn-close::before, .btn-close::after {
  content: "";
  position: absolute;
  background: currentColor;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 50%;
}
.btn-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.btn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-title {
  font-family: "presicav", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: min(3.13vw, 40px);
  line-height: 0.86;
  width: 90%;
  margin-inline: auto;
  position: fixed;
  top: 5%;
  left: 5%;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .modal-title {
    font-size: min(4.69vw, 60px);
    top: 3%;
  }
}

.credit {
  font-family: "presicav", sans-serif;
  font-weight: 300;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .credit {
    padding-bottom: 13.33vw;
  }
}
.credit {
  font-size: 10px;
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .credit {
    font-size: clamp(10px, 10px + (12px - 10px) * (100vw - 769px) / (254px), 12px);
  }
}
@media screen and (min-width: 1024px) {
  .credit {
    font-size: 12px;
  }
}
.credit li {
  line-height: 1.2;
  margin-bottom: 4px;
  gap: 6px;
  margin-inline: auto;
  display: flex;
}
@media screen and (max-width: 768px) {
  .credit li {
    width: 100%;
  }
}
.credit a {
  color: currentColor;
  text-decoration: underline;
}
.credit div.item-d-none .link {
  display: none;
}
.credit div:not(.item-d-none) > .arrival-notice {
  display: none;
}

.staffs {
  font-family: "presicav", sans-serif;
  font-weight: 300;
  font-style: normal;
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  font-size: 16px;
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .staffs {
    font-size: clamp(16px, 16px + (20px - 16px) * (100vw - 769px) / (254px), 20px);
  }
}
@media screen and (min-width: 1024px) {
  .staffs {
    font-size: 20px;
  }
}
.staffs {
  margin-top: 2.34vw;
  margin-bottom: 2.34vw;
}
@media screen and (max-width: 768px) {
  .staffs {
    margin-top: 8vw;
    margin-bottom: 8vw;
  }
}
.staffs .prf {
  position: relative;
  font-size: 10px;
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .staffs .prf {
    font-size: clamp(10px, 10px + (12px - 10px) * (100vw - 769px) / (254px), 12px);
  }
}
@media screen and (min-width: 1024px) {
  .staffs .prf {
    font-size: 12px;
  }
}
.staffs .prfs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.staffs .prf a {
  color: currentColor;
}
.staffs .prf .label {
  position: absolute;
  top: 13%;
  left: 16%;
}
.staffs .prf .name {
  font-size: 15px;
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .staffs .prf .name {
    font-size: clamp(15px, 15px + (22px - 15px) * (100vw - 769px) / (254px), 22px);
  }
}
@media screen and (min-width: 1024px) {
  .staffs .prf .name {
    font-size: 22px;
  }
}
.staffs .prf .name {
  position: absolute;
  top: 33%;
  left: 16%;
}
.staffs .prf .ig {
  position: absolute;
  bottom: 34%;
  left: 16%;
  display: grid;
  grid-template-columns: 12% 80%;
  gap: 5%;
}

.footer {
  padding-top: 7.81vw;
  padding-bottom: 3.91vw;
  width: 100%;
  margin-inline: auto;
  position: relative;
  font-family: "presicav", sans-serif;
  font-weight: 300;
  font-style: normal;
  z-index: 5;
}
.footer__link {
  font-size: 12px;
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .footer__link {
    font-size: clamp(12px, 12px + (14px - 12px) * (100vw - 769px) / (254px), 14px);
  }
}
@media screen and (min-width: 1024px) {
  .footer__link {
    font-size: 14px;
  }
}
.footer__link {
  text-align: center;
  justify-content: center;
  display: flex;
  gap: 2%;
  margin-bottom: 2.34vw;
}
@media screen and (max-width: 768px) {
  .footer__link {
    margin-bottom: 8vw;
  }
}
.footer__link a {
  margin-inline: auto;
  color: currentColor;
  text-decoration: underline;
}
.footer__link a:last-of-type {
  margin-right: 0;
}

.copy {
  font-family: "presicav", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 10px;
  text-align: center;
}

.js-inview {
  opacity: 0;
  transform: translate(0, 0px);
  transition: all 0.8s ease 0.4s;
}
.js-inview.is-inview {
  opacity: 1;
  transform: translate(0, 0);
}/*# sourceMappingURL=style.css.map */