@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
@font-face {
  font-family: "Didot";
  src: url("/src/feature/20231220_1WEEK/fonts/didot.otf") format("opentype");
}
@font-face {
  font-family: "HTF Didot";
  src: url("/src/feature/20231220_1WEEK/fonts/HTFDidot-Medium24.otf") format("opentype");
}
/* base */
.ftool-wrapper > .article, .ftool-wrapper .description {
  padding-bottom: 0 !important;
}

.ss-article-main-image, .ftool-wrapper p {
  padding-bottom: 0 !important;
}

@media (max-width: 768px) {
  #sec01 {
    margin-left: -10px;
    padding-bottom: 0;
  }
}
/* setting */
html, body {
  width: 100%;
  height: auto;
  margin: 0;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  margin-block-start: 0em;
  margin-block-end: 0em;
}

:root {
  --scroll-bar-width:15px;
}

main .ftool-wrapper .title {
  font-size: unset;
  line-height: unset;
  margin-bottom: unset;
  font-weight: unset;
  letter-spacing: unset;
}

/* setting */
/* fixed設定 */
.pc {
  display: block;
}

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

@media screen and (max-width: 768px) {
  .sp {
    display: block;
  }
}
.description > #container {
  overflow: visible;
}

#container {
  max-width: 100vw;
  position: relative;
  overflow: clip;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
#container img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  vertical-align: top;
}
#container .l-articleLayout__wrap {
  margin: 0 auto;
  display: flow-root;
  max-width: 1280px;
  width: 100%;
}
#container .l-articleLayout__article {
  float: right;
  width: 60.9375%;
  position: relative;
  top: 0;
  margin-top: -100vh;
}
#container .l-articleLayout__title {
  position: sticky !important;
  float: left;
  width: 39.0625%;
  max-width: 500px;
  height: 100vh;
  margin-top: -100vh;
}
#container .l-articleLayout__title .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#container .d-fixed-area {
  position: relative;
}
#container .d-fixed-element {
  position: absolute;
  top: 0;
}
#container .d-fixed-element.is-fixed {
  position: fixed;
}
#container .l-articleLayout {
  background-attachment: fixed;
  background-position: top left;
  background-size: cover;
}
#container .main_visual {
  width: 100%;
  margin: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
#container .main_visual .title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(33 / 780 * var(--content-width));
}
#container .main_visual .title .main {
  width: calc(202 / 780 * var(--content-width));
}
#container .main_visual .title .sub {
  width: calc(418 / 780 * var(--content-width));
}
#container #contents {
  background-color: #FFF;
  width: 100%;
}
#container #contents .inner .mainVisualBlock {
  width: 100%;
}
#container #contents .inner .mainVisualBlock .mainVisualBlock__mv {
  width: 100%;
  position: relative;
}
#container #contents .inner .mainVisualBlock .mainVisualBlock__mv .mv__img {
  width: 100%;
}
#container #contents .inner .mainVisualBlock .mainVisualBlock__mv .mv__main {
  position: absolute;
  width: calc(101 / 390 * var(--content-width));
  top: calc(232 / 390 * var(--content-width));
  left: calc(144 / 390 * var(--content-width));
  z-index: 100;
}
#container #contents .inner .mainVisualBlock .mainVisualBlock__mv .mv__sub {
  position: absolute;
  width: calc(312 / 390 * var(--content-width));
  top: calc(318 / 390 * var(--content-width));
  left: calc(39 / 390 * var(--content-width));
  z-index: 100;
}
@media screen and (min-width: 768px) {
  #container #contents .inner .mainVisualBlock .mainVisualBlock__mv .mv__sub {
    top: calc(50vh - 56.0625 / 390 * var(--content-width));
  }
}
#container #contents .inner .mainVisualBlock .mainVisualBlock__lead {
  width: calc(312 / 390 * var(--content-width));
  margin-inline: auto;
  margin-top: calc(42.29 / 390 * var(--content-width));
}
#container #contents .inner .mainVisualBlock .mainVisualBlock__lead .lead__message {
  color: #000;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: calc(13 / 390 * var(--content-width));
  font-style: normal;
  font-weight: 500;
  line-height: calc(23.4 / 390 * var(--content-width));
}
@media screen and (min-width: 768px) {
  #container #contents .inner .mainVisualBlock .mainVisualBlock__lead .lead__message {
    font-size: calc(14 / 780 * var(--content-width));
    line-height: calc(28 / 780 * var(--content-width));
  }
}
#container #contents .inner .stylingBlock {
  width: 100%;
  margin-top: calc(61 / 390 * var(--content-width));
  position: relative;
}
#container #contents .inner .stylingBlock .title {
  position: sticky;
  width: calc(79 / 390 * var(--content-width));
  top: calc(39 / 390 * var(--content-width));
  left: calc(195 / 390 * var(--content-width) - 39.5 / 390 * var(--content-width));
  z-index: 9999999;
}
#container #contents .inner .stylingBlock .look_1 {
  margin-top: calc(34 / 390 * var(--content-width));
  width: calc(351 / 390 * var(--content-width));
  margin-inline: auto;
}
#container #contents .inner .stylingBlock .look_2 {
  margin-top: calc(60 / 390 * var(--content-width));
  width: 100%;
}
#container #contents .inner .stylingBlock .look_3-4 {
  margin-top: calc(62 / 390 * var(--content-width));
  width: calc(312 / 390 * var(--content-width));
  margin-inline: auto;
  display: flex;
  gap: calc(6 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_5-6 {
  margin-top: calc(80 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_7 {
  margin-top: calc(30 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_8-9 {
  padding-top: calc(61 / 390 * var(--content-width));
  width: calc(351 / 390 * var(--content-width));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: calc(14.5 / 390 * var(--content-width));
  position: relative;
}
#container #contents .inner .stylingBlock .look_8-9 img {
  position: sticky;
  top: calc(61 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_10 {
  width: calc(234 / 390 * var(--content-width));
  margin-inline: auto;
  margin-top: calc(61 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_11-12 {
  width: calc(352 / 390 * var(--content-width));
  height: calc(390 / 390 * var(--content-width));
  margin-top: calc(33 / 390 * var(--content-width));
  margin-inline: auto;
  position: relative;
}
#container #contents .inner .stylingBlock .look_11-12 ._11 {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(174 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_11-12 ._12 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(173 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_11-12 ._txt {
  position: absolute;
  top: calc(177 / 390 * var(--content-width));
  right: calc(131 / 390 * var(--content-width));
  width: calc(95 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_13 {
  margin-top: calc(20 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_14 {
  width: calc(173 / 390 * var(--content-width));
  margin-top: calc(48 / 390 * var(--content-width));
  margin-inline: auto;
  position: relative;
}
#container #contents .inner .stylingBlock .look_14 ._txt {
  position: absolute;
  top: calc(-19 / 390 * var(--content-width));
  right: calc(-35 / 390 * var(--content-width));
  width: calc(60 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_15 {
  margin-top: calc(20.71 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_16 {
  width: calc(234 / 390 * var(--content-width));
  margin-top: calc(62 / 390 * var(--content-width));
  margin-inline: auto;
}
#container #contents .inner .stylingBlock .look_17 {
  margin-top: calc(62 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_18 {
  margin-top: calc(20 / 390 * var(--content-width));
  width: calc(351 / 390 * var(--content-width));
  margin-inline: auto;
}
#container #contents .inner .stylingBlock .look_19-20 {
  padding-top: calc(62 / 390 * var(--content-width));
  width: calc(331 / 390 * var(--content-width));
  margin-left: calc(20 / 390 * var(--content-width));
  position: relative;
  height: calc(890 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_19-20 ._19 {
  width: calc(216 / 390 * var(--content-width));
  position: sticky;
  top: calc(62 / 390 * var(--content-width));
  margin-left: calc(136 / 390 * var(--content-width));
  z-index: 5;
}
#container #contents .inner .stylingBlock .look_19-20 ._20 {
  width: calc(312 / 390 * var(--content-width));
  position: sticky;
  top: calc(62 / 390 * var(--content-width));
  left: calc(0 / 390 * var(--content-width));
  z-index: 20;
}
#container #contents .inner .stylingBlock .look_19-20 ._txt {
  width: calc(312 / 390 * var(--content-width));
  position: sticky;
  top: calc(62 / 390 * var(--content-width));
  left: calc(0 / 390 * var(--content-width));
  z-index: 10;
}
#container #contents .inner .stylingBlock .look_21-22 {
  padding-top: calc(43 / 390 * var(--content-width));
  width: calc(371 / 390 * var(--content-width));
  margin-left: calc(19 / 390 * var(--content-width));
  position: relative;
  height: calc(735 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_21-22 ._21 {
  width: calc(312 / 390 * var(--content-width));
  position: sticky;
  top: calc(43 / 390 * var(--content-width));
  margin-left: calc(78 / 390 * var(--content-width));
  z-index: 5;
}
#container #contents .inner .stylingBlock .look_21-22 ._22 {
  width: calc(351 / 390 * var(--content-width));
  position: sticky;
  top: calc(230 / 390 * var(--content-width));
  left: calc(0 / 390 * var(--content-width));
  z-index: 10;
}
#container #contents .inner .stylingBlock .look_23 {
  margin-top: calc(62 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_24-25 {
  margin-top: calc(62 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_26_1 {
  width: calc(351 / 390 * var(--content-width));
  margin-inline: auto;
  margin-top: calc(58 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_26_2_3 {
  margin-top: calc(21 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_27 {
  margin-top: calc(54 / 390 * var(--content-width));
  position: relative;
}
#container #contents .inner .stylingBlock .look_27 ._txt {
  width: calc(20 / 390 * var(--content-width));
  position: absolute;
  top: calc(195 / 390 * var(--content-width));
  left: calc(21 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_28 {
  width: calc(234 / 390 * var(--content-width));
  margin-top: calc(62 / 390 * var(--content-width));
  margin-inline: auto;
}
#container #contents .inner .stylingBlock .look_29 {
  margin-top: calc(62 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .look_30-31 {
  padding-top: calc(30 / 390 * var(--content-width));
  width: calc(351 / 390 * var(--content-width));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: calc(30.5 / 390 * var(--content-width));
  position: relative;
}
#container #contents .inner .stylingBlock .look_30-31 img {
  position: sticky;
  top: calc(61 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .slick-dotted.slick-slider {
  margin-bottom: 0;
}
#container #contents .inner .stylingBlock .slick-dots {
  bottom: calc(20 / 390 * var(--content-width));
  right: calc(20 / 390 * var(--content-width));
  z-index: 100;
  width: unset;
}
#container #contents .inner .stylingBlock .slick-dots li {
  margin: 0;
}
#container #contents .inner .stylingBlock .slick-dots li button:before {
  font-size: 12px;
  content: "◼︎";
  color: #EC5700;
}
#container #contents .inner .stylingBlock .slick-dots li .slick-active button:before {
  opacity: 1;
  color: #EC5700;
}
#container #contents .inner .stylingBlock .text {
  color: #000;
  font-family: "Noto Serif JP", serif;
  font-size: calc(13 / 390 * var(--content-width));
  font-style: normal;
  font-weight: 500;
  line-height: calc(23.4 / 390 * var(--content-width));
  width: calc(312 / 390 * var(--content-width));
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  #container #contents .inner .stylingBlock .text {
    font-size: calc(13 / 780 * var(--content-width));
    width: calc(540 / 780 * var(--content-width));
    line-height: calc(23.4 / 780 * var(--content-width));
  }
}
#container #contents .inner .stylingBlock .text._1 {
  margin-top: calc(20 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .text._2 {
  margin-top: calc(22 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .text._3 {
  margin-top: calc(19 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .text._4 {
  margin-top: calc(19 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .text._5 {
  margin-top: calc(17 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .text._6 {
  margin-top: calc(23.71 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .text._7 {
  margin-top: calc(27 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .text._8 {
  margin-top: calc(21 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .text._9 {
  margin-top: calc(15 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .text._10 {
  margin-top: calc(20.5 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList {
  width: calc(312 / 390 * var(--content-width));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: calc(4 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem {
  color: #000;
  font-family: "nimbus-roman", serif;
  font-size: calc(12 / 390 * var(--content-width));
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  gap: calc(8 / 390 * var(--content-width));
  align-items: center;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  #container #contents .inner .stylingBlock .creditList .creditList__listItem {
    font-size: calc(12 / 780 * var(--content-width));
    gap: calc(8 / 780 * var(--content-width));
  }
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem a {
  text-decoration-line: underline;
  color: #000;
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem a.preorder {
  color: #EC5700;
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem .line {
  display: none;
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem .pre {
  color: #EC5700;
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem .pre span {
  font-size: calc(11 / 390 * var(--content-width));
}
@media screen and (min-width: 768px) {
  #container #contents .inner .stylingBlock .creditList .creditList__listItem .pre span {
    font-size: calc(11 / 780 * var(--content-width));
  }
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem:has(> .item-d-none) .line {
  display: inline;
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem:has(> .item-d-none) .pre {
  display: inline;
  color: #EC5700;
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem:has(> .item-d-none) .pre a {
  color: #EC5700;
}
#container #contents .inner .stylingBlock .creditList .creditList__listItem:has(> .item-d-none) .pre span {
  font-size: calc(11 / 390 * var(--content-width));
}
@media screen and (min-width: 768px) {
  #container #contents .inner .stylingBlock .creditList .creditList__listItem:has(> .item-d-none) .pre span {
    font-size: calc(11 / 780 * var(--content-width));
  }
}
#container #contents .inner .stylingBlock .creditList._1 {
  margin-top: calc(22 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._2-3 {
  margin-top: calc(15 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._4 {
  margin-top: calc(15 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._5-6 {
  margin-top: calc(15.5 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._7 {
  margin-top: calc(15 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._8 {
  margin-top: calc(12 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._9 {
  margin-top: calc(15 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._10 {
  margin-top: calc(15.39 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._11 {
  margin-top: calc(22 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._12 {
  margin-top: calc(14 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._13 {
  margin-top: calc(14 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._14-15 {
  margin-top: calc(18 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._15 {
  margin-top: calc(15 / 390 * var(--content-width));
  margin-left: calc(123 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._16 {
  margin-top: calc(12 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._17 {
  margin-top: calc(15.39 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .creditList._18 {
  margin-top: calc(22 / 390 * var(--content-width));
}
#container #contents .inner .stylingBlock .item-d-none {
  display: none;
}
#container #contents .inner .creditBlock {
  margin-top: calc(94 / 390 * var(--content-width));
  height: calc(585 / 390 * var(--content-width));
  background-image: url(../32.jpg);
  background-size: cover;
  position: relative;
}
#container #contents .inner .creditBlock .creditBlock__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: calc(365 / 390 * var(--content-width));
  left: calc(142 / 390 * var(--content-width));
}
@media screen and (min-width: 768px) {
  #container #contents .inner .creditBlock .creditBlock__list {
    left: calc(340 / 780 * var(--content-width));
  }
}
#container #contents .inner .creditBlock .creditBlock__list .listItem {
  display: flex;
  gap: calc(8 / 390 * var(--content-width));
  color: #fff;
  font-family: "nimbus-roman", serif;
  font-size: calc(14 / 390 * var(--content-width));
  font-style: normal;
  font-weight: 400;
  line-height: calc(24 / 390 * var(--content-width)); /* 171.429% */
}
@media screen and (min-width: 768px) {
  #container #contents .inner .creditBlock .creditBlock__list .listItem {
    gap: calc(8 / 780 * var(--content-width));
    font-size: calc(14 / 780 * var(--content-width));
    line-height: calc(24 / 780 * var(--content-width));
  }
}
#container #contents .inner .creditBlock .creditBlock__list .listItem a {
  text-decoration-line: underline;
  color: #fff;
}
#container #contents .inner .creditBlock .title {
  width: calc(101 / 390 * var(--content-width));
  position: absolute;
  top: calc(284 / 390 * var(--content-width));
  left: calc(144 / 390 * var(--content-width));
}
#container .l-articleBack {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  z-index: -10;
  width: 100vw;
  height: 100vh;
  background-color: #FFF;
  background-size: cover;
  background-position: center center;
  margin: 0 calc(50% - 50vw);
}

@media screen and (max-width: 768px) {
  #container .l-articleLayout__wrap {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #container .l-articleLayout__article {
    float: none;
    left: 0;
    width: auto;
  }
}
@media screen and (max-width: 768px) {
  #container .main_visual {
    width: 100%;
    position: relative;
    transform: unset;
    -webkit-transform: unset;
    -ms-transform: unset;
  }
}
@media screen and (max-width: 768px) {
  #container #contents {
    width: 100%;
  }
}
.js-fadeIn, .js-fadeIn-loaded {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s;
}

.js-fadeIn.scroll, .js-fadeIn-loaded.scroll {
  opacity: 1;
  visibility: visible;
}

.js-fadeBottom {
  opacity: 0;
  visibility: hidden;
  transform: translateY(80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js-fadeBottom.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.js-fadeTop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js-fadeTop.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.js-fadeLeft {
  opacity: 0;
  visibility: hidden;
  transform: translateX(80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js-fadeLeft.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}

.js-fadeRight {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-80px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js-fadeRight.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}

/*# sourceMappingURL=index.css.map */