:root {
  --fair-max: 1920px;
  --fair-content-max: 1200px;
}


/* =========================================================
   Base
========================================================= */

* {
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
  width: 100%;
  line-height: 0;
}


/* =========================================================
   LP全体
========================================================= */

.itawari-fair {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;

  /* デザインのオレンジ系背景 */
  background:
    linear-gradient(
      180deg,
      #fff7df 0%,
      #ffd27b 35%,
      #ffa35a 65%,
      #fff7df 100%
    );
}


/* =========================================================
   通常画像
========================================================= */

.fair-image {
  width: min(100%, var(--fair-max));
  margin: 0 auto;
  line-height: 0;
}

.fair-image picture,
.fair-image img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   関連バナー
========================================================= */

.fair-banner {
  position: relative;

  width: min(calc(100% - 60px), var(--fair-content-max));
  margin: 30px auto;

  line-height: 0;
}

.fair-banner > a {
  display: block;
}

.fair-banner picture,
.fair-banner img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   フォトコンテスト内透明リンク
========================================================= */

.fair-photo-contest {
  position: relative;
}

.photo-link {
  position: absolute;
  display: block;
  z-index: 2;
}


/*
 * 仮位置。
 * 画像切り出し後に実画像から正確に合わせる
 */

.photo-link-detail {
  left: 15%;
  bottom: 4%;
  width: 34%;
  height: 5%;
}

.photo-link-instagram {
  left: 51%;
  bottom: 4%;
  width: 34%;
  height: 5%;
}


.photo-link:focus-visible {
  outline: 3px solid #ffeb00;
}


/* =========================================================
   SP
========================================================= */

@media (max-width: 767px) {

  .itawari-fair {
    width: 100vw;
  }


  /* -------------------------
     通常画像
  ------------------------- */

  .fair-image {
    width: 100%;
    max-width: none;
  }


  /* -------------------------
     関連バナー
  ------------------------- */

  .fair-banner {
    width: calc(100% - 32px);
    max-width: none;

    margin: 20px auto;
  }


  /* -------------------------
     フォトコンテストリンク
     SP版は縦配置想定
  ------------------------- */

  .photo-link-detail {
    left: 7%;
    bottom: 7%;
    width: 86%;
    height: 3%;
  }

  .photo-link-instagram {
    left: 7%;
    bottom: 3%;
    width: 86%;
    height: 3%;
  }

}

/* =========================================================
   ページ内ナビ
========================================================= */

.itawari-nav {
  display: flex;
  justify-content: center;
  gap: 32px;

  width: 100%;
  margin: 0 auto;

  padding: 18px 40px;

  background:
    linear-gradient(
      180deg,
      #ffd889 0%,
      #ffc66c 100%
    );
}

.itawari-nav a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: min(260px, 30%);
  min-height: 42px;

  padding: 8px 16px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #ef6822 0%,
      #e94f2e 55%,
      #e58b7f 100%
    );

  color: #fff;
  text-decoration: none;
  text-align: center;

  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}


/* hover */

.itawari-nav a:hover {
  opacity: 0.85;
}


/* SP */

@media (max-width: 767px) {

  .itawari-nav {
    flex-direction: column;
    align-items: center;

    gap: 10px;

    padding: 16px 20px;
  }

  .itawari-nav a {
    width: 100%;
    max-width: 340px;
    min-height: 48px;

    font-size: 16px;
  }

}

.fair-present-prizes {
  position: relative;
}

.present-link {
  position: absolute;
  display: block;
  z-index: 2;
}

/* Uber */
.present-link-uber {
    left: 14.8%;
    top: 42.7%;
    width: 13.1%;
    height: 5.3%;
}
/* 富士急 */
.present-link-fujiq {
    left: 43.5%;
    top: 42.7%;
    width: 13.05%;
    height: 5.2%;
}

/* 箱根 */
.present-link-hakone {
    left: 72.1%;
    top: 42.7%;
    width: 13.15%;
    height: 5.2%;
}

/* 店舗 */
.present-link-store {
    left: 37%;
    top: 84.3%;
    width: 26.05%;
    height: 7%;
}

.fair-photo-contest {
  position: relative;
}

.photo-link {
  position: absolute;
  display: block;
  z-index: 2;
}

.photo-link-detail {
  left: 15.9%;
  top: 92.1%;
  width: 33.2%;
  height: 3.9%;
}

.photo-link-instagram {
  left: 50.9%;
  top: 92.1%;
  width: 33.2%;
  height: 3.9%;
}
.fair-closing {
  position: relative;
}

.closing-store-link {
    position: absolute;
    display: block;
    left: 38.3%;
    top: 63.4%;
    width: 23.5%;
    height: 10.2%;
    z-index: 2;
}
.sp-only {
  display: none !important;
}

@media (max-width: 767px) {
  .sp-only {
    display: block !important;
  }
}

/* =========================================================
   SP 透明リンク位置
   ※PC指定より必ず後ろ
========================================================= */

@media (max-width: 767px) {

  /* ========================================
     選べる豪華プレゼント
     img05-sp.jpg
  ======================================== */

  .present-link-uber {
    left: 26.8%;
    top: 21.84%;
    width: 47.0%;
    height: 2.15%;
  }

  .present-link-fujiq {
    left: 26.8%;
    top: 50.22%;
    width: 47.0%;
    height: 2.15%;
  }

  .present-link-hakone {
    left: 26.8%;
    top: 80.21%;
    width: 47.0%;
    height: 2.2%;
  }

  .present-link-store {
    left: 11.1%;
    top: 95.7%;
    width: 77.9%;
    height: 2.55%;
  }


  /* ========================================
     フォトコンテスト
     img08-sp.jpg
  ======================================== */

  .photo-link-detail {
    left: 7.0%;
    top: 91.85%;
    width: 85.7%;
    height: 2.2%;
    bottom: auto;
  }

  .photo-link-instagram {
    left: 7.0%;
    top: 95.21%;
    width: 85.7%;
    height: 2.95%;
    bottom: auto;
  }


  /* ========================================
     クロージング
     img11-sp.png
  ======================================== */

  .closing-store-link {
    left: 22.3%;
    top: 66.16%;
    width: 55.7%;
    height: 7.6%;
  }

}