@charset "UTF-8";
/*=============================================================

	Date: 2025-06-20
	CSS Document ： QR連携 メリーポイント付与

=============================================================*/
/*------------------------------------

全体

------------------------------------*/
body {
  background-color: rgb(255, 255, 255);
  font-family: 游ゴシック, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", メイリオ, Meiryo, "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif;
  font-weight: 500;
  overflow-anchor: none;
  font-feature-settings: "palt";
  margin: 0px;
}
#wrapper {
  text-align: center;
  letter-spacing: 0.06em;
  color: #202020;
  font-size: 3.95vw;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#wrapper .contents-inner {
  margin: 0 auto;
  width: 84%;
  max-width: 640px;
  position: relative;
}
@media (min-width: 769px) {
  #wrapper {
    font-size: 23px;
  }
}
/*------------------------------------

ヘッダー

------------------------------------*/
#wrapper header {
  /* border-bottom: 1px solid #e9e9e9; */
  padding: 0.8em 0 0.9em;
}
#wrapper header .header-logo {
  width: 35%;
  margin: 0 auto 0.1em;
  max-width: 170px;
}
#wrapper header .header-logo a {
  display: block;
}
#wrapper header .header-logo a img {
  width: 100%;
  height: auto;
  display: block;
}
#wrapper header h1 {
  font-size: 70%;
  color: #8f8f8f;
  font-weight: normal;
  margin: 0;
}
/*------------------------------------

メインコンテンツ

------------------------------------*/
#wrapper .main-contents {
  font-weight: bold;
  overflow: hidden;
}
/*------------------------------------

ポイント付与エリア

------------------------------------*/
#wrapper .main-contents .point-area {
  background: #f2eee3;
}
#wrapper .point-area .contents-inner {
  padding: 1.3em 0 3.5em;
}
#wrapper .main-contents .point-area::before, #wrapper .main-contents .point-area::after {
  display: block;
  width: 100%;
  height: 2.75vw;
  content: '';
  background-color: #FFF;
  background-image: url(../images/bg_head.webp);
  background-repeat: repeat-x;
  background-position: bottom -1px left 6%;
  background-size: contain;
}
#wrapper .main-contents .point-area::after {
  transform: scale(1, -1);
}
/* メッセージ表示 */
.message {
  text-align: justify;
  font-weight: bold;
}
.message p {
  margin: 0;
}
.free-area {
  text-align: justify;
  font-weight: bold;
}
.free-area p {
  margin: 0;
  font-size: 85%;
  letter-spacing: 0.02em;
}
.store-name {
  color: #636363;
  font-size: 85%;
}
.red-text {
  color: #ff0000;
}
.loading {
  text-align: center;
  font-weight: bold;
}
/* 今回付与予定のメリーポイント */
#wrapper .main-contents .point-area .get-point {
  margin: 1.45em auto 2.8em;
  width: 91%;
  position: relative;
}
#wrapper .main-contents .point-area .get-point::before, #wrapper .main-contents .point-area .get-point::after {
  display: block;
  width: 41%;
  height: 31.2vw;
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  z-index: 1;
}
#wrapper .main-contents .point-area .get-point::before {
  background-image: url(../images/cracker_l.webp);
  top: 15%;
  left: -30%;
}
#wrapper .main-contents .point-area .get-point::after {
  background-image: url(../images/cracker_r.webp);
  top: 16%;
  right: -24%;
}
.point-title {
  font-size: 115%;
}
#wrapper .main-contents .point-area .get-point .point-title {
  background: #d00101;
  color: #FFF;
  position: relative;
  height: 9vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  padding: 0 0.5em;
  margin: 0 auto -1em;
  z-index: 1;
  font-size: 95%;
}
#wrapper .main-contents .point-area .get-point .point-title::before, #wrapper .main-contents .point-area .get-point .point-title::after {
  display: block;
  aspect-ratio: 1/1;
  height: 9vw;
  /* height: 50px; */
  content: '';
  background-image: url(../images/ribbon_red_side.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
}
#wrapper .main-contents .point-area .get-point .point-title::before {
  left: -1.6em;
}
#wrapper .main-contents .point-area .get-point .point-title::after {
  right: -1.6em;
  background-image: url(../images/ribbon_red_right.webp);
}
#wrapper .main-contents .point-area .get-point .point-title span {
  position: relative;
  z-index: 1;
}
#wrapper .main-contents .point-area .get-point .merrypoint {
  background: #FFF;
  border-radius: 1em;
  /* width: 100%; */
  margin: 0 auto;
  padding: 2.1em 1em 1.3em;
  box-sizing: border-box;
  filter: drop-shadow(0px 0px 1em rgba(0, 0, 0, 0.03));
  min-height: 5em;
  position: relative;
  will-change: filter;
}
.point-num {
  font-size: 228%;
  line-height: 1;
  letter-spacing: -0.03em;
  display: inline-block;
}
/* ログインで付与されるポイント */
#wrapper .main-contents .point-area .sum-point {
  border-bottom: 2px solid #FFF;
  padding: 0 0 1.8em;
  margin: 0 0 1em;
}
#wrapper .main-contents .point-area .sum-point .point-title {
  position: relative;
  /* display: block; */
  padding: 0.5em 1.8em;
  background-image: url(../images/ribbon_border_base.webp);
  background-repeat: repeat-x;
  background-position: center;
  background-size: contain;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  font-size: 1em;
  margin-bottom: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto 0.9em;
  font-size: 93%;
  min-width: 18em;
}
#wrapper .main-contents .point-area .sum-point .point-title::before, #wrapper .main-contents .point-area .sum-point .point-title::after {
  display: block;
  aspect-ratio: 3/10;
  height: 100%;
  content: '';
  background-image: url(../images/ribbon_border_side.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  /* top: 0; */
}
#wrapper .main-contents .point-area .sum-point .point-title::before {
  left: -0.07em;
}
#wrapper .main-contents .point-area .sum-point .point-title::after {
  right: -0.07em;
  transform: scale(-1, -1);
}
#wrapper .main-contents .point-area .sum-point .point-title span {}
#wrapper .main-contents .point-area .sum-point .merrypoint {
  display: flex;
  justify-content: center;
  align-items: baseline;
  min-height: 2em;
}
#wrapper .main-contents .point-area .sum-point .merrypoint small {}
#wrapper .main-contents .point-area .sum-point .merrypoint .point-num {
  font-size: 200%;
}
/* ログイン */
#wrapper .main-contents .point-area .login-area {
  margin: 2em auto;
}
/*------------------------------------

ボタン共通

------------------------------------*/
.btn-title {
  /* font-size: 126%; */
  line-height: 1.3;
  margin: 0 0 0.75em;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.8em;
}
.btn-title span {
  position: relative;
  display: inline-block;
}
.btn-title span.ashirai-box::after {
  display: block;
  width: 0.8em;
  /* height: 1em; */
  aspect-ratio: 1/1;
  content: '';
  background-image: url(../images/ashirai.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: -0.33em;
  left: -0.73em;
  transition: all 0.3s;
}
.btn-title::before, .btn-title::after {
  display: block;
  width: 0.86em;
  height: 1.5em;
  content: '';
  background-image: url(../images/lead_arrow.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.button {
  margin: 0 0 1.7em;
}
.button a {
  text-decoration: none;
  background: #ea911e;
  color: #FFF;
  border-radius: 0.2em;
  font-size: 120%;
  margin: 0 auto;
  width: fit-content;
  min-width: 16em;
  min-height: 2.3em;
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0px 3px 0px #ba5e2b);
  position: relative;
  transition: all 0.3s;
  will-change: filter;
}
.button a::after {
  display: block;
  width: 0.48em;
  height: 100%;
  content: '';
  background-image: url(../images/btn_arrow.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.48em;
  position: absolute;
  top: 0;
  right: 0.8em;
  transition: all 0.3s;
}
/*------------------------------------

新規会員登録エリア

------------------------------------*/
#wrapper .main-contents .registration-area {
  margin: 2.3em 0 0;
  position: relative;
}
#wrapper .main-contents .registration-area::before {
  display: block;
  width: 120%;
  height: 100%;
  aspect-ratio: 1/1;
  content: '';
  background: #FFFFFF;
  position: absolute;
  left: -10%;
  top: -9vw;
  border-radius: 50% 50% 0 0;
}
#wrapper .main-contents .registration-area .login-area {
  margin-bottom: 3em;
}
/*------------------------------------

フッター

------------------------------------*/
#wrapper footer {
  border-top: 1px solid #e9e9e9;
  padding: 0.7em;
  /* margin: 2em 0 0; */
}
#wrapper footer .footer-logo {
  width: 25%;
  margin: 0 auto 0.2em;
  max-width: 100px;
}
#wrapper footer .footer-logo a {
  display: block;
}
#wrapper footer .footer-logo a img {
  width: 100%;
  height: auto;
  display: block;
}
#wrapper footer small {
  color: #8f8f8f;
  font-size: 54%;
  letter-spacing: 0;
}
/*------------------------------------

アニメーション

------------------------------------*/
#wrapper.cracker-on .get-point::before, #wrapper.cracker-on .get-point::after, #wrapper.cracker-on .main-contents .point-area .get-point .merrypoint .point-num {
  animation: cracker-anime 0.7s cubic-bezier(0.475, 0.885, 0.320, 1.575) both;
}
@keyframes cracker-anime {
  0% {
    transform: scale(0.9);
  }
  65% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.0);
  }
}
@media (hover: hover) {
  #wrapper a {
    transition: all 0.3s;
  }
  #wrapper a:hover {
    opacity: 0.7;
  }
  .button a:hover::after {
    right: 0.6em;
  }
}
@media (hover: none) {
  .button a:active {
    opacity: 0.7;
  }
}
/*------------------------------------

未ログインページ

------------------------------------*/
#wrapper.tentative-wrapper .point-area .contents-inner {
  padding-bottom: 4em;
  margin-bottom: -3.6em;
}
#wrapper.tentative-wrapper .main-contents .point-area::after {
  display: none;
}
.registration-area .btn-title {
  /* font-size: 116%; */
}
/*------------------------------------

ログイン済みページ

------------------------------------*/
#wrapper.login-wrapper footer {
  border: none;
}
/* ログアウトボタン */
.logout {
  position: absolute;
  top: 9%;
  right: 0%;
  border: 1px solid #bfbfbf;
  border-radius: 0.3em;
}
.logout a {
  color: #202020;
  text-decoration: none;
  padding: 0.4em 0.6em;
  font-size: 90%;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0;
}
#wrapper.login-wrapper .main-contents .point-area .get-point::before, #wrapper.login-wrapper .main-contents .point-area .get-point::after {
  display: none;
}
/* ログイン済みアニメーション */
.shape-wrapper {
  pointer-events: none;
  position: absolute;
  z-index: 10;
}
.shape {
  position: absolute;
  width: 3em;
  height: 3em;
  transform: scale(0.8);
}
.linger {
  /* transition: none !important; */
  pointer-events: none;
}
.cir {
  position: absolute;
  border-radius: 50%;
  z-index: 5;
}
.point-particles {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  border-radius: 50%;
  color: #eee;
  z-index: 5;
  pointer-events: none;
  /*  filter: url(#gooeyness); */
}
.none-particles {
  position: absolute;
  width: 70%;
  height: 105%;
  left: 15%;
  top: 0%;
  pointer-events: none;
}
/*------------------------------------

メリポ君画像共通

------------------------------------*/
  #meripokun_img{
    max-width: 100%; /* 親要素の幅を超えないようにする */
    height: auto;    /* アスペクト比を維持 */
    display: block; /* 画像をブロックレベル要素にする */
    margin: 0 auto; /* マージンを自動調整 */ 
  }
/*------------------------------------

PC

------------------------------------*/
@media (min-width: 769px) {
  #wrapper .main-contents .point-area .get-point::before, #wrapper .main-contents .point-area .get-point::after {
    height: 180px;
  }
  #wrapper .main-contents .point-area .get-point::before {}
  #wrapper .main-contents .point-area .get-point::after {}
  #wrapper .main-contents .point-area::before, #wrapper .main-contents .point-area::after {
    height: 24px;
  }
  #wrapper .main-contents .point-area .get-point .point-title {
    height: 50px;
  }
  #wrapper .main-contents .point-area .get-point .point-title::before, #wrapper .main-contents .point-area .get-point .point-title::after {
    height: 50px;
  }
  #wrapper .main-contents .registration-area::before {
    top: -60px;
  }
}