:root {
  --siteContentWidth: 750px;
}

body {
  background-image: linear-gradient(to bottom, #45b035, #005e3c);
  min-height: 100vh;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.siteContent {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;

  @media screen and (orientation: landscape) {
    max-width: none;
  }
}

.pc-KV {
  padding-top: 5rem;
}

.landingPage {
  background-image: url("../images/background_white.png");
}

.landingPage__key-visual-image {
  position: relative;
  width: 100%;
  height: 53rem;
  /*画像差し替え*/
  background: url("../images/kv_kihon.webp") center / contain no-repeat;

  @media screen and (max-width: 821px) {
    padding-top: 0;
  }
}

.landingPage__pc-key-visual-image {
  width: 100%;
  max-width: 70rem;
  height: 50rem;
  margin: 0 auto;
  /*画像差し替え*/
  background: url("../images/img_top_pc_kv.webp") center / contain no-repeat;
}
.topKvText {
  text-align: right;
  position: absolute;
  bottom: 2rem;
  right: 0rem;
  font-size: 1rem;
}

@media (orientation: landscape) {
  .topKvText {
    right: 23rem;
  }
}

.qr {
  padding: 3rem;
}

.qr__image {
  margin: 0rem auto 1.5rem;
  padding: 6rem;
  width: 30rem;
  height: 30rem;
  background: url("../images/img_top_qr_frame.webp") center/contain no-repeat;
}

.qr__text {
  font-size: 1.6rem;
  font-weight: bold;
}

.qr__url {
  font-size: 1.6rem;
  font-weight: bold;
}

.qr .caution-text {
  color: #e10000;
}

.text-link {
  color: #0b9df2;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

/*-----------------------------------------------
    ヘッダー
------------------------------------------------*/
.header {
  position: relative;
  padding-top: 2.5rem;

  &[padding="none"] {
    padding-top: 0px;
  }
}

.infoHeader {
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: relative;
  background: url(../images/title_makimono.png) center / contain no-repeat;
  background-repeat: no-repeat;
  z-index: 1;
}

.infoHeader__imgWrap {
  margin-top: 2rem;
  border: solid 0.2rem #2852ac;
  border-radius: 1rem;
}

.infoHeader__processTitle {
  background: url(../images/application_process_text.png) center / contain
    no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 2.5rem;
  z-index: 1;
}

.infoHeader__prizeTitle {
  background: url(../images/prize_introduction_text.png) center / contain
    no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 2.5rem;
  z-index: 1;
}

.infoHeader__guidelinesTitle {
  background: url(../images/application_guidelines_text.png) center / contain
    no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 2.5rem;
  z-index: 1;
}

.infoHeader__shadow {
  width: 90%;
  padding-top: 3.5rem;
  padding-bottom: 3rem;
  position: absolute;
  background: url(../images/title_makimono_shadow.png) center / contain
    no-repeat;
  background-repeat: no-repeat;
  transform: translate(2.5rem, 0.5rem);
}

/*====================================================================
    セクション
====================================================================*/
.campaign,
.application-process,
.prize-introduction,
.application-guidelines {
  max-width: 32.75rem;
  margin: 0 auto;
  width: 100%;
}

/*====================================================================
    キャンペーン概要
====================================================================*/
.campaign__title {
  width: 100%;
  position: relative;
}

.campaignKv {
  width: 75%;
  margin: 1.4375rem auto 0; /* 上マージン + 左右中央揃え */
  background: url(../images/img_campaign_kv_v2.png) center / contain no-repeat;
  aspect-ratio: 452 / 376;
  background-size: cover;
}

.campaign__wrap {
  position: relative;
  padding: 4.775rem 1.15625rem 1.25rem;
  background-image: url(../images/campaign_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  top: -3.5rem;
}
.campaign__cautionary {
  display: inline-block;
  position: relative;
  padding-top: 5rem;
  background-image: url(../images/cautionary_note2.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  width: 90%;
  max-width: 44.1rem;
  height: 28rem;
  box-sizing: border-box;
  top: -1rem;
}

.campaign__cautionaryTitle {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  z-index: 2;
  width: 80%;
}

.campaign__cautionaryNote {
  padding: 1rem 1.25rem 0rem;
  box-sizing: border-box;
}

.campaign__cautionarytext {
  font-size: 1.2rem;
  text-align: left;
  font-weight: bold;
  line-height: 1.6;
}
.outline {
  width: 100%;
  margin: 6.5rem auto 4rem;
}

.outline__textBox {
  width: 100%;
  text-align: center;
  display: block;
  margin-top: 7px;
}

.outline__campaigntextBox {
  width: 100%;
  margin-bottom: 1rem;
}

.outline__receptionText {
  text-align: left;
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
}

.outline__prizeText {
  font-size: 17px;
  font-weight: bold;
}

.outline__campaigntext {
  line-height: 1.6;
  font-size: 1.3rem;
  margin: 1.6rem 0.5rem;
  text-align: left;
  font-weight: bold;
}

.title__reception {
  width: 100%;
  letter-spacing: 0.1em;
}

.title__prize,
.title__merchandise {
  width: 100%;
  padding-top: 16px;
}

.title__text {
  margin-bottom: 0;
  line-height: 1.3;
  color: #000;
  text-align: center;
  font-size: 2.6rem;
}

.title__campaign {
  background: url(../images/campaign_overview.png) center / contain no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 25px;
  z-index: 1;
}

.title__subtext {
  margin-bottom: 0;
  line-height: 1.3;
  color: #daa520;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}

.title__border {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/*====================================================================
    当選者限定
====================================================================*/

.title__text {
  position: relative;
  padding-left: 35px;
  margin-bottom: 0;
  font-weight: bold;
  line-height: 1.3;
  text-align: left;
  letter-spacing: 0.05em;
  font-size: 2.6rem;
}

.limited {
  background-color: #fbf8f2;
}

.limited .title {
  width: 100%;
  overflow: hidden;
}

.limited .bg {
  padding: 0 1rem;
}

.limited .textWrap {
  padding-top: 2rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
}

.limited .textWrap .number {
  color: #2852ac;
  font-weight: 900;
}

.limited .textWrap .font-bold {
  font-weight: 900;
}

.limited .textPresentWrap {
  padding-top: 1rem;
  padding-bottom: 2rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
}

/*====================================================================
    対象商品
====================================================================*/
.shipping {
  padding-bottom: 3rem;
  background-color: #edf9fb;
}

.shipping .bg {
  padding: 4rem 3rem 0;
  background-image: url(../images/bg_info.webp);
  background-repeat: repeat-y;
  background-size: contain;
}

.shipping .bg2 {
  padding: 0 3rem;
}

.shipping .productInfo__imgWrap {
  margin-top: 2rem;
  border: solid 0.2rem #2852ac;
  border-radius: 1rem;
  background-color: #fff;
}

.shipping .productInfo__itemWrap {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.shipping .productInfo__itemTitle {
  font-weight: bold;
  font-size: 1.4rem;
}

.shipping .productInfo__itemDetail {
  margin-left: 1rem;
  font-size: 1.4rem;
}

.shipping .productInfo__btnWrap {
  padding: 0 3rem 2rem;
}

.shipping .productInfo__btnWrap a:not(:first-of-type) {
  margin-top: 2.1rem;
}

/*====================================================================
    PC用誘導セクション
====================================================================*/
.induction__box {
  display: flex;
  justify-content: center;
  margin: 35px auto;
}

.induction__container {
  position: relative;
  height: 12rem; /* QRフレームの高さに合わせる */
  display: flex;
  justify-content: center;
  align-items: center;
}

.induction__qrframe {
  width: 12rem;
  height: 12rem;
  position: absolute;
  left: 50%;
  transform: translateX(200%);
  bottom: 5rem;
  background: url("../images/img_top_qrcode_frame.png") center/contain no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.induction__qr {
  width: 11rem;
  height: 10rem;
  background: url("../images/qr.png") center/contain no-repeat;
}

.induction__tentative {
  width: 120rem;
  height: 12rem;
  background: url("../images/tentative.png") center/contain no-repeat;
}
.induction__wrap {
  margin-top: -1rem;
  position: relative;
  z-index: 1;
  bottom: 12rem;
}

.induction__textBox {
  position: relative;
  padding: 2.5rem 16rem;
  background-image: url(../images/black_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
}

.induction__text {
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
}

/*====================================================================
    応募の流れ
====================================================================*/
.application__process__header {
  width: 100%;
  position: relative;
}

.application__process__step1__inner {
  position: relative;
  padding: 1.35rem 0 1.25rem;
  background-image: url(../images/step1_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.application__process__title {
  display: inline-block;
  margin-left: 9.4rem;
  font-size: 2rem;
}

.application__process__step1 {
  position: relative;
  margin: 3rem auto 1.4rem;
  background-image: url(../images/step1_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-weight: bold;
}

.application__process__step1__icon {
  position: absolute;
  z-index: 2;
  left: 0%;
  top: -3%;
  margin: 0 auto;
  width: 10rem;
  height: 8rem;
  background: url(../images/step01.png) center / contain no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.application__process__text__step1 {
  margin: 2rem 3rem;
  font-size: 1.4rem;
}

.application__process__step1__img {
  margin: 0 auto;
  width: 26rem;
  height: 20rem;
  background: url(../images/camp_stecker.png) center / contain no-repeat;
}

.application__process__step2 {
  position: relative;
  margin: 2.2rem auto 2rem;
  background-image: url(../images/step2_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-weight: bold;
}

.application__process__step2__inner {
  position: relative;
  padding: 1.5rem 0 1.5rem;
  background-image: url(../images/step1_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.application__process__step2__icon {
  position: absolute;
  z-index: 2;
  left: 0%;
  top: -3%;
  margin: 0 auto;
  width: 10rem;
  height: 8rem;
  background: url(../images/step02.png) center / contain no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.application__process__step2__img {
  margin: 3.6rem auto 0px;
  width: 21.7rem;
  height: 20rem;
  background: url(../images/information.png) center / contain no-repeat;
}

.application__process__step3 {
  position: relative;
  margin: 2.5rem auto 0px;
  background-image: url(../images/step3_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-weight: bold;
}

.application__process__step3__inner {
  position: relative;
  padding: 1.5rem 0 3rem;
  background-image: url(../images/step1_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.application__process__step3__icon {
  position: absolute;
  z-index: 2;
  left: 0%;
  top: -2%;
  margin: 0 auto;
  width: 10rem;
  height: 8rem;
  background: url(../images/step03.png) center / contain no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.application__process__text__step3 {
  margin: 1.5rem 2.5rem 0;
  font-size: 1.5rem;
}

.application__process__text__step3__notice {
  font-size: 1.2rem;
}

.application__process__text__notice {
  font-size: 1rem;
  width: 90%;
  text-align: right;
}

.application__process__step3__img {
  margin: 0 auto;
  width: 20rem;
  height: 17.5rem;
  background: url(../images/prize_img.jpg) center / contain no-repeat;
}

/*====================================================================
    商品紹介
====================================================================*/
.prize__introduction__header {
  width: 100%;
  position: relative;
  text-align: center;
}

.prize__introduction__text {
  margin: 2rem auto 1rem;
  display: block;
  text-align: center;
}

.prize__introduction__application__text {
  font-size: 2rem;
  color: #005e3c;
  font-weight: bold;
}

.prize__introduction__concept__text {
  margin-top: 0.4rem;
  font-size: 1.8rem;
  font-weight: bold;
}

.prize__introduction__detail__text {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.prize__introduction__pointUp {
  position: relative;
  margin: 1rem auto 1.4rem;
}

.prize__introduction__pointUpInner {
  position: relative;
  padding-bottom: 2rem;
  background-image: url(../images/pointup_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.prize__introduction__title {
  font-weight: bold;
  margin-top: 2rem;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.25rem;
}

.prize__introduction_img {
  margin: 0 auto;
  width: 30rem;
  height: 11rem;
  background: url(../images/point.png) center / contain no-repeat;
}

.prize__introduction__border {
  width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.prize__introduction__text {
  font-size: 1.6rem;
  font-weight: bold;
}

.prize__introduction__text__summary {
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  font-weight: bold;
}

.prize__introduction__selectPay {
  position: relative;
  margin: 1rem auto 3rem;
}

.prize__introduction__selectPayInner {
  position: relative;
  padding-bottom: 2rem;
  background-image: url(../images/selectpay_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}

.prize__introduction__selectpay_img {
  margin: 0 auto;
  width: 28rem;
  height: 17rem;
  background: url(../images/selectpay.png) center / contain no-repeat;
}

.prize__introduction__WchanceInner {
  overflow: visible;
  position: relative;
  margin-bottom: 2rem;
  width: 100%;
  background-image: url(../images/wchance_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  padding: 0 1rem;
}

.prize__introduction__WchanceImg.carousel {
  position: relative;
  width: 20rem;
  height: 17.5rem;
  margin: 1.5rem auto 0;
  overflow: hidden;
}

.prize__introduction__text__notice {
  font-size: 1rem;
  width: 100%;
  height: 4rem;
  text-align: right;
  font-weight: bold;
}

.prize__introduction__cautionary {
  display: inline-block;
  position: relative;
  padding-top: 6rem;
  background-image: url(../images/cautionary_note_shipping.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  width: 90%;
  max-width: 90%;
  height: 19rem;
  box-sizing: border-box;
  top: -1rem;
  margin-top: 2rem;
}

.prize__introduction__cautionaryTitle {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  z-index: 2;
  width: 80%;
}

.prize__introduction__cautionaryNote {
  padding: 0rem 1.2rem;
  box-sizing: border-box;
}

.prize__introduction__cautionarytext {
  font-size: 1.3rem;
  text-align: left;
  font-weight: bold;
  line-height: 1.6;
}

/*====================================================================
    応募要項
====================================================================*/
.application__guidelines {
  padding: 20px 35px 0rem;
}

.application__guidelines__wrap {
  position: relative;
  padding: 24px 25px;
  background-image: url(../images/campaign_waku.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.application__guidelines__wrap:not(:first-of-type) {
  margin-top: 2rem;
}

.application__guidelines__body {
  padding: 1rem;
  background-color: #f5f6f5;
  border: solid 0.1rem #000;
  font-size: 1.2rem;
  font-weight: 500;

  &[body-type="scroll"] {
    padding-right: 0.5rem;
    border-radius: 1rem;
  }
}

.application__guidelines__scroll {
  padding-right: 1.5rem;
  height: 330px;
  overflow-y: scroll;
}

/*====================================================================
    背景グラデーション白線
====================================================================*/
.background {
  background-image: url("../images/background_white.png");
  background-repeat: repeat-y;
  background-size: contain;
  padding-bottom: 5px;

  @media screen and (orientation: landscape) {
    background-size: 100% auto;
  }
}

.background__gradation__green {
  background-image: linear-gradient(to bottom, #45b035, #005e3c);
}

.background__gradation__cream {
  background-image: linear-gradient(to bottom, #f0efe7, #efe9bd);
}

.background__info {
  padding: 1rem 20px 10px;
  background-image: url(../images/bg_info.png);
  background-size: contain;
  background-position: center;
  text-align: center;
}

/*====================================================================
    特茶専用-ボタン
====================================================================*/

.tokuchabtn__form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tokuchabtn:hover {
  .tokuchabtn__button::after {
    opacity: 0;
  }

  .tokuchabtn__form {
    box-shadow: none;
    transform: translate(0.4rem, 0.4rem);
  }
}

.tokuchabtn__button {
  all: unset;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  position: relative;

  &:focus,
  &:active {
    border: none;
    outline: none;
  }

  &[shadow-type="normal"] {
    &::after {
      content: "";
      position: absolute;
      top: 0.5rem;
      left: 0.2rem;
      width: 345px;
      height: 80px;
      background: url(../images/btn_shadow.png) no-repeat center;
      background-size: contain;
      opacity: 1;
      transition: opacity 0.3s ease-in-out;
      pointer-events: none;
      z-index: 0;
    }
  }
}

.tokuchabtn__baseImage {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  position: relative;
  z-index: 1;
  width: 340px;
  height: 80px;
  position: relative;
  padding: 1rem;
  background-image: url(../images/btn_yellow.png);
  background-size: 100% 100%;
}

.tokuchabtn__overlayImage {
  position: absolute;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.3s ease-in-out;
  transform: translate(-50%, -50%);

  &[text-type="qa"] {
    top: 50%;
    left: 50%;
    width: 19rem;
  }
  &[text-type="back"] {
    top: 50%;
    left: 50%;
    width: 5rem;
  }
}

/* ----------------------*
 * カルーセルの画像アイテム
 * ----------------------*/
.carousel__track {
  display: flex;
  transition: transform 0.3s ease-in-out;
  width: 100%;
  height: 100%;
}

.carousel__slide {
  min-width: 100%;
  height: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.carousel__button {
  position: absolute;
  width: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 5px;
  z-index: 1;
}

.carousel__button--prev {
  left: 30px;
}

.carousel__button--next {
  right: 30px;
}

.btn-arrow-icon {
  position: relative;

  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 2.5rem;
    width: 1rem;
    height: 1.5rem;
    top: 3rem;
    background: url(../images/icon_arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease-in-out;
    z-index: 3;
    pointer-events: none;
  }
}