/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./src/style.scss ***!
  \*****************************************************************************************************************************************************************/
@charset "UTF-8";
/* ==========================================================================
   Import file to Scss.
   ========================================================================== */
/* ==========================================================================
		font-family: 'Amiri', serif;
		font-family: 'EB Garamond', serif;
		font-family: 'Gentium Basic', serif;
		font-family: 'Noto Serif JP', serif;
		font-family: 'Pinyon Script', cursive;
		font-family: 'Playfair Display', serif;
		font-family: 'Tai Heritage Pro', serif;
   ========================================================================== */
/****************************************************************************

	*loading*

****************************************************************************/
.hiddenOver {
  display: block;
  animation-name: opacityAnimation;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  -webkit-animation-name: opacityAnimation;
  -webkit-animation-duration: 2s;
  -webkit-animation-fill-mode: forwards;
}

main {
  overflow: hidden;
}

/* .fadein {
	display: block;
  animation : fadeIn 1s;
  animation-fill-mode: both;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeout {
  animation : fadeOut 1s;
  animation-fill-mode: both;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
} */
/* canvas */
#canvas {
  width: 100%;
  z-index: 900;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  background-color: #ffffff;
}

/* logoAnimation */
#logoLoading {
  width: 200px;
  position: absolute;
  z-index: 9900;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  height: 100vh;
}

svg#logo {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

.onLogoAni {
  fill: #262626;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 1;
  animation: onLogoAni 3.5s forwards;
}

@keyframes onLogoAni {
  0% {
    fill-opacity: 0;
    opacity: 1;
    filter: drop-shadow(0 0 2px #000);
    stroke-dashoffset: 1800px;
    stroke-dasharray: 1800px;
  }
  30% {
    fill-opacity: 0;
  }
  80% {
    fill-opacity: 1;
    opacity: 1;
    stroke-dashoffset: 0;
  }
  95% {
    opacity: 1;
    filter: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* hexagonAnimation */
#hexagon {
  width: 44px;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 4px;
  fill: none;
  stroke: #fff;
  filter: drop-shadow(0 0 2px #000);
  stroke-miterlimit: 10;
  stroke-width: 1;
  animation: hexagonAnimation 2.8s infinite both;
}

@keyframes hexagonAnimation {
  0% {
    stroke-dashoffset: 280px;
    stroke-dasharray: 280px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
#loading {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 9000;
}

.loadingBg {
  background: #ffffff;
  width: 100%;
  z-index: 800;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
}

.progressBar {
  width: 5px;
  height: 0;
  position: absolute;
  top: 0;
  left: 24%;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  z-index: 8999;
}

.percentGauge {
  width: 5px;
  position: absolute;
  top: 0;
  left: 24%;
  margin: 0 auto;
  text-align: center;
  background: #000;
  height: 100vh;
}

.loadingF {
  position: absolute;
  z-index: 8999;
  top: 54%;
  transform: scale(0.94, 1);
  text-transform: uppercase;
  text-align: center;
  right: 0;
  left: 0;
  margin-left: 0.5rem;
  text-shadow: 0px 0px 2px #000;
  color: #fff;
}

.percentTxt {
  z-index: 8999;
  text-align: center;
  width: 100%;
  font-family: "Gentium Basic", serif;
  font-size: 1.4rem;
}

/* doors */
.loadingAniLeft {
  width: 24%;
  height: 100vh;
  position: absolute;
  z-index: 8000;
  animation-direction: alternate-reverse;
  background: #2a2a2a;
}

.loadingAniLeftTrigger {
  width: 5%;
  opacity: 0;
  transition: all 1s cubic-bezier(0.61, 1, 0.88, 1) 0s;
}

.loadingAniRight {
  width: 76%;
  height: 100vh;
  position: absolute;
  z-index: 8000;
  animation-direction: alternate-reverse;
  background: #2a2a2a;
  right: 0;
  top: 0;
}

.loadingAniRightTrigger {
  width: 40%;
  opacity: 0;
  transition: all 1s cubic-bezier(0.61, 1, 0.88, 1) 0s;
}

/*main {
	display: none;
}*/
/****************************************************************************

	*common*

****************************************************************************/
/* スクロールの背景の設定 */
::-webkit-scrollbar-track {
  /*border-radius: 5px;*/
  box-shadow: 0 0 4px #aaa inset;
  background: #fff;
}

/* スクロールのつまみ部分の設定 */
::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: #c6c6c8;
}

::-webkit-scrollbar {
  width: 12px;
  height: 8px;
}

::selection {
  color: #fff;
  background: #c6c6c8;
}

.horizontalTxt {
  display: none;
}

.positionR {
  position: relative;
}

.zIndexL2 {
  z-index: 2;
  position: inherit;
}

.border {
  border: 1px solid #aaa;
}

main {
  font-size: 1.1rem;
}

/* allcolor */
.bgfull {
  position: absolute;
  width: 100%;
  /* min-height: 100%; */
  /* height: 5000px; */
  background: url(img/cover-full-a.webp) no-repeat;
  background-size: 100% 100%;
  background-position: center top;
  mix-blend-mode: hard-light;
  margin-top: -10px;
  z-index: 1;
  top: 0;
}

section.otherWSec,
section.exhibitWSec {
  padding-bottom: 160px;
}

html {
  position: relative;
  /* overscroll-behavior: none; */
}

/* 六角形 */
div[class^=hexagon] {
  position: absolute;
}
div[class^=hexagon] img {
  width: 100%;
}

.hexagon0_1 {
  width: 44px;
  height: auto;
  top: 28vh;
  top: 28svh;
  left: 6%;
  z-index: 9;
  transform: rotate(55deg);
}

.hexagon0_2 {
  width: 32px;
  height: auto;
  top: 18vh;
  top: 18svh;
  right: 7%;
  z-index: 9;
  transform: rotate(50deg);
}

.hexagon1_1 {
  width: 56px;
  height: auto;
  top: -30px;
  opacity: 0.7;
  left: 10%;
  z-index: 9;
  transform: rotate(10deg);
}

.hexagon2_1 {
  width: 40px;
  height: auto;
  top: -6px;
  opacity: 0.5;
  left: 20%;
  z-index: 10;
  transform: rotate(20deg);
}

.hexagon2_2 {
  width: 46px;
  height: auto;
  top: 0;
  opacity: 0.4;
  left: 7%;
  z-index: 10;
  transform: rotate(344deg);
}

.hexagon2_3 {
  width: 40px;
  height: auto;
  top: 20px;
  opacity: 0.4;
  left: 10%;
  z-index: 10;
  transform: rotate(28deg);
}

.hexagon2_4 {
  width: 46px;
  height: auto;
  top: 80px;
  opacity: 0.4;
  right: 15%;
  z-index: 10;
  transform: scale(1, -1);
}

.hexagon3_1 {
  width: 59px;
  height: auto;
  bottom: 10%;
  opacity: 0.5;
  right: 15%;
  z-index: 9;
  transform: rotate(326deg);
}

.hexagon3_2 {
  width: 35px;
  height: auto;
  top: 50%;
  opacity: 0.4;
  right: 5%;
  z-index: 9;
  transform: rotate(331deg);
}

.hexagon3_3 {
  width: 43px;
  height: auto;
  top: 400px;
  opacity: 0.4;
  left: 15%;
  z-index: 9;
  transform: rotate(326deg);
  display: none;
}

.hexagonOn {
  display: block;
}

.hexagon5_1 {
  width: 38px;
  height: auto;
  top: 40px;
  opacity: 0.7;
  right: 6%;
  z-index: 9;
  transform: rotate(36deg);
}

.hexagon5_2 {
  width: 40px;
  height: auto;
  bottom: -20px;
  opacity: 0.4;
  left: 8%;
  z-index: 9;
  transform: rotate(65deg);
}

/* スノーフレーク */
div[class^=snow] img {
  width: 100%;
}

.snow1 {
  filter: drop-shadow(0 0 0.4rem #ffc2e6);
  width: 58px;
  height: auto;
  z-index: 9;
  transform: rotate(36deg);
  position: absolute;
  top: 83px;
  left: 3%;
}

.snow2 {
  filter: drop-shadow(0 0 0.4rem #ffc2e6);
  width: 36px;
  height: auto;
  z-index: 9;
  transform: rotate(36deg);
  position: absolute;
  right: 11%;
  top: 26vh;
  top: 26svh;
}

/* 流水紋 */
div[class^=water] {
  position: absolute;
}
div[class^=water] img {
  width: 100%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 0.75rem #e6d7b6);
}

.water1 {
  width: 400px;
  height: auto;
  left: -48%;
  top: -20px;
  margin-top: -80px;
}

.water2 {
  width: 400px;
  height: auto;
  right: -48%;
  bottom: 10%;
  /* background: url(img/water.png) no-repeat; */
}

/* 雲 */
div[class^=cloud] {
  position: absolute;
}
div[class^=cloud] img {
  width: 100%;
  mix-blend-mode: revert;
  filter: drop-shadow(0 0 0.75rem #e6d7b6);
}

.cloud1 {
  left: 0;
  bottom: -80px;
}

.cloud2 {
  right: 0;
  top: -200px;
}
.cloud2 > img {
  width: 200px !important;
  height: 100%;
  /* object-fit: cover;
  object-position: 0px -200px; */
}

/* 花 */
div[class^=flower] {
  position: absolute;
}
div[class^=flower] img {
  width: 100%;
  mix-blend-mode: hard-light;
}

.flower1 {
  left: 0;
  bottom: 40px;
  width: 150px;
}
.flower1 > img {
  transform: rotate(212deg);
  filter: drop-shadow(0 0 0.75rem #555555) blur(2px);
  opacity: 0.8;
}

.flower2 {
  right: -40px;
  top: 8px;
  width: 120px;
}
.flower2 > img {
  transform: rotate(342deg);
  filter: drop-shadow(0 0 0.75rem #555555) blur(2px);
  opacity: 0.8;
}

.flower3 {
  right: 0;
  top: 80%;
  width: 80px;
}
.flower3 > img {
  transform: rotate(65deg);
  filter: drop-shadow(0 0 0.75rem #555555) blur(1.6px);
  opacity: 0.7;
}

.flower4 {
  left: -17px;
  top: 70%;
  width: 60px;
}
.flower4 > img {
  transform: rotate(265deg);
  filter: drop-shadow(0 0 0.75rem #555555) blur(2px);
  opacity: 0.6;
}

.flower5 {
  left: 20%;
  top: 50%;
  width: 60px;
}
.flower5 > img {
  transform: rotate(5deg);
  filter: drop-shadow(0 0 0.75rem #555555) blur(2px);
  opacity: 0.5;
}

/* シャボン玉 */
div[class^=bubble] {
  position: absolute;
  z-index: 2;
}
div[class^=bubble] img {
  width: 100%;
}

.bubble1 {
  left: -11px;
  width: 50px;
  top: 6px;
}

.bubble2 {
  right: -11px;
  width: 56px;
  top: 8%;
}

.bubble3 {
  right: 10%;
  width: 30px;
  top: 14%;
}
.bubble3 > img {
  opacity: 0.8;
}

.bubble4 {
  left: 6%;
  width: 50px;
  top: 40%;
}

.bubble5 {
  right: 12%;
  width: 32px;
  top: 67%;
}

.bubble6 {
  left: 2%;
  width: 66px;
  bottom: 3%;
}

span[class^=script] {
  font-family: "Pinyon Script", cursive;
  display: block;
  float: left;
}

.script1st {
  margin-top: -8px;
  font-size: 3rem;
  margin-right: 4px;
}

.script2nd {
  width: 1px;
  height: 60px;
  background: #000;
  transform: rotate(60deg);
  margin-top: -1rem;
}

.script3rd {
  margin-top: 10px;
  margin-left: -11px;
  font-size: 2.8rem;
}

.bg1st,
.bg2nd,
.bg3rd,
.bg4th,
.bg5th {
  display: none;
}

.bgColor {
  transition: background-color 0.2s ease-in;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.color-red {
  background-color: #f36a5e;
}

.color-blue {
  background-color: #3766a4;
}

.color-green {
  background-color: #4d9612;
}

.color-gold {
  background-color: #e4b539;
}

.color-gray {
  background-color: #818181;
}

#article3rd picture::after {
  color: #fff;
  opacity: 0.5;
  margin: 0.2rem 0 0.4rem 0;
}

#article2nd picture::after {
  margin: -0.4rem 0 0.4rem 0;
}

#article2nd picture::after,
#article3rd picture::after {
  content: "©カバネリ製作委員会";
  float: right;
  opacity: 0.8;
  font-size: 0.8rem;
  display: block;
}

.caution {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-block-start: 8px;
  font-size: 1rem;
}
.caution span {
  display: block;
}

/****************************************************************************

	*menu*

****************************************************************************/
summary {
  outline: none;
  pointer-events: none;
}

summary::-webkit-details-marker {
  display: none;
}

.trigger {
  position: absolute;
  z-index: 8999;
  right: 0;
  top: 20px;
  cursor: pointer;
  padding-left: 40px;
  padding-top: 20px;
}
.trigger summary + div {
  width: 24px;
  height: 20px;
  margin-right: 16px;
}
.trigger summary + div p {
  /*width: 90%;*/
  height: 1px;
  background: #000;
  border-radius: 1px;
  -webkit-transition: 200ms all ease;
  transition: 200ms all ease;
  -webkit-transform-origin: 30px 25px;
  transform-origin: 30px 25px;
}

.trigger summary + div p:nth-of-type(2) {
  margin-top: 8px;
}

.line01 {
  width: 97% !important;
  transform: translate(-22px, 13px) rotate(45deg);
  background: #fff !important;
}

.line02 {
  width: 94% !important;
  transform: translate(12px, -27px) rotate(-45deg);
  background: #fff !important;
  margin-top: 12px !important;
  margin-left: 0 !important;
}

/* .line03 {
	width: 94% !important;
	transform: translate(12px, -27px) rotate(-45deg);
	background: #000 !important;
	margin-top: 12px !important;
	margin-left: 0 !important;
} */
.show {
  z-index: 7000;
  background-color: rgba(42, 42, 42, 0.9);
  min-height: 100vh;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
}

.navInner {
  display: none;
  position: fixed;
  z-index: 8000;
  top: 50%;
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100vw;
  padding: 0 0 0 10vw;
  /* padding: 0 calc(8px * 5); */
}
.navInner li {
  width: 100%;
  margin-bottom: 8px;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.6rem;
  opacity: 0;
}
.navInner li:first-of-type, .navInner li:nth-of-type(5), .navInner li:nth-of-type(9) {
  float: left;
}
.navInner li a {
  width: 100%;
  height: 100%;
  display: inline;
  text-transform: capitalize;
  text-align: center;
  color: #fff;
}

.navInner li.navSide {
  font-size: 1.38rem;
  line-height: 2.8;
  text-align: left;
  clear: both;
  padding-left: 36%;
  /* &:first-of-type, */
}
.navInner li.navSide::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: #fff;
  vertical-align: middle;
  margin-right: 8px;
}
.navInner li.navSide:nth-of-type(2), .navInner li.navSide:nth-of-type(3), .navInner li.navSide:nth-of-type(4), .navInner li.navSide:nth-of-type(6), .navInner li.navSide:nth-of-type(7), .navInner li.navSide:nth-of-type(8), .navInner li.navSide:nth-of-type(10) {
  opacity: 0;
  margin-left: 60px;
}

.navInner li a:hover {
  padding-left: 16px;
  opacity: 0.6;
}

.navInner li a:active {
  padding-left: 16px;
  opacity: 0.6;
}

.showMenu li:nth-of-type(5),
.showMenu li:nth-of-type(9) {
  margin-top: 32px;
}

.showMenu li:first-of-type,
.showMenu li:nth-of-type(5),
.showMenu li:nth-of-type(9) {
  -o-transition: opacity 0.2s ease-in 0s;
  -webkit-transition: opacity 0.2s ease-in 0s;
  -moz-transition: opacity 0.2s ease-in 0s;
  transition: opacity 0.2s ease-in 0s;
  opacity: 1 !important;
}

.showMenu li.navSide:nth-of-type(2),
.showMenu li.navSide:nth-of-type(6),
.showMenu li:nth-of-type(10) {
  -o-transition: all 0.4s ease-in 0.1s;
  -webkit-transition: all 0.4s ease-in 0.1s;
  -moz-transition: all 0.4s ease-in 0.1s;
  transition: all 0.4s ease-in 0.1s;
  opacity: 1 !important;
  margin-left: 0 !important;
}

.showMenu li.navSide:nth-of-type(3),
.showMenu li.navSide:nth-of-type(7) {
  -o-transition: all 0.4s ease-in 0.2s;
  -webkit-transition: all 0.4s ease-in 0.2s;
  -moz-transition: all 0.4s ease-in 0.2s;
  transition: all 0.4s ease-in 0.2s;
  opacity: 1 !important;
  margin-left: 0 !important;
}

.showMenu li.navSide:nth-of-type(4),
.showMenu li.navSide:nth-of-type(8) {
  -o-transition: all 0.4s ease-in 0.3s;
  -webkit-transition: all 0.4s ease-in 0.3s;
  -moz-transition: all 0.4s ease-in 0.3s;
  transition: all 0.4s ease-in 0.3s;
  opacity: 1 !important;
  margin-left: 0 !important;
}

.fixMenu {
  position: fixed !important;
  z-index: 9000;
  /*background-image: linear-gradient(to bottom, rgba(255,255,255,1)40%,  rgba(255,255,255,.8)90%, rgba(255,255,255,0)100%);
  padding-bottom: calc(8px * 3);*/
}

/****************************************************************************

	*animation*

****************************************************************************/
/* parts */
div[class^=hexagon] {
  opacity: 0;
  transition: opacity 0.4s ease-in 0.8s;
}

div[class^=hexagon].onActiveParts20,
div[class^=hexagon].onActiveParts21,
div[class^=hexagon].onActiveParts22,
div[class^=hexagon].onActiveParts23,
div[class^=hexagon].onActiveParts24 {
  opacity: 0.4;
}

div[class^=hexagon].onActiveParts0,
div[class^=hexagon].onActiveParts2 {
  opacity: 0.7;
}

div[class^=hexagon].onActiveParts1,
div[class^=hexagon].onActiveParts3 {
  opacity: 0.5;
}

div[class^=hexagon].onActiveParts4 {
  opacity: 0.4;
}

div[class^=hexagon].onHeaderActiveParts2,
div[class^=hexagon].onHeaderActiveParts3 {
  opacity: 0.3;
}

div[class^=water] > img {
  opacity: 0;
  transition: opacity 0.6s ease-in 0.6s;
}

div[class^=snow],
div[class^=cloud],
div[class^=flower] > img,
div[class^=bubble] {
  opacity: 0;
  transition: opacity 0.6s ease-in 0.1s;
}

div[class^=snow].onHeaderActiveParts0,
div[class^=snow].onHeaderActiveParts1,
div[class^=water].onActiveParts5 > img,
div[class^=water].onActiveParts6 > img,
div[class^=cloud].onActiveParts7,
div[class^=cloud].onActiveParts8,
div[class^=bubble].onActiveParts14,
div[class^=bubble].onActiveParts15,
div[class^=bubble].onActiveParts16,
div[class^=bubble].onActiveParts17,
div[class^=bubble].onActiveParts18,
div[class^=bubble].onActiveParts19 {
  opacity: 1;
}

div[class^=flower].onActiveParts9 > img {
  opacity: 0.8;
}

div[class^=flower].onActiveParts10 > img {
  opacity: 0.5;
}

div[class^=flower].onActiveParts11 > img {
  opacity: 0.6;
}

div[class^=flower].onActiveParts12 > img {
  opacity: 0.7;
}

div[class^=flower].onActiveParts13 > img {
  opacity: 0.8;
}

/* header */
header hgroup h1 {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.onActive0 {
  opacity: 1;
}

header hgroup small {
  opacity: 0;
  -o-transition: opacity 0.4s ease-in 0.1s;
  -webkit-transition: opacity 0.4s ease-in 0.1s;
  -moz-transition: opacity 0.4s ease-in 0.1s;
  transition: opacity 0.4s ease-in 0.1s;
}

.onActive1 {
  opacity: 1;
}

header hgroup small:after {
  opacity: 0;
  transition: width 0.6s ease-in 300ms, opacity 0.6s ease-in 0.3s;
}

header hgroup .onActive1:after {
  opacity: 1;
  width: 100%;
}

header hgroup h2 {
  opacity: 0;
  margin-top: -4px;
  transition: margin-top 0.4s ease-in 1s, opacity 0.4s ease-in 1s;
}

.onActive2 {
  opacity: 1;
  margin-top: 0;
}

.fortyLogo img {
  opacity: 0;
  filter: blur(4px);
  transform: scale(1.05);
  transition: all 0.4s ease-in 1.4s;
}

.onHeaderActiveParts4 img {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  transform-origin: center;
}

/* eachSec */
article[id^=article] picture {
  opacity: 0;
  transition: opacity 1s ease-in;
}

article[id^=article] picture.onActive9,
article[id^=article] picture.onActive13,
article[id^=article] picture.onActive17,
article[id^=article] picture.onActive21,
article[id^=article] picture.onActive22 {
  opacity: 1;
}

.cap1-sp {
  opacity: 0;
  transition: opacity 0.4s ease-in 0.2s;
}

.onActive10,
.onActive14,
.onActive18,
.onActive23 {
  opacity: 1;
}

article[id^=article] h1 {
  background-size: 110px 110px;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0) 50%);
  transition: background-size 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0s, opacity 0.3s ease-in 0s;
}

article[id^=article] h1.onActive11,
article[id^=article] h1.onActive15,
article[id^=article] h1.onActive19,
article[id^=article] h1.onActive24 {
  background-size: 110px 110px;
  opacity: 1;
}

article[id^=article] h1::before, article[id^=article] h1::after {
  width: 0;
  opacity: 0;
  transition: width 1s cubic-bezier(0.83, 0, 0.17, 1) 0.1s, opacity 0.8s cubic-bezier(0.83, 0, 0.17, 1) 0.1s;
}

section[id^=novelty] .noveltySubWrapper .noveltyTxt h2::before, section[id^=novelty] .noveltySubWrapper .noveltyTxt h2::after {
  width: 0;
  opacity: 0;
  transition: width 0.5s cubic-bezier(0.83, 0, 0.17, 1) 0.2s, opacity 0.5s cubic-bezier(0.83, 0, 0.17, 1) 0.2s;
}

article[id^=article] h1.onActive11::before,
article[id^=article] h1.onActive11::after,
article[id^=article] h1.onActive15::before,
article[id^=article] h1.onActive15::after,
article[id^=article] h1.onActive19::before,
article[id^=article] h1.onActive19::after,
article[id^=article] h1.onActive24::before,
article[id^=article] h1.onActive24::after,
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2.onActive31::before,
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2.onActive31::after {
  width: calc(100% - 32px);
  opacity: 1;
}

@media only screen and (min-width: 500px) {
  article[id^=article] h1.onActive11::before,
article[id^=article] h1.onActive11::after,
article[id^=article] h1.onActive15::before,
article[id^=article] h1.onActive15::after,
article[id^=article] h1.onActive19::before,
article[id^=article] h1.onActive19::after,
article[id^=article] h1.onActive24::before,
article[id^=article] h1.onActive24::after,
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2.onActive31::before,
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2.onActive31::after {
    width: calc(100% - 80px);
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) {
  article[id^=article] h1.onActive11::before,
article[id^=article] h1.onActive11::after,
article[id^=article] h1.onActive15::before,
article[id^=article] h1.onActive15::after,
article[id^=article] h1.onActive19::before,
article[id^=article] h1.onActive19::after,
article[id^=article] h1.onActive24::before,
article[id^=article] h1.onActive24::after,
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2.onActive31::before,
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2.onActive31::after {
    width: 100%;
    opacity: 1;
  }
}
article[id^=article] > p {
  opacity: 0;
  transform: translate(0, 8px);
  transition: transform 0.4s ease-in 0.3s, opacity 0.4s ease-in 0.3s;
}

article[id^=article] > p.onActive12,
article[id^=article] > p.onActive12 ~ p,
article[id^=article] > p.onActive16,
article[id^=article] > p.onActive16 ~ p,
article[id^=article] > p.onActive20,
article[id^=article] > p.onActive20 ~ p,
article[id^=article] > p.onActive25,
article[id^=article] > p.onActive25 ~ p {
  transform: translate(0, 0);
  opacity: 1;
}

/* 1st */
.circleBg {
  transform: scale(0.6, 0.6);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}

.onActive8 {
  transform: scale(1, 1);
  opacity: 1;
}

.circleLine {
  transform: rotate(45deg) translate(0, -20px);
  height: 88px;
  top: -16px;
  left: 26%;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.3s, opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
  transform-origin: right;
  opacity: 0;
}
.circleLine::before {
  height: 0;
  transition: height 0.4s ease-in 0.4s, opacity 0.4s ease-in 0.4s;
  opacity: 0;
}

.onActive4 {
  transform: rotate(45deg) translate(0, 0);
  opacity: 1;
}

.onActive4::before {
  height: 88px;
  opacity: 1;
}

.circleFt {
  margin-left: -8px;
  opacity: 0;
  transition: margin-left 0.5s ease-in 0.5s, opacity 0.5s ease-in 0.5s;
}

.onActive3 {
  margin-left: 0;
  opacity: 1;
}

.circleAu {
  margin-right: -8px;
  opacity: 0;
  transition: margin-right 0.5s ease-in 0.5s, opacity 0.5s ease-in 0.5s;
}

.onActive5 {
  margin-right: 0;
  opacity: 1;
}

.circleExhibit {
  opacity: 0;
  transition: opacity 0.5s ease-in 0.8s;
}

.onActive6 {
  opacity: 1;
}

.circle .circleInner > p {
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.5s ease-in 1.2s, opacity 0.5s ease-in 1s;
}

.circle .circleInner > p.onActive7 {
  opacity: 1;
  transform: translateY(0);
}

/* profile */
#profile > hgroup {
  transform: translate(-16px, 0);
  opacity: 0;
  transition: transform 0.5s ease-in 0.3s, opacity 0.5s ease-in 0.3s;
}

#profile > hgroup.onActive26 {
  opacity: 1;
  transform: translate(0, 0);
}

#profile {
  overflow: hidden;
}

.profileLine {
  opacity: 0;
  transform: rotate(340deg) translate(200px, 0px);
  transition: transform 0.6s ease-in 0.1s, opacity 0.6s ease-in 0.1s;
}

.onActive27 {
  opacity: 1;
  transform: rotate(340deg) translate(0, 0);
}

#profile > p {
  transform: translate(0, 8px);
  opacity: 0;
  transition: transform 0.4s ease-in 0.6s, opacity 0.4s ease-in 0.6s;
}

#profile > p.onActive28 {
  opacity: 1;
  transform: translate(0, 0);
}

.swiper {
  opacity: 0;
  transition: opacity 0.6s ease-in;
}

.onActive29 {
  opacity: 1;
}

/* novelty */
.noveltyImg {
  opacity: 0;
  transition: opacity 0.5s ease-in 0.6s;
}

.onActive30 {
  opacity: 1;
}

.noveltyTxt h2 {
  opacity: 0;
  transition: opacity 0.4s ease-in 0.2s;
}

.noveltyTxt h2.onActive31 {
  opacity: 1;
}

.noveltyTxt > p {
  opacity: 0;
  transform: translate(0, 8px);
  transition: transform 0.4s ease-in 0.6s, opacity 0.4s ease-in 0.6s;
}

.noveltyTxt > p.onActive32 {
  opacity: 1;
  transform: translate(0, 0);
}

.circleBgNovelty {
  transform: scale(0.2, 0.2);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.85, 0, 0.15, 1) 0.2s, opacity 1.4s cubic-bezier(0.85, 0, 0.15, 1) 0.2s;
}

.onActive33 {
  transform: scale(1, 1);
  opacity: 1;
}

/* event */
section[id^=eventInfo] h2 {
  opacity: 0;
  transition: opacity 0.4s ease-in 0.3s;
}

section[id^=eventInfo] h2.onActive35 {
  opacity: 1;
}

section[id^=eventInfo] h2::before {
  width: 0;
  text-align: center;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: width 0.4s ease-in 0.6s, opacity 0.4s ease-in 0.6s;
}

section[id^=eventInfo] h2::after {
  width: 0;
  text-align: center;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: width 0.4s ease-in 0.6s, opacity 0.4s ease-in 0.6s;
}

section[id^=eventInfo] h2.onActive35::before,
section[id^=eventInfo] h2.onActive35::after {
  width: 100%;
}

.dateSchedule {
  opacity: 0;
  transition: opacity 0.4s ease-in 0.6s;
}

.onActive36 {
  opacity: 1;
}

/****************************************************************************

	*header*

****************************************************************************/
header {
  /* min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  height: auto !important; */
  position: relative;
  z-index: 2;
}
header hgroup {
  position: absolute;
  z-index: 2;
  top: 120px;
  width: 53%;
  margin-left: 16px;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff);
  text-align: center;
}
header hgroup h1 img {
  width: 100%;
}
header hgroup small {
  font-size: 1rem;
  margin-top: 4px;
  display: block;
  line-height: 1.7;
}
header hgroup small:after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: #262626;
  margin: 8px auto;
}
header hgroup h2 {
  font-size: 1.6rem;
  letter-spacing: 0.6px;
  text-align: right;
}
header hgroup h2 span {
  font-size: 1.5rem;
}
header > picture {
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
}
header > picture > img {
  width: auto;
  height: 100vh;
  float: right;
}

/* YUKIZAKURA ver. */
header {
  height: 100vh;
  height: 100svh;
  background: url(img/main-cover.webp);
  background-size: cover;
}
header > picture > img {
  position: absolute;
  width: auto;
  height: 60%;
  right: 0;
  filter: drop-shadow(0 0 5px #972861);
  height: 70vh;
  height: 70svh;
  top: 21vh;
  top: 21svh;
}
header hgroup {
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 17.5%;
  width: 52%;
}

.fortyLogo {
  position: absolute;
  bottom: 3%;
  width: 28%;
  right: 16px;
}
.fortyLogo > img {
  width: 100%;
}

/*SP Only */
.hgroupWrapper {
  height: 20%;
  height: 20vh;
  position: relative;
}

header hgroup small {
  display: none;
}

.labels {
  display: block;
  line-height: 1.7;
  position: absolute;
  bottom: 6.5%;
  letter-spacing: 0;
  left: 16px;
  font-size: 0.8rem;
}

header hgroup h1.onActive0:after {
  opacity: 1;
  width: 100%;
}

header hgroup h1:after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: #262626;
  margin: 8px auto 5px;
  opacity: 0;
  transition: width 0.6s ease-in 300ms, opacity 0.6s ease-in 0.3s;
}

header hgroup h2 {
  transform: translate3d(0, -10px, 0);
  overflow: hidden;
}

.onActive2 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* end */
@media only screen and (max-height: 560px) {
  header picture img {
    width: 100%;
    height: auto;
  }
}
/****************************************************************************

	*1st*

****************************************************************************/
.sec1st {
  position: relative;
  width: 100%;
  height: 100%;
}

/* .bg1st {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(img/cover-1st.jpg) no-repeat;
    background-size: cover;
    background-position: center bottom;
	mix-blend-mode: hard-light;
	z-index: 1;
	top: 0;
} */
.circle {
  position: relative;
}
.circle .circleInner {
  position: relative;
  z-index: 5;
  text-align: center;
  top: -22px;
  z-index: 11;
}
.circle .circleInner h2 {
  /* font-size: 1.5rem; */
  font-size: 4vw;
  margin-bottom: 8px;
  /* width: fit-content; */
  width: 34vw;
  margin: 0 auto 8px;
  position: relative;
}
.circle .circleInner > p {
  font-size: 1rem;
  line-height: 2;
}
.circle .circleInner > p > span {
  display: block;
}

.circleFt {
  display: block;
  text-align: left;
  position: relative;
}

.circleAu {
  display: block;
  text-align: right;
}

.circleExhibit {
  display: block;
  font-size: 1.7rem;
  margin-top: 8px;
}

.circleLine {
  display: block;
  width: 2px;
  background: #e9a9e8;
  position: absolute;
}
.circleLine::before {
  content: "";
  width: 1px;
  background: #949395;
  display: block;
}

.circleBg {
  position: absolute;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 100%);
  filter: drop-shadow(0 0 0.75rem white);
  top: -64px;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
  z-index: 3;
}

.lineBg {
  width: 100%;
  height: 140px;
  background: url(img/cover-1stline.webp) no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
  top: 0;
  position: absolute;
  z-index: 2;
  background-size: cover;
  opacity: 0.6;
}

/* each common */
article[id^=article] {
  position: relative;
  /* padding-bottom: 80px; */
}
article[id^=article] picture {
  position: relative;
  z-index: 1;
}
article[id^=article] picture img {
  width: 100%;
}
article[id^=article] h1 {
  z-index: 2;
  position: relative;
  font-size: 1.6rem;
  padding: 24px 16px;
}
article[id^=article] h1::before {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 16px;
}
article[id^=article] h1::after {
  content: "";
  position: absolute;
  height: 1px;
  bottom: 0;
  left: 16px;
}
article[id^=article] > p:first-of-type {
  margin: 16px 16px 0;
}
article[id^=article] > p {
  margin: 8px 16px 0;
  text-align: justify;
  position: relative;
  z-index: 2;
  line-height: 1.8;
}

/* RinFuyu */
#article1st picture {
  width: 100%;
  padding-top: 80px;
}
#article1st h1 {
  background-repeat: no-repeat;
  background-position: -20px center;
}
#article1st h1::before {
  content: "";
  background: #dac17b;
}
#article1st h1::after {
  content: "";
  background: #939088;
}

.cap1-sp {
  font-family: "Times New Roman", serif;
  font-size: 4rem;
  mix-blend-mode: overlay;
  color: #000;
  text-align: right;
  line-height: 100%;
  z-index: 2;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.cap1-sp p {
  display: inline-block;
  vertical-align: top;
}
.cap1-sp p:first-of-type {
  font-family: "Playfair Display", serif;
}
.cap1-sp p:nth-of-type(2) {
  margin-left: 8px;
}

/****************************************************************************

	*2nd*

****************************************************************************/
/* sora */
.sec2nd {
  position: relative;
  width: 100%;
  height: 100%;
  /* z-index: 3; */
}

#article2nd picture {
  width: 100%;
  padding-top: 80px;
}
#article2nd h1 {
  /* background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 50%);
  background-size: 80px 80px;
  background-repeat: no-repeat; */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0) 50%);
  background-size: 110px 110px;
  background-repeat: no-repeat;
  background-position: -20px center;
}
#article2nd h1::before {
  content: "";
  background: #ed9e90;
}
#article2nd h1::after {
  content: "";
  background: #8f8382;
}

/* .bg2nd {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(img/cover-2nd.png), url(img/cover-2nd.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom, center top;
	mix-blend-mode: hard-light;
	z-index: 1;
	top: 0;
} */
/****************************************************************************

	*3rd*

****************************************************************************/
/* rintou */
.sec3rd {
  position: relative;
  width: 100%;
  height: 100%;
}

#article3rd picture {
  width: 100%;
  padding-top: 80px;
  filter: drop-shadow(0 0 4px #364077);
}
#article3rd h1 {
  color: #fff;
  /* background: radial-gradient(circle, rgb(255, 255, 255, .9) 0%, rgb(255, 255, 255, .3) 30%, rgba(255, 255, 255, 0) 50%);
  background-size: 80px 80px;
  background-repeat: no-repeat; */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 50%);
  background-size: 110px 110px;
  background-repeat: no-repeat;
  background-position: -20px center;
}
#article3rd h1::before {
  content: "";
  background: #35518c;
}
#article3rd h1::after {
  content: "";
  background: #676c7f;
}
#article3rd .cap1-sp p {
  opacity: 0.6;
}
#article3rd > p {
  color: #fff;
}

/* .bg3rd {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(img/cover-3rd.png), url(img/cover-3rd.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom, center top;
	mix-blend-mode: hard-light;
	z-index: 1;
	top: 0;
}
 */
/****************************************************************************

	*4th*

****************************************************************************/
/* station */
.sec4th {
  position: relative;
  width: 100%;
  height: 100%;
}

/* .bg4th {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(img/cover-4th.png), url(img/cover-4th.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom, center top;
	mix-blend-mode: hard-light;
	z-index: 1;
	top: 0;
} */
#article4th h1 {
  /* background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 50%);
  background-size: 80px 80px;
  background-repeat: no-repeat; */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0) 50%);
  background-size: 110px 110px;
  background-repeat: no-repeat;
  background-position: -20px center;
}
#article4th h1::before {
  content: "";
  background: #bde795;
}
#article4th h1::after {
  content: "";
  background: #868c7f;
}

.imgWrapper {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  filter: drop-shadow(0 0 4px #a8a8a8);
  z-index: 2;
}
.imgWrapper > picture {
  margin-top: 80px;
  width: 80%;
}
.imgWrapper > picture:nth-of-type(2) {
  margin-left: auto;
  margin-top: -40px;
}

/****************************************************************************

	*5th*

****************************************************************************/
/* profile */
.sec5th {
  width: 100%;
  /* background: url(img/gray.jpg) repeat-y;
  background-size: 100% auto; */
  position: relative;
}

/* .bg5th {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(img/gray.jpg) repeat-y;
} */
#profile {
  width: 100%;
  margin: 80px auto 60px;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  z-index: 2;
}
#profile h2 {
  font-size: 1.8rem;
}
#profile .nTxtSp {
  font-size: 1.4rem;
  margin-bottom: 8px;
}
#profile > p {
  margin-top: 40px;
  padding: 0 16px;
  text-align: justify;
  line-height: 1.8;
}

.profileLine {
  width: 60%;
  height: 2px;
  background: #cbcbcb;
}
.profileLine::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #a2a2a2;
}

/* novelty */
section[id^=novelty] {
  position: relative;
  padding-bottom: 60px;
}
section[id^=novelty] .noveltySubWrapper picture {
  position: relative;
  z-index: 2;
}
section[id^=novelty] .noveltySubWrapper picture img {
  width: 100%;
}
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2 {
  z-index: 6;
  position: relative;
  font-size: 1.6rem;
  padding: 48px 16px 8px;
}
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2::before {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 16px;
}
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2::after {
  content: "";
  position: absolute;
  height: 1px;
  bottom: 0;
  left: 16px;
}
section[id^=novelty] .noveltySubWrapper .noveltyTxt > p:first-of-type {
  z-index: 6;
  position: relative;
  margin: 16px 16px 0;
}
section[id^=novelty] .noveltySubWrapper .noveltyTxt > p {
  margin: 8px 16px 0;
  text-align: justify;
  position: relative;
  z-index: 2;
  line-height: 1.8;
}

#novelty {
  width: 100%;
  margin: 80px 0 0;
  position: relative;
}
#novelty .noveltySubWrapper .noveltyTxt h2::before {
  content: "";
  background: #cccacb;
}
#novelty .noveltySubWrapper .noveltyTxt h2::after {
  content: "";
  background: #a4a2a3;
}

.noveltyImg {
  display: flex;
  flex-wrap: wrap;
  width: 78%;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
.noveltyImg li:first-of-type {
  margin-top: 80px;
  width: 70%;
  margin-left: auto;
}
.noveltyImg li:nth-of-type(2) {
  width: 33%;
  margin-top: -112px;
}
.noveltyImg li figure img {
  width: 100%;
}

.bgnovelty {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(241, 241, 241, 0.9);
  mix-blend-mode: multiply;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}

.circleBgNovelty {
  position: absolute;
  width: 104vw;
  height: 104vw;
  background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0) 97%);
  filter: drop-shadow(0 0 0.75rem white);
  top: -24px;
  left: -2vw;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
  z-index: 3;
}

/****************************************************************************

	*6th*

****************************************************************************/
/* eventinfo */
.sec6th {
  width: 100%;
  background: url(img/gray.webp) repeat-y;
  background-size: 100% auto;
}

section[id^=eventInfo] {
  position: relative;
  padding-bottom: 60px;
}
section[id^=eventInfo] h2 {
  z-index: 6;
  position: relative;
  font-size: 1.6rem;
  padding: 48px 16px 8px;
  display: inline-block;
}
section[id^=eventInfo] h2::before {
  content: "";
  position: absolute;
  height: 2px;
  bottom: 0;
}
section[id^=eventInfo] h2::after {
  content: "";
  position: absolute;
  height: 1px;
  bottom: 0;
}

#eventInfo {
  width: 100%;
  padding: 80px 0 0;
  position: relative;
  text-align: center;
}
#eventInfo h2::before {
  content: "";
  background: #acb3ab;
}
#eventInfo h2::after {
  content: "";
  background: #ffa1eb;
}

.dateSchedule {
  text-align: initial;
  display: flex;
  display: -webkit-flex;
  flex-direction: inherit; /*single*/
  -webkit-flex-direction: column;
  padding-bottom: 80px;
}
.dateSchedule li {
  width: 100%;
  position: relative;
  padding: 24px 16px;
  border-bottom: 1px solid #cecece;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dateSchedule li:first-of-type {
  padding: 40px 16px 24px;
}
.dateSchedule li:last-of-type {
  border-bottom: none;
}
.dateSchedule li div:first-of-type {
  width: 50%;
  float: left;
}
.dateSchedule li div:first-of-type h3 {
  font-size: 1.45rem;
}
.dateSchedule li div:first-of-type h3::after {
  content: "会場";
  font-size: 1.1rem;
  padding-left: 3px;
}
.dateSchedule li div:first-of-type p {
  font-feature-settings: "palt" 1;
}
.dateSchedule li div:first-of-type p:first-of-type {
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.dateSchedule li div:first-of-type p:first-of-type time {
  font-size: 1.6rem;
  padding-right: 4px;
  letter-spacing: 0.3px;
}
.dateSchedule li div:first-of-type p:nth-of-type(2) {
  margin-top: 4px;
  line-height: 1.6;
}
.dateSchedule li div:nth-of-type(2) {
  width: 45%;
  float: right;
}
.dateSchedule li div:nth-of-type(2) a:nth-last-of-type(2) {
  position: relative;
  z-index: 90;
  border-radius: 4px;
  padding: 8px 0 8px;
  border: 1px #ccc1c5 solid;
  background: #cc5c82;
  display: block;
  text-align: center;
  margin-bottom: 1.2rem;
}
.dateSchedule li div:nth-of-type(2) a:nth-last-of-type(2):hover {
  outline: 0;
  -o-transition: all 0.3s ease-in;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  opacity: 0.5;
}
.dateSchedule li div:nth-of-type(2) a:nth-last-of-type(2) p {
  font-size: 1.3rem;
  color: #fff;
  margin: auto;
  letter-spacing: 0.1rem;
}
.dateSchedule li div:nth-of-type(2) a {
  display: block;
  text-align: center;
}
.dateSchedule li div:nth-of-type(2) a:last-of-type p {
  position: relative;
  z-index: 90;
  font-size: 1rem;
  color: #262626;
  text-decoration: underline;
}

/****************************************************************************

	*****footer*****

****************************************************************************/
footer {
  width: 100%;
  padding: 0;
  text-align: center;
  background: #e7e7eb;
}
footer div {
  transform: scale(0.6, 0.6);
  width: 160vw;
  transform-origin: left center;
  line-height: 2;
  padding: 0 16px;
}
footer div p:first-of-type {
  font-size: 1.2rem;
}
/****************************************************************************

	*****over370*****

****************************************************************************/
@media only screen and (min-width: 370px) {
  header hgroup h2 {
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 420px) {
  .caution span {
    display: inline;
  }
}
/****************************************************************************

	*****over500 side40*****

****************************************************************************/
@media only screen and (min-width: 500px) {
  .fortyLogo {
    width: 24%;
    right: 40px;
  }
  .labels {
    left: 40px;
  }
  header hgroup {
    width: 51%;
    /* margin-left: 40px; */
  }
  header hgroup h2 {
    font-size: 2.4rem;
    text-align: center;
  }
  header hgroup h2 span {
    font-size: 1.8rem;
  }
  .circleBg {
    width: 320px;
    height: 320px;
  }
  .circle .circleInner h2 {
    font-size: 1.5rem;
    width: 130px;
  }
  article[id^=article] > p:first-of-type {
    margin: 16px 40px 0;
  }
  article[id^=article] > p {
    margin: 8px 40px 0;
  }
  article[id^=article] h1 {
    padding: 24px 40px;
  }
  article[id^=article] h1::before,
article[id^=article] h1::after,
section[id^=novelty] h2::before,
section[id^=novelty] h2::after {
    left: 40px;
  }
  #profile {
    margin: 80px auto 60px;
    padding-left: 40px;
    padding-right: 40px;
  }
  section[id^=novelty] .noveltySubWrapper .noveltyTxt h2 {
    padding: 48px 40px 8px;
  }
  section[id^=novelty] .noveltySubWrapper .noveltyTxt > p:first-of-type {
    margin: 16px 40px 0;
  }
  .dateSchedule li:first-of-type {
    padding: 40px 40px 24px;
  }
  .dateSchedule li {
    padding: 24px 40px;
  }
}
/****************************************************************************

	*****over600 side40*****

****************************************************************************/
@media only screen and (min-width: 600px) {
  /* header {
  	min-height: auto;
  	height: auto;
  }
  header picture img {
  	width: 100%;
  	height: auto;
  } */
  #profile > p {
    padding: 16px 0 16px 40px;
  }
  .dateSchedule li div:nth-of-type(2) {
    width: 38%;
  }
  .noveltyImg {
    width: 70%;
  }
  .circleBgNovelty {
    width: 94vw;
    height: 94vw;
  }
  .caution {
    margin-block-start: 40px;
  }
}
/****************************************************************************

	*****over700 side40*****

****************************************************************************/
@media only screen and (min-width: 700px) {
  /* header hgroup {
  	width: 43%;
  	top: 220px;
  	filter: drop-shadow(0 0 2px #0e1634);
  	color: #fff;
  } */
  /* YUKIZAKURA ver. */
  header {
    height: 100vh;
    height: 100svh;
    background: url(img/main-cover-top.webp), url(img/main-cover-bottom.webp);
    background-size: 100% auto;
    background-position: top center, bottom center;
  }
  header hgroup {
    width: 37%;
  }
  header > picture > img {
    left: 0;
    margin: auto;
  }
  /* end */
  header hgroup small:after {
    background: #fff;
  }
  .circle .circleInner > p {
    font-size: 1.1rem;
  }
  .circle .circleInner h2 {
    margin: 0 auto 16px;
  }
  .circle .circleInner h2 {
    width: 150px;
  }
  .circle .circleInner h2 {
    font-size: 1.7rem;
  }
  .circleExhibit {
    font-size: 1.9rem;
  }
  .circleBg {
    width: 340px;
    height: 340px;
  }
  .cap1-sp {
    padding-right: 40px;
  }
  .noveltyImg {
    width: 60%;
  }
  .circleBgNovelty {
    width: 80vw;
    height: 80vw;
  }
  .dateSchedule li:first-of-type {
    padding: 40px 10% 24px;
  }
  .dateSchedule li {
    padding: 24px 10%;
  }
}
/****************************************************************************

	*****over768 84%*****

****************************************************************************/
@media only screen and (min-width: 768px) {
  article[id^=article] {
    padding-bottom: 80px;
  }
  .bgfull {
    background: url(img/cover-full-m.webp) no-repeat;
    background-size: 100% 100%;
    background-position: center top;
    mix-blend-mode: hard-light;
    /* margin-top: -500px; */
  }
  main {
    font-size: 1.2rem;
  }
  /* header */
  .fortyLogo {
    width: 160px;
  }
  .labels {
    width: 84%;
    margin: 0 auto;
    left: 0;
    right: 0;
  }
  .headerAniParts {
    width: 84%;
    margin: 0 auto;
    position: relative;
  }
  .snow1 {
    width: 72px;
  }
  .snow2 {
    width: 56px;
  }
  .hexagon0_1 {
    width: 64px;
    top: 22vh;
    top: 22svh;
  }
  .hexagon0_2 {
    width: 48px;
    top: 15vh;
    top: 15svh;
  }
  .fortyLogo {
    width: 84%;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: right;
  }
  .fortyLogo > img {
    width: 160px;
  }
  header hgroup {
    /* margin-left: 8%;
    width: calc(100% - 8%);
    top: 250px; */
    /* h1,
    small,
    h2 {
    	width: 280px;
    } */
  }
  header hgroup small {
    font-size: 1.2rem;
  }
  .circle {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
  .hexagon2_1 {
    width: 48px;
    left: 23%;
    top: 58px;
  }
  .hexagon1_1 {
    width: 63px;
    left: 16%;
    top: 37px;
  }
  .hexagon5_1 {
    width: 46px;
    top: 93px;
    right: 8%;
  }
  .hexagon3_1 {
    width: 59px;
    bottom: -53px;
    right: 22%;
  }
  .lineBg {
    height: 200px;
  }
  /* artist */
  article[id^=article] h1 {
    font-size: 1.8rem;
    padding: 32px 0;
    width: 84%;
    margin: 0 auto;
  }
  #article2nd picture::after,
#article3rd picture::after {
    margin: -0.8rem 1.6rem 0.8rem 0;
  }
  article[id^=article] h1::before, article[id^=article] h1::after, section[id^=novelty] h2::before, section[id^=novelty] h2::after {
    left: 0;
  }
  article[id^=article] > p {
    line-height: 2;
  }
  article[id^=article] > p:first-of-type {
    margin: 32px auto 0;
    width: 84%;
  }
  article[id^=article] > p {
    margin: 8px auto 0;
    width: 84%;
  }
  .cap1-sp {
    font-size: 5rem;
  }
  .script1st {
    margin-top: -8px;
    font-size: 4.2rem;
    margin-right: 4px;
  }
  .script2nd {
    height: 70px;
    margin-top: -0.8rem;
  }
  .script3rd {
    margin-top: 10px;
    margin-left: -7px;
    font-size: 3.4rem;
  }
  /* article1st */
  .hexagon2_2 {
    width: 50px;
    top: -40px;
    left: 14%;
  }
  .water1 {
    width: 500px;
    left: -34%;
  }
  .water2 {
    width: 560px;
    right: -33%;
  }
  /* article2nd */
  div[class^=cloud] img {
    width: 60%;
  }
  /* article3rd */
  .flower1 {
    width: 200px;
  }
  .flower2 {
    width: 150px;
  }
  .flower3 {
    width: 120px;
  }
  .flower4 {
    width: 100px;
  }
  .flower5 {
    width: 80px;
  }
  /* article4th */
  .imgWrapper > picture {
    width: 60%;
  }
  .imgWrapper > picture:nth-of-type(2) {
    margin-top: -140px;
  }
  .bubble1 {
    width: 80px;
  }
  .bubble2 {
    width: 70px;
  }
  .bubble3 {
    width: 50px;
  }
  .bubble4 {
    width: 60px;
  }
  .bubble5 {
    width: 60px;
  }
  .bubble6 {
    width: 80px;
  }
  /* novelty */
  .circleBgNovelty {
    width: 450px;
    height: 450px;
  }
  section[id^=novelty] .noveltySubWrapper .noveltyTxt h2 {
    width: 84%;
    margin: 0 auto;
    padding: 48px 0 8px;
  }
  section[id^=novelty] .noveltySubWrapper > .noveltyTxt p:first-of-type {
    width: 84%;
    margin: 16px auto 0;
  }
  .hexagon2_3 {
    width: 60px;
  }
  .hexagon3_2 {
    width: 50px;
  }
  .hexagon5_2 {
    width: 50px;
  }
  .hexagon2_4 {
    width: 50px;
  }
  .hexagon3_3 {
    width: 50px;
  }
  /* schedule */
  .dateSchedule {
    width: 64%;
    margin: 0 auto;
  }
  .dateSchedule li:first-of-type {
    padding: 40px 0 24px;
  }
  .dateSchedule li {
    padding: 24px 0;
  }
}
/****************************************************************************

	*****over780*****

****************************************************************************/
/* @media only screen and (min-width : 780px) {
	header picture img {
		width: 100%;
		height: auto;
		float: right;
	}

	header picture {
		overflow: hidden;
	}
}
 */
/****************************************************************************

	*****over900 80%*****

****************************************************************************/
@media only screen and (min-width: 900px) {
  /* header hgroup {
  	margin-left: 10%;
  	width: 80%;
  }
  header hgroup h1, header hgroup small, header hgroup h2 {
  	width: 300px;
  }
  header hgroup h2 {
  	font-size: 2.8rem;
  }
  header hgroup h2 span {
  	font-size: 2rem;
  } */
  header hgroup {
    width: 270px;
  }
  .labels,
.fortyLogo,
.headerAniParts {
    width: 80%;
  }
  .fortyLogo > img {
    width: 150px;
  }
  #article1st picture,
#article2nd picture,
#article3rd picture,
.imgWrapper {
    width: 80%;
    margin: 0 auto;
  }
  .cap1-sp {
    padding-right: 0;
    width: 80%;
    margin: 0 auto;
  }
  article[id^=article] h1,
article[id^=article] > p:first-of-type,
article[id^=article] > p {
    width: 80%;
  }
  #profile {
    margin: 80px auto 60px;
    width: 80%;
    overflow: hidden;
  }
  #profile > p {
    padding: 16px 0;
    width: 86%;
    float: right;
  }
  .noveltySubWrapper {
    width: 80%;
    margin: 0 auto;
    padding: 40px 0;
    position: relative;
  }
  section[id^=novelty] {
    padding-bottom: 0;
  }
  .noveltySubWrapper:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
  }
  .noveltyImg {
    width: 40%;
    float: right;
    margin-bottom: 40px;
  }
  .noveltyImg li:first-of-type {
    margin-top: 58px;
  }
  .noveltyImg li:nth-of-type(2) {
    width: 32%;
  }
  .noveltyTxt {
    width: 56%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
  }
  section[id^=novelty] .noveltySubWrapper .noveltyTxt h2::before,
section[id^=novelty] .noveltySubWrapper .noveltyTxt h2::after {
    width: 100%;
    left: 0;
  }
  section[id^=novelty] .noveltySubWrapper .noveltyTxt h2 {
    padding: 0 0 8px;
  }
  .circleBgNovelty {
    width: 40vw;
    height: 40vw;
    right: -4%;
    left: inherit;
  }
}
/****************************************************************************

	*****over1024 70%*****

****************************************************************************/
@media only screen and (min-width: 1024px) {
  /* 	.bg1st,
  .bg2nd,
  .bg3rd,
  .bg4th,
  .bg5th{
  	display: block;
  } */
  /* YUKIZAKURA ver. */
  header {
    background: url(img/main-cover-top-min.webp), url(img/main-cover-bottom.webp);
    background-size: 100% auto;
    background-position: top center, bottom center;
  }
  .labels,
.fortyLogo,
.headerAniParts {
    width: 70%;
  }
  .fortyLogo > img {
    width: 130px;
  }
  header hgroup {
    top: 10.5%;
    /* margin-left: 15%;
    width: 70%; */
  }
  .circle {
    width: 60%;
  }
  .hexagon1_1 {
    top: 0;
  }
  .hexagon2_1 {
    top: 20px;
  }
  .hexagon5_1 {
    top: 40px;
  }
  .hexagon3_1 {
    bottom: -20px;
  }
  .hexagon2_2 {
    top: -60px;
    left: 30%;
  }
  /* article[id^="article"] {
  	padding-bottom: 80px;
  } */
  #article1st picture, #article2nd picture, #article3rd picture, .imgWrapper {
    width: 70%;
  }
  .cap1-sp {
    font-size: 9rem;
    padding-right: 0;
    margin: 0 auto;
    position: absolute;
    left: 35px;
    transform: rotate(90deg);
    top: 0;
    text-align: center;
    transform-origin: left center;
  }
  article[id^=article] h1, article[id^=article] > p:first-of-type, article[id^=article] > p {
    width: 60%;
  }
  .water1 {
    width: 60%;
    left: -40%;
  }
  .water2 {
    width: 60%;
    right: -23%;
  }
  .script3rd {
    font-size: 5rem;
  }
  .script2nd {
    width: 1.5px;
    height: 90px;
    margin-top: -0.4rem;
    margin-left: 1rem;
  }
  .script1st {
    margin-top: -26px;
    font-size: 5.5rem;
    margin-right: -14px;
  }
  .cap1-sp p:nth-of-type(2) {
    margin-left: 20px;
  }
  .flower1 {
    width: 220px;
  }
  .flower2 {
    width: 160px;
  }
  .flower3 {
    width: 140px;
  }
  .flower4 {
    width: 140px;
  }
  .flower5 {
    width: 100px;
  }
  .bubble1 {
    width: 100px;
  }
  .bubble2 {
    width: 90px;
  }
  .bubble3 {
    width: 70px;
  }
  .bubble4 {
    width: 80px;
  }
  .bubble5 {
    width: 80px;
  }
  .bubble6 {
    width: 100px;
  }
  #profile {
    width: 70%;
  }
  .noveltySubWrapper {
    width: 70%;
  }
  .circleBgNovelty {
    top: 50%;
    transform-origin: top;
  }
  .onActive33 {
    transform: scale(1, 1) translateY(-50%);
  }
  .dateSchedule {
    width: 60%;
  }
}
/****************************************************************************

	*****over1200*****

****************************************************************************/
@media only screen and (min-width: 1200px) {
  /* YUKIZAKURA ver. */
  header > picture > img {
    width: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    filter: none;
    object-position: center 70%;
  }
  .hgroupWrapper {
    height: auto;
    position: initial;
  }
  header hgroup {
    top: 14.5%;
    margin-left: 15%;
    width: 70%;
    filter: drop-shadow(0 0 2px #131313) drop-shadow(0 0 2px #191919);
  }
  header hgroup small {
    display: block;
  }
  header hgroup h1:after,
.labels {
    display: none;
  }
  .fortyLogo {
    bottom: 0%;
    width: 50%;
  }
  .fortyLogo > img {
    width: 160px;
  }
  .headerAniParts {
    display: none;
  }
  header hgroup h1, header hgroup small, header hgroup h2 {
    width: 330px;
    color: #fff;
  }
  .dateSchedule {
    width: 70%;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-direction: initial;
    -webkit-flex-direction: initial;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .dateSchedule li {
    width: 50%;
    /* &:nth-last-of-type(2) {
    	border-bottom: none;
    } */
  }
  .dateSchedule li:nth-of-type(odd) div:nth-of-type(2) {
    margin-right: 16px;
  }
  .dateSchedule li:nth-of-type(even) div:first-of-type {
    margin-left: 16px;
  }
  /* .dateSchedule li:nth-of-type(even) {
  	border-left: 1px solid #cecece;
  } */
  .dateSchedule li:nth-of-type(odd) {
    border-right: 1px solid #cecece;
  }
  .dateSchedule li:nth-of-type(-n+2) {
    margin-top: 40px;
  }
  .hexagon2_3 {
    width: 70px;
    top: 20px;
    left: 20%;
  }
  .hexagon3_2 {
    top: 27%;
    right: 45%;
    width: 60px;
  }
  .hexagon2_4 {
    top: 63px;
    right: 21%;
    width: 60px;
  }
  .hexagon5_2 {
    left: 20%;
    width: 60px;
  }
  .hexagon3_3 {
    width: 55px;
  }
}
/****************************************************************************

	*****over1400 60%*****

****************************************************************************/
@media only screen and (min-width: 1400px) {
  /* YUKIZAKURA ver. */
  .labels,
.headerAniParts {
    width: 60%;
  }
  header hgroup h1, header hgroup small, header hgroup h2 {
    width: 360px;
  }
  .water2 {
    width: 50%;
  }
  header hgroup h2 {
    font-size: 3rem;
  }
  header hgroup h2 span {
    font-size: 2.7rem;
  }
  #article1st picture, #article2nd picture, #article3rd picture {
    width: 60%;
  }
  .imgWrapper {
    width: 70%;
  }
  article[id^=article] h1, article[id^=article] > p:first-of-type, article[id^=article] > p {
    width: 50%;
  }
  .noveltySubWrapper {
    width: 60%;
  }
  .circleBgNovelty {
    width: 30vw;
    height: 30vw;
    right: -3vw;
  }
  section[id^=novelty] .noveltySubWrapper .noveltyTxt h2 {
    width: 100%;
    margin: 0 auto 0 6%;
  }
  section[id^=eventInfo] h2 {
    padding: 48px 16px 16px;
  }
  .dateSchedule li:nth-of-type(-n+2) {
    margin-top: 60px;
  }
  .dateSchedule li:nth-of-type(odd) div:nth-of-type(2) {
    margin-right: 32px;
  }
  .dateSchedule li:nth-of-type(even) div:first-of-type {
    margin-left: 32px;
  }
  #profile h2 {
    font-size: 1.9rem;
  }
  #profile .nTxtSp {
    font-size: 1.7rem;
  }
  #profile > p {
    padding: 0;
  }
  .profileLine {
    width: 35%;
  }
}
/****************************************************************************

	*****over1600 1000px*****

****************************************************************************/
@media only screen and (min-width: 1600px) {
  header hgroup {
    width: 1000px;
    margin: 0 auto;
    left: 0;
    right: 0;
  }
  .circle {
    /* width: 680px; */
    width: 900px;
  }
  #article1st picture, #article2nd picture, #article3rd picture {
    width: 900px;
  }
  article[id^=article] h1, article[id^=article] > p:first-of-type, article[id^=article] > p {
    width: 800px;
  }
  .imgWrapper,
#profile,
.dateSchedule {
    width: 1000px;
  }
  .noveltySubWrapper {
    width: 880px;
  }
}
/****************************************************************************

	*****over1900 1400px*****

****************************************************************************/
@media only screen and (min-width: 1900px) {
  header hgroup,
.imgWrapper {
    width: 1400px;
  }
  header hgroup h1, header hgroup small, header hgroup h2 {
    width: 20vw;
  }
  .circleBgNovelty {
    width: 440px;
    height: 440px;
    right: -45px;
  }
  #article1st picture, #article2nd picture, #article3rd picture {
    width: 1000px;
  }
  article[id^=article] h1, article[id^=article] > p:first-of-type, article[id^=article] > p {
    width: 900px;
  }
}
@media only screen and (min-width: 555px) and (max-width: 1199px) and (max-height: 560px) {
  header hgroup {
    margin-left: 10%;
    width: 22%;
    margin-top: 4%;
  }
  header > picture > img {
    top: 0;
    bottom: 0;
  }
  .labels {
    color: #fff;
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000);
  }
  header hgroup h2 {
    font-size: 1.7rem;
  }
}
@media only screen and (min-width: 409px) and (max-width: 699px) and (min-height: 557px) {
  header > picture > img {
    object-fit: cover;
    width: 100%;
  }
}
@media only screen and (max-height: 557px) {
  header hgroup h2 span {
    font-size: 1.2rem;
  }
  header hgroup h2 {
    text-align: center;
  }
}
@media only screen and (max-height: 420px) {
  header hgroup h2 {
    font-size: 1.9vw;
  }
  header > picture > img {
    top: 0;
    bottom: initial;
  }
  .fortyLogo > img {
    width: 8vw;
  }
}
/* @media only screen and (max-height : 10000px) and (min-width : 375px) and (max-width : 768px) {
	header picture img {
		width: 100%;
	    height: auto;
		float: right;
	}
	header picture {
		overflow: hidden;
	}
} */