@charset "UTF-8";
/* calc スタイル
======================================================================================== */
/* html {
  background: #f5f0e1;
} */

html {
  scroll-behavior: smooth;
}

#GPH251017limitedbear {
  --color-black: #272A39;
  --color-white: #FFFEFC;
  --color-gray: #EBEBEB;

  --font-noto: "Noto Sans JP", sans-serif;
  --font-poppins: "poppins", sans-serif;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  font-style: normal;
  --pc-width: 1920;
  --sp-width: 390;
  --pc-artboard-width: 650;
  --sp-artboard-width: 390;
  --formula: calc(var(--variable) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--variable) * 1); /*PC 1400以上は固定*/

  position: relative;
  z-index: 1;
  width: 100%;
  font-style: normal;
  font-weight: var(--fw-regular);
  color: var(--color-black);
  background-color: var(--color-white);
}

/*
.noto-sans-jp-<uniquifier> {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

font-family: "poppins", sans-serif;
font-weight: 600;
font-style: normal;
font-weight: 400;
*/



#GPH251017limitedbear a{
  pointer-events: all;
}

/* @media screen and (min-width: 1921px) {
  #GPH251017limitedbear {
    --ratio: 1px;
  }
} */

@media screen and (min-width: 560px) {
  #GPH251017limitedbear {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); 
    --variable: 1px;
  }

  :root {
    --lpSetSize: calc(1px * calc(650 / 390));
    /* --lpSetSize: 0.56px; */
  }
}

/* SP画面幅 559px以下 可変 */
@media screen and (max-width: 559px) {
  #GPH251017limitedbear {
    --reference-value: .1rem;
    --dsesktop-rate: calc(100vw / 1920);
    --rate: calc(100cqi / 390);
    opacity: 1;
  }

  :root {
    --lpSetSize: (100vw / 390);
  }
}


/* ベーススタイル
======================================================================================== */

.main-area * {
  box-sizing: border-box;
}
.main-area img {
  height: auto;
  opacity: 1;
  width: 100%;
}
.main-area a {
  text-decoration: none;
}
.main-area picture {
  display: block;
}
.main-area p, .main-area ul, .main-area ol, .main-area dl {
  list-style: none;
}

@media (min-width: 560px) and (max-width: 1200px) {
  #GPH251017limitedbear .fixed_img--right a,
  #GPH251017limitedbear .txt_ttl--img{
    display: none;
  }
}

@media (min-width: 560px) and (max-width: 1400px) {
  .contents__inner{
    max-width: calc(650 * var(--lpSetSize));
  }
}

@media screen and (min-width: 560px) {
  #GPH251017limitedbear{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    position: relative;
    overflow-y: clip;
    height: 100%;
  }

  /* #GPH251017limitedbear .contents__inner{
    max-width: calc(650 * (100vw / 1920));
  } */

  .contents_area{
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .contents__inner{
    position: relative;
    z-index: 10;
    width: 100%;
    margin: auto;
    overflow-x: clip;
    max-width: 650px;
    margin: 0 auto;
    grid-column: 2;
    z-index: 1;
  }

  #GPH251017limitedbear .fixed_img--left{
    position: sticky;
    display: grid;
    grid-column: 1;
    top: 0;
    height: 100vh;
    place-content: center;
    z-index: 1;
  }

  .txt_ttl--img{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: calc(14 * (100vw /1920));
    max-width: calc(254 * (100vw /1920));
    width: calc(254 * (100vw /1920));
    margin-bottom: calc(7 * (100vw / 1920));
  }

  #GPH251017limitedbear  .fixed_img{
    width: calc(120 * (100vw /1920));
  }

  #GPH251017limitedbear .fixed_img--right {
    position: sticky;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: calc(50 * (100vw / 1920));
    top: 0;
    height: 100vh;
    place-content: center;
    width: 100%;
    z-index: 1;
  }

  .fixed_img--right a{
    font-family: var(--font-poppins);
    font-size: calc(24 * (100vw / 1920));
    font-weight: var(--fw-semibold);
  }

  .spOnly {
    display: none;
  }

  .pcOnly {
    display: block;
  }

  .logo--img{
    position: relative;
    max-width: calc(232.71 * (100vw / 1920));
    margin-right: calc(45 * (100vw / 1920));
  }

  .js-anchor{
    opacity: 0.3;
  }

  .js-anchor[aria-current="true"]{
    opacity: 1;
  }


.section_link{
  scroll-margin-top: calc(var(--headerHeight) + calc(10 * (100vw / 1920)));
}
}

@media screen and (max-width: 559px) {
  #GPH251017limitedbear{
    overflow-x: clip;
  }

  .spOnly {
    display: block;
  }

  .pcOnly {
    display: none;
  }

  /* Chrome, Safari, EdgeなどのWebKit系ブラウザ */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  html {
    scrollbar-width: none;
    overflow-x: clip;
  }

  /* IE、Edge */
  body {
    -ms-overflow-style: none;
  }

  .contents_area{
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
    overflow-x: clip;
  }
}

  /* Chrome, Safari, EdgeなどのWebKit系ブラウザ */
_::-webkit-full-page-media, _:future, :root .custom-acc-container .custom-acc-content {
  /* max-height: calc(170 * var(--lpSetSize)) !important; */
}

_::-webkit-full-page-media, _:future, :root .custom-acc-container .custom-acc-content.open {
  /* max-height: calc(526 * var(--lpSetSize)) !important; */
}

_::-webkit-full-page-media, _:future, :root .custom-acc-container .custom-acc-btn {
  /* top: calc(50 * var(--lpSetSize)); */
  /* padding-top: calc(20 * var(--lpSetSize)); */
}


/* ==============================
  共通
============================== */
.credit__wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: calc(6 * var(--lpSetSize));
  margin: calc(18 * var(--lpSetSize)) auto 0;
}

.credit__wrapper a{
  font-family: var(--font-poppins);
  font-size: calc(13 * var(--lpSetSize));
  letter-spacing: 0.04em;
  line-height: 1;
}

.sec__wrapper.--02 .credit__wrapper a,
.sec__wrapper.--03 .credit__wrapper a{
  line-height: 1.5;
}

.credit{
  display: flex;
  /* align-items: center; */
  column-gap: calc(18 * var(--lpSetSize));
}

.credit span{
  position: relative;
  top: calc(2 * var(--lpSetSize));
  display: flex;
  align-items: center;
}

.buy_btn{
  width: calc(50 * var(--lpSetSize));
}

.sec__wrapper{
  width: calc(350 * var(--lpSetSize));
  margin: 0 auto;
}

.sec__wrapper{
  border: var(--color-black) 1px solid;
  margin-bottom: calc(60 * var(--lpSetSize));
  padding: calc(18 * var(--lpSetSize)) 0 calc(36 * var(--lpSetSize));
}

.sec__inner{
  width: calc(314 * var(--lpSetSize));
  margin: 0 auto;
}

.flex_img{
  display: flex;
  justify-content: space-between;
}

.half-img{
  width: calc(150 * var(--lpSetSize));
}

.img01__container{
  margin-bottom: calc(12 * var(--lpSetSize));
}

.gift_img{
  margin-bottom: calc(17 * var(--lpSetSize));
}

.maivsiual{
  position: relative;
  width: 100%;
  margin-bottom: calc(38 * var(--lpSetSize));
}

.ribon{
  position: absolute;
  top: 0;
  left: 0;
  width: calc(342 * var(--lpSetSize));
  pointer-events: none;
}

.mv_ttl{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(80.85 * var(--lpSetSize));
  pointer-events: none;
}

.lead_txt{
  font-family: var(--font-noto);
  font-size: calc(14 * var(--lpSetSize));
  letter-spacing: 0.04em;
  line-height: 2;
  text-align: center;
  margin-bottom: calc(56 * var(--lpSetSize));
}



/* ==============================
  section01
============================== */
.sec__wrapper.--01 .gift_img{
  width: calc(33.39 * var(--lpSetSize));
}


/* ==============================
  section02
============================== */
.sec__wrapper.--02 .gift_img{
  width: calc(40.75 * var(--lpSetSize));
}

/* ==============================
  section03
============================== */
.sec__wrapper.--03 .gift_img{
  width: calc(40.82 * var(--lpSetSize));
}

/* ==============================
  section04
============================== */
.sec__wrapper.--04 .gift_img{
  width: calc(43.85 * var(--lpSetSize));
}

/* ==============================
  section05
============================== */
.sec__wrapper.--05 .gift_img{
  width: calc(42.59 * var(--lpSetSize));
}

.sec__wrapper.--05 .img11,
.sec__wrapper.--05 .img12{
  background-color: var(--color-gray);
}

/* ==============================
  cai_btn
============================== */
.cai_btn{
  width: calc(300 * var(--lpSetSize));
  margin: calc(80 * var(--lpSetSize)) auto calc(60 * var(--lpSetSize));
}

@media screen and (min-width: 560px) {
  .cai_btn{
    margin: calc(80 * var(--lpSetSize)) auto 0;
  }
}

/* ==============================
  animatiion
============================== */
.maivsiual .animation-delay{
  transition-delay: 0.5s;
}

/* frameWrapper ___________________________*/
.frameWrapper {
  opacity: 0;
  transition: opacity 0.5s;
}
.frameWrapper.onView {
  opacity: 1;
}


/* showImg ___________________________*/
.js-showImg{
  opacity: 0;
  transition: opacity 1s ease-in;
}

.js-showImg.view{
  opacity: 1;
}

/* showImg ___________________________*/
.js-showImg.zoomOut{
  opacity: 0;
  transition: 1.25s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: scale(1.1);
}

.js-showImg.zoomOut.view{
  opacity: 1;
  transform: none;
}

/* ==============================
  breadcrumb
============================== */

@media screen and (min-width: 560px) {

  #main-container .cateList{
    flex-wrap: wrap;
    width: 90%;
    padding: calc(133 * (100vw / 1920)) calc(40 * (100vw / 1920)) calc(89 * (100vw / 1920)) 0;
  }
}