@import url('https://use.typekit.net/zro3cie.css');

.l-container {
  width: 100%;
}

.pc-header-main.is-fixed {
  display: none;
}

.l-footer,
.pc-footer {
  padding: 0;
  margin: 0;
}

.feature {
  width: 100%;
  font-feature-settings: "palt";
  margin: 0 auto;
  color: #000;
}

.feature * {
  box-sizing: border-box;
}

.feature a {
  color: inherit;
}

.feature img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.fadeimg {
  transition: 0.3s;
}

[data-bottom-sticky] {
  position: sticky;
}

/* =========================================================
fadeアニメーション
========================================================= */
.inview {
  transition: 1.5s;
  opacity: 0;
  filter: blur(15px);
}

.inview.show {
  opacity: 1;
  filter: blur(0);
}

/* =========================================================
フォント
========================================================= */
.trajan {
  text-transform: uppercase;
  font-family: "trajan-sans-pro", sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.elza {
  font-family: "elza", sans-serif;
  font-weight: 200;
}

/* =========================================================
ヘッダー
========================================================= */
.hdr {
  background-color: #f1f9f9;
}

.hdr-video {
  width: 100%;
  position: relative;
}

.hdr-video video {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.video-buttons {
  display: flex;
  gap: 0 calc(5 * (100vw / 1200));
  position: absolute;
  bottom: calc(10 * (100vw / 1200));
  right: calc(10 * (100vw / 1200));
}

.video-button {
  width: calc(30 * (100vw / 1200));
  opacity: 0.5;
  cursor: pointer;
}

.video-button.on {
  opacity: 1;
  pointer-events: none;
}


.hdr-inr {
  display: flex;
  justify-content: space-between;
  padding-top: calc(48 * (100vw / 1200));
  padding-right: calc(58 * (100vw / 1200));
  padding-left: calc(47 * (100vw / 1200));
  padding-bottom: calc(157 * (100vw / 1200));
}

.hdr-season {
  font-size: calc(19 * (100vw / 1200));
  margin-top: calc(8 * (100vw / 1200));
}

.hdr-title {
  font-size: calc(14 * (100vw / 1200));
  line-height: 1.6;
}

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

.section01 {
  background-color: #f1f9f9;
}

.section02 {
  background-color: #ffd691;
}

.section03 {
  background-color: #dcdb84;
  padding-bottom: calc(50 * (100vw / 1200));
}


/* =========================================================
リンク画像
========================================================= */
.img-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: calc(50 * (100vw / 1200));
  margin-bottom: calc(50 * (100vw / 1200));
}

.img {
  width: calc(474 * (100vw / 1200));
  position: relative;
}

.img > a {
  display: block;
  background-color: white;
}

.img14 {
  width: calc(400 * (100vw / 1200));
  align-self: flex-start;
  margin-left: calc(178 * (100vw / 1200));
  padding-bottom: calc(40 * (100vw / 1200));
}

.img14-season {
  font-size: calc(19 * (100vw / 1200));
  margin-top: calc(8 * (100vw / 1200));
}

.img14-title {
  font-size: calc(14 * (100vw / 1200));
  line-height: 1.6;
  margin-top: calc(10 * (100vw / 1200));
  margin-bottom: calc(20 * (100vw / 1200));
}

.img19,
.img33 {
  width: calc(400 * (100vw / 1200));
}

/* =========================================================
クレジット
========================================================= */
.credit-wrap {
  width: calc(180 * (100vw / 1200));
  position: absolute;
  bottom: 0;
  left: calc(46 * (100vw / 1200));
}

.credit {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * (100vw / 1200)) calc(6 * (100vw / 1200));
}

.credit li {
  font-family: "elza", sans-serif;
  font-weight: 200;
  font-size: calc(10 * (100vw / 1200));
  letter-spacing: 0.07em;
}

.credit li a {
  text-decoration: none;
  transition: 0.3s;
}

.credit li a:hover {
  opacity: 0.6;
}

.col-2 .credit-wrap {
  left: auto;
  right: calc(46 * (100vw / 1200));
  bottom: calc(26 * (100vw / 1200));
}

.col-2 .credit+.credit {
  margin-top: calc(60 * (100vw / 1200));
}

.img13 .credit-wrap {
  width: calc(240 * (100vw / 1200));
  left: auto;
  right: calc(46 * (100vw / 1200));
  bottom: calc(10 * (100vw / 1200));
}

.img15 .credit-wrap {
  width: calc(240 * (100vw / 1200));
}

/* =========================================================
横並び
========================================================= */
.col-2 {
  width: 100%;
  display: flex;
  align-self: flex-start;
  position: relative;
}

.col-2.opposite {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.col-2 .img {
  width: calc(400 * (100vw / 1200));
}

/* =========================================================
fade切り替え画像
========================================================= */
.fade-image {
  position: relative;
}

.fade-image .img:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

/* =========================================================
sticky画像
========================================================= */
.sticky-images {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 400px 0;
  position: relative;
}

.sticky-images .img {
  position: sticky;
  top: calc(20 * (100vw / 1200));
  z-index: 1;
}

.sticky-images .img:nth-child(1) {
  width: 100%;
  display: flex;
  justify-content: center;
}
.sticky-images .img:nth-child(1) a {
  width: calc(474*(100vw / 1200));
}

.sticky-images .img:nth-child(2),
.sticky-images .img:nth-child(3) {
  z-index: 2;
}

/* =========================================================
画像リスト
========================================================= */
.all-list {
  position: relative;
  background-color: #f1f9f9;
  top: 1px;
}

.list-header {
  display: flex;
  justify-content: space-between;
  padding-top: calc(129 * (100vw / 1200));
  padding-right: calc(60 * (100vw / 1200));
  padding-left: calc(46 * (100vw / 1200));
  padding-bottom: calc(47 * (100vw / 1200));
}

.list-season {
  font-size: calc(23 * (100vw / 1200));
}

.view-all-link a {
  font-size: calc(23 * (100vw / 1200));
  transition: 0.3s;
  text-decoration: none;
}

.view-all-link a:hover {
  opacity: 0.6;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* =========================================================
フッター
========================================================= */
.ftr {
  padding-top: calc(61 * (100vw / 1200));
  padding-left: calc(50 * (100vw / 1200));
  padding-bottom: calc(120 * (100vw / 1200));
}

.ftr-season {
  font-size: calc(23 * (100vw / 1200));
}

.ftr-title {
  font-size: calc(17 * (100vw / 1200));
  margin-top: calc(10 * (100vw / 1200));
}

.staff-credit {
  font-size: calc(10 * (100vw / 1200));
  margin-top: calc(68 * (100vw / 1200));
  line-height: 2.2;
  letter-spacing: 0.06em;
}