@charset "UTF-8";

/* ------------------------------------------------------------ */
/* common */
.page__masterpiece {
  min-width: 100% !important;
}

.page__masterpiece.is-modal-open {
  overflow: hidden;
}

.masterpiece_cont .sp-none {
  display: none !important;
}

.masterpiece_cont .pc-none {
  display: block !important;
}

@media (min-width: 1024px) {
  .masterpiece_cont .sp-none {
    display: block !important;
  }

  .masterpiece_cont .pc-none {
    display: none !important;
  }
}

.page__masterpiece .masterpiece_cont * {
  font-family: "Zen Old Mincho", serif;
}

.page__masterpiece .masterpiece_cont {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-family: "Zen Old Mincho", serif !important;
  line-height: normal;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  overflow-wrap: break-word;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  /* 約物も含めすべての文字間が詰まる */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* スマホで表示させた際、横向きにするとフォントサイズが拡大されてしまうのを防止 */
}

.page__masterpiece .masterpiece_cont p,
.page__masterpiece .masterpiece_cont ul,
.page__masterpiece .masterpiece_cont ol,
.page__masterpiece .masterpiece_cont dl,
.page__masterpiece .masterpiece_cont pre,
.page__masterpiece .masterpiece_cont address,
.page__masterpiece .masterpiece_cont fieldset,
.page__masterpiece .masterpiece_cont figure {
  margin: 0;
  padding: 0;
}

.masterpiece_cont .base {
  position: relative;
}

.masterpiece_cont .clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.masterpiece_cont .flex_cont {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .masterpiece_cont .pc-flex_cont {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

.masterpiece_cont .grid_cont {
  display: grid;
}

.masterpiece_cont .vertical {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  /* 英字や数字も日本語のように正立 */
  -webkit-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
  margin: 0;
  /*overflow: hidden;*/
}

.masterpiece_cont .ttl_cont h2 {
  max-width: max-content;
  margin: 0 auto;
}

/* background */
.masterpiece_cont .clip_parallax {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
}

.masterpiece_cont .clip_parallax .clip_bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  /* background: url(../images/image.webp)center / cover no-repeat; */
  left: 0;
  top: 0;
  right: 0;
  bottom: auto;
  z-index: -1;
}

/* btn */
.page__new-covaco__history .masterpiece_cont .close-btn {
  height: 28px;
  width: 28px;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  cursor: pointer;
  display: block;
}

.page__new-covaco__history .masterpiece_cont .close-btn .lineClose {
  display: inline-block;
  vertical-align: middle;
  color: #FFF;
  line-height: 1;
  width: 100%;
  height: 1px;
  background: currentColor;
  position: relative;
  transform: rotate(45deg);
}

.page__new-covaco__history .masterpiece_cont .close-btn .lineClose::before {
  content: '';
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
  display: block;
}

@media (min-width: 1024px) {}

/* ------------------------------------------------------------ */
/* animation */
/* フェードイン */
.masterpiece_cont .FadeIn {
  opacity: 0;
  transition: all 1s;
}

.masterpiece_cont .FadeIn.is-show {
  opacity: 1;
}

/* 上へ */
.masterpiece_cont .InUp {
  opacity: 0;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px);
  transition-duration: 1s;
  transition-delay: 0.5s;
}

.masterpiece_cont .InUp.is-show {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* 左へ */
.masterpiece_cont .InLft {
  opacity: 0;
  transform: translate(60px, 0);
  -webkit-transform: translate(60px, 0);
  transition-duration: 1s;
  transition-delay: 0.5s;
}

.masterpiece_cont .InLft.is-show {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* 右へ */
.masterpiece_cont .InRgt {
  opacity: 0;
  transform: translate(-60px, 0);
  -webkit-transform: translate(-60px, 0);
  transition-duration: 1s;
  transition-delay: 0.5s;
}

.masterpiece_cont .InRgt.is-show {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

/* シール横 */
.masterpiece_cont .StickerX {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}

.masterpiece_cont .StickerX.is-show {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

/* シール縦 */
.masterpiece_cont .StickerY {
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
  transition: 1s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}

.masterpiece_cont .StickerY.is-show {
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
}

/* フォーカス */
.masterpiece_cont .FocusIn {
  opacity: 0;
}

.masterpiece_cont .FocusIn.is-show {
  -webkit-animation: FocusIn 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.2s both;
  animation: FocusIn 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) 0.2s both;
}

@-webkit-keyframes FocusIn {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes FocusIn {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/* 表示までの時間 */
.masterpiece_cont .in01 {
  animation-delay: 3s !important;
  transition-delay: 3s !important;
}

/* 線が伸びる */
.history-line {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 1px;
  height: 0;
  background: #FFF
}

/* ------------------------------------------------------------ */
/* hero */
.page__new-covaco__history .masterpiece_cont .hero {
  color: #FFF;
  width: 100%;
  padding: 205px 0 113px;
}

.page__new-covaco__history .masterpiece_cont .hero .inner {
  max-width: 85%;
  width: 90%;
  margin: 0 auto;
}

.page__new-covaco__history .masterpiece_cont .hero .ttl_cont {
  max-width: max-content;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.page__new-covaco__history .masterpiece_cont .hero .ttl_cont h1 span {
  display: block;
}

.page__new-covaco__history .masterpiece_cont .hero .ttl_cont h1 .category {
  font-size: 33px;
  line-height: 47px;
  letter-spacing: 1px;
}

.page__new-covaco__history .masterpiece_cont .hero .ttl_cont h1 .name {
  font-size: 15px;
  letter-spacing: 3px;
  margin-top: 17px;
}

.page__new-covaco__history .masterpiece_cont .hero .txt_cont {
  margin-top: 225px;
}

.page__new-covaco__history .masterpiece_cont .hero .txt_cont h2 {
  font-size: 17px;
  line-height: 33px;
  margin-bottom: 19px;
  letter-spacing: 1px;
  max-width: max-content;
}

.page__new-covaco__history .masterpiece_cont .hero .txt_cont p {
  font-size: 14px;
  line-height: 30px;
}

.page__new-covaco__history .masterpiece_cont .hero.clip_parallax .clip_bg {
  background: url(../images/history/sp_hero_img_1.webp) center bottom / cover no-repeat;
  min-height: 100vh;
  width: 100%;
}

@media (min-width: 1024px) {
  .page__new-covaco__history .masterpiece_cont .hero {
    padding: 400px 0 305px;
  }

  .page__new-covaco__history .masterpiece_cont .hero .inner {
    max-width: 1130px;
  }

  .page__new-covaco__history .masterpiece_cont .hero .ttl_cont {
    margin: 0;
    text-align: left;
  }

  .page__new-covaco__history .masterpiece_cont .hero .ttl_cont h1 .category {
    letter-spacing: 2px;
  }

  .page__new-covaco__history .masterpiece_cont .hero .ttl_cont h1 .name {
    font-size: 22px;
    margin-top: 20px;
  }

  .page__new-covaco__history .masterpiece_cont .hero .txt_cont {
    max-width: max-content;
    margin: 514px 0 0 auto;
  }

  .page__new-covaco__history .masterpiece_cont .hero .txt_cont h2 {
    font-size: 29px;
    line-height: 58px;
    margin-bottom: 46px;
  }

  .page__new-covaco__history .masterpiece_cont .hero .txt_cont p {
    font-size: 17px;
    line-height: 42px;
    letter-spacing: 1.5px;
  }

  .page__new-covaco__history .masterpiece_cont .hero.clip_parallax .clip_bg {
    background: url(../images/history/hero_img_1.webp) center bottom / cover no-repeat;
  }
}

/* ------------------------------------------------------------ */
/* history */
.page__new-covaco__history .masterpiece_cont .history {
  color: #FFF;
  width: 100%;
}

.page__new-covaco__history .masterpiece_cont .history .ttl_cont h2 {
  font-size: 19px;
  text-align: center;
  letter-spacing: 1px;
  max-width: max-content;
  margin: 80px auto 85px;
}

.page__new-covaco__history .masterpiece_cont .history .history_cont-1 .clip_bg {
  background: url(../images/history/sp_history_img_1.webp) center / cover no-repeat;
}

.page__new-covaco__history .masterpiece_cont .history .history_cont-2 .clip_bg {
  background: url(../images/history/sp_history_img_2.webp) center / cover no-repeat;
}

.page__new-covaco__history .masterpiece_cont .history .history_cont-3 .clip_bg {
  background: url(../images/history/sp_history_img_3.webp) center / cover no-repeat;
}

.page__new-covaco__history .masterpiece_cont .history .history_cont-4 .clip_bg {
  background: url(../images/history/sp_history_img_4.webp) center / cover no-repeat;
}

.page__new-covaco__history .masterpiece_cont .history .history_list {
  max-width: 275px;
  width: 85%;
  margin: 0 auto;
}

.page__new-covaco__history .masterpiece_cont .history .history_item {
  padding-top: 45px;
  padding-bottom: 45px;
  padding-left: 53px;
  z-index: 2;
}

.page__new-covaco__history .masterpiece_cont .history .history_cont-1 .history_item:first-of-type {
  padding-top: 0;
}

.page__new-covaco__history .masterpiece_cont .history .history_cont-4 .history_item:last-of-type {
  padding-bottom: 90px;
}

.page__new-covaco__history .masterpiece_cont .history .history_item .year {
  position: relative;
  z-index: 2;
}

.page__new-covaco__history .masterpiece_cont .history .history_item .year::before {
  content: "";
  position: absolute;
  top: 10px;
  width: 35px;
  border: 1px dashed #FFF;
  opacity: 0.4;
  left: -50px;
}

.page__new-covaco__history .masterpiece_cont .history .history_cont-4 .history_item:last-of-type .year::before,
.page__new-covaco__history .masterpiece_cont .history .history_cont-4 .history_item:last-of-type .year::after {
  display: none;
}

.page__new-covaco__history .masterpiece_cont .history .history_item .year::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -72px;
  width: 40px;
  height: 40px;
}

.page__new-covaco__history .masterpiece_cont .history .history_cont-1 .history_item:first-of-type .year::after {
  top: -10px;
}

.page__new-covaco__history .masterpiece_cont .history .lft_item .year::after {
  background: url(../images/history/icon_bino.svg);
}

.page__new-covaco__history .masterpiece_cont .history .rgt_item .year::after {
  background: url(../images/history/icon_yononaka.svg);
}

.page__new-covaco__history .masterpiece_cont .history .history_item h3 {
  font-size: 18px;
  letter-spacing: 3px;
  margin-bottom: 2px;
  color: #FFECAD;
}

.page__new-covaco__history .masterpiece_cont .history .history_item h4 {
  font-size: 16px;
  line-height: 27px;
  letter-spacing: 1px;
}

.page__new-covaco__history .masterpiece_cont .history .history_item p {
  font-size: 14px;
  line-height: 26px;
  margin-top: 16px;
}

@media (min-width: 1024px) {
  .page__new-covaco__history .masterpiece_cont .history .ttl_cont h2 {
    font-size: 25px;
    margin: 300px auto 45px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont-1 .clip_bg {
    background: url(../images/history/history_img_1.webp) center / cover no-repeat;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont-2 .clip_bg {
    background: url(../images/history/history_img_2.webp) center / cover no-repeat;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont-3 .clip_bg {
    background: url(../images/history/history_img_3.webp) center / cover no-repeat;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont-4 .clip_bg {
    background: url(../images/history/history_img_4.webp) center / cover no-repeat;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_list {
    max-width: 810px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_item {
    width: 50%;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont .history_item:nth-of-type(1) {
    padding-top: 97px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont-3 .history_item:nth-of-type(2) {
    padding-top: 97px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont-1 .history_item:first-of-type {
    padding-top: 206px;
    margin-top: -10px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont .history_item:last-of-type {
    padding-bottom: 97px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont-4 .history_item:last-of-type {
    padding-bottom: 265px;
  }

  .page__new-covaco__history .masterpiece_cont .history .lft_item {
    margin: 0;
    text-align: right;
    padding-right: 50px;
    padding-left: 0;
  }

  .page__new-covaco__history .masterpiece_cont .history .rgt_item {
    margin: 0 0 0 auto;
    padding-left: 50px;
  }

  .page__new-covaco__history .masterpiece_cont .history .lft_item .year::before {
    right: -50px;
    top: 18px;
    left: auto;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_item .year::before {
    top: 18px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_item .year::after {
    top: 11px;
    width: 17px;
    height: 17px;
    background: #FFECAD;
    border-radius: 9999px;
  }

  .page__new-covaco__history .masterpiece_cont .history .lft_item .year::after {
    right: -58px;
    left: auto;
  }

  .page__new-covaco__history .masterpiece_cont .history .rgt_item .year::after {
    left: -60px;
    top: 10px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_cont-1 .history_item:first-of-type .year::after {
    top: 10px;
  }

  .page__new-covaco__history .masterpiece_cont .history .lft_item .history-line {
    left: auto;
    right: 0;
  }

  .page__new-covaco__history .masterpiece_cont .history .rgt_item .history-line {
    left: -1px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_item h3 {
    font-size: 30px;
    margin-bottom: 23px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_item h4 {
    font-size: 24px;
    line-height: 37px;
    letter-spacing: 1.5px;
  }

  .page__new-covaco__history .masterpiece_cont .history .history_item p {
    font-size: 18px;
    line-height: 37px;
    letter-spacing: 1px;
  }

  /* 初期位置 */
  .page__new-covaco__history .masterpiece_cont .history .index_bino,
  .page__new-covaco__history .masterpiece_cont .history .index_ayumi {
    position: absolute;
    top: 335px;
    z-index: 20;
  }

  .page__new-covaco__history .masterpiece_cont .history .index_bino {
    left: 37px;
  }

  .page__new-covaco__history .masterpiece_cont .history .index_ayumi {
    right: 37px;
  }

  /* 追従中 */
  .page__new-covaco__history .masterpiece_cont .history .index_bino.is-fixed,
  .page__new-covaco__history .masterpiece_cont .history .index_ayumi.is-fixed {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
  }

  /* 下端停止 */
  .page__new-covaco__history .masterpiece_cont .history .index_bino.is-bottom,
  .page__new-covaco__history .masterpiece_cont .history .index_ayumi.is-bottom {
    position: absolute;
    transform: none;
  }
}

/* ------------------------------------------------------------ */
/* evo */
.page__new-covaco__history .masterpiece_cont .evo {
  padding: 165px 0 307px;
  color: #FFF;
  min-height: 100vh;
  min-height: 100svh;
}

.page__new-covaco__history .masterpiece_cont .evo .ttl_cont {
  text-align: center;
}

.page__new-covaco__history .masterpiece_cont .evo .ttl_cont h2 {
  font-size: 16px;
  line-height: 32px;
  margin-bottom: 14px;
  letter-spacing: 1px;
}

.page__new-covaco__history .masterpiece_cont .evo .ttl_cont p {
  font-size: 14px;
}

.page__new-covaco__history .masterpiece_cont .evo .clip_bg {
  background: url(../images/history/sp_evo_img_1.webp) center / cover no-repeat;
}

@media (min-width: 1024px) {
  .page__new-covaco__history .masterpiece_cont .evo {
    padding: 249px 0 592px;
  }

  .page__new-covaco__history .masterpiece_cont .evo .ttl_cont h2 {
    font-size: 29px;
    line-height: 58px;
    margin-bottom: 26px;
    letter-spacing: 2px;
  }

  .page__new-covaco__history .masterpiece_cont .evo .ttl_cont p {
    font-size: 17px;
  }

  .page__new-covaco__history .masterpiece_cont .evo .clip_bg {
    background: url(../images/history/evo_img_1.webp) center / cover no-repeat;
  }
}