@import url("https://use.typekit.net/pqe3ccc.css");

:root {
  --vw-unit: calc(580 / 750) * 1px;
  --green: #375147;
  --red: #b9272d;
}

.feature {
  width: 580px;
  font-feature-settings: "palt";
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  overflow: hidden;
}
.feature * {
  box-sizing: border-box;
}
.feature a {
  color: inherit;
}
.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.fadeimg {
  transition: 0.3s;
}

/* =========================================================
PC
========================================================= */
.f-container {
  background-color: #3a1723;
}

.f-main {
  width: 580px;
  background-color: white;
}

.mv {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.mv img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.f-left .mv {
  padding: 120px 80px;
}
.f-right .mv {
  padding: 92px 89px;
}

.mv-title {
  width: 323px;
}
.mv-button {
  width: 146px;
  align-self: flex-end;
}


/* =========================================================
アニメーション
========================================================= */
.inview-fade {
  transition: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0;
}
.inview-fade.show {
  opacity: 1;
}

.inview-blur-zoom {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  transition: 1s;
}

.inview-blur-zoom.show {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

/* =========================================================
ヘッダー
========================================================= */
.hdr {
  position: relative;
  background-color: #eaeae8;
}
.hdr-logo {
  width: calc(286 * var(--vw-unit));
  position: absolute;
  top: calc(713 * var(--vw-unit));
  left: calc(233 * var(--vw-unit));
}

/* ヘッダー下のテキスト */
.text-rotate {
  font-family: "courier-std", monospace;
  font-size: calc(28 * var(--vw-unit));
  letter-spacing: -0.01em;
  color: var(--red);
  position: absolute;
}
.text-rotate01 {
  transform: rotate(45deg);
  top: calc(230 * var(--vw-unit));
  left: calc(334 * var(--vw-unit));
}
.text-rotate02 {
  transform: rotate(-58deg);
  top: calc(454 * var(--vw-unit));
  left: calc(10 * var(--vw-unit));
}
.text-rotate03 {
  transform: rotate(-197deg);
  top: calc(756 * var(--vw-unit));
  left: calc(265 * var(--vw-unit));
}

/* =========================================================
セクション
========================================================= */
.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.bg-lightgray {
  background-color: #eaeae8;
}
.bg-lightgray01 {
  padding-top: calc(993 * var(--vw-unit));
}

.bg-green {
  background-color: var(--green);
}
.bg-green01 {
  padding-top: calc(145 * var(--vw-unit));
  padding-bottom: calc(157 * var(--vw-unit));
}
.bg-green02 {
  padding-top: calc(108 * var(--vw-unit));
  padding-bottom: calc(238 * var(--vw-unit));
}
.bg-green03 {
  padding-top: calc(124 * var(--vw-unit));
  padding-bottom: calc(60 * var(--vw-unit));
}

.bg-gray {
  background-color: #353331;
}

.section-heading {
  font-family: "courier-std", monospace;
  font-size: calc(26 * var(--vw-unit));
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--red);
  position: absolute;
  left: calc(27 * var(--vw-unit));
  z-index: 2;
}
.section-heading01 {
  top: calc(20 * var(--vw-unit));
}
.section-heading02 {
  top: calc(22 * var(--vw-unit));
}
.section-heading03 {
  top: calc(23 * var(--vw-unit));
}
.section-heading04 {
  top: calc(26 * var(--vw-unit));
}
.section-heading05 {
  top: calc(23 * var(--vw-unit));
}

/* =========================================================
リンク画像
========================================================= */
.img,
.img-inr {
  position: relative;
}

.img02 {
  margin-bottom: calc(11 * var(--vw-unit));
}
.img04 {
  width: calc(560 * var(--vw-unit));
  margin-bottom: calc(94 * var(--vw-unit));
}
.img05 {
  width: calc(560 * var(--vw-unit));
}
.img06 {
  margin-bottom: calc(11 * var(--vw-unit));
}
.img07 {
  margin-bottom: calc(181 * var(--vw-unit));
}
.img08 {
  margin-bottom: calc(11 * var(--vw-unit));
}
.img09 {
  width: 100%;
}
.img11 {
  width: calc(560 * var(--vw-unit));
}
.img12 {
  margin-bottom: calc(13 * var(--vw-unit));
}
.img13 {
  margin-bottom: calc(171 * var(--vw-unit));
}
.img14 {
  width: calc(560 * var(--vw-unit));
  margin-bottom: calc(178 * var(--vw-unit));
}
.img15 {
  width: 100%;
}

/* =========================================================
スライダー
========================================================= */
.slider {
  width: 100%;
}
.slider .slick-slide * {
  font-size: 0;
}

/* =========================================================
クレジット
========================================================= */
.credit {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  padding: calc(20 * var(--vw-unit)) calc(20 * var(--vw-unit))
    calc(20 * var(--vw-unit)) calc(50 * var(--vw-unit));
}

.book .credit,
.img04 .credit,
.img05 .credit,
.img14 .credit {
  padding: calc(13 * var(--vw-unit)) calc(27 * var(--vw-unit));
  align-items: flex-end;
}

.credit ul {
  opacity: 0;
  transition: 1.2s;
}
.credit.show ul {
  opacity: 1;
  pointer-events: visible;
}
.credit ul li {
  font-family: "courier-std", monospace;
  font-size: calc(29 * var(--vw-unit));
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.45;
  text-transform: uppercase;
}
.credit ul li a {
  text-decoration: none;
  transition: 0.3s;
}
.credit ul li a:hover {
  text-decoration: none;
  opacity: 0.6;
}

.bottom-credit {
  font-family: "courier-std", monospace;
  font-size: calc(20 * var(--vw-unit));
  font-weight: 500;
  text-transform: uppercase;
  margin-top: calc(9 * var(--vw-unit));
  display: flex;
  letter-spacing: 0.03em;
  margin-bottom: 0;
}
.bottom-credit.hide {
  opacity: 0;
}

.bottom-credit-right {
  justify-content: flex-end;
}

/* =========================================================
下部のテキスト
========================================================= */
.check-all-items {
  font-family: "courier-std", monospace;
  font-size: calc(48 * var(--vw-unit));
  font-weight: 500;
}
.please-tap {
  width: calc(150 * var(--vw-unit));
  margin-bottom: calc(109 * var(--vw-unit));
  margin-top: calc(14 * var(--vw-unit));
}
.staff-credit {
  font-family: "courier-std", monospace;
  font-size: calc(25 * var(--vw-unit));
  font-weight: 500;
  text-align: center;
  line-height: 1.55;
  letter-spacing: 0.03em;
  margin: 0;
  text-transform: uppercase;
  margin-bottom: calc(135 * var(--vw-unit));
}

.text-mash {
  width: calc(483 * var(--vw-unit));
}

/* =========================================================
かざり
========================================================= */
.book {
  width: calc(560 * var(--vw-unit));
  margin-bottom: calc(328 * var(--vw-unit));
  position: relative;
}

.flower {
  position: absolute;
  pointer-events: none;
}
.flower01 {
  width: calc(77 * var(--vw-unit));
  top: calc(403 * var(--vw-unit));
  left: calc(490 * var(--vw-unit));
}
.flower02 {
  width: calc(77 * var(--vw-unit));
  top: calc(936 * var(--vw-unit));
  left: calc(163 * var(--vw-unit));
  transform: rotate(136deg);
}
.flower03 {
  width: calc(289 * var(--vw-unit));
  top: calc(1684 * var(--vw-unit));
  left: calc(443 * var(--vw-unit));
}
.flower04 {
  width: calc(77 * var(--vw-unit));
  top: calc(86 * var(--vw-unit));
  left: calc(133 * var(--vw-unit));
  transform: rotate(136deg);
}
.flower05 {
  width: calc(170 * var(--vw-unit));
  top: calc(2136 * var(--vw-unit));
  left: calc(493 * var(--vw-unit));
}
.flower06 {
  width: calc(79 * var(--vw-unit));
  top: calc(2438 * var(--vw-unit));
  left: calc(618 * var(--vw-unit));
}
.flower07 {
  width: calc(109 * var(--vw-unit));
  top: calc(3169 * var(--vw-unit));
  left: calc(26 * var(--vw-unit));
}
.flower08 {
  width: calc(289 * var(--vw-unit));
  top: calc(950 * var(--vw-unit));
  left: calc(483 * var(--vw-unit));
  transform: rotate(18deg);
  z-index: 2;
}
.flower09 {
  width: calc(77 * var(--vw-unit));
  top: calc(2139 * var(--vw-unit));
  left: calc(131 * var(--vw-unit));
  transform: rotate(136deg);
}