@charset "UTF-8";

/*---------- reset ----------*/
/*---------- reset ----------*/
/*---------- all common ----------*/
html {
  font-size: 62.5%;
  box-sizing: border-box;
}

.issue_220728 img,
.issue_220728 svg {
  width: 100%;
  height: auto;
}

.issue_220728 a,
.issue_220728 picture {
  display: block;
}

.issue_220728 .pc-only {
  display: none;
}

@media screen and (min-width: 768px) {
  .issue_220728 .pc-only {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .issue_220728 .sp-only {
    display: none;
  }
}

/*---------- all common ----------*/
/*---------- animation ----------*/
/*------ fade-in ------*/
.js-fade-Vr-first,
.js-fade-Vr {
  opacity: 0;
  transition-duration: 1.5s;
}

.js-fade-Vr-first::before,
.js-fade-Vr::before {
  transition-delay: 0.8s;
  transition-duration: 0.7s;
}

.js-fade-Vr-first.active,
.js-fade-Vr.active {
  opacity: 1;
}

/*------ fade-in ------*/
/*------ ornament ------*/
.decoration {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.decoration--hero {
  position: absolute;
  width: 100%;
  height: 0%;
  margin: auto;
  top: calc(830 *(100vw / 750));
  z-index: 30;
  left: 0;
  right: 0;
  overflow-y: hidden;
  transition-duration: 6s;
}

.decoration--hero {
  background-repeat: no-repeat;
  background-image: url(/Page/issue/issue_220728/img/hero-bg-sml.png);
  background-size: 100%;
}

.decoration--hero svg {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .decoration--hero {
    top: 0;
    z-index: 0;
    background-image: url(/Page/issue/issue_220728/img/hero-bg-lrg.png);
    background-size: 100%;
    background-position: top center;
  }
}

@media (min-width: 768px) and (max-width: 1920px) {
  .decoration--hero {
    background-size: 1920px;
    background-position: top center;
  }
}

.decoration--hero.active {
  height: 100%;
}

.decoration-scroll {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.decoration-scroll--01--01 {
  width: calc(226 *(100vw / 750));
  left: calc(0 *(100vw / 750));
  bottom: calc(-638 *(100vw / 750));
}

.decoration-scroll--01--02 {
  width: calc(62 *(100vw / 750));
  top: calc(1067 *(100vw / 750));
  right: calc(17 *(100vw / 750));
}

@media screen and (min-width: 768px) {
  .decoration-scroll--01 {
    width: 230px;
    top: 20px;
    right: 71rem;
  }
}

.decoration-scroll--02 {
  width: calc(226 *(100vw / 750));
  top: calc(1144 *(100vw / 750));
  right: calc(-21 *(100vw / 750));
}

@media screen and (min-width: 768px) {
  .decoration-scroll--02 {
    width: 181px;
    top: -54px;
    left: 75.7rem;
  }
}

.decoration-scroll--03 {
  width: 100%;
  top: calc(1258 *(100vw / 750));
  left: 0;
}

@media screen and (min-width: 768px) {
  .decoration-scroll--03 {
    top: 0;
  }
}

.decoration-scroll--04 {
  width: calc(452 *(100vw / 750));
  bottom: 0;
  right: calc(-32 *(100vw / 750));
}

@media screen and (min-width: 768px) {
  .decoration-scroll--04 {
    width: 488px;
    top: auto;
    left: 15rem;
    right: 0;
    bottom: -67px;
  }
}

.fall {
  stroke-width: 1px;
  stroke-dasharray: 700px;
  stroke-dashoffset: -700px;
  -webkit-animation: fall 1.5s ease forwards;
  animation: fall 1.5s ease forwards;
}

.fall path {
  fill: none;
  stroke: #d4ac70;
  stroke-width: 1px;
}

.fall--01--01 {
  -webkit-animation-delay: 2.8s;
  animation-delay: 2.8s;
}

.fall--01--02 {
  -webkit-animation-delay: 2.9s;
  animation-delay: 2.9s;
}

.fall--01--03 {
  -webkit-animation-delay: 3.1s;
  animation-delay: 3.1s;
}

.fall--02--01 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.fall--02--02 {
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}

.fall--02--03 {
  -webkit-animation-delay: 2.25s;
  animation-delay: 2.25s;
}

.fall--02--04 {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.fall--02--05 {
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
}

.fall--02--06 {
  -webkit-animation-delay: 2.8s;
  animation-delay: 2.8s;
}

.fall--03--01 {
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s;
}

.fall--03--02 {
  -webkit-animation-delay: 3.4s;
  animation-delay: 3.4s;
}

.fall--03--03 {
  -webkit-animation-delay: 3.55s;
  animation-delay: 3.55s;
}

.fall--03--04 {
  -webkit-animation-delay: 3.6s;
  animation-delay: 3.6s;
}

.fall--03--05 {
  -webkit-animation-delay: 3.85s;
  animation-delay: 3.85s;
}

.fall--03--06 {
  -webkit-animation-delay: 3.95s;
  animation-delay: 3.95s;
}

@media screen and (min-width: 768px) {
  .fall--01--01 {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
  }

  .fall--01--02 {
    -webkit-animation-delay: 1.42s;
    animation-delay: 1.42s;
  }

  .fall--01--03 {
    -webkit-animation-delay: 1.67s;
    animation-delay: 1.67s;
  }

  .fall--02--01 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }

  .fall--02--02 {
    -webkit-animation-delay: 2.18s;
    animation-delay: 2.18s;
  }

  .fall--02--03 {
    -webkit-animation-delay: 2.4s;
    animation-delay: 2.4s;
  }

  .fall--02--04 {
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
  }

  .fall--03--01 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }

  .fall--03--02 {
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
  }

  .fall--03--03 {
    -webkit-animation-delay: 2.13s;
    animation-delay: 2.13s;
  }

  .fall--03--04 {
    -webkit-animation-delay: 2.29s;
    animation-delay: 2.29s;
  }

  .fall--03--05 {
    -webkit-animation-delay: 2.32s;
    animation-delay: 2.32s;
  }

  .fall--03--06 {
    -webkit-animation-delay: 2.48s;
    animation-delay: 2.48s;
  }

  .fall--04--01 {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
  }

  .fall--04--02 {
    -webkit-animation-delay: 2.6s;
    animation-delay: 2.6s;
  }

  .fall--04--03 {
    -webkit-animation-delay: 2.7s;
    animation-delay: 2.7s;
  }

  .fall--04--04 {
    -webkit-animation-delay: 2.74s;
    animation-delay: 2.74s;
  }

  .fall--04--05 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }

  .fall--04--06 {
    -webkit-animation-delay: 3.05s;
    animation-delay: 3.05s;
  }
}

.line {
  stroke-width: 1px;
  stroke-dasharray: 3000px;
  stroke-dashoffset: 3000px;
  -webkit-animation: draw02 3s ease-in-out forwards;
  animation: draw02 3s ease-in-out forwards;
}

.line--01 {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}

.line--02 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

@media screen and (min-width: 768px) {
  .line {
    stroke-dasharray: 3000px;
    stroke-dashoffset: -3000px;
    -webkit-animation: draw 2.5s ease-in-out forwards;
    animation: draw 2.5s ease-in-out forwards;
  }
}

.line path {
  fill: none;
  stroke: #d4ac70;
  stroke-width: 1px;
}

.line-curve {
  stroke-width: 1px;
  stroke-dasharray: 3000px;
  stroke-dashoffset: 3000px;
}

.line-curve--02--02,
.line-curve--04,
.line-curve--04--01,
.line-curve--04--02 {
  stroke-dashoffset: -3000px;
}

.line-curve path {
  fill: none;
  stroke: #d4ac70;
  stroke-width: 1px;
}

@media screen and (min-width: 768px) {
  .line-curve {
    stroke-dashoffset: 3000px;
  }
}

.star {
  animation-name: var(--anim-name);
  animation-duration: var(--duration);
  animation-delay: (--delay, 0);
  animation-iteration-count: infinite;
  /* opacity: 0; */
}

.star--01--01 {
  --anim-name: twinklePtn1;
  --duration: 4s;
}

.star--01--02 {
  --anim-name: twinklePtn1;
  --duration: 8s;
}

.star--01--03 {
  --anim-name: twinklePtn1;
  --duration: 16s;
}

.star--01--04 {
  --anim-name: twinklePtn1;
  --duration: 24s;
}

.decoration-scroll.active .star--begin {
  animation-name: var(--anim-name);
  animation-duration: var(--duration);
  animation-delay: (--delay, 0);
  animation-iteration-count: infinite;
}

.decoration-scroll g {
  opacity: 0;
  transition: .5s;
}

.decoration-scroll.active g {
  opacity: 1;
}

.decoration-scroll.active .star--begin--ptn01 {
  --anim-name: twinklePtn1;
  --duration: 2s;
}

.decoration-scroll.active .star--begin--ptn02 {
  --anim-name: twinklePtn1;
  --duration: 6s;
}

.decoration-scroll.active .star--begin--ptn03 {
  --anim-name: twinklePtn2;
  --duration: 10s;
}

.decoration-scroll.active .star--begin--ptn04 {
  --anim-name: twinklePtn2;
  --duration: 4s;
}

.decoration-scroll.active .star--begin--ptn05 {
  --anim-name: twinklePtn2;
  --duration: 7s;
}

.decoration-scroll.active .star--begin--ptn06 {
  --anim-name: twinklePtn2;
  --duration: 3s;
}

.decoration-scroll.active .star--begin--ptn07 {
  --anim-name: twinklePtn1;
  --duration: 5s;
}

@keyframes twinklePtn1 {
  0% {
    opacity: 0;
  }

  29% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes twinklePtn2 {
  0% {
    opacity: 1;
  }

  79% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* @media screen and (min-width: 768px) {
  .star--01--01 {
    --duration: 2s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }

  .star--01--02 {
    --duration: 1.5s;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }

  .star--01--03 {
    --duration: 1s;
    -webkit-animation-delay: 3.2s;
    animation-delay: 3.2s;
  }

  .star--01--04 {
    --duration: 1.2s;
    -webkit-animation-delay: 3.8s;
    animation-delay: 3.8s;
  }
} */

.star--begin {
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .decoration-scroll.active .line-curve {
    -webkit-animation: draw02 4s ease-in-out forwards;
    animation: draw02 4s ease-in-out forwards;
  }
}

@media screen and (max-width: 768px) {
  .decoration-scroll.active .line-curve {
    -webkit-animation: draw02 3s ease-in-out forwards;
    animation: draw02 3s ease-in-out forwards;
  }
}

.decoration-scroll.active .line-curve--02--01 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.decoration-scroll.active .line-curve--02--02 {
  -webkit-animation: draw 0.5s ease-in-out forwards;
  animation: draw 0.5s ease-in-out forwards;
}

.decoration-scroll.active .line-curve--04--02 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes draw {
  0% {
    stroke-dashoffset: -3000px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes draw {
  0% {
    stroke-dashoffset: -3000px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes draw02 {
  0% {
    stroke-dashoffset: 3000px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes fall {
  0% {
    opacity: 0.5;
    stroke-dashoffset: 700px;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes fall {
  0% {
    opacity: 0.5;
    stroke-dashoffset: 700px;
  }

  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/*------ ornament ------*/
/*---------- animation ----------*/
/*---------- font ----------*/
.firstviewArea__lead,
.sec-lead,
.sec-credit,
.issue_220728__btn {
  font-feature-settings: "palt";
}

.firstviewArea__lead {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #333333;
  font-size: calc(28 *(100vw / 750));
  line-height: 2;
  letter-spacing: 0.025em;
}

@media screen and (min-width: 768px) {
  .firstviewArea__lead {
    font-size: 15px;
    line-height: 2.1333333333;
  }
}

.sec-lead {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #333333;
  font-size: calc(26 *(100vw / 750));
  line-height: 2;
  letter-spacing: 0.025em;
}

@media screen and (min-width: 768px) {
  .sec-lead {
    font-size: 13px;
    line-height: 2;
  }
}

.sec-credit a {
  font-family: pragmatica, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #D4AC70;
  font-size: calc(26 *(100vw / 750));
  line-height: 1;
  letter-spacing: 0.035em;
}

@media screen and (min-width: 768px) {
  .sec-credit a {
    font-size: 13px;
  }
}

.issue_220728__btn {
  font-family: "Cinzel", serif;
  color: #000;
  font-weight: 400;
  font-style: normal;
  font-size: calc(26 *(100vw / 750));
  line-height: 1;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {
  .issue_220728__btn {
    font-size: 13px;
  }
}

/*---------- font ----------*/
/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                          for mobile
//////////////////////////////////////////////////////////////////////////////////////////////
*/
/*---------- common ----------*/
.firstviewArea__img,
.item-image {
  position: relative;
  z-index: 10;
}

.firstviewArea,
.sec {
  text-align: center;
}

.sec__wrapper {
  position: relative;
}

.sec .item-image {
  width: calc(690 *(100vw / 750));
  margin: 0 auto;
  margin-bottom: calc(66 *(100vw / 750));
}

.sec .sec-lead {
  margin-bottom: calc(46 *(100vw / 750));
}

.sec .sec-credit {
  display: inline-block;
}

.sec .sec-credit a {
  border-bottom: solid 1px #E1C59B;
  box-sizing: border-box;
  padding-bottom: calc(4 *(100vw / 750));
}

/*---------- common ----------*/
.issue_220728 {
  position: relative;
  background: linear-gradient(145deg, #FEFCF8, #FFF9EA, #FEFCF8, #FFF9EA);
  margin-bottom: calc(160 *(100vw / 750));
  padding-bottom: calc(180 *(100vw / 750));
  overflow: hidden;
}

.firstviewArea {
  padding-bottom: calc(166 *(100vw / 750));
  position: relative;
}

.firstviewArea__img {
  margin-bottom: calc(166 *(100vw / 750));
}

.sec01,
.sec02 {
  padding-bottom: calc(220 *(100vw / 750));
}

.sec03 {
  padding-bottom: calc(320 *(100vw / 750));
}

.sec04 {
  padding-bottom: calc(180 *(100vw / 750));
}

.issue_220728__btn a {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  width: calc(400 *(100vw / 750));
  height: calc(80 *(100vw / 750));
  margin: 0 auto;
  padding-top: calc(8 *(100vw / 750));
  box-sizing: border-box;
  border: solid 1px #999999;
  background-color: #fff;
  z-index: 30;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                          for desktop
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  html {
    font-size: 62.5%;
  }

  /*---------- common ----------*/
  .sec__wrapper {
    max-width: 495px;
    width: 55%;
    margin: 0 auto;
  }

  .sec .item-image {
    width: 100%;
    margin-bottom: 44px;
  }

  .sec .sec-lead {
    margin-bottom: 34px;
  }

  .sec .sec-credit a {
    padding-bottom: 2px;
  }

  /*---------- common ----------*/
  .issue_220728 {
    text-align: center;
    margin-bottom: 120px;
    padding-top: 40px;
    padding-bottom: 120px;
  }

  .firstviewArea {
    padding-bottom: 112px;
  }

  .firstviewArea__img {
    max-width: 1160px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 112px;
  }

  .sec01,
  .sec02,
  .sec03 {
    padding-bottom: 150px;
  }

  .sec03 {
    position: relative;
  }

  .sec03__wrapper {
    position: static;
  }

  .sec04 {
    padding-bottom: 120px;
  }

  .line-fixed {
    display: inline-block;
    position: relative;
  }

  .issue_220728__btn {
    display: inline-block;
  }

  .issue_220728__btn a {
    width: 200px;
    height: 40px;
    padding-top: 0.3rem;
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                          for tablet
//////////////////////////////////////////////////////////////////////////////////////////////
*/
/* @media (max-width: 1920px) and (min-width: 768px) {
  html {
    font-size: 0.5208333333vw !important;
  }
} */