/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #333333;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.7;

  background: url("../images/bg.png");
  background-repeat: repeat-y;
  background-size: 100% auto;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  margin: 0;
  font: inherit;
}

p,
h1,
h2,
h3 {
  margin: 0;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --color-text: #333333;

  --color-red: #d62828;
  --color-accent: #a94536;

  --color-brown: #52372f;
  --color-brown-light: #a65e4d;

  --color-paper: #fffaf1;
  --color-border: #c9baa4;

  --page-width: 430px;
  --side-space: 22px;
}


/* =========================================================
   PAGE
========================================================= */

.page_wrapper {
  position: relative;

  width: 100%;
  max-width: var(--page-width);
  min-height: 100vh;

  margin: 0 auto;

  padding-bottom: calc(58px + env(safe-area-inset-bottom));

  overflow: hidden;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(150, 110, 70, 0.025) 0,
      rgba(150, 110, 70, 0.025) 1px,
      transparent 1.5px
    )
    0 0 / 19px 19px,
    radial-gradient(
      circle at 75% 70%,
      rgba(150, 110, 70, 0.025) 0,
      rgba(150, 110, 70, 0.025) 1px,
      transparent 1.5px
    )
    0 0 / 26px 26px,
    var(--color-paper);
}

.main {
  padding-bottom: 0px;
}

.section_inner {
  width: calc(100% - (var(--side-space) * 2));
  max-width: 386px;

  margin-right: auto;
  margin-left: auto;
}


/* =========================================================
   EVENT PERIOD
   繝医ャ繝励�繝槭う繝壹�繧ｸ繝ｻ蠎苓�荳€隕ｧ 蜈ｱ騾�
========================================================= */

.event_period {
  position: relative;
  z-index: 2;

  display: flex;
  width: fit-content;

  margin: 0 auto;
  padding: 5px 14px 6px;

  align-items: center;
  justify-content: center;

  gap: 8px;

  color: #ffffff;

  background: var(--color-accent);

  border-radius: 999px;

  font-weight: 800;
  line-height: 1.2;
}

.event_period_label {
  padding-right: 8px;

  border-right: 1px solid rgba(255, 255, 255, 0.5);

  font-family: "Noto Sans JP", sans-serif;

  font-size: 12px;
  font-weight: 800;

  white-space: nowrap;
}

.event_period_date {
  font-family:
    "Roboto",
    "Noto Sans JP",
    sans-serif;

  font-size: 16px;
  font-weight: 800;

  line-height: 1;

  white-space: nowrap;
}

.event_period_date span {
  font-family: "Noto Sans JP", sans-serif;

  font-size: 13px;
  font-weight: 800;
}


/* =========================================================
   HERO
========================================================= */

.section_hero {
  position: relative;
}

.hero_visual {
  position: relative;

  width: 100%;
}

.hero_visual_image {
  width: 100%;
  height: auto;
}


/* ---------------------------------------------------------
   HERO HEADING
--------------------------------------------------------- */

.hero_heading {
  position: absolute;
  z-index: 2;

  top: 42px;
  left: 50%;

  width: calc(100% - 40px);

  text-align: center;

  transform: translateX(-50%);
}

.hero_heading_sub {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color: #47332d;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 20px;
  font-weight: 500;

  line-height: 1.2;

  letter-spacing: 0.08em;
}

.hero_heading_cross {
  font-size: 13px;
}

.hero_heading_title {
  margin-top: 4px;

  color: #47332d;

  font-size: clamp(29px, 8vw, 37px);
  font-weight: 900;

  line-height: 1.22;

  letter-spacing: 0.01em;
}

.hero_heading_lead {
  display: inline-block;

  margin-top: 8px;
  padding: 5px 15px 6px;

  color: #433b36;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.4;

  background: rgba(255, 255, 255, 0.94);

  border-radius: 999px;

  box-shadow:
    0 2px 8px rgba(55, 38, 25, 0.06);
}


/* ---------------------------------------------------------
   PARTICIPANTS
--------------------------------------------------------- */

.hero_participants {
  position: absolute;
  z-index: 4;

  right: 13px;
  bottom: 11px;

  display: flex;

  width: 82px;
  height: 82px;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  color: var(--color-red);

  line-height: 1;

  text-align: center;

  background: #ffffff;

  border: 2px solid var(--color-red);

  border-radius: 50%;

  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.88),
    0 4px 10px rgba(66, 42, 29, 0.12);
}

.hero_participants::before {
  position: absolute;

  inset: 4px;

  content: "";

  border: 1px dashed rgba(214, 40, 40, 0.7);

  border-radius: 50%;

  pointer-events: none;

  animation: participants-ring-rotate 8s linear infinite;
}

@keyframes participants-ring-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.hero_participants_label {
  position: relative;
  z-index: 1;

  color: #333333;

  font-size: 12px;
  font-weight: 700;
}

.hero_participants_number {
  position: relative;
  z-index: 1;

  margin-top: 3px;

  font-family: "Roboto", sans-serif;

  font-size: 25px;
  font-weight: 900;

  letter-spacing: -0.04em;
}

.hero_participants_number span {
  margin-left: 1px;

  font-family: "Noto Sans JP", sans-serif;

  font-size: 12px;
}

.hero_participants_text {
  position: relative;
  z-index: 1;

  margin-top: 3px;

  color: #333333;

  font-size: 12px;
  font-weight: 800;
}

#heroParticipantsCount{
  font-size: 26px;
}


/* =========================================================
   INTRO
========================================================= */

.section_intro {
  position: relative;

  padding: 20px 0 63px;
}


/* ---------------------------------------------------------
   INTRO HEADING
--------------------------------------------------------- */

.intro_heading {
  margin-top: 27px;

  text-align: center;
}

.intro_heading_sub {
  font-size: 12px;
  font-weight: 700;

  line-height: 1.5;
}

.intro_heading_title {
  margin-top: 2px;

  font-size: 22px;
  font-weight: 900;

  line-height: 1.45;

  letter-spacing: 0.02em;
}


/* =========================================================
   FEATURES
========================================================= */

.feature_grid {
  display: grid;

  width: 100%;
  max-width: 328px;

  margin: 29px auto 0;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px 24px;
}

.feature_item {
  display: flex;

  aspect-ratio: 1 / 1;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;
}

.feature_item.is_pink {
  background: #f4c5c8;
}

.feature_item.is_yellow {
  background: #ede2aa;
}

.feature_item.is_blue {
  background: #bee0ef;
}

.feature_item.is_green {
  background: #c9e5c5;
}

.feature_icon {
  display: flex;

  width: 51px;
  height: 49px;

  align-items: center;
  justify-content: center;
}

.feature_icon img {
  width: 44px;
  max-height: 46px;

  object-fit: contain;

  opacity: 0.75;
}

.feature_text {
  margin-top: 5px;

  color: #3e3a36;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.6;

  text-align: center;
}

.feature_icon_bonus {
  position: relative;
}

.feature_bonus {
  position: absolute;

  top: -14px;
  left: 50%;

  color: #47873e;

  font-family: "Roboto", sans-serif;

  font-size: 16px;
  font-weight: 800;

  transform: translateX(-50%);
}


/* =========================================================
   COMMON HEADING
========================================================= */

.section_heading {
  text-align: center;
}

.section_heading_sub {
  margin-bottom: 2px;

  color: #45413d;

  font-size: 12px;
  font-weight: 600;

  line-height: 1.6;
}

.section_heading_title {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  color: #333333;

  font-size: 21px;
  font-weight: 900;

  line-height: 1.4;

  letter-spacing: 0.01em;
}

.section_heading_title > span:not(.section_heading_slash) {
  white-space: nowrap;
}

.section_heading_slash {
  display: block;

  width: 2px;
  height: 27px;

  flex: 0 0 2px;

  background: #453d38;

  transform: rotate(-28deg);
  transform-origin: center;
}

.section_heading_slash.is_right {
  transform: rotate(28deg);
}


/* =========================================================
   HOW TO
========================================================= */

.section_howto {
  padding: 0 0 72px;
}

.howto_box {
  position: relative;

  margin-top: 23px;

  padding: 27px 12px 18px;

  background:
    rgba(255, 252, 246, 0.73);

  border: 1px solid #aa9a84;

  border-radius: 7px;
}

.howto_list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.howto_item {
  position: relative;

  min-height: 200px;

  padding: 4px 9px 15px;

  text-align: center;
}

.howto_item:nth-child(odd):not(.howto_item_last) {
  border-right:
    1px dashed #baab96;
}

.howto_item:nth-child(-n + 2) {
  border-bottom:
    1px dashed #baab96;
}

.howto_item:nth-child(3),
.howto_item:nth-child(4) {
  padding-top: 23px;

  border-bottom:
    1px dashed #baab96;
}

.howto_number {
  display: inline-flex;

  width: 31px;
  height: 31px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  font-family: "Roboto", sans-serif;

  font-size: 18px;
  font-weight: 900;

  line-height: 1;

  background: var(--color-red);

  border-radius: 50%;
}

.howto_text {
  min-height: 50px;

  margin-top: 11px;

  color: #3c3936;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.75;
}

.howto_text strong {
  font-weight: 900;
}

.howto_note {
  display: block;

  font-size: 11px;
}

.howto_icon {
  display: flex;

  height: 72px;

  margin-top: 5px;

  align-items: center;
  justify-content: center;
}

.howto_icon img {
  width: 65px;
  max-height: 70px;

  object-fit: contain;
}

.howto_item_last {
  min-height: 205px;

  padding-top: 23px;

  grid-column: 1 / -1;
}

.howto_item_last .howto_text {
  min-height: auto;
}

.howto_icon_landscape {
  height: 66px;

  margin-top: 12px;
}

.howto_icon_landscape img {
  width: 71px;
}

/* =========================================================
   HOW TO DETAIL BUTTON
========================================================= */

.howto_detail_button_wrap {
  padding: 0 24px 42px;
  text-align: center;
}

.howto_detail_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 230px;
  min-height: 48px;

  padding: 0 24px;

  color: #fff;
  background: #e87924;

  border-radius: 999px;

  box-shadow:
    0 5px 14px rgba(199, 99, 28, 0.18);

  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  text-decoration: none;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.howto_detail_button_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  line-height: 1;

  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .howto_detail_button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
  }

  .howto_detail_button:hover .howto_detail_button_arrow {
    transform: translateX(3px);
  }
}

@media (max-width: 767px) {
  .howto_detail_button_wrap {
    padding: 0 20px 38px;
  }

  .howto_detail_button {
    min-width: 220px;
    min-height: 46px;

    padding: 0 22px;

    font-size: 12px;
  }
}


/* =========================================================
   PRIZES
========================================================= */

.section_prizes {
  padding: 0 0 82px;
}

.prize_pickup {
  display: flex;

  width: 100%;

  margin-top: 26px;

  padding: 21px 20px;

  align-items: center;

  gap: 17px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(249, 238, 210, 0.9)
    );

  border: 1px solid #e2cfb4;

  border-radius: 14px;

  box-shadow:
    0 6px 22px rgba(84, 60, 37, 0.06);
}

.prize_pickup_icon {
  display: flex;

  width: 67px;
  height: 67px;

  flex: 0 0 67px;

  align-items: center;
  justify-content: center;

  background: #eee2ab;

  border-radius: 50%;
}

.prize_pickup_icon img {
  width: 36px;
  max-height: 39px;

  object-fit: contain;

  opacity: 0.75;
}

.prize_pickup_body {
  flex: 1;
}

.prize_pickup_label {
  color: #9c6a28;

  font-size: 12px;
  font-weight: 800;
}

.prize_pickup_text {
  margin-top: 5px;

  color: #413b37;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.7;
}

.prizes_button_wrap {
  margin-top: 20px;

  text-align: center;
}


/* =========================================================
   BUTTON
========================================================= */

.button_more {
  display: inline-flex;

  min-width: 160px;
  min-height: 40px;

  padding: 0 19px;

  align-items: center;
  justify-content: center;

  gap: 12px;

  color: #ffffff;

  font-size: 12px;
  font-weight: 800;

  line-height: 1;

  background: #654238;

  border-radius: 999px;

  box-shadow:
    0 3px 8px rgba(66, 45, 35, 0.08);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.button_more_arrow {
  margin-top: -1px;

  font-family: "Roboto", sans-serif;

  font-size: 15px;
}


/* =========================================================
   TOP PAGE SHOPS
========================================================= */

.section_shops {
  position: relative;

  padding: 0 0 82px;
}


/* ---------------------------------------------------------
   SWIPER WRAP
--------------------------------------------------------- */

.shops_slider_wrap {
  position: relative;

  margin-top: 27px;
}

.shops_slider {
  width: 100%;

  padding: 0 18px 10px;

  overflow: hidden;
}

.shops_slider .swiper-wrapper {
  align-items: stretch;
}

.shops_slider .swiper-slide {
  width: 126px;
  height: auto;
}


/* ---------------------------------------------------------
   SHOP CARD
--------------------------------------------------------- */

.shop_card {
  display: block;

  width: 100%;

  text-align: center;
}

.shop_card_image {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: #dedbd6;

  border-radius: 5px;

  box-shadow:
    0 2px 7px rgba(74, 52, 39, 0.07);
}

.shop_card_image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.3s ease;
}

.shop_card_name {
  display: flex;

  min-height: 39px;

  margin-top: 7px;
  padding: 0 2px;

  align-items: flex-start;
  justify-content: center;

  color: #3c3936;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.5;

  text-align: center;
}


/* ---------------------------------------------------------
   SWIPER ARROWS
--------------------------------------------------------- */

.shops_slider_button {
  position: absolute;
  z-index: 20;

  top: 63px;

  display: flex;

  width: 27px;
  height: 43px;

  padding: 0;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  cursor: pointer;

  background:
    rgba(73, 48, 41, 0.92);

  border: 0;

  outline: 0;

  transform: translateY(-50%);

  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

.shops_slider_button span {
  display: block;

  margin-top: -3px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 24px;
  font-weight: 300;

  line-height: 1;
}

.shops_slider_prev {
  left: 0;

  border-radius:
    0 4px 4px 0;
}

.shops_slider_next {
  right: 0;

  border-radius:
    4px 0 0 4px;
}

.shops_slider_button.swiper-button-disabled {
  opacity: 0.28;

  cursor: default;
}


/* ---------------------------------------------------------
   SHOP BUTTON
--------------------------------------------------------- */

.shops_button_wrap {
  margin-top: 17px;

  text-align: center;
}


/* =========================================================
   FOOTER VISUAL
========================================================= */

.section_footer_visual {
  position: relative;

  width: 100%;
}

.footer_visual_image {
  width: 100%;
  height: auto;
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  position: relative;

  padding: 9px 20px 16px;

  color: #ffffff;

  text-align: center;

  background: #493029;
}

.footer_account {
  font-family: "Roboto", sans-serif;

  font-size: 12px;
  font-weight: 500;

  letter-spacing: 0.05em;
}


/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.bottom_nav {
  position: fixed;
  z-index: 1000;

  right: 0;
  bottom: 0;
  left: 0;

  display: grid;

  width: 100%;
  max-width: var(--page-width);

  height:
    calc(
      58px + env(safe-area-inset-bottom)
    );

  margin: 0 auto;

  padding-bottom:
    env(safe-area-inset-bottom);

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  background: #50352d;

  box-shadow:
    0 -3px 14px rgba(0, 0, 0, 0.08);
}

.bottom_nav_item {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  font-size: 12px;
  font-weight: 700;

  line-height: 1;

  border-right:
    1px solid rgba(255, 255, 255, 0.18);
}

.bottom_nav_item:last-child {
  border-right: 0;
}

.bottom_nav_item.is_current {
  background:
    rgba(255, 255, 255, 0.08);
}

.bottom_nav_item.is_current::before {
  position: absolute;

  top: 0;
  right: 16px;
  left: 16px;

  height: 3px;

  content: "";

  background: #ffffff;
}


/* =========================================================
   COMMON HOVER
========================================================= */

@media (hover: hover) {

  .button_more:hover {
    opacity: 0.88;

    transform: translateY(-2px);
  }

  .shop_card:hover .shop_card_image img {
    transform: scale(1.04);
  }

  .shops_slider_button:hover {
    background: #493029;
  }

}


/* =========================================================
   RESPONSIVE 374px莉･荳�
========================================================= */

@media screen and (max-width: 374px) {

  :root {
    --side-space: 18px;
  }


  /* HERO */

  .hero_heading {
    top: 22px;
  }

  .hero_heading_sub {
    font-size: 17px;
  }

  .hero_heading_title {
    font-size: 28px;
  }

  .hero_heading_lead {
    margin-top: 6px;

    padding:
      4px 11px 5px;

    font-size: 12px;
  }


  /* PARTICIPANTS */

  .hero_participants {
    right: 9px;
    bottom: 8px;

    width: 72px;
    height: 72px;
  }

  .hero_participants_number {
    font-size: 21px;
  }

  .hero_participants_label,
  .hero_participants_text {
    font-size: 11px;
  }


  /* FEATURES */

  .feature_grid {
    gap: 15px 18px;
  }

  .feature_text {
    font-size: 12px;
  }


  /* HEADING */

  .section_heading_title {
    gap: 9px;

    font-size: 19px;
  }

  .section_heading_slash {
    height: 25px;
  }


  /* HOW TO */

  .howto_box {
    padding-right: 8px;
    padding-left: 8px;
  }

  .howto_text {
    font-size: 12px;
  }


  /* SHOP */

  .shops_slider {
    padding-right: 15px;
    padding-left: 15px;
  }

}


/* =========================================================
   PC
========================================================= */

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

  .page_wrapper {
    box-shadow:
      0 0 30px rgba(70, 55, 40, 0.13);
  }

}


/* =========================================================
   SUB PAGE COMMON
   繝槭う繝壹�繧ｸ繝ｻ蜿ょ刈蠎苓�荳€隕ｧ 蜈ｱ騾�
========================================================= */

.page_sub {
  --sub-color-text: #4a3c36;
  --sub-color-accent: var(--color-accent);
}

.page_sub .page_wrapper {
  background: url("../images/bg.png");
  background-repeat: repeat-y;
  background-size: 100% auto;
}


/* ---------------------------------------------------------
   COMMON HEADER
--------------------------------------------------------- */

.page_sub .header {
  position: relative;

  min-height: 274px;

  overflow: hidden;
}

.page_sub .header_inner {
  position: relative;

  min-height: 274px;

  padding-top: 52px;
}


/* ---------------------------------------------------------
   HEADER DECORATION
--------------------------------------------------------- */

.page_sub .header_deco,
.page_sub .header_food {
  position: absolute;
  z-index: 1;

  height: auto;

  pointer-events: none;
  user-select: none;
}

.page_sub .header_deco.is_left {
  top: -9px;
  left: -9px;

  width: 97px;
}

.page_sub .header_deco.is_right {
  top: -8px;
  right: -10px;

  width: 98px;
}

.page_sub .header_food.is_left {
  bottom: -2px;
  left: -82px;

  width: 175px;
  max-width: none;
}

.page_sub .header_food.is_right {
  top: 95px;
  right: -32px;

  width: 103px;
  max-width: none;
}


/* ---------------------------------------------------------
   HEADER LOGO
--------------------------------------------------------- */

.page_sub .header_logo {
  position: relative;
  z-index: 2;

  text-align: center;
}

.page_sub .header_logo_mountain {
  width: 85px;

  margin: 0 auto 7px;
}

.page_sub .header_logo_sub {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color: var(--sub-color-text);

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: 18px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.08em;
}

.page_sub .header_logo_cross {
  font-family: "Noto Sans JP", sans-serif;

  font-size: 0.78em;
  font-weight: 400;
}

.page_sub .header_logo_title {
  display: block;

  margin-top: 9px;

  color: var(--sub-color-text);

  font-family: "Noto Sans JP", sans-serif;

  font-size: 28px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.03em;
}


/* ---------------------------------------------------------
   HEADER EVENT PERIOD
   繝�じ繧､繝ｳ縺ｯ蜈ｱ騾壹€∽ｽ咲ｽｮ縺�縺代し繝悶�繝ｼ繧ｸ逕ｨ縺ｫ螟画峩
--------------------------------------------------------- */

.page_sub .event_period {
  margin-top: 16px;
}


/* ---------------------------------------------------------
   HEADER NAVIGATION
--------------------------------------------------------- */

.page_sub .header_navigation {
  position: relative;
  z-index: 2;

  display: grid;

  /* 4メニューを横一列に表示 */
  width: 360px;
  max-width: calc(100% - 40px);

  margin: 14px auto 0;

  overflow: hidden;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(115, 93, 81, 0.18);
  border-radius: 999px;

  box-shadow:
    0 2px 8px rgba(63, 43, 32, 0.08);
}

.page_sub .header_navigation_link {
  position: relative;

  display: grid;

  min-width: 0;
  min-height: 37px;

  padding: 0 4px;

  place-items: center;

  color: var(--sub-color-text);

  font-size: 11px;
  font-weight: 800;

  line-height: 1;
  white-space: nowrap;
}

.page_sub
.header_navigation_link
+
.header_navigation_link::before {
  position: absolute;

  top: 9px;
  bottom: 9px;
  left: 0;

  width: 1px;

  content: "";

  background: #71655e;
}

.page_sub .header_navigation_link.is_current,
.page_sub .header_navigation_link[aria-current="page"] {
  background: rgba(169, 69, 54, 0.06);
}


/* ---------------------------------------------------------
   SMALL SP
--------------------------------------------------------- */

@media screen and (max-width: 350px) {

  .page_sub .header_navigation {
    width: 300px;
    max-width: calc(100% - 50px);
  }

  .page_sub .header_navigation_link {
    padding-right: 3px;
    padding-left: 3px;

    font-size: 11px;
  }

}


/* ---------------------------------------------------------
   COMMON FOOTER
--------------------------------------------------------- */

.page_sub .section_footer_visual {
  margin-top: 0;
}

.page_sub .footer_visual_image {
  width: 100%;

  aspect-ratio: 430 / 185;

  object-fit: cover;
}

.page_sub .footer {
  display: grid;

  min-height: 38px;

  padding: 0 20px;

  place-items: center;

  background: #ad3c2b;
}

.page_sub .footer_account {
  font-size: 12px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   COMMON HOVER
--------------------------------------------------------- */

@media (hover: hover) {

  .page_sub .header_navigation_link:hover {
    background: #ffffff;
  }

}


/* ---------------------------------------------------------
   COMMON SMALL SP
--------------------------------------------------------- */

@media screen and (max-width: 350px) {

  .page_sub .header {
    min-height: 246px;
  }

  .page_sub .header_inner {
    min-height: 246px;

    padding-top: 42px;
  }

  .page_sub .header_logo_title {
    font-size: 25px;
  }

  .page_sub .header_navigation {
    max-width: calc(100% - 86px);
  }

  .page_sub .header_food.is_left {
    bottom: -22px;
    left: -46px;

    width: 155px;
  }

}


/* =========================================================
   SHOP LIST PAGE
========================================================= */

.page_shops {
  --shop-color-sub: #75665e;
}


/* ---------------------------------------------------------
   SHOP PAGE BASE
--------------------------------------------------------- */

.page_shops .section_inner {
  width: calc(100% - 44px);
}


/* ---------------------------------------------------------
   SHOP LIST SECTION
--------------------------------------------------------- */

.page_shops .section_shops {
  position: relative;
  z-index: 2;

  padding: 3px 0 0;
}

.page_shops .section_heading_note {
  margin-top: 5px;

  color: var(--shop-color-sub);

  font-size: 12px;
  font-weight: 700;
}


/* ---------------------------------------------------------
   SHOP LIST
--------------------------------------------------------- */

.page_shops .shop_list {
  margin-top: 21px;
}

.page_shops .shop_item {
  display: grid;

  grid-template-columns:
    78px minmax(0, 1fr) 29px;

  column-gap: 10px;

  align-items: center;

  min-height: 101px;

  padding: 14px 0 13px;

  border-bottom: 1px dotted #a6978c;
}

.page_shops .shop_thumbnail {
  align-self: start;

  width: 78px;
  height: 78px;

  margin-top: 1px;

  overflow: hidden;

  background: #ffffff;
}

.page_shops .shop_thumbnail img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.page_shops .shop_content {
  min-width: 0;
}

.page_shops .shop_name {
  color: #4a3b35;

  font-size: 16px;
  font-weight: 900;

  line-height: 1.35;

  overflow-wrap: anywhere;
}

.page_shops .shop_postcode {
  margin-top: 3px;

  color: #5d514a;

  font-family:
    "Roboto",
    sans-serif;

  font-size: 12px;
  font-weight: 600;

  line-height: 1.35;
}

.page_shops .shop_address {
  margin-top: 1px;

  color: #564942;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.45;
}

.page_shops .shop_map {
  display: inline-block;

  margin-left: 4px;

  font-family: "Roboto", sans-serif;

  font-weight: 900;

  text-decoration: underline;

  white-space: nowrap;
}

.page_shops .shop_map:hover,
.page_shops .shop_map:focus-visible {
  text-decoration: underline;
}


/* ---------------------------------------------------------
   INSTAGRAM
--------------------------------------------------------- */

.page_shops .shop_instagram {
  display: grid;

  width: 28px;
  height: 28px;

  place-items: center;

  justify-self: end;
}

.page_shops .shop_instagram img {
  width: 24px;
  height: 24px;

  object-fit: contain;
}


/* ---------------------------------------------------------
   BRANCH SHOP
--------------------------------------------------------- */

.page_shops .shop_item_branch {
  min-height: 195px;

  align-items: start;
}

.page_shops
.shop_item_branch
.shop_thumbnail {
  margin-top: 3px;
}

.page_shops
.shop_item_branch
.shop_content {
  grid-column: 2 / 4;
}

.page_shops .shop_branch {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) 29px;

  column-gap: 10px;

  align-items: end;

  margin-top: 10px;
}

.page_shops
.shop_branch
+
.shop_branch {
  margin-top: 15px;
}

.page_shops .shop_branch_name {
  color: #4a3b35;

  font-size: 13px;
  font-weight: 900;

  line-height: 1.4;
}


/* ---------------------------------------------------------
   PAGE LINKS
--------------------------------------------------------- */

.page_shops .section_page_links {
  position: relative;

  padding: 80px 0 60px;
}

.page_shops .page_links {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 28px;
}

.page_shops .page_link {
  display: grid;

  min-height: 43px;

  place-items: center;

  color: #5a4840;

  background: rgba(255, 255, 255, 0.78);

  border: 1px solid #9d8477;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 800;

  line-height: 1;
}

.page_shops .page_link.is_current,
.page_shops .page_link[aria-current="page"] {
  background: rgba(169, 69, 54, 0.06);
}

.page_shops .page_link:hover,
.page_shops .page_link:focus-visible {
  background: #ffffff;
}


/* =========================================================
   SHOP LIST PAGE - SMALL SP
========================================================= */

@media screen and (max-width: 350px) {

  .page_shops .section_inner {
    width: calc(100% - 30px);
  }

  .page_shops .shop_item {
    grid-template-columns:
      78px minmax(0, 1fr) 26px;

    column-gap: 8px;
  }

  .page_shops .shop_thumbnail {
    width: 78px;
    height: 78px;
  }

  .page_shops .shop_name {
    font-size: 14px;
  }

  .page_shops .shop_address,
  .page_shops .shop_postcode {
    font-size: 12px;
  }

  .page_shops .section_page_links {
    padding: 65px 0 50px;
  }

  .page_shops .page_links {
    gap: 20px;
  }

}


/* =========================================================
   MY PAGE
========================================================= */

.page_mypage {
  --mypage-red: #8f302e;
  --mypage-red-dark: #792624;
  --mypage-brown: #4f3b34;
  --mypage-border: #63514a;
  --mypage-cell: rgba(255, 255, 255, 0.96);
}

.page_mypage .mypage_cell.is_opened {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.page_mypage .mypage_cell.is_opened > .mypage_cell_name {
  opacity: 0;
  visibility: hidden;
}

.page_mypage .mypage_cell.is_opened > .mypage_special_star {
  z-index: 4;
}


/* =========================================================
   MY PAGE BASE
========================================================= */

.page_mypage .section_inner {
  width: calc(100% - 32px);
  max-width: 398px;
}


/* =========================================================
   MY PAGE MAIN
========================================================= */

.page_mypage .section_mypage {
  padding: 4px 0 76px;
}


/* ---------------------------------------------------------
   TITLE / VISIT STATUS
--------------------------------------------------------- */

.page_mypage .mypage_heading {
  position: relative;
  z-index: 3;

  text-align: center;
}

.page_mypage .mypage_title {
  color: #413936;

  font-size: 25px;
  font-weight: 900;

  line-height: 1.4;

  letter-spacing: 0.02em;
}


/* =========================================================
   VISIT STATUS CARD
========================================================= */

.page_mypage .mypage_status {
  position: relative;
  z-index: 2;

  margin-top: 27px;

  padding: 28px 12px 11px;

  background: rgba(255, 252, 244, 0.97);

  border: 1px solid rgba(135, 111, 90, 0.2);
  border-radius: 12px;

  box-shadow:
    0 4px 12px rgba(79, 55, 39, 0.1),
    0 1px 2px rgba(79, 55, 39, 0.06);
}

.page_mypage .mypage_status_deco {
  position: absolute;
  z-index: 5;

  max-width: none;
  height: auto;

  pointer-events: none;
  user-select: none;
}

.page_mypage .mypage_status_deco.is_left {
  top: -27px;
  left: -16px;

  width: 62px;
}

.page_mypage .mypage_status_deco.is_right {
  top: -23px;
  right: -7px;

  width: 50px;
}


/* ---------------------------------------------------------
   VISIT RIBBON
--------------------------------------------------------- */

.page_mypage .mypage_visit_ribbon {
  position: absolute;
  z-index: 6;

  top: -5px;
  left: 50%;

  width: 184px;
  height: 50px;

  transform: translateX(-50%);
}

.page_mypage .mypage_visit_ribbon_bg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: fill;
}

.page_mypage .mypage_visit_ribbon span {
  position: absolute;
  z-index: 2;

  top: 7px;
  right: 0;
  left: 0;

  color: #ffffff;

  font-size: 14px;
  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.08em;

  text-align: center;
}


/* ---------------------------------------------------------
   VISIT COUNT
--------------------------------------------------------- */

.page_mypage .mypage_visit_count {
  position: relative;
  z-index: 3;

  display: flex;

  min-height: 55px;

  align-items: baseline;
  justify-content: center;

  color: #161616;

  font-family:
    "Roboto",
    "Noto Sans JP",
    sans-serif;

  line-height: 1;
}

.page_mypage .mypage_visit_count strong {
  color: #cf342f;

  font-size: 46px;
  font-weight: 800;

  letter-spacing: -0.04em;
}

.page_mypage .mypage_visit_count span {
  margin-left: 5px;

  font-size: 26px;
  font-weight: 800;

  letter-spacing: -0.04em;
}


/* ---------------------------------------------------------
   ENTRY SUMMARY
--------------------------------------------------------- */

.page_mypage .mypage_entry_summary {
  position: relative;
  z-index: 3;

  display: grid;

  width: 100%;
  min-height: 67px;

  margin-top: 1px;

  padding: 8px 10px 8px 12px;

  grid-template-columns:
    35px minmax(0, 1fr) 24px;

  column-gap: 8px;

  align-items: center;

  color: #433936;

  background: #f5dfe1;

  border-radius: 999px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.page_mypage .mypage_entry_summary_icon {
  display: flex;

  width: 34px;
  height: 34px;

  align-items: center;
  justify-content: center;
}

.page_mypage .mypage_entry_summary_icon img {
  width: 30px;
  height: 30px;

  object-fit: contain;
}

.page_mypage .mypage_entry_summary_body {
  display: flex;

  min-width: 0;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;
}

.page_mypage .mypage_entry_summary_body strong {
  color: #c83332;

  font-size: 16px;
  font-weight: 900;

  line-height: 1.25;

  letter-spacing: -0.01em;
}

.page_mypage .mypage_entry_summary_body > span {
  margin-top: 2px;

  color: #4c413c;

  font-size: 10px;
  font-weight: 800;

  line-height: 1.3;
}

.page_mypage .mypage_entry_summary_body small {
  margin-top: 1px;

  color: #4c413c;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.25;
}

.page_mypage .mypage_entry_summary_arrow {
  display: flex;

  width: 23px;
  height: 23px;

  flex: 0 0 23px;

  align-items: center;
  justify-content: center;
}

.page_mypage .mypage_entry_summary_arrow img {
  width: 23px;
  height: 23px;

  object-fit: contain;
}


/* =========================================================
   MY PAGE BOARD
========================================================= */

.page_mypage .mypage_board {
  margin-top: 28px;

  padding: 10px 10px 14px;

  background: var(--mypage-red);

  border-radius: 5px;

  box-shadow:
    0 5px 16px rgba(70, 38, 30, 0.12);
}

.page_mypage .mypage_board_title {
  display: flex;

  min-height: 30px;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color: #ffffff;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.4;

  text-align: center;
}

.page_mypage .mypage_board_title span {
  font-size: 20px;
  font-weight: 400;

  line-height: 1;
}


/* ---------------------------------------------------------
   BOARD VISUAL
--------------------------------------------------------- */

.page_mypage .mypage_board_visual {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  margin-top: 6px;

  overflow: hidden;

  background: #ffffff;

  border-radius: 4px;
}

.page_mypage .mypage_landscape {
  position: absolute;
  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* ---------------------------------------------------------
   GRID
--------------------------------------------------------- */

.page_mypage .mypage_grid {
  position: absolute;
  z-index: 2;

  inset: 0;

  display: grid;

  width: 100%;
  height: 100%;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-template-rows:
    repeat(4, minmax(0, 1fr));

  border-top: 1px solid var(--mypage-border);
  border-left: 1px solid var(--mypage-border);
}

.page_mypage .mypage_cell {
  position: relative;

  display: flex;

  min-width: 0;
  min-height: 0;

  padding: 6px 3px;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: var(--mypage-cell);

  border-right: 1px solid var(--mypage-border);
  border-bottom: 1px solid var(--mypage-border);

  transition:
    background-color 0.3s ease,
    opacity 0.3s ease;
}

.page_mypage .mypage_cell_name {
  position: relative;
  z-index: 2;

  color: #443b37;

  font-size:
    clamp(11px, 2.5vw, 12px);

  font-weight: 800;

  line-height: 1.4;

  text-align: center;

  overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   OPEN CELL / SPECIAL STAR
--------------------------------------------------------- */

.page_mypage
.mypage_cell
.mypage_special_star {
  position: absolute;
  z-index: 3;

  top: 3px;
  right: 4px;

  color: #d92328;

  font-size: 18px;
  font-weight: 900;

  line-height: 1;

  filter:
    drop-shadow(
      0 1px 1px
      rgba(255, 255, 255, 0.8)
    );
}


/* =========================================================
   PANEL OPEN ANIMATION
========================================================= */

.page_mypage .mypage_cell_open_cover {
  position: absolute;
  z-index: 10;

  inset: 0;

  display: flex;

  padding: 6px 3px;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: var(--mypage-cell);

  transform:
    perspective(640px)
    rotateY(0deg);

  transform-origin: left center;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change: transform, opacity;

  transition:
    transform 0.72s cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 0.55s ease;
}

.page_mypage
.mypage_cell_open_cover
.mypage_cell_name {
  opacity: 1;
  visibility: visible;
}

.page_mypage
.mypage_cell_open_cover
.mypage_special_star {
  z-index: 11;
}

.page_mypage
.mypage_cell_open_cover.is_opening {
  opacity: 0;

  transform:
    perspective(640px)
    rotateY(-100deg);
}

.page_mypage
.mypage_cell.is_just_opened {
  animation:
    gourmeguri-panel-reveal
    0.85s ease;
}

@keyframes gourmeguri-panel-reveal {

  0% {
    filter: brightness(1.45);
  }

  45% {
    filter: brightness(1.16);
  }

  100% {
    filter: brightness(1);
  }

}


/* =========================================================
   PANEL OPEN MESSAGE
========================================================= */

.page_mypage .gourmeguri_open_message {
  position: fixed;
  z-index: 1200;

  right: 20px;
  bottom:
    calc(
      76px + env(safe-area-inset-bottom)
    );
  left: 20px;

  display: flex;

  width: auto;
  max-width: 390px;

  margin: 0 auto;
  padding: 13px 16px;

  align-items: center;

  gap: 11px;

  color: #443b37;

  background:
    rgba(255, 252, 246, 0.98);

  border:
    1px solid
    rgba(143, 48, 46, 0.18);

  border-radius: 13px;

  box-shadow:
    0 7px 24px
    rgba(62, 39, 30, 0.2);

  opacity: 0;

  pointer-events: none;

  transform:
    translateY(16px)
    scale(0.98);

  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.page_mypage
.gourmeguri_open_message.is_visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}

.page_mypage
.gourmeguri_open_message_icon {
  display: flex;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: var(--mypage-red);

  border-radius: 50%;

  font-family:
    "Roboto",
    "Noto Sans JP",
    sans-serif;

  font-size: 19px;
  font-weight: 900;

  line-height: 1;

  box-shadow:
    0 3px 8px
    rgba(98, 42, 36, 0.15);
}

.page_mypage
.gourmeguri_open_message > div {
  display: flex;

  min-width: 0;

  flex-direction: column;

  line-height: 1.4;
}

.page_mypage
.gourmeguri_open_message strong {
  color: var(--mypage-red);

  font-size: 13px;
  font-weight: 900;

  line-height: 1.45;

  overflow-wrap: anywhere;
}

.page_mypage
.gourmeguri_open_message > div > span {
  margin-top: 1px;

  color: #4d433f;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.45;
}


/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .page_mypage .mypage_cell_open_cover {
    transition-duration: 0.01ms;
  }

  .page_mypage .mypage_cell.is_just_opened {
    animation: none;
  }

  .page_mypage .gourmeguri_open_message {
    transition-duration: 0.01ms;
  }

}


/* =========================================================
   MY PAGE CHANCE CARD
========================================================= */

.page_mypage .mypage_chance {
  position: relative;

  margin-top: 24px;

  padding: 24px 17px 18px;

  background: rgba(255, 255, 255, 0.76);

  border: 1px solid rgba(123, 91, 75, 0.22);
  border-radius: 13px;

  box-shadow:
    0 5px 18px rgba(72, 46, 36, 0.06);
}

.page_mypage .mypage_chance_heading {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;
}

.page_mypage .mypage_chance_heading_icon {
  display: flex;

  width: 27px;
  height: 27px;

  flex: 0 0 27px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: var(--mypage-red);

  border-radius: 50%;

  font-family: "Roboto", sans-serif;

  font-size: 16px;
  font-weight: 900;

  line-height: 1;
}

.page_mypage .mypage_chance_title {
  color: #4e403a;

  font-size: 17px;
  font-weight: 900;

  line-height: 1.4;

  letter-spacing: 0.02em;
}


/* ---------------------------------------------------------
   CHANCE STEPS
--------------------------------------------------------- */

.page_mypage .mypage_chance_steps {
  display: grid;

  margin-top: 18px;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 7px;
}

.page_mypage .mypage_chance_step {
  position: relative;

  display: flex;

  min-width: 0;
  min-height: 88px;

  padding: 10px 3px 9px;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  background: #fffaf3;

  border: 1px solid #d9c8b9;
  border-radius: 9px;
}

.page_mypage
.mypage_chance_step:nth-child(2) {
  background: #fff5e8;

  border-color: #d7bda6;
}

.page_mypage
.mypage_chance_step:nth-child(3) {
  background: #fff0e3;

  border-color: #d5aa94;
}

.page_mypage .mypage_chance_shop {
  color: #62524a;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.3;
}

.page_mypage .mypage_chance_arrow {
  margin: 4px 0 2px;

  color: #aa8e7e;

  font-family: "Roboto", sans-serif;

  font-size: 13px;
  font-weight: 700;

  line-height: 1;
}

.page_mypage .mypage_chance_entry {
  color: var(--mypage-red);

  font-family:
    "Roboto",
    "Noto Sans JP",
    sans-serif;

  font-size: 21px;
  font-weight: 900;

  line-height: 1.15;
}

.page_mypage
.mypage_chance_step:nth-child(3)
.mypage_chance_entry {
  font-size: 23px;
}


/* =========================================================
   MY PAGE QUIZ BONUS
========================================================= */

.page_mypage .mypage_quiz_bonus {
  display: flex;

  margin-top: 15px;

  padding: 14px;

  align-items: center;

  gap: 12px;

  background: #f1ead0;

  border:
    1px solid
    rgba(111, 137, 89, 0.15);

  border-radius: 9px;
}

.page_mypage .mypage_quiz_bonus_icon {
  display: flex;

  width: 53px;
  height: 53px;

  flex: 0 0 53px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: #779c66;

  border-radius: 50%;

  box-shadow:
    0 3px 8px rgba(71, 111, 60, 0.13);
}

.page_mypage
.mypage_quiz_bonus-icon span,
.page_mypage
.mypage_quiz_bonus_icon span {
  font-family: "Roboto", sans-serif;

  font-size: 19px;
  font-weight: 900;

  line-height: 1;
}

.page_mypage
.mypage_quiz_bonus_content {
  min-width: 0;
}

.page_mypage
.mypage_quiz_bonus_label {
  display: block;

  margin-bottom: 2px;

  color: #697b57;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.4;
}

.page_mypage
.mypage_quiz_bonus_text {
  color: #514840;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.55;
}

.page_mypage
.mypage_quiz_bonus_text strong {
  color: #557e4b;

  font-size: 16px;
  font-weight: 900;
}

.page_mypage #mypage_chance {
  scroll-margin-top: 18px;
}


/* =========================================================
   MY PAGE SPECIAL CHANCE
========================================================= */

.page_mypage .mypage_special {
  position: relative;

  margin-top: 18px;

  padding: 19px 17px 15px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #fff9ed 0%,
      #fff3d9 100%
    );

  border: 1px solid #e2c584;
  border-radius: 13px;

  box-shadow:
    0 5px 18px rgba(72, 46, 36, 0.06);
}

.page_mypage .mypage_special::before {
  position: absolute;

  top: -35px;
  right: -35px;

  width: 105px;
  height: 105px;

  content: "";

  background:
    rgba(226, 179, 77, 0.11);

  border-radius: 50%;
}

.page_mypage .mypage_special::after {
  position: absolute;

  right: 43px;
  bottom: -27px;

  width: 65px;
  height: 65px;

  content: "";

  background:
    rgba(226, 179, 77, 0.08);

  border-radius: 50%;
}


/* ---------------------------------------------------------
   SPECIAL HEADING
--------------------------------------------------------- */

.page_mypage
.mypage_special_heading {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;
}

.page_mypage
.mypage_special_heading
.mypage_special_star {
  position: static;

  display: flex;

  width: 41px;
  height: 41px;

  flex: 0 0 41px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: #d84032;

  border-radius: 50%;

  font-size: 22px;
  font-weight: 900;

  line-height: 1;

  filter: none;

  box-shadow:
    0 3px 8px rgba(154, 54, 43, 0.16);
}

.page_mypage
.mypage_special_label {
  display: block;

  color: #b28134;

  font-family: "Roboto", sans-serif;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.2;

  letter-spacing: 0.06em;
}

.page_mypage
.mypage_special_title {
  margin-top: 2px;

  color: #57453d;

  font-size: 17px;
  font-weight: 900;

  line-height: 1.3;
}


/* ---------------------------------------------------------
   SPECIAL BODY
--------------------------------------------------------- */

.page_mypage .mypage_special_body {
  position: relative;
  z-index: 2;

  display: flex;

  margin-top: 15px;

  padding: 14px;

  align-items: center;
  justify-content: center;

  gap: 22px;

  background:
    rgba(255, 255, 255, 0.74);

  border-radius: 9px;
}

.page_mypage .mypage_special_text {
  color: #574a43;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.55;
}

.page_mypage
.mypage_special_text strong {
  display: block;

  margin-top: 3px;

  color: #9b4134;

  font-size: 17px;
  font-weight: 900;

  line-height: 1.4;
}


/* ---------------------------------------------------------
   MINI PANEL
--------------------------------------------------------- */

.page_mypage
.mypage_special_preview {
  display: grid;

  width: 69px;
  height: 69px;

  flex: 0 0 69px;

  padding: 4px;

  grid-template-columns:
    repeat(4, 1fr);

  grid-template-rows:
    repeat(4, 1fr);

  gap: 2px;

  background: #ffffff;

  border: 1px solid #a78c7c;
  border-radius: 3px;
}

.page_mypage
.mypage_special_preview span {
  display: block;

  background: #b49b8f;

  border-radius: 1px;
}

.page_mypage
.mypage_special_preview
.is_peek {
  position: relative;

  background: #edd56d;
}

.page_mypage
.mypage_special_preview
.is_peek::after {
  position: absolute;

  top: 50%;
  left: 50%;

  content: "★";

  color: #b34636;

  font-size: 11px;

  line-height: 1;

  transform:
    translate(-50%, -50%);
}

.page_mypage
.mypage_special_note {
  position: relative;
  z-index: 2;

  margin-top: 11px;

  color: #746158;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.5;

  text-align: center;
}


/* =========================================================
   MY PAGE APPLY
========================================================= */

.page_mypage .mypage_apply {
  margin-top: 28px;

  text-align: center;
}

.page_mypage
.mypage_apply_button {
  display: flex;

  width: 100%;
  min-height: 55px;

  padding: 0 20px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: var(--mypage-red);

  border: 0;
  border-radius: 5px;

  cursor: pointer;

  font-size: 14px;
  font-weight: 800;

  box-shadow:
    0 4px 10px rgba(98, 42, 36, 0.12);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.page_mypage
.mypage_apply_button:disabled {
  color: #9d9d9d;

  background: #dedede;

  box-shadow: none;

  cursor: default;
}

.page_mypage
.mypage_apply_note {
  margin-top: 11px;

  color: #4c433e;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.5;
}


/* =========================================================
   MY PAGE HOW TO
========================================================= */

.page_mypage .section_howto {
  padding-top: 0;
  padding-bottom: 100px;
}

.page_mypage .howto_bonus {
  margin-top: -6px;

  color: #5d5049;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.55;
}


/* =========================================================
   MY PAGE HOVER
========================================================= */

@media (hover: hover) {

  .page_mypage
  .mypage_entry_summary:hover {
    background: #f3d7da;

    box-shadow:
      0 4px 12px rgba(114, 49, 45, 0.1);

    transform: translateY(-1px);
  }

  .page_mypage
  .mypage_apply_button:not(:disabled):hover {
    opacity: 0.88;

    transform: translateY(-2px);
  }

}


/* =========================================================
   MY PAGE SMALL SP
========================================================= */

@media screen and (max-width: 350px) {

  .page_mypage .section_inner {
    width: calc(100% - 24px);
  }

  .page_mypage .mypage_title {
    font-size: 23px;
  }

  .page_mypage .mypage_status {
    margin-top: 25px;

    padding-right: 9px;
    padding-left: 9px;
  }

  .page_mypage
  .mypage_status_deco {
    width: 56px;
  }

  .page_mypage
  .mypage_status_deco.is_left {
    left: -14px;
  }

  .page_mypage
  .mypage_status_deco.is_right {
    right: -14px;
  }

  .page_mypage
  .mypage_visit_ribbon {
    width: 124px;

    font-size: 13px;
  }

  .page_mypage
  .mypage_visit_count strong {
    font-size: 42px;
  }

  .page_mypage
  .mypage_visit_count span {
    font-size: 24px;
  }

  .page_mypage
  .mypage_entry_summary {
    min-height: 64px;

    padding-right: 8px;
    padding-left: 9px;

    grid-template-columns:
      31px minmax(0, 1fr) 22px;

    column-gap: 6px;
  }

  .page_mypage
  .mypage_entry_summary_icon {
    width: 30px;
    height: 30px;
  }

  .page_mypage
  .mypage_entry_summary_icon img {
    width: 27px;
    height: 27px;
  }

  .page_mypage
  .mypage_entry_summary_body strong {
    font-size: 14px;
  }

  .page_mypage
  .mypage_entry_summary_arrow {
    width: 21px;
    height: 21px;
  }

  .page_mypage .mypage_board {
    padding-right: 7px;
    padding-left: 7px;
  }

  .page_mypage .mypage_cell {
    padding: 4px 2px;
  }

  .page_mypage
  .mypage_cell_name {
    font-size: 11px;
  }

  .page_mypage
  .mypage_cell
  .mypage_special_star {
    font-size: 15px;
  }

  .page_mypage .mypage_chance {
    padding-right: 12px;
    padding-left: 12px;
  }

  .page_mypage
  .mypage_chance_steps {
    gap: 5px;
  }

  .page_mypage
  .mypage_chance_shop {
    font-size: 11px;
  }

  .page_mypage
  .mypage_special_body {
    gap: 14px;
  }

}

/* =========================================================
   PRESENT ENTRY PAGE
========================================================= */

.page_present {
  --present-orange: #f7930b;
  --present-border: #999999;
  --present-text: #332d2a;
}


/* =========================================================
   PRESENT ENTRY BASE
========================================================= */

.page_present .section_present {
  position: relative;
  z-index: 2;

  padding: 0 0 92px;
}

.page_present .section_present .section_inner {
  width: calc(100% - 70px);
  max-width: 360px;
}


/* ---------------------------------------------------------
   TITLE
--------------------------------------------------------- */

.page_present .present_heading {
  text-align: center;
}

.page_present .present_title {
  color: #473b36;

  font-size: 21px;
  font-weight: 900;

  line-height: 1.4;

  letter-spacing: 0.01em;
}


/* =========================================================
   FORM
========================================================= */

.page_present .present_form {
  margin-top: 38px;
}

.page_present .present_field {
  margin-top: 29px;
}

.page_present .present_field:first-child {
  margin-top: 0;
}

.page_present .present_label {
  display: block;

  margin-bottom: 10px;

  color: #111111;

  font-size: 13px;
  font-weight: 800;

  line-height: 1.55;
}

.page_present .present_input {
  display: block;

  width: 100%;
  height: 41px;

  margin: 0;
  padding: 7px 10px;

  color: #222222;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;

  line-height: 1.4;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid var(--present-border);
  border-radius: 0;

  outline: 0;

  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.page_present .present_input:focus {
  background: #ffffff;

  border-color: #6f5b51;

  box-shadow: 0 0 0 2px rgba(111, 91, 81, 0.1);
}


/* ---------------------------------------------------------
   ENTRY COUNT
--------------------------------------------------------- */

.page_present .present_field_count {
  margin-top: 31px;
}

.page_present .present_entry_count {
  display: inline-flex;

  width: 67px;
  height: 41px;

  align-items: center;
  justify-content: center;

  color: #161616;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid var(--present-border);
}

.page_present .present_entry_count strong,
.page_present .present_entry_count span {
  font-family: "Noto Sans JP", sans-serif;

  font-size: 14px;
  font-weight: 800;

  line-height: 1;
}

.page_present .present_entry_count span {
  margin-left: 2px;
}


/* ---------------------------------------------------------
   QUIZ
--------------------------------------------------------- */

.page_present .present_field_quiz {
  margin-top: 27px;
}

.page_present .present_field_quiz .present_label {
  margin-bottom: 9px;

  white-space: nowrap;
}


/* =========================================================
   PRIVACY
========================================================= */

.page_present .present_privacy {
  display: flex;

  margin-top: 23px;

  align-items: center;

  gap: 19px;
}

.page_present .present_privacy_input {
  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  margin: 0;

  cursor: pointer;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid #a5a5a5;
  border-radius: 0;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.page_present .present_privacy_input:checked {
  position: relative;

  background: #ffffff;

  border-color: #66544b;
}

.page_present .present_privacy_input:checked::after {
  position: absolute;

  top: 3px;
  left: 8px;

  width: 6px;
  height: 13px;

  content: "";

  border-right: 2px solid #5d4c43;
  border-bottom: 2px solid #5d4c43;

  transform: rotate(45deg);
}

.page_present .present_privacy_input:focus-visible {
  outline: 2px solid rgba(111, 91, 81, 0.35);
  outline-offset: 2px;
}

.page_present .present_privacy_label {
  color: #171312;

  cursor: pointer;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.5;
}

.page_present .present_privacy_link {
  text-decoration: none;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.page_present .present_submit {
  display: flex;

  width: 100%;
  min-height: 42px;

  margin-top: 24px;
  padding: 0 18px;

  align-items: center;
  justify-content: center;

  color: #17100b;

  cursor: pointer;

  background: var(--present-orange);

  border: 0;
  border-radius: 0;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 900;

  line-height: 1;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.page_present .present_submit:focus-visible {
  outline: 2px solid rgba(247, 147, 11, 0.42);
  outline-offset: 3px;
}


/* =========================================================
   PRESENT PAGE LINKS
========================================================= */

.page_present .section_page_links {
  position: relative;

  padding: 51px 0 58px;
}

.page_present .present_page_links_inner {
  width: calc(100% - 36px);
  max-width: 394px;

  margin-right: auto;
  margin-left: auto;
}

.page_present .page_links {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 31px;
}

.page_present .page_link {
  display: grid;

  min-height: 43px;

  place-items: center;

  color: #59473f;

  background: rgba(255, 255, 255, 0.78);

  border: 1px solid #9d8477;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 800;

  line-height: 1;

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.page_present .page_link.is_current,
.page_present .page_link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   PRESENT PAGE HOVER
========================================================= */

@media (hover: hover) {

  .page_present .present_submit:hover {
    opacity: 0.88;

    transform: translateY(-1px);
  }

  .page_present .page_link:hover {
    background: #ffffff;

    transform: translateY(-1px);
  }

  .page_present .present_privacy_link:hover {
    text-decoration: underline;
  }

}


/* =========================================================
   PRESENT PAGE SMALL SP
========================================================= */

@media screen and (max-width: 350px) {

  .page_present .section_present .section_inner {
    width: calc(100% - 42px);
  }

  .page_present .present_title {
    font-size: 20px;
  }

  .page_present .present_form {
    margin-top: 34px;
  }

  .page_present .present_field_quiz .present_label {
    white-space: normal;
  }

  .page_present .present_privacy {
    gap: 13px;
  }

  .page_present .present_page_links_inner {
    width: calc(100% - 28px);
  }

  .page_present .page_links {
    gap: 18px;
  }

  .page_present .page_link {
    font-size: 12px;
  }

}


/* =========================================================
   SPECIAL CHANCE - STATUS
========================================================= */

.page_mypage .gourmeguri_special_status {
  position: relative;
  z-index: 3;

  margin-top: 13px;
  padding: 8px 12px;

  color: #7b665c;

  background: rgba(255, 255, 255, 0.6);

  border: 1px solid rgba(166, 132, 72, 0.2);
  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.4;

  text-align: center;
}


/* =========================================================
   SPECIAL CHANCE - MODAL
========================================================= */

.page_mypage .gourmeguri_special_modal {
  position: fixed;
  z-index: 3000;

  inset: 0;

  display: flex;

  padding:
    24px
    20px
    calc(24px + env(safe-area-inset-bottom));

  align-items: center;
  justify-content: center;

  background: rgba(42, 27, 22, 0.68);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.page_mypage .gourmeguri_special_modal.is_visible {
  opacity: 1;
  visibility: visible;
}

.page_mypage .gourmeguri_special_modal_box {
  position: relative;

  width: 100%;
  max-width: 330px;

  padding: 31px 22px 22px;

  overflow: hidden;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      #fffdf6 0%,
      #fff6df 100%
    );

  border: 2px solid #e3bd60;
  border-radius: 18px;

  box-shadow:
    0 18px 50px rgba(28, 17, 13, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);

  transform: translateY(12px) scale(0.97);

  transition: transform 0.25s ease;
}

.page_mypage
.gourmeguri_special_modal.is_visible
.gourmeguri_special_modal_box {
  transform: translateY(0) scale(1);
}

.page_mypage .gourmeguri_special_modal_box::before,
.page_mypage .gourmeguri_special_modal_box::after {
  position: absolute;

  content: "";

  border-radius: 50%;

  pointer-events: none;
}

.page_mypage .gourmeguri_special_modal_box::before {
  top: -47px;
  right: -40px;

  width: 125px;
  height: 125px;

  background: rgba(236, 191, 74, 0.12);
}

.page_mypage .gourmeguri_special_modal_box::after {
  bottom: -34px;
  left: -25px;

  width: 85px;
  height: 85px;

  background: rgba(216, 64, 50, 0.055);
}

.page_mypage .gourmeguri_special_modal_star {
  position: relative;
  z-index: 2;

  display: flex;

  width: 52px;
  height: 52px;

  margin: 0 auto 8px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: #d84032;

  border-radius: 50%;

  font-size: 28px;
  font-weight: 900;

  line-height: 1;

  box-shadow:
    0 4px 10px rgba(154, 54, 43, 0.2);
}

.page_mypage .gourmeguri_special_modal_label {
  position: relative;
  z-index: 2;

  display: block;

  color: #b08131;

  font-family: "Roboto", "Noto Sans JP", sans-serif;

  font-size: 11px;
  font-weight: 900;

  line-height: 1.2;

  letter-spacing: 0.09em;
}

.page_mypage .gourmeguri_special_modal_title {
  position: relative;
  z-index: 2;

  display: block;

  margin-top: 5px;

  color: #4d3d37;

  font-size: 22px;
  font-weight: 900;

  line-height: 1.35;
}

.page_mypage .gourmeguri_special_modal_text {
  position: relative;
  z-index: 2;

  margin-top: 13px;

  color: #5c4b43;

  font-size: 13px;
  font-weight: 700;

  line-height: 1.7;
}

.page_mypage .gourmeguri_special_modal_text strong {
  color: #aa3b31;

  font-size: 16px;
  font-weight: 900;
}

.page_mypage .gourmeguri_special_modal_button {
  position: relative;
  z-index: 2;

  display: flex;

  width: 100%;
  min-height: 50px;

  margin-top: 20px;
  padding: 8px 18px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  cursor: pointer;

  background:
    linear-gradient(
      135deg,
      #c53e31 0%,
      #96302b 100%
    );

  border: 0;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 900;

  line-height: 1.2;

  box-shadow:
    0 5px 14px rgba(132, 47, 40, 0.23);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.page_mypage .gourmeguri_special_modal_button:disabled {
  opacity: 0.55;
  cursor: default;
}


/* =========================================================
   SPECIAL CHANCE - PANEL SELECTION
========================================================= */

.page_mypage .gourmeguri_peek_guide {
  position: relative;
  z-index: 5;

  margin: 5px 0 10px;
  padding: 10px 12px;

  color: #59463e;

  text-align: center;

  background:
    linear-gradient(
      135deg,
      #fff9dd 0%,
      #fff1bd 100%
    );

  border: 1px solid #e7c257;
  border-radius: 7px;

  box-shadow:
    0 2px 7px rgba(71, 42, 31, 0.08);
}

.page_mypage .gourmeguri_peek_guide strong {
  display: block;

  color: #9e372f;

  font-size: 13px;
  font-weight: 900;

  line-height: 1.45;
}

.page_mypage .gourmeguri_peek_guide span {
  display: block;

  margin-top: 2px;

  color: #62534c;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.45;
}

.page_mypage
.mypage_grid.is_peek_select_mode
.mypage_cell {
  transition:
    opacity 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.page_mypage
.mypage_grid.is_peek_select_mode
.mypage_cell.is_peek_selectable {
  z-index: 4;

  cursor: pointer;

  box-shadow:
    inset 0 0 0 3px #e4ad22,
    inset 0 0 18px rgba(255, 214, 82, 0.27);

  animation:
    gourmeguri-peek-selectable
    1.05s ease-in-out infinite;
}

.page_mypage
.mypage_grid.is_peek_select_mode
.mypage_cell.is_peek_selectable::after {
  position: absolute;
  z-index: 7;

  top: 4px;
  left: 4px;

  display: flex;

  width: 18px;
  height: 18px;

  align-items: center;
  justify-content: center;

  content: "＋";

  color: #ffffff;

  background: #d89d13;

  border-radius: 50%;

  font-family: "Roboto", "Noto Sans JP", sans-serif;

  font-size: 14px;
  font-weight: 900;

  line-height: 1;

  box-shadow:
    0 2px 5px rgba(83, 55, 25, 0.18);

  pointer-events: none;
}

.page_mypage
.mypage_grid.is_peek_select_mode
.mypage_cell.is_peek_disabled {
  opacity: 0.34;

  filter: saturate(0.65);

  pointer-events: none;
}

.page_mypage
.mypage_grid.is_peek_loading
.mypage_cell {
  pointer-events: none;
}

@keyframes gourmeguri-peek-selectable {

  0%,
  100% {
    transform: scale(1);

    box-shadow:
      inset 0 0 0 3px #e4ad22,
      inset 0 0 18px rgba(255, 214, 82, 0.2);
  }

  50% {
    transform: scale(0.97);

    box-shadow:
      inset 0 0 0 3px #f2c843,
      inset 0 0 24px rgba(255, 214, 82, 0.48);
  }

}


/* =========================================================
   SPECIAL CHANCE - INLINE PEEK
========================================================= */

.page_mypage .mypage_cell_peek_cover {
  position: absolute;
  z-index: 14;

  inset: 0;

  display: flex;

  padding: 6px 3px;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: var(--mypage-cell);

  transform:
    perspective(640px)
    rotateY(0deg);

  transform-origin: left center;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change: transform, opacity;

  transition:
    transform 0.65s cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 0.48s ease;
}

.page_mypage
.mypage_cell_peek_cover
.mypage_cell_name {
  opacity: 1;
  visibility: visible;
}

.page_mypage .mypage_cell_peek_cover.is_opening {
  opacity: 0;

  transform:
    perspective(640px)
    rotateY(-100deg);
}

.page_mypage .mypage_cell_peek_image {
  position: absolute;
  z-index: 12;

  inset: 0;

  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  opacity: 0;

  transform: scale(0.985);

  transition:
    opacity 0.3s ease,
    transform 0.35s ease;
}

.page_mypage .mypage_cell_peek_image.is_ready {
  opacity: 1;
  transform: scale(1);
}

.page_mypage .mypage_cell.is_peek_open {
  z-index: 8;

  box-shadow:
    inset 0 0 0 2px rgba(255, 221, 106, 0.92),
    0 0 16px rgba(231, 184, 47, 0.28);
}

.page_mypage .mypage_cell.is_peek_open > .mypage_cell_name,
.page_mypage .mypage_cell.is_peek_open > .mypage_special_star {
  opacity: 0;
  visibility: hidden;
}

.page_mypage
.mypage_cell.is_peek_closing
.mypage_cell_peek_image {
  opacity: 0;

  transform:
    perspective(640px)
    rotateY(88deg);

  transform-origin: left center;

  transition:
    transform 0.48s ease,
    opacity 0.4s ease;
}

.page_mypage .mypage_cell_peek_timer {
  position: absolute;
  z-index: 16;

  right: 5px;
  bottom: 5px;

  display: flex;

  width: 27px;
  height: 27px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: rgba(133, 39, 34, 0.92);

  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;

  font-family: "Roboto", sans-serif;

  font-size: 14px;
  font-weight: 900;

  line-height: 1;

  box-shadow:
    0 2px 7px rgba(42, 24, 19, 0.28);

  opacity: 0;

  transform: scale(0.7);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;

  pointer-events: none;
}

.page_mypage .mypage_cell_peek_timer.is_visible {
  opacity: 1;
  transform: scale(1);
}


/* =========================================================
   SPECIAL CHANCE - HOVER / FOCUS
========================================================= */

.page_mypage .gourmeguri_special_modal_button:focus-visible,
.page_mypage
.mypage_grid.is_peek_select_mode
.mypage_cell.is_peek_selectable:focus-visible {
  outline: 3px solid rgba(231, 185, 58, 0.55);
  outline-offset: 2px;
}

@media (hover: hover) {

  .page_mypage .gourmeguri_special_modal_button:hover:not(:disabled) {
    opacity: 0.91;
    transform: translateY(-1px);
  }

  .page_mypage
  .mypage_grid.is_peek_select_mode
  .mypage_cell.is_peek_selectable:hover {
    animation-play-state: paused;

    transform: scale(0.96);

    box-shadow:
      inset 0 0 0 3px #f0c13b,
      inset 0 0 26px rgba(255, 217, 89, 0.5);
  }

}


/* =========================================================
   SPECIAL CHANCE - SMALL SP
========================================================= */

@media screen and (max-width: 350px) {

  .page_mypage .gourmeguri_special_modal {
    padding-right: 15px;
    padding-left: 15px;
  }

  .page_mypage .gourmeguri_special_modal_box {
    padding:
      27px
      17px
      19px;
  }

  .page_mypage .gourmeguri_special_modal_title {
    font-size: 20px;
  }

  .page_mypage .gourmeguri_special_modal_text {
    font-size: 12px;
  }

  .page_mypage .gourmeguri_special_modal_text strong {
    font-size: 15px;
  }

  .page_mypage .gourmeguri_peek_guide strong {
    font-size: 12px;
  }

  .page_mypage .mypage_cell_peek_timer {
    right: 3px;
    bottom: 3px;

    width: 24px;
    height: 24px;

    font-size: 12px;
  }

}


/* =========================================================
   SPECIAL CHANCE - REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .page_mypage .gourmeguri_special_modal,
  .page_mypage .gourmeguri_special_modal_box,
  .page_mypage .gourmeguri_special_modal_button,
  .page_mypage .mypage_cell_peek_cover,
  .page_mypage .mypage_cell_peek_image,
  .page_mypage .mypage_cell_peek_timer {
    transition-duration: 0.01ms;
  }

  .page_mypage
  .mypage_grid.is_peek_select_mode
  .mypage_cell.is_peek_selectable {
    animation: none;
  }

}


/* =========================================================
   PRESENT ENTRY PAGE - STATUS / FORM HELPERS
========================================================= */

.page_present .present_intro {
  max-width: 300px;
  margin: 9px auto 0;

  color: #6b5b53;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.7;

  text-align: center;
}

.page_present .present_status {
  display: flex;

  margin-top: 27px;
  padding: 17px 16px;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  background: rgba(255, 250, 241, 0.9);

  border: 1px solid #d6c3b3;
  border-radius: 10px;

  box-shadow:
    0 4px 14px rgba(76, 52, 39, 0.06);
}

.page_present .present_status_label {
  color: #5c4c45;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.4;
}

.page_present .present_status .present_entry_count {
  width: auto;
  min-width: 82px;
  height: auto;

  margin-top: 7px;
  padding: 8px 15px;

  background: #ffffff;

  border: 1px solid #c7b09e;
  border-radius: 6px;
}

.page_present .present_status .present_entry_count strong {
  color: #c83b32;

  font-family:
    "Roboto",
    "Noto Sans JP",
    sans-serif;

  font-size: 30px;
  font-weight: 900;

  line-height: 1;
}

.page_present .present_status .present_entry_count span {
  margin-left: 4px;

  color: #443b37;

  font-size: 14px;
  font-weight: 800;
}

.page_present .present_entry_note {
  margin-top: 8px;

  color: #7b6a61;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.55;

  text-align: center;
}

.page_present .present_required {
  display: inline-flex;

  margin-left: 5px;
  padding: 2px 6px;

  align-items: center;

  color: #ffffff;

  background: #b63b35;

  border-radius: 3px;

  font-size: 10px;
  font-weight: 800;

  line-height: 1.3;

  vertical-align: 1px;
}

.page_present .present_field_note {
  margin-top: 6px;

  color: #77665e;

  font-size: 10px;
  font-weight: 600;

  line-height: 1.55;
}

.page_present .present_field_quiz .present_label {
  white-space: normal;
}

.page_present .present_quiz_lead {
  margin-bottom: 9px;

  color: #5c4d46;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.65;
}

.page_present .present_quiz_bonus {
  display: inline-flex;

  margin-bottom: 11px;
  padding: 5px 10px;

  align-items: center;

  gap: 4px;

  color: #557149;

  background: #edf2df;

  border: 1px solid #ccd8b8;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.4;
}

.page_present .present_quiz_bonus strong {
  color: #46733d;

  font-size: 12px;
  font-weight: 900;
}

.page_present .present_quiz_note {
  margin-top: 7px;

  color: #8a7166;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.55;
}

.page_present .present_message {
  display: none;

  margin-top: 20px;
  padding: 11px 13px;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.6;

  text-align: center;

  border-radius: 6px;
}

.page_present .present_message.is_error {
  display: block;

  color: #a32f2b;

  background: #fff0ef;

  border: 1px solid #e5b5b2;
}

.page_present .present_message.is_success {
  display: block;

  color: #486941;

  background: #eff6e9;

  border: 1px solid #bed0b4;
}

.page_present .present_submit:disabled {
  color: #999999;

  cursor: default;

  background: #dddddd;

  opacity: 1;

  transform: none;

  box-shadow: none;
}


/* =========================================================
   PRESENT APPLICATION NOTICE
========================================================= */

.page_present .present_application_notice {
  margin: 28px 0 26px;
  padding: 17px 16px 16px;

  color: #5d4d45;

  background: rgba(255, 248, 238, 0.96);

  border: 1px solid #ddc8b5;
  border-radius: 10px;

  box-shadow:
    0 4px 14px rgba(73, 50, 38, 0.06);
}

.page_present .present_application_notice_title {
  display: block;

  margin-bottom: 10px;

  color: #4e3e37;

  font-size: 13px;
  font-weight: 900;

  line-height: 1.5;

  text-align: center;
}

.page_present .present_application_notice_title::before {
  display: inline-flex;

  width: 20px;
  height: 20px;

  margin-right: 6px;

  align-items: center;
  justify-content: center;

  content: "!";

  color: #ffffff;

  background: #c46d43;

  border-radius: 50%;

  font-family: "Roboto", sans-serif;
  font-size: 12px;
  font-weight: 900;

  line-height: 1;

  vertical-align: 1px;
}

.page_present .present_application_notice_text {
  margin: 5px 0 0;

  color: #6d5b52;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.7;
}

.page_present .present_application_notice_emphasis {
  margin: 10px 0 0;
  padding: 8px 10px;

  color: #a33e32;

  background: rgba(255, 235, 228, 0.85);

  border-radius: 6px;

  font-size: 11px;
  font-weight: 900;

  line-height: 1.65;
}


/* =========================================================
   PRESENT ENTRY CONFIRM
========================================================= */

.page_present .present_entry_confirm {
  margin-top: 24px;
  padding: 13px 12px;

  text-align: center;

  background: rgba(246, 239, 228, 0.9);

  border-radius: 8px;
}

.page_present .present_entry_confirm_text {
  margin: 0;

  color: #594940;

  font-size: 11px;
  font-weight: 900;

  line-height: 1.65;
}

.page_present .present_entry_confirm_sub {
  margin: 4px 0 0;

  color: #a33e32;

  font-size: 10px;
  font-weight: 800;

  line-height: 1.6;
}


/* =========================================================
   PRESENT ALREADY APPLIED
========================================================= */

.page_present .present_applied {
  margin-top: 28px;
  padding: 28px 20px 24px;

  text-align: center;

  background: rgba(255, 252, 246, 0.97);

  border: 1px solid #d8c2ad;
  border-radius: 12px;

  box-shadow:
    0 6px 20px rgba(72, 46, 36, 0.07);
}

.page_present .present_applied[hidden],
.page_present .present_form[hidden] {
  display: none !important;
}

.page_present .present_applied_icon {
  display: flex;

  width: 54px;
  height: 54px;

  margin: 0 auto 14px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: #789766;

  border-radius: 50%;

  font-family: "Roboto", sans-serif;
  font-size: 26px;
  font-weight: 900;

  line-height: 1;

  box-shadow:
    0 5px 12px rgba(83, 120, 68, 0.2);
}

.page_present .present_applied_title {
  display: block;

  color: #483a34;

  font-size: 19px;
  font-weight: 900;

  line-height: 1.5;
}

.page_present .present_applied_text {
  margin: 9px 0 0;

  color: #6b5a51;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.75;
}

.page_present .present_applied_entry {
  margin: 18px 0 0;
  padding: 11px 12px;

  color: #a53f32;

  background: #fff0e8;

  border: 1px solid #ecd0c1;
  border-radius: 7px;

  font-size: 13px;
  font-weight: 900;

  line-height: 1.55;
}

.page_present .present_applied_note {
  margin: 13px 0 0;

  color: #74635a;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.7;
}

.page_present .present_applied_button {
  display: flex;

  width: 100%;
  min-height: 46px;

  margin-top: 21px;
  padding: 0 18px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: #654238;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;

  line-height: 1;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}


/* =========================================================
   PRESENT APPLIED QUIZ
========================================================= */

.page_present .present_applied_quiz {
  display: flex;

  margin-top: 13px;
  padding: 12px 13px;

  align-items: center;
  justify-content: center;

  gap: 10px;

  color: #49693f;

  background: #eff6e8;

  border: 1px solid #bfd1b4;
  border-radius: 8px;
}

.page_present .present_applied_quiz[hidden] {
  display: none !important;
}

.page_present .present_applied_quiz_icon {
  display: flex;

  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: #759865;

  border-radius: 50%;

  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 900;

  line-height: 1;
}

.page_present .present_applied_quiz_body {
  display: flex;

  min-width: 0;

  flex-direction: column;

  align-items: flex-start;
}

.page_present .present_applied_quiz_title {
  color: #45653c;

  font-size: 12px;
  font-weight: 900;

  line-height: 1.45;
}

.page_present .present_applied_quiz_bonus {
  margin-top: 2px;

  color: #a13f32;

  font-size: 11px;
  font-weight: 900;

  line-height: 1.4;
}


/* =========================================================
   PRESENT EXTRA HOVER / SMALL SP
========================================================= */

@media (hover: hover) {

  .page_present .present_submit:disabled:hover {
    opacity: 1;

    transform: none;
  }

  .page_present .present_applied_button:hover {
    opacity: 0.88;

    transform: translateY(-1px);
  }

}

@media screen and (max-width: 350px) {

  .page_present .present_status {
    padding-right: 12px;
    padding-left: 12px;
  }

  .page_present .present_intro {
    padding: 0 4px;
  }

  .page_present .present_application_notice {
    padding: 15px 13px;
  }

  .page_present .present_application_notice_title {
    font-size: 12px;
  }

  .page_present .present_applied {
    padding: 25px 15px 21px;
  }

  .page_present .present_applied_title {
    font-size: 18px;
  }

  .page_present .present_applied_entry {
    font-size: 12px;
  }

}

/* =========================================================
   SHOP MAP
========================================================= */

.section_shop_map {
  padding: 50px 20px;
}

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

#gourmeguriMap {
  width: 100%;
  height: 560px;
  margin-top: 24px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   SHOP MAP MARKER
========================================================= */

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

  width: 20px;
  height: 20px;

  color: #ffd000;

  font-size: 22px;
  line-height: 1;

  cursor: pointer;

  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28));

  transform-origin: center;

  transition: transform 0.2s ease;
}

.shop_map_marker:hover {
  transform: scale(1.25);
}

/* =========================================================
   SHOP MODAL
========================================================= */

.shop_modal {
  position: fixed;
  z-index: 10000;
  inset: 0;

  visibility: hidden;
  opacity: 0;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.shop_modal.is_active {
  visibility: visible;
  opacity: 1;
}


/* 閭梧勹 */
.shop_modal_overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.5);
}


/* 荳九°繧牙�繧句ｺ苓�繧ｫ繝ｼ繝� */
.shop_modal_panel {
  position: absolute;

  left: 50%;
  bottom: 0;

  width: 100%;
  max-width: 480px;
  max-height: 88vh;

  background: #ffffff;

  border-radius: 24px 24px 0 0;

  overflow-y: auto;

  transform: translate(-50%, 100%);

  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
}

.shop_modal.is_active .shop_modal_panel {
  transform: translate(-50%, 0);
}


/* 荳企Κ縺ｮ繝上Φ繝峨Ν */
.shop_modal_handle {
  position: absolute;
  z-index: 3;

  top: 8px;
  left: 50%;

  width: 42px;
  height: 5px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.85);

  transform: translateX(-50%);
}


/* 髢峨§繧九�繧ｿ繝ｳ */
.shop_modal_close {
  position: absolute;
  z-index: 5;

  top: 15px;
  right: 15px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  padding: 0;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.92);

  color: #333333;

  font-size: 25px;
  line-height: 1;

  cursor: pointer;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}


/* 蠎苓�蜀咏悄 */
.shop_modal_image_wrap {
  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #eeeeee;
}

.shop_modal_image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* 譛ｬ譁� */
.shop_modal_body {
  padding: 22px 22px 32px;
}


/* 繧ｸ繝｣繝ｳ繝ｫ */
.shop_modal_genre {
  margin: 0 0 5px;

  color: #d8841b;

  font-size: 11px;
  font-weight: 700;
}


/* 蠎苓�蜷� */
.shop_modal_name {
  margin: 0 0 12px;

  color: #333333;

  font-size: 21px;
  line-height: 1.45;
}


/* 邏ｹ莉区枚 */
.shop_modal_description {
  margin: 0 0 20px;

  color: #555555;

  font-size: 13px;
  line-height: 1.8;
}


/* 蠎苓�諠��ｱ */
.shop_modal_info {
  margin: 0 0 22px;
}

.shop_modal_info_row {
  display: grid;

  grid-template-columns: 48px 1fr;

  gap: 10px;

  padding: 11px 0;

  border-bottom: 1px solid #eeeeee;

  font-size: 12px;
  line-height: 1.7;
}

.shop_modal_info_row:first-child {
  border-top: 1px solid #eeeeee;
}

.shop_modal_info dt {
  font-weight: 700;
}

.shop_modal_info dd {
  margin: 0;
}

.shop_modal_info a {
  color: inherit;
}


/* Google繝槭ャ繝励�繧ｿ繝ｳ */
.shop_modal_map_button {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 52px;

  border-radius: 999px;

  background: #333333;

  color: #ffffff;

  font-size: 18px;
  font-weight: 700;

  text-decoration: none;
}


/* 繝｢繝ｼ繝€繝ｫ陦ｨ遉ｺ荳ｭ縺ｯ閭梧勹繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ遖∵ｭ｢ */
body.is_modal_open {
  overflow: hidden;
}

/* =========================================================
   PRIZE OPEN PAGE
========================================================= */

.page_prize_open {
  --prize-open-red: #8f302e;
  --prize-open-red-dark: #792624;
  --prize-open-brown: #4f3b34;
  --prize-open-gold: #c99b40;
  --prize-open-gold-light: #f3dfaa;
  --prize-open-border: #63514a;
  --prize-open-paper: #fffaf1;
}


/* =========================================================
   PRIZE OPEN BASE
========================================================= */

.page_prize_open .section_inner {
  width: calc(100% - 32px);
  max-width: 398px;
}

.page_prize_open .section_prize_open {
  position: relative;
  z-index: 2;

  padding: 4px 0 82px;
}


/* =========================================================
   HEADING
========================================================= */

.page_prize_open .prize_open_heading {
  text-align: center;
}

.page_prize_open .prize_open_heading_sub {
  color: #8c756a;

  font-size: 12px;
  font-weight: 800;

  line-height: 1.4;

  letter-spacing: 0.08em;
}

.page_prize_open .prize_open_title {
  margin-top: 4px;

  color: #413936;

  font-size: 27px;
  font-weight: 900;

  line-height: 1.35;

  letter-spacing: 0.03em;
}

.page_prize_open .prize_open_lead {
  margin-top: 8px;

  color: #66564e;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.7;
}


/* =========================================================
   LOADING
========================================================= */

.page_prize_open .prize_open_loading {
  margin-top: 34px;
  padding: 27px 18px;

  color: #74645c;

  text-align: center;

  background: rgba(255, 252, 246, 0.9);

  border: 1px solid rgba(135, 111, 90, 0.2);
  border-radius: 12px;

  box-shadow:
    0 4px 14px rgba(79, 55, 39, 0.06);
}

.page_prize_open .prize_open_loading p {
  font-size: 12px;
  font-weight: 700;

  line-height: 1.7;
}


/* =========================================================
   ERROR
========================================================= */

.page_prize_open .prize_open_error {
  margin-top: 34px;
  padding: 25px 19px;

  text-align: center;

  background: #fff3f1;

  border: 1px solid #e1b7b1;
  border-radius: 12px;

  box-shadow:
    0 4px 14px rgba(79, 55, 39, 0.06);
}

.page_prize_open .prize_open_error[hidden] {
  display: none !important;
}

.page_prize_open .prize_open_error_title {
  display: block;

  color: #9c3732;

  font-size: 15px;
  font-weight: 900;

  line-height: 1.5;
}

.page_prize_open .prize_open_error_text {
  margin-top: 8px;

  color: #715b54;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.7;
}


/* =========================================================
   CONTENT
========================================================= */

.page_prize_open .prize_open_content[hidden] {
  display: none !important;
}


/* =========================================================
   WINNER STATUS
========================================================= */

.page_prize_open .prize_open_status {
  position: relative;

  margin-top: 29px;
  padding: 19px 16px 17px;

  overflow: hidden;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      #fffdf6 0%,
      #fff4df 100%
    );

  border: 1px solid #dfc28d;
  border-radius: 14px;

  box-shadow:
    0 5px 18px rgba(72, 46, 36, 0.08);
}

.page_prize_open .prize_open_status::before {
  position: absolute;

  top: -43px;
  right: -30px;

  width: 115px;
  height: 115px;

  content: "";

  background: rgba(211, 167, 77, 0.09);

  border-radius: 50%;
}

.page_prize_open .prize_open_status::after {
  position: absolute;

  bottom: -42px;
  left: -28px;

  width: 90px;
  height: 90px;

  content: "";

  background: rgba(143, 48, 46, 0.04);

  border-radius: 50%;
}

.page_prize_open .prize_open_status_label {
  position: relative;
  z-index: 2;

  color: #6c574e;

  font-size: 12px;
  font-weight: 900;

  line-height: 1.4;

  letter-spacing: 0.05em;
}

.page_prize_open .prize_open_order {
  position: relative;
  z-index: 2;

  display: flex;

  min-height: 67px;

  margin-top: 3px;

  align-items: baseline;
  justify-content: center;

  color: #302824;

  font-family:
    "Roboto",
    "Noto Sans JP",
    sans-serif;

  line-height: 1;
}

.page_prize_open .prize_open_order strong {
  color: #c93b34;

  font-size: 54px;
  font-weight: 900;

  letter-spacing: -0.05em;
}

.page_prize_open .prize_open_order span {
  margin-left: 6px;

  color: #4a403b;

  font-size: 22px;
  font-weight: 900;
}

.page_prize_open .prize_open_status_text {
  position: relative;
  z-index: 2;

  margin-top: 1px;

  color: #64534b;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.55;
}


/* =========================================================
   GUIDE
========================================================= */

.page_prize_open .prize_open_guide {
  margin-top: 16px;
  padding: 14px 15px;

  text-align: center;

  background: rgba(255, 255, 255, 0.76);

  border: 1px solid rgba(123, 91, 75, 0.2);
  border-radius: 10px;

  box-shadow:
    0 3px 12px rgba(72, 46, 36, 0.05);
}

.page_prize_open .prize_open_guide_title {
  display: block;

  color: var(--prize-open-red);

  font-size: 15px;
  font-weight: 900;

  line-height: 1.5;
}

.page_prize_open .prize_open_guide_text {
  margin-top: 3px;

  color: #65554e;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.65;
}


/* =========================================================
   BOARD
========================================================= */

.page_prize_open .prize_open_board {
  margin-top: 22px;

  padding: 10px 10px 14px;

  background:
    linear-gradient(
      145deg,
      #963833 0%,
      #7e2927 100%
    );

  border-radius: 6px;

  box-shadow:
    0 6px 18px rgba(70, 38, 30, 0.14);
}

.page_prize_open .prize_open_board_title {
  display: flex;

  min-height: 31px;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color: #ffffff;

  font-size: 11px;
  font-weight: 900;

  line-height: 1.4;

  text-align: center;
}

.page_prize_open .prize_open_board_title span {
  font-size: 20px;
  font-weight: 400;

  line-height: 1;
}


/* =========================================================
   BOARD VISUAL
========================================================= */

.page_prize_open .prize_open_board_visual {
  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  margin-top: 6px;

  overflow: hidden;

  background: #f5eee3;

  border-radius: 4px;
}


/* =========================================================
   GRID
========================================================= */

.page_prize_open .prize_open_grid {
  position: absolute;

  inset: 0;

  display: grid;

  width: 100%;
  height: 100%;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-template-rows:
    repeat(4, minmax(0, 1fr));

  border-top: 1px solid var(--prize-open-border);
  border-left: 1px solid var(--prize-open-border);
}


/* =========================================================
   CELL
========================================================= */

.page_prize_open .prize_open_cell {
  position: relative;

  display: flex;

  min-width: 0;
  min-height: 0;

  padding: 5px;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #fffdf8 0%,
      #f7eee1 100%
    );

  border-right: 1px solid var(--prize-open-border);
  border-bottom: 1px solid var(--prize-open-border);

  user-select: none;
  -webkit-user-select: none;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    opacity 0.22s ease;
}

.page_prize_open .prize_open_cell::before {
  position: absolute;

  inset: 5px;

  content: "";

  border: 1px dashed rgba(151, 116, 86, 0.23);
  border-radius: 3px;

  pointer-events: none;
}


/* =========================================================
   QUESTION MARK
========================================================= */

.page_prize_open .prize_open_cell_mark {
  position: relative;
  z-index: 2;

  display: flex;

  width: 42px;
  height: 42px;

  align-items: center;
  justify-content: center;

  color: #9a7461;

  font-family: "Roboto", sans-serif;

  font-size: 27px;
  font-weight: 900;

  line-height: 1;

  background: rgba(255, 255, 255, 0.55);

  border: 1px solid rgba(139, 104, 82, 0.16);
  border-radius: 50%;

  box-shadow:
    0 2px 7px rgba(78, 52, 38, 0.05);
}


/* =========================================================
   SELECTABLE CELL
   閾ｪ蛻��逡ｪ縺ｫ縺ｪ縺｣縺滓凾縺ｫJS縺九ｉ莉倥￠繧�
========================================================= */

.page_prize_open .prize_open_grid.is_select_mode .prize_open_cell.is_selectable {
  z-index: 3;

  cursor: pointer;

  background:
    linear-gradient(
      145deg,
      #fffce9 0%,
      #f8eab8 100%
    );

  box-shadow:
    inset 0 0 0 3px #e2b545,
    inset 0 0 20px rgba(238, 199, 83, 0.26);

  animation:
    prize-open-selectable
    1.15s ease-in-out infinite;
}

.page_prize_open .prize_open_grid.is_select_mode .prize_open_cell.is_selectable .prize_open_cell_mark {
  color: #a36f20;

  background: rgba(255, 255, 255, 0.78);

  border-color: rgba(187, 140, 47, 0.3);
}

.page_prize_open .prize_open_grid.is_select_mode .prize_open_cell.is_selectable::after {
  position: absolute;
  z-index: 5;

  top: 5px;
  right: 5px;

  display: flex;

  width: 19px;
  height: 19px;

  align-items: center;
  justify-content: center;

  content: "＋";

  color: #ffffff;

  background: #d3a124;

  border-radius: 50%;

  font-family: "Roboto", sans-serif;

  font-size: 14px;
  font-weight: 900;

  line-height: 1;

  box-shadow:
    0 2px 5px rgba(70, 45, 25, 0.18);
}

@keyframes prize-open-selectable {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.97);
  }

}


/* =========================================================
   OPENED CELL
   API騾｣謳ｺ蠕後↓菴ｿ逕ｨ
========================================================= */

.page_prize_open .prize_open_cell.is_opened {
  padding: 4px;

  flex-direction: column;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fff8e9 100%
    );
}

.page_prize_open .prize_open_cell.is_opened::before {
  display: none;
}

.page_prize_open .prize_open_cell.is_opened .prize_open_cell_mark {
  display: none;
}

.page_prize_open .prize_open_cell_image {
  display: flex;

  width: 100%;
  height: 55%;

  align-items: center;
  justify-content: center;
}

.page_prize_open .prize_open_cell_image img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.page_prize_open .prize_open_cell_name {
  display: flex;

  min-height: 32px;

  margin-top: 2px;

  align-items: center;
  justify-content: center;

  color: #55453e;

  font-size: 11px;
  font-weight: 900;

  line-height: 1.25;

  text-align: center;

  overflow-wrap: anywhere;
}


/* =========================================================
   MY PRIZE
========================================================= */

.page_prize_open .prize_open_cell.is_my_prize {
  box-shadow:
    inset 0 0 0 3px #d8a62b,
    inset 0 0 18px rgba(232, 188, 67, 0.2);
}

.page_prize_open .prize_open_cell.is_my_prize::after {
  position: absolute;
  z-index: 7;

  top: 4px;
  left: 4px;

  padding: 3px 5px;

  content: "あなた";

  color: #ffffff;

  background: #c64336;

  border-radius: 3px;

  font-size: 11px;
  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   PROGRESS
========================================================= */

.page_prize_open .prize_open_progress {
  display: flex;

  margin-top: 17px;
  padding: 13px 16px;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  background: rgba(255, 255, 255, 0.76);

  border: 1px solid rgba(123, 91, 75, 0.2);
  border-radius: 10px;
}

.page_prize_open .prize_open_progress_label {
  color: #61514a;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.4;
}

.page_prize_open .prize_open_progress_count {
  display: flex;

  align-items: baseline;

  color: #4c403b;

  font-family:
    "Roboto",
    "Noto Sans JP",
    sans-serif;

  line-height: 1;
}

.page_prize_open .prize_open_progress_count strong {
  color: var(--prize-open-red);

  font-size: 24px;
  font-weight: 900;
}

.page_prize_open .prize_open_progress_count span {
  margin-left: 4px;

  font-size: 11px;
  font-weight: 900;
}


/* =========================================================
   NOTE
========================================================= */

.page_prize_open .prize_open_note {
  margin-top: 15px;
  padding: 0 3px;

  color: #796860;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.7;
}

.page_prize_open .prize_open_note p + p {
  margin-top: 2px;
}


/* =========================================================
   HOVER / FOCUS
========================================================= */

.page_prize_open .prize_open_cell.is_selectable:focus-visible {
  outline: 3px solid rgba(226, 181, 69, 0.65);
  outline-offset: -4px;
}

@media (hover: hover) {

  .page_prize_open .prize_open_grid.is_select_mode .prize_open_cell.is_selectable:hover {
    animation-play-state: paused;

    transform: scale(0.96);

    box-shadow:
      inset 0 0 0 3px #edc34d,
      inset 0 0 25px rgba(238, 199, 83, 0.42);
  }

}


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

@media screen and (max-width: 350px) {

  .page_prize_open .section_inner {
    width: calc(100% - 24px);
  }

  .page_prize_open .prize_open_title {
    font-size: 24px;
  }

  .page_prize_open .prize_open_order strong {
    font-size: 48px;
  }

  .page_prize_open .prize_open_order span {
    font-size: 20px;
  }

  .page_prize_open .prize_open_board {
    padding-right: 7px;
    padding-left: 7px;
  }

  .page_prize_open .prize_open_cell {
    padding: 3px;
  }

  .page_prize_open .prize_open_cell::before {
    inset: 4px;
  }

  .page_prize_open .prize_open_cell_mark {
    width: 37px;
    height: 37px;

    font-size: 24px;
  }

  .page_prize_open .prize_open_cell_name {
    font-size: 11px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .page_prize_open .prize_open_cell,
  .page_prize_open .prize_open_grid.is_select_mode .prize_open_cell.is_selectable {
    animation: none;

    transition-duration: 0.01ms;
  }

}

/* =========================================================
   PRIZE OPEN - LOADING
========================================================= */

.page_prize_open .prize_open_grid.is_loading {
  pointer-events: none;
}


/* =========================================================
   PRIZE OPEN - PRIZE MARK
========================================================= */

.page_prize_open .prize_open_cell_prize_mark {
  display: flex;

  width: 100%;
  height: 100%;

  align-items: center;
  justify-content: center;

  font-size: 27px;

  line-height: 1;
}


/* =========================================================
   PRIZE OPEN - OPEN ANIMATION
========================================================= */

.page_prize_open .prize_open_cell_open_cover {
  position: absolute;
  z-index: 20;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #fffdf8 0%,
      #f7eee1 100%
    );

  transform:
    perspective(640px)
    rotateY(0deg);

  transform-origin: left center;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change: transform, opacity;

  transition:
    transform 0.72s cubic-bezier(0.645, 0.045, 0.355, 1),
    opacity 0.55s ease;
}

.page_prize_open .prize_open_cell_open_cover::before {
  position: absolute;

  inset: 5px;

  content: "";

  border: 1px dashed rgba(151, 116, 86, 0.23);
  border-radius: 3px;
}

.page_prize_open .prize_open_cell_open_cover.is_opening {
  opacity: 0;

  transform:
    perspective(640px)
    rotateY(-100deg);
}

.page_prize_open .prize_open_cell.is_just_opened {
  animation:
    prize-open-reveal
    1s ease;
}

@keyframes prize-open-reveal {

  0% {
    filter: brightness(1.45);
  }

  45% {
    filter: brightness(1.15);
  }

  100% {
    filter: brightness(1);
  }

}


/* =========================================================
   PRIZE OPEN MODAL
========================================================= */

.page_prize_open .prize_open_modal {
  position: fixed;
  z-index: 5000;

  inset: 0;

  display: flex;

  padding:
    24px
    20px
    calc(24px + env(safe-area-inset-bottom));

  align-items: center;
  justify-content: center;

  background: rgba(42, 27, 22, 0.7);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.page_prize_open .prize_open_modal.is_visible {
  opacity: 1;
  visibility: visible;
}


/* =========================================================
   MODAL BOX
========================================================= */

.page_prize_open .prize_open_modal_box {
  position: relative;

  width: 100%;
  max-width: 330px;

  padding: 29px 21px 22px;

  overflow: hidden;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      #fffdf6 0%,
      #fff5df 100%
    );

  border: 2px solid #dfbd6a;
  border-radius: 18px;

  box-shadow:
    0 18px 50px rgba(28, 17, 13, 0.32);

  transform:
    translateY(12px)
    scale(0.97);

  transition:
    transform 0.22s ease;
}

.page_prize_open .prize_open_modal.is_visible .prize_open_modal_box {
  transform:
    translateY(0)
    scale(1);
}

.page_prize_open .prize_open_modal_box::before {
  position: absolute;

  top: -45px;
  right: -38px;

  width: 120px;
  height: 120px;

  content: "";

  background:
    rgba(222, 181, 76, 0.11);

  border-radius: 50%;
}


/* =========================================================
   MODAL TEXT
========================================================= */

.page_prize_open .prize_open_modal_label {
  position: relative;
  z-index: 2;

  display: block;

  color: #ad8031;

  font-family:
    "Roboto",
    "Noto Sans JP",
    sans-serif;

  font-size: 11px;
  font-weight: 900;

  line-height: 1.2;

  letter-spacing: 0.09em;
}

.page_prize_open .prize_open_modal_title {
  position: relative;
  z-index: 2;

  display: block;

  margin-top: 5px;

  color: #4d3d37;

  font-size: 20px;
  font-weight: 900;

  line-height: 1.45;
}

.page_prize_open .prize_open_modal_panel {
  position: relative;
  z-index: 2;

  display: flex;

  width: 74px;
  height: 74px;

  margin: 18px auto 0;

  align-items: center;
  justify-content: center;

  color: #9a7461;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f7eee1 100%
    );

  border: 1px solid #9c8476;
  border-radius: 5px;

  font-family: "Roboto", sans-serif;

  font-size: 31px;
  font-weight: 900;

  box-shadow:
    0 4px 12px rgba(72, 46, 36, 0.08);
}

.page_prize_open .prize_open_modal_text {
  position: relative;
  z-index: 2;

  margin-top: 14px;

  color: #68554c;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.7;
}


/* =========================================================
   MODAL BUTTONS
========================================================= */

.page_prize_open .prize_open_modal_buttons {
  position: relative;
  z-index: 2;

  display: grid;

  margin-top: 19px;

  grid-template-columns:
    0.8fr 1.2fr;

  gap: 9px;
}

.page_prize_open .prize_open_modal_button {
  display: flex;

  min-height: 47px;

  padding: 8px 12px;

  align-items: center;
  justify-content: center;

  cursor: pointer;

  border: 0;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;

  line-height: 1.3;
}

.page_prize_open .prize_open_modal_button.is_cancel {
  color: #66544c;

  background: #e9e1d9;
}

.page_prize_open .prize_open_modal_button.is_open,
.page_prize_open .prize_open_modal_button.is_close {
  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      #c74538 0%,
      #92302c 100%
    );

  box-shadow:
    0 5px 13px rgba(132, 47, 40, 0.2);
}

.page_prize_open .prize_open_modal_button.is_close {
  position: relative;
  z-index: 2;

  width: 100%;

  margin-top: 18px;
}

.page_prize_open .prize_open_modal_button:disabled {
  opacity: 0.55;

  cursor: default;
}


/* =========================================================
   RESULT
========================================================= */

.page_prize_open .prize_open_result_visual {
  position: relative;
  z-index: 2;

  display: flex;

  width: 115px;
  height: 100px;

  margin: 15px auto 0;

  align-items: center;
  justify-content: center;

  font-size: 52px;
}

.page_prize_open .prize_open_result_visual img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}

.page_prize_open .prize_open_result_name {
  position: relative;
  z-index: 2;

  display: block;

  margin-top: 8px;

  color: #a23c32;

  font-size: 19px;
  font-weight: 900;

  line-height: 1.45;
}


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

@media screen and (max-width: 350px) {

  .page_prize_open .prize_open_modal {
    padding-right: 15px;
    padding-left: 15px;
  }

  .page_prize_open .prize_open_modal_box {
    padding:
      26px
      17px
      19px;
  }

  .page_prize_open .prize_open_modal_title {
    font-size: 18px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .page_prize_open .prize_open_modal,
  .page_prize_open .prize_open_modal_box,
  .page_prize_open .prize_open_cell_open_cover,
  .page_prize_open .prize_open_cell.is_just_opened {
    animation: none;

    transition-duration: 0.01ms;
  }

}

[hidden] {
  display: none !important;
}

/* =========================================================
   SPONSORS PAGE
========================================================= */

.page_sponsors {
  --sponsor-color-text: #4a3c36;
  --sponsor-color-sub: #75665e;
  --sponsor-color-border: #d6c5b6;
}

.page_sponsors .section_inner {
  width: calc(100% - 44px);
}

.page_sponsors .section_sponsors {
  position: relative;
  z-index: 2;
  padding: 3px 0 72px;
}

.page_sponsors .sponsors_intro {
  max-width: 320px;
  margin: 9px auto 0;
  color: var(--sponsor-color-sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
}

.page_sponsors .sponsor_group {
  margin-top: 36px;
}

.page_sponsors .sponsor_group + .sponsor_group {
  margin-top: 46px;
}

.page_sponsors .sponsor_group_heading {
  text-align: center;
}

.page_sponsors .sponsor_group_label {
  display: inline-block;
  padding: 5px 15px 6px;
  color: #ffffff;
  background: #654238;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.page_sponsors .sponsor_group.is_prize .sponsor_group_label {
  background: #8f302e;
}

.page_sponsors .sponsor_group_title {
  margin-top: 9px;
  color: var(--sponsor-color-text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.page_sponsors .sponsor_group_note {
  margin-top: 5px;
  color: var(--sponsor-color-sub);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.65;
}

.page_sponsors .sponsor_list {
  display: grid;
  margin-top: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page_sponsors .sponsor_group.is_prize .sponsor_list {
  grid-template-columns: 1fr;
}

.page_sponsors .sponsor_item {
  display: flex;
  min-width: 0;
  min-height: 142px;
  padding: 17px 12px 15px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--sponsor-color-border);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(76, 52, 39, 0.05);
}

.page_sponsors .sponsor_group.is_prize .sponsor_item {
  min-height: 118px;
  padding: 16px 18px;
  flex-direction: row;
  justify-content: flex-start;
  gap: 16px;
  text-align: left;
}

.page_sponsors .sponsor_logo {
  display: flex;
  width: 100%;
  height: 64px;
  align-items: center;
  justify-content: center;
}

.page_sponsors .sponsor_logo img {
  width: auto;
  max-width: 60%;
  max-height: 58px;
  object-fit: contain;
}

.page_sponsors .sponsor_group.is_prize .sponsor_logo {
  width: 92px;
  height: 68px;
  flex: 0 0 92px;
}

.page_sponsors .sponsor_group.is_prize .sponsor_logo img {
  max-width: 78%;
  max-height: 58px;
}

.page_sponsors .sponsor_content {
  min-width: 0;
}

.page_sponsors .sponsor_name {
  margin-top: 12px;
  color: #433a36;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.page_sponsors .sponsor_group.is_prize .sponsor_name {
  margin-top: 0;
  font-size: 14px;
}

.page_sponsors .sponsor_type {
  display: block;
  margin-top: 4px;
  color: #8b776d;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.page_sponsors .sponsor_thanks {
  position: relative;
  margin-top: 45px;
  padding: 20px 18px;
  color: #5b4a42;
  text-align: center;
  background: rgba(255, 248, 238, 0.9);
  border: 1px solid #dcc8b7;
  border-radius: 11px;
}

.page_sponsors .sponsor_thanks strong {
  display: block;
  color: #8f302e;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
}

.page_sponsors .sponsor_thanks p {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.75;
}

.page_sponsors .section_page_links {
  position: relative;
  padding: 0 0 60px;
}

.page_sponsors .page_links {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.page_sponsors .page_link {
  display: grid;
  min-height: 43px;
  padding: 0 7px;
  place-items: center;
  color: #5a4840;
  text-align: center;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #9d8477;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.page_sponsors .page_link.is_current,
.page_sponsors .page_link[aria-current="page"] {
  background: rgba(169, 69, 54, 0.06);
}

@media (hover: hover) {
  .page_sponsors .sponsor_item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .page_sponsors a.sponsor_item:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 19px rgba(76, 52, 39, 0.09);
  }

  .page_sponsors .page_link:hover {
    background: #ffffff;
  }
}

@media screen and (max-width: 350px) {
  .page_sponsors .section_inner {
    width: calc(100% - 30px);
  }

  .page_sponsors .sponsor_list {
    gap: 9px;
  }

  .page_sponsors .sponsor_item {
    padding-right: 9px;
    padding-left: 9px;
  }

  .page_sponsors .sponsor_group.is_prize .sponsor_item {
    gap: 12px;
  }

  .page_sponsors .sponsor_group.is_prize .sponsor_logo {
    width: 78px;
    flex-basis: 78px;
  }

  .page_sponsors .page_link {
    font-size: 10px;
  }
}


/* =========================================================
   SPONSORS PAGE - 2026-09-27 DESIGN ADJUSTMENTS
   繝ｻ蝨ｰ蝓溘せ繝昴Φ繧ｵ繝ｼ3遉ｾ逶ｮ繧剃ｸｭ螟ｮ驟咲ｽｮ
   繝ｻ譎ｯ蜩√せ繝昴Φ繧ｵ繝ｼ繧�2蛻励き繝ｼ繝牙喧
   繝ｻ繧ｫ繝ｼ繝蛾ｫ�/逕ｻ蜒乗ｯ皮紫/菴咏區繧堤ｵｱ荳€
   繝ｻThanks / 髢｢騾｣繝ｪ繝ｳ繧ｯ縺ｮ蛹ｺ蛻�ｊ繧呈�遒ｺ蛹�
========================================================= */
.page_sponsors .sponsor_group.is_regional .sponsor_item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: calc((100% - 12px) / 2);
  justify-self: center;
}

.page_sponsors .sponsor_group.is_regional .sponsor_item {
  min-height: 176px;
  padding: 18px 10px 16px;
}

.page_sponsors .sponsor_group.is_regional .sponsor_logo {
  height: 92px;
}

.page_sponsors .sponsor_group.is_regional .sponsor_logo img {
  max-width: 82%;
  max-height: 86px;
}

.page_sponsors .sponsor_group.is_regional .sponsor_name {
  margin-top: 11px;
  font-size: 12px;
  line-height: 1.45;
}

.page_sponsors .sponsor_group.is_prize .sponsor_list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page_sponsors .sponsor_group.is_prize .sponsor_item {
  min-height: 220px;
  padding: 10px 10px 14px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  text-align: center;
}

.page_sponsors .sponsor_group.is_prize .sponsor_logo {
  width: 100%;
  height: 145px;
  flex: 0 0 145px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,.55);
}

.page_sponsors .sponsor_group.is_prize .sponsor_logo img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.page_sponsors .sponsor_group.is_prize .sponsor_content {
  width: 100%;
  padding-top: 10px;
}

.page_sponsors .sponsor_group.is_prize .sponsor_name {
  margin-top: 0;
  font-size: 11px;
  line-height: 1.45;
}

.page_sponsors .sponsor_group.is_prize .sponsor_type {
  margin-top: 4px;
  font-size: 10px;
}

.page_sponsors .sponsor_thanks {
  margin-top: 48px;
  margin-bottom: 0;
  padding: 22px 18px;
}

.page_sponsors .section_sponsors {
  padding-bottom: 42px;
}

.page_sponsors .section_page_links {
  padding: 0 0 42px;
}

@media screen and (max-width: 350px) {
  .page_sponsors .sponsor_group.is_regional .sponsor_item:last-child:nth-child(odd) {
    width: calc((100% - 9px) / 2);
  }

  .page_sponsors .sponsor_group.is_prize .sponsor_list {
    gap: 9px;
  }

  .page_sponsors .sponsor_group.is_prize .sponsor_item {
    min-height: 202px;
    padding: 8px 8px 12px;
  }

  .page_sponsors .sponsor_group.is_prize .sponsor_logo {
    width: 100%;
    height: 128px;
    flex: 0 0 128px;
  }

  .page_sponsors .sponsor_group.is_prize .sponsor_name {
    font-size: 10px;
  }
}


/* =========================================================
   PRIZES PAGE - RESTORED
========================================================= */
   PRIZES PAGE
   縺ｦ縺��繧ｰ繝ｫ繧√＄繧� 譎ｯ蜩∽ｸ€隕ｧ
========================================================= */

.page_prizes .section_present {
  position: relative;
  z-index: 2;
  padding: 0 0 80px;
}

.page_prizes .section_present .section_inner {
  width: calc(100% - 36px);
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}


/* =========================================================
   PRESENT HEADING
========================================================= */

.page_prizes .present_heading {
  padding: 10px 0 0;
  text-align: center;
}

.page_prizes .present_heading_en {
  margin: 0 0 8px;
  color: #d96f3f;
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
}

.page_prizes .present_heading_title {
  margin: 0;
  color: #493b34;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: 0.02em;
}

.page_prizes .present_heading_title strong {
  position: relative;
  color: #d75c38;
  font-size: 1.15em;
  font-weight: 900;
}

.page_prizes .present_heading_lead {
  margin: 17px 0 0;
  color: #66564e;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
}

.page_prizes .present_heading_lead strong {
  color: #d75c38;
  font-size: 1.12em;
  font-weight: 900;
}


/* =========================================================
   MAIN PRIZE
========================================================= */

.page_prizes .present_main {
  position: relative;
  margin-top: 38px;
}

.page_prizes .present_main_label {
  position: relative;
  z-index: 2;
  margin-bottom: -13px;
  text-align: center;
}

.page_prizes .present_main_label span {
  display: inline-flex;
  min-height: 28px;
  padding: 0 19px;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  background: #d75c38;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;

  box-shadow: 0 4px 10px rgba(117, 65, 45, 0.15);
}

.page_prizes .present_main_card {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);

  min-height: 260px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 247, 235, 0.98)
    );

  border: 2px solid #e4b58b;
  border-radius: 18px;

  box-shadow:
    0 10px 26px rgba(84, 53, 38, 0.10);
}

.page_prizes .present_main_card::before {
  position: absolute;
  top: -55px;
  right: -45px;

  width: 150px;
  height: 150px;

  content: "";

  background: rgba(239, 172, 91, 0.12);
  border-radius: 50%;
}

.page_prizes .present_main_image {
  position: relative;
  z-index: 1;

  display: flex;
  min-width: 0;
  padding: 30px 16px 24px 24px;

  align-items: center;
  justify-content: center;
}

.page_prizes .present_main_image img {
  display: block;

  width: 100%;
  max-width: 280px;
  max-height: 245px;

  object-fit: contain;

  filter: drop-shadow(0 8px 10px rgba(57, 40, 31, 0.12));
}

.page_prizes .present_main_content {
  position: relative;
  z-index: 1;

  display: flex;
  min-width: 0;
  padding: 38px 24px 28px 5px;

  flex-direction: column;
  justify-content: center;
}

.page_prizes .present_main_brand {
  margin: 0 0 6px;

  color: #a55a42;

  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
}

.page_prizes .present_main_name {
  margin: 0;

  color: #413630;

  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.page_prizes .present_main_note {
  margin: 15px 0 0;

  color: #765d51;

  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}


/* =========================================================
   PRIZE LIST HEADING
========================================================= */

.page_prizes .present_list_heading {
  margin-top: 56px;
  text-align: center;
}

.page_prizes .present_list_heading_en {
  margin: 0 0 7px;

  color: #d96f3f;

  font-family: "Roboto", sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
}

.page_prizes .present_list_heading_title {
  margin: 0;

  color: #493b34;

  font-size: 22px;
  font-weight: 900;
  line-height: 1.4;
}

.page_prizes .present_list_heading_text {
  margin: 12px 0 0;

  color: #75645b;

  font-size: 12px;
  font-weight: 700;
  line-height: 1.75;
}


/* =========================================================
   PRIZE GRID
========================================================= */

.page_prizes .present_grid {
  display: grid;

  margin-top: 27px;

  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}


/* =========================================================
   PRIZE CARD
========================================================= */

.page_prizes .present_card {
  position: relative;
  overflow: hidden;

  display: flex;
  min-width: 0;

  flex-direction: column;

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid #e2d3c7;
  border-radius: 13px;

  box-shadow:
    0 5px 14px rgba(72, 46, 36, 0.07);
}

.page_prizes .present_card_image {
  position: relative;

  display: flex;

  width: 100%;
  aspect-ratio: 1 / 0.78;

  padding: 15px;

  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #fffdf9 0%,
      #f9f3eb 100%
    );
}

.page_prizes .present_card_image::after {
  position: absolute;
  right: 11px;
  bottom: 9px;

  width: 24px;
  height: 2px;

  content: "";

  background: #e5b078;
  border-radius: 999px;
}

.page_prizes .present_card_image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 5px 5px rgba(65, 45, 35, 0.08));
}

.page_prizes .present_card_content {
  display: flex;

  min-height: 112px;
  padding: 14px 14px 16px;

  flex: 1;
  flex-direction: column;
}

.page_prizes .present_card_category {
  overflow: hidden;

  margin: 0 0 6px;

  color: #b26c4c;

  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 9px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.08em;

  overflow-wrap: anywhere;
}

.page_prizes .present_card_name {
  margin: 0;

  color: #453a34;

  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;

  overflow-wrap: anywhere;
}

.page_prizes .present_card_value {
  margin: 6px 0 0;

  color: #d35f3d;

  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.page_prizes .present_card_sponsor {
  margin: auto 0 0;
  padding-top: 9px;

  color: #8a786e;

  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;

  overflow-wrap: anywhere;
}


/* =========================================================
   WIDE PRIZE CARD
========================================================= */

.page_prizes .present_card.is_wide {
  grid-column: span 2;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.page_prizes .present_card.is_wide .present_card_image {
  height: 100%;
  min-height: 190px;
  aspect-ratio: auto;
}

.page_prizes .present_card.is_wide .present_card_content {
  min-height: 190px;
  padding: 22px 20px;

  justify-content: center;
}

.page_prizes .present_card.is_wide .present_card_category {
  font-size: 10px;
}

.page_prizes .present_card.is_wide .present_card_name {
  font-size: 18px;
}

.page_prizes .present_card.is_wide .present_card_value {
  font-size: 15px;
}


/* =========================================================
   AFTER WINNING
========================================================= */

.page_prizes .present_open {
  position: relative;
  overflow: hidden;

  margin-top: 55px;
  padding: 34px 24px 31px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      #665046 0%,
      #4d3b34 100%
    );

  border-radius: 17px;

  box-shadow:
    0 8px 20px rgba(64, 42, 32, 0.14);
}

.page_prizes .present_open::before {
  position: absolute;
  top: -45px;
  left: -45px;

  width: 130px;
  height: 130px;

  content: "";

  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
}

.page_prizes .present_open_en {
  position: relative;
  z-index: 1;

  margin: 0 0 8px;

  color: #efbc83;

  font-family: "Roboto", sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
}

.page_prizes .present_open_title {
  position: relative;
  z-index: 1;

  margin: 0;

  color: #ffffff;

  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
}

.page_prizes .present_open_title strong {
  color: #ffc676;
  font-weight: 900;
}

.page_prizes .present_open_panels {
  position: relative;
  z-index: 1;

  display: grid;

  max-width: 310px;
  margin: 23px auto 0;

  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.page_prizes .present_open_panels span {
  display: flex;

  aspect-ratio: 1 / 1;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background:
    linear-gradient(
      145deg,
      #d9794f,
      #bd5c39
    );

  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;

  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 900;

  box-shadow:
    0 4px 8px rgba(27, 18, 14, 0.18);
}

.page_prizes .present_open_text {
  position: relative;
  z-index: 1;

  margin: 20px 0 0;

  color: #f5ede8;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.8;
}


/* =========================================================
   NOTE
========================================================= */

.page_prizes .present_note {
  margin-top: 24px;
  padding: 16px 18px;

  background: rgba(255, 255, 255, 0.55);

  border: 1px solid #e3d7cd;
  border-radius: 8px;
}

.page_prizes .present_note p {
  margin: 0;

  color: #85746b;

  font-size: 10px;
  font-weight: 600;
  line-height: 1.8;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) {

  .page_prizes .present_card {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .page_prizes .present_card:hover {
    transform: translateY(-3px);

    box-shadow:
      0 9px 20px rgba(72, 46, 36, 0.11);
  }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 600px) {

  .page_prizes .section_present .section_inner {
    width: calc(100% - 32px);
  }

  .page_prizes .present_heading_title {
    font-size: 25px;
  }

  .page_prizes .present_main {
    margin-top: 34px;
  }

  .page_prizes .present_main_card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 220px;
  }

  .page_prizes .present_main_image {
    padding: 28px 8px 22px 15px;
  }

  .page_prizes .present_main_image img {
    max-height: 195px;
  }

  .page_prizes .present_main_content {
    padding: 32px 14px 25px 3px;
  }

  .page_prizes .present_main_brand {
    font-size: 11px;
  }

  .page_prizes .present_main_name {
    font-size: 20px;
  }

  .page_prizes .present_main_note {
    margin-top: 11px;
    font-size: 10px;
  }

  .page_prizes .present_list_heading {
    margin-top: 48px;
  }

  .page_prizes .present_grid {
    gap: 11px;
  }

  .page_prizes .present_card_image {
    padding: 11px;
  }

  .page_prizes .present_card_content {
    min-height: 105px;
    padding: 12px 11px 13px;
  }

  .page_prizes .present_card_name {
    font-size: 12px;
  }

  .page_prizes .present_card_value {
    font-size: 12px;
  }

  .page_prizes .present_card_sponsor {
    font-size: 12px;
  }

  .page_prizes .present_card.is_wide .present_card_image {
    min-height: 160px;
  }

  .page_prizes .present_card.is_wide .present_card_content {
    min-height: 160px;
    padding: 17px 14px;
  }

  .page_prizes .present_card.is_wide .present_card_name {
    font-size: 15px;
  }

}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

@media screen and (max-width: 350px) {

  .page_prizes .section_present .section_inner {
    width: calc(100% - 24px);
  }

  .page_prizes .present_grid {
    gap: 8px;
  }

  .page_prizes .present_card_content {
    padding-right: 9px;
    padding-left: 9px;
  }

  .page_prizes .present_main_name {
    font-size: 18px;
  }

  .page_prizes .present_main_note {
    font-size: 10px;
  }

}

.page_prizes .present_list_heading_text strong {
  color: #d75c38;
  font-size: 1.08em;
  font-weight: 900;
}

/* =========================================================
   PRIZES PAGE - FINAL ADJUSTMENTS
========================================================= */


/* 譎ｯ蜩∵焚縺ｮ蠑ｷ隱ｿ */
.page_prizes .present_list_heading_text strong {
  color: #d75c38;
  font-size: 1.08em;
  font-weight: 900;
}


/* ---------------------------------------------------------
   繧ｵ繝��繝ｭ繝�う繝阪ｒ豕ｨ逶ｮ譎ｯ蜩√→縺励※蠑ｷ隱ｿ
--------------------------------------------------------- */
/*
.page_prizes .present_grid > .present_card.is_wide:first-child {
  border: 2px solid #dca15f;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98),
      rgba(255, 247, 232, 0.98)
    );

  box-shadow:
    0 8px 20px rgba(103, 66, 39, 0.11);
}

.page_prizes .present_grid > .present_card.is_wide:first-child::before {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;

  padding: 5px 9px;

  content: "注目景品";

  color: #ffffff;
  background: #d75c38;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
}*/


/* ---------------------------------------------------------
   蟷ｴ譛ｫ繧ｸ繝｣繝ｳ繝�
--------------------------------------------------------- */

.page_prizes .present_card.is_lottery {
  background:
    linear-gradient(
      135deg,
      rgba(255, 253, 246, 0.98),
      rgba(255, 244, 224, 0.98)
    );

  border-color: #dfbd83;
}

.page_prizes .present_card.is_lottery .present_card_value {
  color: #c94f35;
  font-size: 17px;
}

.page_prizes .present_heading_lead {
  color: #66564e !important;
  opacity: 1 !important;
}

.page_prizes .present_heading_lead strong {
  color: #d75c38 !important;
  opacity: 1 !important;
}

body.page_prizes .section_present .present_heading .present_heading_lead {
  color: #66564e !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  text-shadow: none !important;
}

body.page_prizes .section_present .present_heading .present_heading_lead strong {
  color: #d75c38 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* ---------------------------------------------------------
   MY PAGE - LANDSCAPE QUIZ
--------------------------------------------------------- */

.page_mypage .mypage_landscape_quiz {
  position: relative;

  margin-top: 18px;

  padding:
    22px
    17px
    18px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 247, 0.97) 0%,
      rgba(255, 246, 231, 0.97) 100%
    );

  border:
    1px solid
    rgba(154, 104, 75, 0.22);

  border-radius: 13px;

  box-shadow:
    0 5px 18px
    rgba(72, 46, 36, 0.07);
}


.page_mypage
.mypage_landscape_quiz::before {
  position: absolute;

  top: -45px;
  right: -45px;

  width: 120px;
  height: 120px;

  content: "";

  background:
    rgba(194, 59, 48, 0.045);

  border-radius: 50%;
}


.page_mypage
.mypage_landscape_quiz_heading {
  position: relative;

  z-index: 2;

  text-align: center;
}


.page_mypage
.mypage_landscape_quiz_label {
  display: block;

  color: #a34538;

  font-family:
    "Roboto",
    "Noto Sans JP",
    sans-serif;

  font-size: 10px;
  font-weight: 900;

  line-height: 1.2;

  letter-spacing: 0.12em;
}


.page_mypage
.mypage_landscape_quiz_title {
  margin-top: 5px;

  color: #473c37;

  font-size: 19px;
  font-weight: 900;

  line-height: 1.4;
}


.page_mypage
.mypage_landscape_quiz_status {
  position: relative;

  z-index: 2;

  display: flex;

  margin-top: 15px;

  align-items: center;
  justify-content: center;

  gap: 8px;
}


.page_mypage
.mypage_landscape_quiz_round,
.page_mypage
.mypage_landscape_quiz_clear {
  display: inline-flex;

  min-height: 28px;

  padding:
    5px
    11px;

  align-items: center;
  justify-content: center;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;

  line-height: 1;
}


.page_mypage
.mypage_landscape_quiz_round {
  color: #ffffff;

  background: var(--mypage-red);
}


.page_mypage
.mypage_landscape_quiz_clear {
  color: #6b574d;

  background: #fffaf2;

  border:
    1px solid
    #dcc8b7;
}


.page_mypage
.mypage_landscape_quiz_lead {
  position: relative;

  z-index: 2;

  margin-top: 14px;

  color: #5b4b44;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.7;

  text-align: center;
}


.page_mypage
.mypage_landscape_quiz_form {
  position: relative;

  z-index: 2;

  margin-top: 15px;
}


.page_mypage
.mypage_landscape_quiz_input_label {
  display: block;

  margin-bottom: 6px;

  color: #5d4b43;

  font-size: 11px;
  font-weight: 800;
}


.page_mypage
.mypage_landscape_quiz_input {
  display: block;

  width: 100%;
  height: 46px;

  padding:
    8px
    12px;

  color: #332a26;

  background: #ffffff;

  border:
    1px solid
    #d6c0ae;

  border-radius: 8px;

  outline: none;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 14px;
  font-weight: 600;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.page_mypage
.mypage_landscape_quiz_input:focus {
  border-color: #a7443a;

  box-shadow:
    0 0 0 3px
    rgba(167, 68, 58, 0.09);
}


.page_mypage
.mypage_landscape_quiz_button {
  display: flex;

  width: 100%;
  min-height: 48px;

  margin-top: 10px;

  padding:
    8px
    18px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  cursor: pointer;

  background:
    linear-gradient(
      135deg,
      #c74438 0%,
      #96332e 100%
    );

  border: 0;

  border-radius: 999px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 14px;
  font-weight: 900;

  box-shadow:
    0 5px 13px
    rgba(129, 48, 42, 0.19);
}


.page_mypage
.mypage_landscape_quiz_button:disabled {
  opacity: 0.52;

  cursor: default;
}


.page_mypage
.mypage_landscape_quiz_locked {
  position: relative;

  z-index: 2;

  display: flex;

  margin-top: 15px;

  padding:
    12px
    13px;

  align-items: center;

  gap: 10px;

  color: #67544b;

  background:
    rgba(245, 239, 230, 0.92);

  border:
    1px solid
    #ddd0c4;

  border-radius: 9px;
}


.page_mypage
.mypage_landscape_quiz_locked[hidden] {
  display: none;
}


.page_mypage
.mypage_landscape_quiz_locked_icon {
  display: flex;

  width: 25px;
  height: 25px;

  flex: 0 0 25px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: #9b877c;

  border-radius: 50%;

  font-family:
    "Roboto",
    sans-serif;

  font-size: 14px;
  font-weight: 900;
}


.page_mypage
.mypage_landscape_quiz_locked p {
  font-size: 11px;
  font-weight: 800;

  line-height: 1.55;
}


.page_mypage
.mypage_landscape_quiz_bonus {
  position: relative;

  z-index: 2;

  margin-top: 13px;

  color: #6a554c;

  font-size: 11px;
  font-weight: 800;

  line-height: 1.5;

  text-align: center;
}


.page_mypage
.mypage_landscape_quiz_bonus strong {
  color: var(--mypage-red);

  font-size: 14px;
  font-weight: 900;
}

/* =========================================================
   GOURMEGURI - QUIZ ROUND
========================================================= */


/* ---------------------------------------------------------
   PAST ROUND PANEL
--------------------------------------------------------- */

.page_mypage .mypage_cell.is_past_round {
  background:
    linear-gradient(
      145deg,
      #77736f 0%,
      #575451 100%
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, 0.08);
}


.page_mypage
.mypage_cell.is_past_round
.mypage_cell_name {
  color:
    rgba(255, 255, 255, 0.72);
}


.page_mypage
.mypage_cell.is_past_round::before {
  position: absolute;

  z-index: 1;

  inset: 0;

  content: "";

  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 5px,
      rgba(0, 0, 0, 0.025) 5px,
      rgba(0, 0, 0, 0.025) 10px
    );

  pointer-events: none;
}


.page_mypage
.mypage_cell.is_past_round::after {
  position: absolute;

  z-index: 2;

  right: 5px;
  bottom: 4px;

  content: "済";

  color:
    rgba(255, 255, 255, 0.56);

  font-size: 9px;
  font-weight: 900;

  line-height: 1;
}

/* =========================================================
   QUIZ RESULT MODAL
========================================================= */

body.is_round_modal_open {
  overflow: hidden;
}


.page_mypage
.gourmeguri_round_modal {
  position: fixed;

  z-index: 4000;

  inset: 0;

  display: flex;

  padding:
    24px
    20px
    calc(
      24px +
      env(safe-area-inset-bottom)
    );

  align-items: center;
  justify-content: center;

  background:
    rgba(42, 27, 22, 0.7);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}


.page_mypage
.gourmeguri_round_modal.is_visible {
  opacity: 1;
  visibility: visible;
}


.page_mypage
.gourmeguri_round_modal_box {
  width: 100%;
  max-width: 330px;

  padding:
    28px
    21px
    21px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      #fffdf8 0%,
      #fff4e6 100%
    );

  border:
    2px solid
    #d8bca7;

  border-radius: 18px;

  box-shadow:
    0 18px 50px
    rgba(28, 17, 13, 0.3);

  transform:
    translateY(12px)
    scale(0.97);

  transition:
    transform 0.22s ease;
}


.page_mypage
.gourmeguri_round_modal.is_visible
.gourmeguri_round_modal_box {
  transform:
    translateY(0)
    scale(1);
}


.page_mypage
.gourmeguri_round_modal.is_correct
.gourmeguri_round_modal_box {
  border-color: #d9b756;
}


.page_mypage
.gourmeguri_round_modal_icon {
  display: flex;

  width: 54px;
  height: 54px;

  margin:
    0
    auto
    10px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  background: #9a7664;

  border-radius: 50%;

  font-size: 27px;
  font-weight: 900;
}


.page_mypage
.gourmeguri_round_modal.is_correct
.gourmeguri_round_modal_icon {
  background: #c43d32;
}


.page_mypage
.gourmeguri_round_modal_title {
  display: block;

  color: #493b35;

  font-size: 22px;
  font-weight: 900;

  line-height: 1.3;
}


.page_mypage
.gourmeguri_round_modal_text {
  margin-top: 12px;

  color: #5e4c44;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.8;
}


.page_mypage
.gourmeguri_round_modal_text strong {
  color: #b53d33;

  font-size: 15px;
  font-weight: 900;
}


.page_mypage
.gourmeguri_round_modal_button {
  display: flex;

  width: 100%;
  min-height: 48px;

  margin-top: 19px;

  padding:
    8px
    18px;

  align-items: center;
  justify-content: center;

  color: #ffffff;

  cursor: pointer;

  background:
    linear-gradient(
      135deg,
      #c53e31 0%,
      #96302b 100%
    );

  border: 0;

  border-radius: 999px;

  font-size: 14px;
  font-weight: 900;
}

/* =========================================================
   PAST ROUND PANEL
   来店済み・前の風景で使用済みのマス
========================================================= */

.page_mypage .mypage_cell.is_past_round {
  /* 風景画像は表示しない */
  background-image: none !important;

  /* 使用済み感は残しつつ、かなり薄いグレー */
  background-color: #f0eeeb !important;

  /* 斜線などを消す */
  background: #f0eeeb !important;
}

/* 店舗名 */
.page_mypage .mypage_cell.is_past_round .mypage_cell_name {
  color: #5d5752 !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 700;
}

/* 「済」表示がある場合 */
.page_mypage .mypage_cell.is_past_round::after {
  color: #a49d97 !important;
  opacity: 0.75;
}


/* =========================================================
   HOW TO DETAIL - REFINED
   既存の HOW TO DETAIL セクションをこの内容に置換
========================================================= */

.page_howto_detail { background: #fffaf2; }

.rules_hero {
  padding: 58px 20px 52px;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(255,220,138,.32), transparent 58%), #fffaf2;
}
.rules_hero .section_inner,
.rules_section .section_inner { max-width: 900px; margin: 0 auto; }
.rules_hero_en, .rules_heading_en {
  display: block; margin: 0 0 8px; font-family: "Roboto",sans-serif;
  font-size: 11px; font-weight: 900; letter-spacing: .16em; color: #e87924;
}
.rules_hero_title { margin: 0; font-size: clamp(30px,7vw,46px); line-height: 1.32; font-weight: 900; color: #333; }
.rules_hero_title strong { color: #e87924; }
.rules_hero_lead { margin: 20px 0 0; font-size: 14px; line-height: 1.95; font-weight: 600; color: #555; }

.rules_section { padding: 64px 20px; }
.rules_basic, .rules_example, .rules_notes { background: #fff; }
.rules_quiz, .rules_total { background: #fff7e8; }
.rules_heading { margin-bottom: 34px; text-align: center; }
.rules_heading_title { margin: 0; font-size: clamp(24px,6vw,34px); line-height: 1.45; font-weight: 900; color: #333; }
.rules_heading_text { margin: 12px 0 0; font-size: 14px; line-height: 1.8; font-weight: 600; color: #666; }

/* BASIC TIMELINE */
.rules_steps { max-width: 680px; margin: 0 auto; }
.rules_step {
  position: relative; display: grid; grid-template-columns: 54px 76px 1fr;
  align-items: center; gap: 16px; min-height: 112px; padding: 18px 22px;
  margin-bottom: 14px; border: 1px solid #f1e8da; border-radius: 20px;
  background: #fff; box-shadow: 0 8px 24px rgba(85,60,30,.06); text-align: left;
}
.rules_step:not(:last-child)::after {
  content: ""; position: absolute; left: 48px; bottom: -15px; width: 2px; height: 15px; background: #efb05b;
}
.rules_step_number {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: #e87924; font-family: "Roboto",sans-serif;
  font-size: 15px; font-weight: 900; color: #fff;
}
.rules_step_icon { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; }
.rules_step_icon img { display: block; width: 60px; max-height: 60px; object-fit: contain; }
.rules_step_body { min-width: 0; }
.rules_step_label { display: block; margin-bottom: 3px; font-family: "Roboto",sans-serif; font-size: 9px; font-weight: 900; letter-spacing: .1em; color: #e87924; }
.rules_step_title { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 900; color: #333; }
.rules_step_text { margin: 5px 0 0; font-size: 12px; line-height: 1.7; font-weight: 600; color: #777; }
.rules_step.is_goal { border: 2px solid #f3b444; background: #fffaf0; }

/* ENTRY */
.rules_entry {
  max-width: 680px; margin: 32px auto 0; padding: 24px 24px 26px;
  border: 3px solid #f3b444; border-radius: 22px; background: #fff9e9; text-align: center;
}
.rules_entry_label {
  display: inline-block; margin: 0 0 18px; padding: 7px 18px; border-radius: 999px;
  background: #f3b444; font-size: 12px; font-weight: 900; color: #fff;
}
.rules_entry_list { display: flex; align-items: center; justify-content: center; gap: 20px; }
.rules_entry_item { display: flex; align-items: center; gap: 10px; }
.rules_entry_visit { font-size: 12px; font-weight: 800; color: #555; }
.rules_entry_visit strong { margin-right: 2px; font-family: "Roboto",sans-serif; font-size: 30px; line-height: 1; color: #e87924; }
.rules_entry_item b { font-size: 20px; font-weight: 900; color: #333; }
.rules_entry_arrow { font-size: 18px; font-weight: 900; color: #d2a05a; }

/* QUIZ INTRO */
.rules_quiz_intro {
  display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 34px;
  max-width: 650px; margin: 0 auto 36px; padding: 26px;
  border-radius: 24px; background: rgba(255,255,255,.72);
}
.rules_quiz_panel_demo {
  display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; width: 190px;
  border: 5px solid #fff; border-radius: 18px; aspect-ratio: 1/1;
  background: linear-gradient(135deg,#a7c981,#6ca1bd); box-shadow: 0 10px 26px rgba(85,60,30,.12);
}
.rules_quiz_demo_cell { border: 1px solid rgba(255,255,255,.38); background: #e87924; }
.rules_quiz_demo_cell.is_open { background: rgba(255,255,255,.08); }
.rules_quiz_intro_badge {
  display: inline-block; margin-bottom: 9px; padding: 5px 12px; border-radius: 999px;
  background: #fff0df; font-size: 11px; font-weight: 900; color: #e87924;
}
.rules_quiz_intro_text h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.5; font-weight: 900; color: #333; }
.rules_quiz_intro_text p { margin: 0; font-size: 14px; line-height: 1.8; font-weight: 600; color: #666; }
.rules_quiz_intro_text strong { color: #e87924; }

/* QUIZ FLOW */
.rules_quiz_flow { max-width: 650px; margin: 0 auto; }
.rules_quiz_flow_item {
  display: flex; align-items: center; gap: 18px; padding: 17px 20px;
  border-radius: 17px; background: #fff; box-shadow: 0 5px 18px rgba(85,60,30,.06);
}
.rules_quiz_flow_item.is_bonus { border: 2px solid #f3b444; background: #fff9e9; }
.rules_quiz_flow_number {
  flex: 0 0 38px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: #e87924; font-family: "Roboto",sans-serif; font-size: 14px; font-weight: 900; color: #fff;
}
.rules_quiz_flow_item h3 { margin: 0; font-size: 16px; font-weight: 900; color: #333; }
.rules_quiz_flow_item p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; font-weight: 600; color: #777; }
.rules_quiz_flow_arrow { display: block; margin: 5px 0; text-align: center; font-size: 17px; font-weight: 900; color: #e3a54b; }

/* RESULT */
.rules_quiz_results { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 650px; margin: 34px auto 0; }
.rules_quiz_result {
  display: flex; align-items: flex-start; gap: 13px; padding: 20px;
  border-radius: 18px; background: #fff;
}
.rules_quiz_result.is_correct { border: 2px solid #e87924; }
.rules_quiz_result.is_wrong { border: 2px solid #d6d6d6; }
.rules_quiz_result_mark {
  flex: 0 0 38px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; font-size: 23px; font-weight: 900;
}
.is_correct .rules_quiz_result_mark { background: #fff0df; color: #e87924; }
.is_wrong .rules_quiz_result_mark { background: #f1f1f1; color: #777; }
.rules_quiz_result h3 { margin: 0 0 5px; font-size: 15px; font-weight: 900; color: #333; }
.rules_quiz_result p { margin: 0; font-size: 12px; line-height: 1.75; font-weight: 600; color: #666; }
.rules_quiz_result strong { color: #e87924; }

/* TIP */
.rules_tip {
  position: relative; max-width: 650px; margin: 50px auto 0; padding: 48px 28px 28px;
  border: 4px solid #f2b53f; border-radius: 24px;
  background: radial-gradient(circle at 50% 0%,rgba(255,255,255,.9),transparent 48%),#fff5c9;
  box-shadow: 0 12px 30px rgba(177,123,25,.12); text-align: center;
}
.rules_tip_label {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 38px;
  padding: 0 20px; border-radius: 999px; background: #f2b53f; font-size: 13px; font-weight: 900; color: #fff; white-space: nowrap;
}
.rules_tip_title { margin: 0 0 17px; font-size: clamp(22px,5vw,29px); line-height: 1.45; font-weight: 900; color: #333; }
.rules_tip_title strong { font-size: 1.14em; color: #e87924; }
.rules_tip_key { margin: 0; font-size: 14px; line-height: 1.85; font-weight: 700; color: #555; }
.rules_tip_key strong { color: #d96319; }
.rules_tip_example {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 22px 0; padding: 18px; border-radius: 17px; background: #fff;
}
.rules_tip_example_left, .rules_tip_example_right { flex: 1; }
.rules_tip_example span { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 800; color: #777; }
.rules_tip_example strong { display: block; font-size: 18px; font-weight: 900; color: #333; }
.rules_tip_example_right strong { color: #e87924; }
.rules_tip_example_arrow { flex: 0 0 auto !important; margin: 0 !important; font-size: 22px !important; color: #e3a54b !important; }
.rules_tip_text { margin: 0; font-size: 13px; line-height: 1.8; font-weight: 600; color: #666; }
.rules_tip_message {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px dashed #d7ad54;
  font-size: 16px; line-height: 1.7; font-weight: 900; color: #d96319;
}
.rules_tip_caution { margin: 12px 0 0; font-size: 10px; line-height: 1.6; font-weight: 600; color: #777; }

/* EXAMPLE */
.rules_round { max-width: 620px; margin: 0 auto; padding: 22px; border-radius: 22px; background: #fff8ed; }
.rules_round.is_second { margin-top: 0; }
.rules_round_head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed #e8c999;
}
.rules_round_head span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 62px; height: 30px;
  padding: 0 12px; border-radius: 999px; background: #e87924; font-size: 12px; font-weight: 900; color: #fff;
}
.rules_round_head strong { font-size: 13px; font-weight: 800; color: #555; }
.rules_example_list { margin: 0; }
.rules_example_item {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: #fff;
}
.rules_example_item.is_correct { border: 2px solid #e87924; background: #fff4e5; }
.rules_example_shop, .rules_example_badge {
  flex: 0 0 78px; display: flex; align-items: center; justify-content: center; min-height: 34px;
  padding: 5px 9px; border-radius: 999px; background: #e87924; font-size: 12px; font-weight: 900; color: #fff;
}
.rules_example_content strong { display: block; font-size: 15px; font-weight: 900; color: #333; }
.rules_example_content p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; font-weight: 600; color: #777; }
.rules_example_arrow { display: block; margin: 5px 0; text-align: center; font-size: 17px; font-weight: 900; color: #e3a54b; }
.rules_next_round { max-width: 620px; margin: 22px auto; text-align: center; }
.rules_next_round span { display: block; font-size: 12px; font-weight: 900; color: #e87924; }
.rules_next_round strong { display: block; margin-top: 5px; font-size: 21px; font-weight: 900; color: #333; }
.rules_example_note {
  max-width: 620px; margin: 24px auto 0; padding: 17px; border-radius: 14px; background: #f5f2ed;
  text-align: center; font-size: 12px; line-height: 1.8; font-weight: 600; color: #666;
}

/* TOTAL */
.rules_total_example {
  max-width: 650px; margin: 0 auto; padding: 28px; border-radius: 22px; background: #fff;
  box-shadow: 0 8px 28px rgba(85,60,30,.08); text-align: center;
}
.rules_total_example_title { margin: 0 0 22px; font-size: 13px; line-height: 1.7; font-weight: 800; color: #666; }
.rules_total_calc { display: flex; align-items: center; justify-content: center; gap: 22px; }
.rules_total_calc_item { min-width: 130px; padding: 14px; border-radius: 14px; background: #fff8ed; }
.rules_total_calc_item span { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: #777; }
.rules_total_calc_item strong { display: block; font-size: 27px; font-weight: 900; color: #333; }
.rules_total_plus { font-size: 26px; font-weight: 900; color: #d8a052; }
.rules_total_answer { margin-top: 20px; padding: 18px; border-radius: 17px; background: #e87924; color: #fff; }
.rules_total_answer span { margin-right: 12px; font-size: 13px; font-weight: 800; }
.rules_total_answer strong { font-size: 34px; font-weight: 900; }
.rules_total_message { margin: 26px 0 0; text-align: center; font-size: 16px; line-height: 1.8; font-weight: 900; color: #555; }

/* NOTES */
.rules_notes_box { max-width: 650px; margin: 0 auto; padding: 26px; border-radius: 20px; background: #f8f6f2; }
.rules_notes_list { margin: 0; padding: 0; list-style: none; }
.rules_notes_list li {
  position: relative; margin: 0; padding: 12px 0 12px 22px; border-bottom: 1px solid #e6e0d7;
  font-size: 12px; line-height: 1.75; font-weight: 500; color: #555;
}
.rules_notes_list li:last-child { border-bottom: 0; }
.rules_notes_list li::before { content: "●"; position: absolute; top: 14px; left: 2px; font-size: 9px; color: #e87924; }
.rules_notes_list strong { color: #333; }
.rules_notes_links { display: flex; justify-content: center; gap: 12px; max-width: 620px; margin: 30px auto 0; }
.rules_notes_button {
  display: flex; align-items: center; justify-content: center; flex: 1; min-height: 54px; padding: 11px 18px;
  border: 2px solid #e87924; border-radius: 999px; background: #fff; text-decoration: none;
  font-size: 13px; font-weight: 900; color: #e87924;
}
.rules_notes_button.is_primary { background: #e87924; color: #fff; }

/* MOBILE */
@media (max-width: 767px) {
  .rules_hero { padding: 44px 18px 40px; }
  .rules_section { padding: 48px 18px; }
  .rules_heading { margin-bottom: 28px; }

  .rules_step {
    grid-template-columns: 38px 54px 1fr; gap: 11px; min-height: 92px;
    padding: 14px 13px; margin-bottom: 11px; border-radius: 17px;
  }
  .rules_step:not(:last-child)::after { left: 31px; bottom: -12px; height: 12px; }
  .rules_step_number { width: 34px; height: 34px; font-size: 12px; }
  .rules_step_icon { width: 50px; height: 50px; }
  .rules_step_icon img { width: 46px; max-height: 46px; }
  .rules_step_label { font-size: 9px; }
  .rules_step_title { font-size: 14px; line-height: 1.45; }
  .rules_step_text { margin-top: 3px; font-size: 10.5px; line-height: 1.55; }

  .rules_entry { margin-top: 26px; padding: 20px 10px 22px; }
  .rules_entry_list { gap: 8px; }
  .rules_entry_item { flex-direction: column; gap: 3px; }
  .rules_entry_visit strong { font-size: 25px; }
  .rules_entry_item b { font-size: 16px; }
  .rules_entry_arrow { font-size: 13px; }

  .rules_quiz_intro {
    grid-template-columns: 116px 1fr; gap: 16px; padding: 18px 14px; margin-bottom: 28px; border-radius: 18px;
  }
  .rules_quiz_panel_demo { width: 116px; border-width: 4px; border-radius: 14px; }
  .rules_quiz_intro_badge { font-size: 9px; }
  .rules_quiz_intro_text h3 { margin-bottom: 7px; font-size: 16px; }
  .rules_quiz_intro_text p { font-size: 11px; line-height: 1.65; }

  .rules_quiz_flow_item { gap: 12px; padding: 14px 15px; text-align: left; }
  .rules_quiz_flow_number { flex-basis: 32px; width: 32px; height: 32px; font-size: 12px; }
  .rules_quiz_flow_item h3 { font-size: 14px; }
  .rules_quiz_flow_item p { font-size: 10.5px; }

  .rules_quiz_results { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; }
  .rules_quiz_result { display: block; padding: 15px 12px; text-align: center; }
  .rules_quiz_result_mark { width: 34px; height: 34px; margin: 0 auto 8px; font-size: 20px; }
  .rules_quiz_result h3 { font-size: 13px; }
  .rules_quiz_result p { font-size: 10.5px; line-height: 1.65; }

  .rules_tip { margin-top: 44px; padding: 42px 16px 24px; }
  .rules_tip_key { font-size: 12px; }
  .rules_tip_example { gap: 7px; margin: 18px 0; padding: 14px 8px; }
  .rules_tip_example strong { font-size: 15px; }
  .rules_tip_example_arrow { font-size: 17px !important; }
  .rules_tip_text { font-size: 11.5px; }
  .rules_tip_message { font-size: 14px; }
  .rules_tip_caution { font-size: 9px; }

  .rules_round { padding: 16px 12px; }
  .rules_round_head { gap: 8px; }
  .rules_round_head span { min-width: 55px; font-size: 10px; }
  .rules_round_head strong { font-size: 11px; }
  .rules_example_item { gap: 10px; padding: 13px 10px; }
  .rules_example_shop, .rules_example_badge { flex-basis: 66px; font-size: 10px; }
  .rules_example_content strong { font-size: 13px; }
  .rules_example_content p { font-size: 10.5px; }
  .rules_next_round strong { font-size: 18px; }

  .rules_total_example { padding: 22px 14px; }
  .rules_total_calc { gap: 8px; }
  .rules_total_calc_item { min-width: 0; flex: 1; padding: 12px 7px; }
  .rules_total_calc_item span { font-size: 9px; }
  .rules_total_calc_item strong { font-size: 22px; }
  .rules_total_plus { font-size: 18px; }
  .rules_total_answer strong { font-size: 30px; }

  .rules_notes_box { padding: 17px; }
  .rules_notes_links { flex-direction: column; }
}

@media (max-width: 370px) {
  .rules_quiz_intro { grid-template-columns: 100px 1fr; gap: 12px; }
  .rules_quiz_panel_demo { width: 100px; }
  .rules_step { grid-template-columns: 34px 46px 1fr; }
  .rules_step_icon { width: 44px; }
  .rules_step_icon img { width: 40px; }
}

/* =========================================================
   HOW TO DETAIL
   2026-09-27 レイアウト微調整
========================================================= */

/* -----------------------------------------
   大見出しを少しコンパクトに
----------------------------------------- */

.page_howto_detail .rules_hero_title {
  font-size: clamp(27px, 6vw, 38px);
  line-height: 1.38;
}

.page_howto_detail .rules_heading_title {
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1.5;
}


/* -----------------------------------------
   場所当てクイズ冒頭
----------------------------------------- */

.page_howto_detail .rules_quiz_intro {
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 28px;
}

.page_howto_detail .rules_quiz_panel_demo {
  width: 170px;
}

.page_howto_detail .rules_quiz_intro_text h3 {
  font-size: 20px;
  line-height: 1.55;
}


/* -----------------------------------------
   正解・不正解
----------------------------------------- */

.page_howto_detail .rules_quiz_results {
  gap: 12px;
}

.page_howto_detail .rules_quiz_result {
  gap: 12px;
  padding: 18px;
}

.page_howto_detail .rules_quiz_result h3 {
  font-size: 15px;
  line-height: 1.5;
}

.page_howto_detail .rules_quiz_result p {
  font-size: 12px;
  line-height: 1.8;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  /* ---------------------------------------
     ページタイトル
  --------------------------------------- */

  .page_howto_detail .rules_hero_title {
    font-size: 25px;
    line-height: 1.42;
  }

  .page_howto_detail .rules_hero_lead {
    font-size: 12px;
    line-height: 1.9;
  }


  /* ---------------------------------------
     各セクションタイトル
  --------------------------------------- */

  .page_howto_detail .rules_heading_title {
    font-size: 20px;
    line-height: 1.5;
  }

  .page_howto_detail .rules_heading_text {
    font-size: 12px;
  }


  /* ---------------------------------------
     場所当てクイズ
     
     画像＋長文の横並びをやめる
  --------------------------------------- */

  .page_howto_detail .rules_quiz_intro {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 18px;

    padding: 22px 18px 24px;

    text-align: center;
  }

  .page_howto_detail .rules_quiz_panel_demo {
    width: 150px;
  }

  .page_howto_detail .rules_quiz_intro_text {
    width: 100%;
  }

  .page_howto_detail .rules_quiz_intro_badge {
    margin-bottom: 8px;
  }

  .page_howto_detail .rules_quiz_intro_text h3 {
    margin-bottom: 10px;

    font-size: 17px;
    line-height: 1.55;
  }

  .page_howto_detail .rules_quiz_intro_text p {
    font-size: 12px;
    line-height: 1.75;
  }


  /* ---------------------------------------
     正解 / 不正解

     2列は維持。
     アイコンを上に置いて本文幅を確保
  --------------------------------------- */

  .page_howto_detail .rules_quiz_results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .page_howto_detail .rules_quiz_result {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

    padding: 16px 10px 17px;

    text-align: center;
  }

  .page_howto_detail .rules_quiz_result_mark {
    flex: none;

    width: 34px;
    height: 34px;

    margin: 0 auto 2px;
  }

  .page_howto_detail .rules_quiz_result h3 {
    margin-bottom: 6px;

    font-size: 13px;
    line-height: 1.5;
  }

  .page_howto_detail .rules_quiz_result p {
    font-size: 10.5px;
    line-height: 1.75;
  }


  /* ---------------------------------------
     PRESENT CHANCE
  --------------------------------------- */

  .page_howto_detail .rules_total .rules_heading_title {
    font-size: 19px;
    line-height: 1.55;
  }


  /* ---------------------------------------
     攻略のコツ
  --------------------------------------- */

  .page_howto_detail .rules_tip_title {
    font-size: 20px;
    line-height: 1.5;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .page_howto_detail .rules_hero_title {
    font-size: 24px;
  }

  .page_howto_detail .rules_heading_title {
    font-size: 19px;
  }

  .page_howto_detail .rules_quiz_intro {
    grid-template-columns: none;
  }

  .page_howto_detail .rules_quiz_panel_demo {
    width: 145px;
  }

  .page_howto_detail .rules_total .rules_heading_title {
    font-size: 18px;
  }

}

/* =========================================================
   HOW TO DETAIL
   クイズ部分 最終バランス調整
========================================================= */

@media (max-width: 767px) {

  /* ---------------------------------------
     「場所当てクイズにも挑戦！」を少し小さく
  --------------------------------------- */

  .page_howto_detail .rules_quiz > .section_inner > .rules_heading
  .rules_heading_title {
    font-size: 18px;
    line-height: 1.5;
  }


  /* ---------------------------------------
     クイズ導入
     画像 → テキスト の完全縦並び
  --------------------------------------- */

  .page_howto_detail .rules_quiz_intro {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;

    padding: 24px 18px 26px;

    text-align: center;
  }

  .page_howto_detail .rules_quiz_panel_demo {
    width: 150px;
    margin: 0 auto;
  }

  .page_howto_detail .rules_quiz_intro_text {
    width: 100%;
    text-align: center;
  }

  .page_howto_detail .rules_quiz_intro_badge {
    display: inline-block;
    margin: 0 0 10px;
  }

  .page_howto_detail .rules_quiz_intro_text h3 {
    margin: 0 0 9px;

    font-size: 17px;
    line-height: 1.55;
  }

  .page_howto_detail .rules_quiz_intro_text p {
    margin: 0;

    font-size: 11.5px;
    line-height: 1.75;
  }


  /* ---------------------------------------
     正解 / 不正解カード
     ○× → 見出し → 説明 の縦構成
  --------------------------------------- */

  .page_howto_detail .rules_quiz_results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .page_howto_detail .rules_quiz_result {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 0;

    padding: 16px 11px 18px;

    text-align: center;
  }

  .page_howto_detail .rules_quiz_result_mark {
    flex: none;

    width: 36px;
    height: 36px;

    margin: 0 auto 10px;
  }

  .page_howto_detail .rules_quiz_result > div {
    width: 100%;
  }

  .page_howto_detail .rules_quiz_result h3 {
    margin: 0 0 8px;

    font-size: 13px;
    line-height: 1.45;
    text-align: center;
  }

  .page_howto_detail .rules_quiz_result p {
    margin: 0;

    font-size: 10.5px;
    line-height: 1.75;
    text-align: center;
  }

}

/* =========================================================
   HOWTO QUIZ 強制レイアウト修正
   必ず style.css の一番最後に追加
========================================================= */


/* -----------------------------------------
   場所当てクイズ 見出し
----------------------------------------- */

.page_howto_detail .rules_quiz .rules_heading_title {
  font-size: 20px !important;
  line-height: 1.45 !important;
}


/* -----------------------------------------
   場所当てクイズ導入

   横並びを完全解除
----------------------------------------- */

.page_howto_detail .rules_quiz_intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  grid-template-columns: none !important;

  gap: 16px !important;

  padding: 24px 20px 26px !important;

  text-align: center !important;
}


/* マス画像 */

.page_howto_detail .rules_quiz_panel_demo {
  display: grid !important;

  width: 150px !important;
  height: 150px !important;

  margin: 0 auto !important;

  flex: none !important;
}


/* 説明文 */

.page_howto_detail .rules_quiz_intro_text {
  display: block !important;

  width: 100% !important;
  max-width: 280px !important;

  margin: 0 auto !important;

  text-align: center !important;
}


/* 「マスを開けると…」 */

.page_howto_detail .rules_quiz_intro_badge {
  display: inline-block !important;

  margin: 0 auto 10px !important;
}


/* 手稲の風景が少しずつ見えてくる */

.page_howto_detail .rules_quiz_intro_text h3 {
  margin: 0 0 8px !important;

  font-size: 16px !important;
  line-height: 1.55 !important;

  text-align: center !important;
}


/* 「ここだ！」と思ったら */

.page_howto_detail .rules_quiz_intro_text p {
  margin: 0 !important;

  font-size: 11px !important;
  line-height: 1.75 !important;

  text-align: center !important;
}


/* =========================================================
   正解 / 不正解カード
========================================================= */

.page_howto_detail .rules_quiz_results {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 10px !important;
}


/* カードそのもの */

.page_howto_detail .rules_quiz_result {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 0 !important;

  padding: 16px 10px 18px !important;

  text-align: center !important;
}


/* ○ × */

.page_howto_detail .rules_quiz_result_mark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: none !important;

  width: 38px !important;
  height: 38px !important;

  margin: 0 auto 10px !important;
}


/* ○×の下に本文を置く */

.page_howto_detail .rules_quiz_result > div {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  text-align: center !important;
}


/* 正解したら / 不正解だったら */

.page_howto_detail .rules_quiz_result h3 {
  display: block !important;

  width: 100% !important;

  margin: 0 0 7px !important;

  font-size: 13px !important;
  line-height: 1.5 !important;

  text-align: center !important;
}


/* 説明 */

.page_howto_detail .rules_quiz_result p {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;

  font-size: 10.5px !important;
  line-height: 1.7 !important;

  text-align: center !important;
}

/* =========================================================
   攻略のコツ 改行調整
========================================================= */

@media (max-width: 767px) {

  /* 「少ないマスで正解するほど」を1行に */
  .page_howto_detail .rules_tip_title {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  /* HTML内のbrは残し、
     「少ないマスで正解するほど」までは折り返さない */
  .page_howto_detail .rules_tip_title {
    white-space: nowrap;
  }

  /* チャンスUP！の前ではHTMLのbrで改行 */
  .page_howto_detail .rules_tip_title strong {
    white-space: nowrap;
  }


  /* 「2マスで正解！」を1行に */
  .page_howto_detail .rules_tip_example_left strong {
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* 「残り14マス」も1行を維持 */
  .page_howto_detail .rules_tip_example_right strong {
    font-size: 14px !important;
    white-space: nowrap !important;
  }

}

/* =========================================================
   攻略のコツ：改行を確実に修正
========================================================= */

@media (max-width: 767px) {

  /* ---------------------------------------
     少ないマスで正解するほど
     ↓
     チャンスUP！
  --------------------------------------- */

  .page_howto_detail .rules_tip_title {
    font-size: 17px !important;
    line-height: 1.55 !important;
    letter-spacing: -0.03em !important;
  }

  /* 1行目を収められる幅を確保 */
  .page_howto_detail .rules_tip {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }


  /* ---------------------------------------
     2マスで正解！ → 残り14マス
  --------------------------------------- */

  .page_howto_detail .rules_tip_example {
    display: grid !important;

    /* 左右を均等に */
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 4px !important;

    padding: 16px 8px !important;
  }


  .page_howto_detail .rules_tip_example_left,
  .page_howto_detail .rules_tip_example_right {
    width: 100% !important;
    min-width: 0 !important;
  }


  /* 小さい「たとえば」等 */
  .page_howto_detail .rules_tip_example_left > span:not(.rules_tip_example_arrow),
  .page_howto_detail .rules_tip_example_right > span {
    font-size: 9px !important;
    white-space: nowrap !important;
  }


  /* 2マスで正解！ */
  .page_howto_detail .rules_tip_example_left strong {
    display: block !important;

    font-size: 13px !important;
    line-height: 1.4 !important;

    letter-spacing: -0.04em !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }


  /* 残り14マス */
  .page_howto_detail .rules_tip_example_right strong {
    display: block !important;

    font-size: 13px !important;
    line-height: 1.4 !important;

    letter-spacing: -0.04em !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }


  /* → */
  .page_howto_detail .rules_tip_example_arrow {
    display: block !important;

    width: 24px !important;

    margin: 0 !important;

    text-align: center !important;

    font-size: 18px !important;
    line-height: 1 !important;
  }

}

/* =========================================================
   攻略のコツ 改行 最終修正
========================================================= */

@media (max-width: 767px) {

  /* =====================================
     攻略カードの左右余白を減らして
     タイトルが使える横幅を増やす
  ===================================== */

  .page_howto_detail .rules_tip {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }


  /* =====================================
     「少ないマスで正解するほど」
     絶対に1行
  ===================================== */

  .page_howto_detail .rules_tip_title {
    width: calc(100% + 16px) !important;
    max-width: none !important;

    margin-left: -8px !important;
    margin-right: -8px !important;

    font-size: 16px !important;
    line-height: 1.5 !important;

    letter-spacing: -0.06em !important;
  }

  .page_howto_detail .rules_tip_title_line {
    display: block !important;

    width: 100% !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .page_howto_detail .rules_tip_title strong {
    display: block !important;

    margin-top: 3px !important;

    font-size: 25px !important;
    line-height: 1.35 !important;

    letter-spacing: 0 !important;

    white-space: nowrap !important;
  }


  /* =====================================
     2マスで正解！ → 残り14マス

     左を少し広くする
  ===================================== */

  .page_howto_detail .rules_tip_example {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.15fr)
      22px
      minmax(0, 1fr) !important;

    column-gap: 2px !important;

    padding-left: 6px !important;
    padding-right: 6px !important;
  }


  .page_howto_detail .rules_tip_example_left,
  .page_howto_detail .rules_tip_example_right {
    min-width: 0 !important;
    width: 100% !important;
  }


  /* 2マスで正解！ */

  .page_howto_detail .rules_tip_example_left strong {
    display: block !important;

    font-size: 12px !important;
    line-height: 1.4 !important;

    letter-spacing: -0.08em !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }


  /* 残り14マス */

  .page_howto_detail .rules_tip_example_right strong {
    display: block !important;

    font-size: 12px !important;
    line-height: 1.4 !important;

    letter-spacing: -0.05em !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

}

/* 攻略のコツ：文字サイズ調整 */
.page_howto_detail .rules_tip_title {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

/* チャンスUP！は大きさを維持 */
.page_howto_detail .rules_tip_title strong {
  font-size: 24px !important;
  line-height: 1.4 !important;
}

/* 2マスで正解！ */
.page_howto_detail .rules_tip_example_left strong {
  font-size: 10px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

/* 残り14マス */
.page_howto_detail .rules_tip_example_right strong {
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

/* =========================================================
   GLOBAL HAMBURGER MENU
   既存UIから独立した全ページ共通メニュー
========================================================= */

.gg_global_menu {
  position: relative;
  z-index: 3000;
}

/* -------------------------
   ハンバーガーボタン
------------------------- */

.gg_global_menu_button {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));

  z-index: 3002;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  padding: 0;

  appearance: none;
  -webkit-appearance: none;

  background: rgba(255, 255, 255, 0.96);

  border: 1px solid rgba(115, 93, 81, 0.14);
  border-radius: 50%;

  box-shadow:
    0 3px 12px rgba(63, 43, 32, 0.12),
    0 1px 3px rgba(63, 43, 32, 0.06);

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.gg_global_menu_button:active {
  transform: scale(0.95);
}

/* 3本線 */

.gg_global_menu_button_lines {
  position: relative;

  display: block;

  width: 22px;
  height: 16px;
}

.gg_global_menu_button_lines::before,
.gg_global_menu_button_lines::after,
.gg_global_menu_button_line {
  position: absolute;
  left: 0;

  width: 22px;
  height: 2px;

  background: #735d51;
  border-radius: 999px;

  content: "";
}

.gg_global_menu_button_lines::before {
  top: 0;
}

.gg_global_menu_button_line {
  top: 7px;
}

.gg_global_menu_button_lines::after {
  top: 14px;
}


/* -------------------------
   背景オーバーレイ
------------------------- */

.gg_global_menu_overlay {
  position: fixed;
  inset: 0;

  z-index: 3000;

  visibility: hidden;

  background: rgba(40, 31, 26, 0.38);

  opacity: 0;

  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}


/* -------------------------
   ドロワー
------------------------- */

.gg_global_menu_drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;

  z-index: 3001;

  width: min(84vw, 340px);

  padding:
    calc(24px + env(safe-area-inset-top))
    24px
    calc(30px + env(safe-area-inset-bottom));

  overflow-y: auto;

  background: #fffdf9;

  box-shadow: -8px 0 30px rgba(63, 43, 32, 0.14);

  transform: translateX(105%);

  transition: transform 0.3s ease;
}


/* -------------------------
   閉じるボタン
------------------------- */

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

  width: 42px;
  height: 42px;

  margin: 0 0 22px auto;
  padding: 0;

  appearance: none;
  -webkit-appearance: none;

  color: #735d51;

  font-family: inherit;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;

  background: transparent;
  border: 0;

  cursor: pointer;
}


/* -------------------------
   メニュータイトル
------------------------- */

.gg_global_menu_heading {
  margin-bottom: 24px;
}

.gg_global_menu_en {
  display: block;

  margin-bottom: 6px;

  color: #b59b89;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.gg_global_menu_title {
  margin: 0;

  color: #5f4b40;

  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
}


/* -------------------------
   メニュー項目
------------------------- */

.gg_global_menu_list {
  margin: 0;
  padding: 0;

  list-style: none;
}

.gg_global_menu_item {
  margin: 0;
  padding: 0;

  border-bottom: 1px solid rgba(115, 93, 81, 0.12);
}

.gg_global_menu_link {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 58px;

  padding: 10px 30px 10px 2px;

  color: #5f4b40;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;

  text-decoration: none;
}

.gg_global_menu_link::after {
  position: absolute;
  top: 50%;
  right: 4px;

  color: #b59b89;

  font-size: 18px;

  content: "›";

  transform: translateY(-52%);
}


/* -------------------------
   Coming Soon
------------------------- */

.gg_global_menu_link.is_coming_soon {
  display: block;

  padding-top: 12px;
  padding-bottom: 12px;

  color: #9a8e87;

  pointer-events: none;
}

.gg_global_menu_link.is_coming_soon::after {
  display: none;
}

.gg_global_menu_coming {
  display: block;

  margin-top: 2px;

  color: #c0aaa0;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}


/* -------------------------
   OPEN
------------------------- */

.gg_global_menu.is_open .gg_global_menu_overlay {
  visibility: visible;

  opacity: 1;
}

.gg_global_menu.is_open .gg_global_menu_drawer {
  transform: translateX(0);
}


/* メニュー表示中の背景スクロールを止める */

html.gg_menu_open,
html.gg_menu_open body {
  overflow: hidden;
}


/* -------------------------
   PC
------------------------- */

@media (min-width: 768px) {
  .gg_global_menu_button {
    top: 20px;
    right: 20px;

    width: 56px;
    height: 56px;
  }

  .gg_global_menu_drawer {
    width: 360px;

    padding-right: 30px;
    padding-left: 30px;
  }

  .gg_global_menu_link:hover {
    color: #9b725d;
  }
  .gg_global_menu_link_apply {
  font-weight: 700;
}
}

/* =========================================================
   HAMBURGER → CLOSE
   メニューOPEN時に3本線を×へ変形
========================================================= */

.gg_global_menu_button_lines::before,
.gg_global_menu_button_lines::after,
.gg_global_menu_button_line {
  transition:
    top 0.22s ease,
    transform 0.22s ease,
    opacity 0.15s ease;
}

/* 真ん中の線を消す */
.gg_global_menu.is_open .gg_global_menu_button_line {
  opacity: 0;
}

/* 上の線 → 斜め */
.gg_global_menu.is_open .gg_global_menu_button_lines::before {
  top: 7px;
  transform: rotate(45deg);
}

/* 下の線 → 逆斜め */
.gg_global_menu.is_open .gg_global_menu_button_lines::after {
  top: 7px;
  transform: rotate(-45deg);
}

/* =========================================================
   GLOBAL MENU
   プレゼント応募 無効状態
========================================================= */

.gg_global_menu_link_apply.is_disabled {
  color: #b9b0aa;

  cursor: default;

  pointer-events: none;
}

.gg_global_menu_link_apply.is_disabled::after {
  display: none;
}

.gg_global_menu_link_apply.is_disabled::before {
  margin-right: 8px;

  color: #c8beb8;

  font-size: 12px;
  font-weight: 600;

  content: "4店舗から";
}

/* =========================================================
   SPONSOR LINKS
========================================================= */

.page_sponsors .sponsor_links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.page_sponsors .sponsor_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  min-height: 30px;
  padding: 6px 10px;

  color: #654238;
  background: #fff;

  border: 1px solid rgba(101, 66, 56, 0.25);
  border-radius: 999px;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;

  text-decoration: none;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.page_sponsors .sponsor_link:hover {
  background: #f8f2ed;
  border-color: rgba(101, 66, 56, 0.45);
  transform: translateY(-1px);
}

.page_sponsors .sponsor_link_icon {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* 景品スポンサー */
.page_sponsors .sponsor_group.is_prize .sponsor_links {
  margin-top: 8px;
}