@charset "UTF-8";

.base {
  /* 【部分重置】 */
  /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
  */
}
.base a,
.base address,
.base article,
.base aside,
.base audio,
.base b,
.base blockquote,
.base body,
.base canvas,
.base caption,
.base cite,
.base code,
.base dd,
.base del,
.base details,
.base dfn,
.base div,
.base dl,
.base dt,
.base em,
.base embed,
.base fieldset,
.base figcaption,
.base figure,
.base footer,
.base form,
.base h1,
.base h2,
.base h3,
.base h4,
.base h5,
.base h6,
.base header,
.base hgroup,
.base html,
.base i,
.base iframe,
.base img,
.base ins,
.base kbd,
.base label,
.base legend,
.base li,
.base mark,
.base menu,
.base nav,
.base object,
.base ol,
.base output,
.base p,
.base pre,
.base q,
.base ruby,
.base s,
.base samp,
.base section,
.base small,
.base span,
.base strike,
.base strong,
.base sub,
.base summary,
.base sup,
.base table,
.base tbody,
.base td,
.base tfoot,
.base th,
.base thead,
.base time,
.base tr,
.base tt,
.base u,
.base ul,
.base var,
.base video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  line-height: 1;
}
.base article,
.base aside,
.base details,
.base figcaption,
.base figure,
.base footer,
.base header,
.base menu,
.base nav,
.base section {
  display: block;
}
.base body {
  line-height: 1;
}
.base ol,
.base ul {
  list-style: none;
  margin: 0;
}
.base blockquote,
.base q {
  quotes: none;
}
.base blockquote:after,
.base blockquote:before,
.base q:after,
.base q:before {
  content: "";
  content: none;
}
.base table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 【變數】 */
:root {
  --root: 16px;
  --wh: #fff;
  --vanta: #000;
  --cht-header: 116px;
}

/* 【樣式】 */
*,
html {
  box-sizing: border-box;
  font-size: var(--root);
}

img {
  vertical-align: bottom;
}

[hidden],
[omitted] {
  display: none !important;
}

[pc] {
  display: block;
}

[mb] {
  display: none !important;
}

.rwd,
[rwd] {
  width: 100%;
}

dl,
ol,
ul {
  margin-bottom: 0;
}

.dec {
  position: absolute;
}

.dec01 {
  left: 0;
  transform: scale(0.8);
}

.dec02 {
  top: 70vw;
  right: 0;
  transform: scale(0.8);
}

.dec03 {
  position: absolute;
  top: 133vw;
  z-index: 0;
  width: 100%;
  height: 49.3vw;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../imgs/dec03.png");
}

.dec04 {
  display: none;
  position: absolute;
  right: 0;
  top: 55%;
  z-index: -1;
  transform: scale(0.8);
}

.dec04.show {
  display: block;
}

.dec01-2 {
  display: none;
  position: absolute;
  left: 0;
  top: 70%;
  z-index: -1;
  transform: scale(0.8);
}

.dec01-2.show {
  display: block;
}

.dec03-2 {
  display: none;
  left: 0;
  top: 76%;
  z-index: -1;
}

.dec03-2.show {
  display: block;
}

.dec04-2 {
  display: none;
  position: absolute;
  right: 0;
  top: 90%;
  z-index: -1;
  transform: scale(0.8);
}

.dec04-2.show {
  display: block;
}

.menu ul li {
  position: relative;
}

.menu ul li .campaign-btn:hover + .nav-sec {
  display: block;
}

.nav-sec {
  position: absolute;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  display: none;
}

.nav-sec:hover {
  display: block;
}

.nav-sec a {
  position: absolute;
  left: 0;
  width: 100%;
  height: 33.34%;
}

.nav-sec a:nth-of-type(1) {
  top: 0;
}

.nav-sec a:nth-of-type(2) {
  top: 33.33%;
}

.nav-sec a:nth-of-type(3) {
  top: 66.66%;
}

.base {
  --indigo: #02339a;
  --aqua: #2aabe4;
  --tb-bdr: #cecece;
  font-family:
    "Noto Sans TC", "微軟正黑體", "Microsoft Jhenghei", "SF Pro TC",
    "PingFang TC", Arial, sans-serif;
  background: rgb(108, 182, 255);
  background: linear-gradient(180deg, #acc2dd 0%, #e5f0f9 100%);
}

.base .box {
  position: relative;
  top: -6vw;
  z-index: 1;
}

.base section + section {
  margin-top: 3.9vw;
}
.base .aligner {
  margin: 0 auto;
  width: 67.7vw;
}
.base .frame {
  border-radius: 2.6vw;
  padding: 1vw;
}
.base .frame .fr-ctn {
  --naming: "frame-container";
}
.base .frame .fr-ctn article {
  text-align: center;
  background: var(--wh);
  width: 100%;
  border-radius: 0 0 1.9vw 1.9vw;
  color: var(--vanta);
  overflow: hidden;
}

.base .frame .fr-ctn article .terms-title-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 3vw auto 1vw;
}

.base .frame .fr-ctn article em {
  font-weight: 900;
  font-size: 2vw;
  line-height: 1.5;
  display: block;
  text-align: center;
  margin: 1.2vw auto;
}

.base .frame .fr-ctn article p {
  font-weight: 700;
  font-size: 1.35vw;
  line-height: 1.5;
  display: block;
  text-align: left;
}

.base .frame .fr-ctn article p {
  font-weight: 400;
}
.base .frame .fr-ctn article ul + em {
  margin-top: 2em;
}
.base .frame .fr-ctn article ul {
  width: 85%;
  margin: auto;
  text-align: left;
}
.base .frame .fr-ctn article ul li {
  list-style-type: decimal;
  list-style-position: outside;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
}
.base .frame .fr-ctn article ul li a {
  text-decoration: underline;
  color: var(--aqua);
}
.base .frame .fr-ctn article ul li sub {
  display: inline-block;
  font-size: 0.7vw;
}
.base .frame .fr-ctn article ul li footer {
  font-size: 0.7vw;
  padding: 0.25em 0;
}
.base .frame .fr-ctn article ul li table {
  border-collapse: collapse;
  border: 1px solid var(--tb-bdr);
  border-width: 1px 0 0 1px;
  margin: 0.25em 0;
}
.base .frame .fr-ctn article ul li table th,
.base .frame .fr-ctn article ul li table td {
  border: 1px solid var(--tb-bdr);
  border-width: 0 1px 1px 0;
  padding: 0.3em;
  line-height: 1.5;
  text-align: center;
}
.base .frame .fr-ctn article ul li table td:not([class]) {
  width: 3%;
}
.base .frame .fr-ctn article ul li table .cate {
  width: 18%;
  font-weight: 700;
}
.base .frame .fr-ctn article ul li table .gift {
  text-align: left;
}

.base .frame .gift-banner {
  background-image: url("../imgs/award-banner.png");
  background-size: 100%;
  width: 100%;
  aspect-ratio: 1300 / 745;
  margin: auto;
  background-position: center;
  background-repeat: no-repeat;
}
.base .frame .fr-ctn article ul li table .gift strong {
  font-weight: 700;
  display: block;
}
.base .frame .fr-ctn article ul li table .gift mark {
  background: transparent;
  font-size: max(12px, 0.8vw);
}
.base .frame .fr-ctn article ul li table .price {
  width: 10%;
}
.base .frame .fr-ctn article ul li table .qty {
  width: 10%;
}
.base .frame .fr-ctn article ul li table thead th {
  background: #ececec;
}
.base .frame .fr-ctn article ul li table tbody {
  --name: "";
}
.base .frame .fr-ctn article ul li .list {
  position: relative;
  display: flex;
  line-height: 1.5;
}
.base .frame .fr-ctn article ul li .list .affix {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  top: 0.275em;
}
.base .frame .fr-ctn article ul li .list blockquote {
  padding-left: 1.3em;
  line-height: 1.5;
}
.base .frame .fr-ctn article ul li .list blockquote strong {
  font-weight: 700;
}
.base .frame .fr-ctn article ul li .list.bullet .affix::before {
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-radius: 100%;
  background: var(--vanta);
}
.base .frame .fr-ctn article ul li .list.check .affix::before {
  content: "";
  width: 1em;
  height: 1em;
  background: url(../imgs/icon_check.svg) center/cover no-repeat;
}
.base .frame .fr-ctn article ul li dl {
  position: relative;
  display: flex;
  flex-direction: row;
}
.base .frame .fr-ctn article ul li dl dt,
.base .frame .fr-ctn article ul li dl dd {
  line-height: 1.5;
}
.base .frame .fr-ctn article ul li dl dt {
  position: absolute;
}
.base .frame .fr-ctn article ul li dl dd {
  padding-left: 1.3em;
}
.base .frame .fr-ctn article[role="img"] {
  max-height: unset;
  padding: 0;
}
.base .frame .fr-ctn article[role="img"] img {
  vertical-align: bottom;
}
.base .frame .fr-ctn .bellow {
  position: relative;
  height: 20vw;
  transition: all 0.1s ease-out;
}

.base .frame .fr-ctn .bellow#bellow-notice {
  height: 39vw;
}

.base .frame .fr-ctn .title3 {
  width: 45%;
  height: auto;
}

.base .frame .fr-ctn .bellow#bellow-notice .activity-title {
  width: 60%;
  height: auto;
  margin: 3vw auto;
}

.base .frame .fr-ctn article .rule-container {
  width: 100%;
  box-sizing: border-box;
  --rule-label-w: 9vw;
  --rule-gap: 30px;
  --rule-pad-x: 2.5vw;
  position: relative;
  display: grid;
  grid-template-columns: var(--rule-label-w) 1fr;
  column-gap: var(--rule-gap);
  row-gap: 10px;
  align-items: start;
  margin: 1em auto 0;
  padding: 0 var(--rule-pad-x);
}

.base .frame .fr-ctn article .rule-container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--rule-pad-x) + var(--rule-label-w) + var(--rule-gap) / 2);
  width: 0.5px;
  background: #505050;
}

.base .frame .fr-ctn article .rule-label {
  font-size: 1.4rem;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.base .frame .fr-ctn article .rule-label:empty {
  text-align-last: left;
}

.base .frame .fr-ctn article .rule-content {
  font-size: 1.5rem;
  font-weight: 500;
  text-align: left;
}
.base .frame .fr-ctn article .rule-content.rule-body-title {
  font-size: 1.6rem;
  white-space: nowrap;
}

.base .frame .fr-ctn article .rule-content p {
  font-size: inherit;
  font-weight: inherit;
  margin: 0 0 0.6em;
}
.base .frame .fr-ctn article .rule-content p:last-child {
  margin-bottom: 0;
}

.base .frame .fr-ctn article .rule-content p.rule-num-item {
  position: relative;
  padding-left: 2em;
}

.base .frame .fr-ctn article .rule-content p.rule-num-item-sublist {
  padding-left: 4em;
}
.base .frame .fr-ctn article .rule-num-item .rule-num {
  position: absolute;
  left: 0;
  top: 0;
}

.base .frame .fr-ctn article .rule-sublist {
  width: auto;
  margin: 0 0 0.6em;
  list-style: none;
}
.base .frame .fr-ctn article .rule-sublist li {
  position: relative;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.5;
  list-style-type: none;
  padding-left: 1.1em;
  margin-bottom: 0.4em;
}
.base .frame .fr-ctn article .rule-sublist li:last-child {
  margin-bottom: 0;
}
.base .frame .fr-ctn article .rule-sublist li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.base .frame .fr-ctn article .rule-dot-list,
.base .frame .fr-ctn article .rule-check-list,
.base .frame .fr-ctn article .rule-alpha-list {
  width: auto;
  list-style: none;
  margin: 0 0 0.6em;
}
.base .frame .fr-ctn article .rule-dot-list li,
.base .frame .fr-ctn article .rule-check-list li,
.base .frame .fr-ctn article .rule-alpha-list li {
  position: relative;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.5;
  list-style-type: none;
  margin-bottom: 0.4em;
}
.base .frame .fr-ctn article .rule-dot-list li:last-child,
.base .frame .fr-ctn article .rule-check-list li:last-child,
.base .frame .fr-ctn article .rule-alpha-list li:last-child {
  margin-bottom: 0;
}

.base .frame .fr-ctn article .rule-dot-list {
  margin-left: 2em;
}
.base .frame .fr-ctn article .rule-dot-list li {
  font-weight: 700;
  padding-left: 1.2em;
}
.base .frame .fr-ctn article .rule-dot-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.7em;
}

.base .frame .fr-ctn article .rule-check-list {
  margin-left: 3.2em;
}
.base .frame .fr-ctn article .rule-check-list li {
  padding-left: 1.4em;
}
.base .frame .fr-ctn article .rule-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
}

.base .frame .fr-ctn article .rule-alpha-list {
  margin-left: 2em;
}
.base .frame .fr-ctn article .rule-alpha-list li {
  padding-left: 1.6em;
}
.base .frame .fr-ctn article .rule-alpha-list .rule-alpha {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.base .frame .fr-ctn .bellow .btn-read-more {
  position: absolute;
  z-index: 5;
  bottom: 0;
  appearance: none;
  display: inline-flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  border: none;
  border-radius: 0 0 1.6vw 1.6vw;
  background: #d1e9f9;
  padding: 0.5em 1.25em;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.base .frame .fr-ctn .bellow .btn-read-more span {
  font-size: 1.3vw;
  font-weight: 900;
  line-height: 1;
}
/* .base .frame .fr-ctn .bellow .btn-read-more span::before {
  content: "閱讀更多";
} */
.base .frame .fr-ctn .bellow .btn-read-more i {
  display: block;
  width: 2.5vw;
  height: 2.5vw;
  margin: auto 0.5vw;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../imgs/arrow.png");
  transition: all 0.1s ease-in-out;
}
.base .frame .fr-ctn .bellow.toggled {
  height: auto;
  overflow: visible;
}
.base .frame .fr-ctn .bellow#bellow-notice.toggled {
  height: auto;
}
.base .frame .fr-ctn .bellow.toggled::after {
  opacity: 0;
}
/* .base .frame .fr-ctn .bellow.toggled .btn-read-more span::before {
  content: "收合區塊";
} */
.base .frame .fr-ctn .bellow.toggled .btn-read-more {
  position: static;
  left: auto;
  transform: none;
  margin: 2vw auto 0;
}
.base .frame .fr-ctn .bellow.toggled .btn-read-more i {
  transform: rotate(180deg);
}
.base .frame .fr-flex {
  display: flex;
  flex-direction: row;
  gap: 0 1vw;
}
.base .frame .fr-item {
  width: 50%;
  background: var(--wh);
  border-radius: 1.9vw;
}
.base .frame .fr-item figure {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 1vw;
}
.base .frame .fr-item figure figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 15vw;
  width: 50%;
}
.base .frame .fr-item figure figcaption h3,
.base .frame .fr-item figure figcaption span {
  font-size: 2vw;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.15em;
}
.base .frame .fr-item figure figcaption span em {
  font-size: 157%;
  display: inline-block;
  vertical-align: baseline;
}
.base .frame .fr-item figure figcaption span small {
  display: block;
  font-size: 52.63%;
  letter-spacing: 0.075em;
  line-height: 1.2;
}
.base .frame .fr-item figure img {
  width: 14.4vw;
}
.base .frame .fr-item:first-of-type {
  border-top-left-radius: 0;
}
.base .frame .fr-item:last-of-type {
  border-top-right-radius: 0;
}
.base .frame .fr-item:last-of-type figure figcaption h3 {
  padding: 1vw 0;
}
.base .frame .fr-item.lone {
  width: 100%;
}
.base .frame .fr-item.lone figure {
  flex-direction: column;
}
.base .frame .fr-item.lone figure figcaption {
  width: auto;
  height: auto;
}
.base .frame .fr-item.lone figure figcaption h3 {
  padding: 0.5em 0 1em;
}
.base .frame .fr-item.lone figure figcaption span small {
  display: inline-block;
}
.base .frame .fr-item.lone figure img {
  width: 60.6vw;
}
.base .frame .fr-item.lone figure cite {
  font-size: max(12px, 0.6vw);
  line-height: 1.2;
  display: block;
  padding: 0.5em 0 1.5em;
  width: 94%;
}
.base .frame .fr-item.lone figure .slate {
  font-size: 2.5vw;
  font-weight: 700;
  color: #0368d4;
  text-align: center;
  background: linear-gradient(180deg, #fbd0d9 0%, #f0aeba 100%);
  border-radius: 3.8vw;
  width: 100%;
  padding: 1.6vw 0;
}
.base h2[role="heading"] {
  font-size: 3.1vw;
  font-weight: 900;
  color: var(--wh);
  text-align: center;
  letter-spacing: 0.567em;
  padding: 0.6vw 0;
  border-radius: 2.6vw 2.6vw 0 0;
  background-color: #fde9b8;
}
.base h2[role="heading"] img {
  width: 20vw;
}
.base .menu {
  position: absolute;
  top: 41vw;
  left: 0;
  right: 0;
  z-index: 9;
  background: transparent;
  padding-bottom: 2.1vw;
  margin: auto;
}
.base .menu ul {
  display: flex;
  justify-content: center;
  gap: 0 1.5vw;
}
.base .menu ul li a {
  display: block;
}
.base .menu ul li a span {
  color: var(--indigo);
  font-weight: 900;
  font-size: 2.7vw;
  background: linear-gradient(180deg, #fefefe 0%, #b3b5b4 100%);
  padding: 0.8vw 3.1vw 1vw;
  display: block;
  white-space: nowrap;
}
.base .menu ul li a:hover {
  text-decoration: none;
}
.base .menu ul li a:hover span {
  text-decoration: none;
}
.base .kv {
  position: relative;
}
.base .kv img {
  position: relative;
  z-index: 1;
}
.base .kv::after {
  content: "";
  position: absolute;
  right: 3vw;
  top: 5%;
  width: 60vw;
  height: 45vw;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 55% 45%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.95) 10%,
    rgba(255, 250, 220, 0.8) 25%,
    rgba(255, 250, 220, 0.45) 45%,
    rgba(255, 250, 220, 0.15) 58%,
    rgba(255, 250, 220, 0) 62%
  );
  filter: blur(2px);
  mix-blend-mode: screen;
}
.base .kv .btn-menu {
  display: none;
}
.base .notice .aligner {
  padding-bottom: 4vw;
}
section#footer {
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 1750px) {
  .base .aligner {
    max-width: 67.7vw;
  }
}

@media screen and (min-width: 920px) and (max-width: 1200px) {
  .base .frame .fr-ctn article .rule-container {
    --rule-label-w: 11vw;
  }

  .base .frame .fr-ctn article .rule-label,
  .base .frame .fr-ctn article .rule-content.rule-body-title {
    font-size: 1rem;
  }

  .base .frame .fr-ctn article .rule-content,
  .base .frame .fr-ctn article ul li {
    font-size: 1rem;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1750px) {
  .base .frame .fr-ctn .bellow {
    height: 23vw;
  }

  .base .frame .fr-ctn article .rule-container {
    --rule-label-w: 11vw;
  }

  .base .frame .fr-ctn .bellow#bellow-notice {
    height: 40vw;
  }

  .base .frame .fr-ctn article .rule-label,
  .base .frame .fr-ctn article .rule-content.rule-body-title {
    font-size: 1.3rem;
  }

  .base .frame .fr-ctn article .rule-content,
  .base .frame .fr-ctn article ul li {
    font-size: 1.3rem;
  }
}

@media screen and (min-width: 767px) and (max-width: 920px) {
  .base .aligner {
    width: 85vw;
  }

  .base .frame .fr-ctn .bellow .btn-read-more span {
    font-size: 1.3rem;
  }

  .base .frame .fr-ctn .bellow {
    height: 50vw;
  }

  .base .frame .fr-ctn article .rule-container {
    --rule-label-w: 15vw;
  }

  .base .frame .fr-ctn article .rule-label,
  .base .frame .fr-ctn article .rule-content.rule-body-title {
    font-size: 1.1rem;
  }

  .base .frame .fr-ctn article .rule-content {
    font-size: 1.1rem;
  }

  .base .frame .fr-ctn .bellow .btn-read-more i {
    width: 5vw;
    height: 5vw;
  }

  .base .frame .fr-ctn article ul li {
    font-size: 1.1rem;
  }

  .base .frame .fr-ctn .bellow#bellow-notice {
    height: 73vw;
  }
}

/* 【MEDIA QUERIES】 */
@media screen and (max-width: 750px) {
  [pc] {
    display: none !important;
  }
  [mb] {
    display: block !important;
  }
  .dec,
  .dec03,
  .dec04,
  .dec04-2 {
    display: none;
    opacity: 0;
  }
  .nav-sec {
    width: 30vw;
  }
  .base .kv::after {
    display: none;
  }
  .base {
    background: linear-gradient(180deg, #8ab6ff 0%, #b9e0ff 100%);
  }
  .base section + section {
    margin-top: 0;
  }
  .base .aligner {
    margin: 0 auto;
    width: 94.7vw;
  }
  .base .frame {
    border-radius: 6.7vw;
    padding: 2.7vw;
  }
  .base .frame .fr-ctn article {
    border-radius: 0 0 4.8vw 4.8vw;
  }
  .base .frame .fr-ctn article .rule-container {
    --rule-label-w: 16vw;
    --rule-gap: 7vw;
  }
  .base .frame .fr-ctn article em,
  .base .frame .fr-ctn article p {
    font-size: 2.7vw;
  }
  .base .frame .fr-ctn article ul li {
    font-size: 2.7vw;
  }
  .base .frame .fr-ctn article ul li sub,
  .base .frame .fr-ctn article ul li footer {
    font-size: 70%;
    line-height: 1.5;
  }
  .base .frame .fr-ctn article ul li table .cate {
    width: 19%;
  }
  .base .frame .fr-ctn article ul li table .gift strong {
    line-height: 1.5;
  }
  .base .frame .fr-ctn article ul li table .gift mark {
    display: block;
    line-height: 1.5;
  }
  .base .frame .fr-ctn article ul li table .price {
    width: 19%;
  }
  .base .frame .fr-ctn article ul li table .qty {
    width: 16%;
  }
  .base .frame .fr-ctn .bellow {
    height: 60vw;
    transition: all 0.5s ease-out;
  }
  .base .frame .fr-ctn .bellow .btn-read-more span {
    font-size: 2.7vw;
  }
  .base .frame .fr-ctn .bellow .btn-read-more i {
    width: 5vw;
    height: 5vw;
  }
  .base .frame .fr-ctn .bellow#bellow-notice {
    height: 80vw;
  }
  .base .frame .fr-ctn .bellow.toggled .btn-read-more {
    margin-top: 4vw;
  }
  .base .frame .fr-flex {
    flex-direction: column;
    gap: 3.3vw 0;
  }
  .base .frame .fr-item {
    width: 100%;
    border-radius: 4vw;
  }
  .base .frame .fr-item figure {
    padding: 2.7vw;
  }
  .base .frame .fr-item figure figcaption {
    justify-content: center;
    width: 40%;
  }
  .base .frame .fr-item figure figcaption h3,
  .base .frame .fr-item figure figcaption span {
    font-size: 4.8vw;
  }
  .base .frame .fr-item figure img {
    width: 36.8vw;
  }
  .base .frame .fr-item:first-of-type {
    border-top-left-radius: 4vw;
  }
  .base .frame .fr-item:last-of-type {
    border-top-right-radius: 4vw;
  }
  .base .frame .fr-item:last-of-type figure figcaption h3 {
    padding-bottom: 4vw;
  }
  .base .frame .fr-item.lone {
    margin-top: 3.3vw;
  }
  .base .frame .fr-item.lone figure {
    padding: 5.3vw;
    padding-bottom: 2vw;
  }
  .base .frame .fr-item.lone figure figcaption {
    width: auto;
  }
  .base .frame .fr-item.lone figure figcaption h3 {
    padding-top: 0;
  }
  .base .frame .fr-item.lone figure figcaption span:has(small) {
    display: flex;
    justify-content: center;
  }
  .base .frame .fr-item.lone figure img {
    width: 74.5vw;
  }
  .base .frame .fr-item.lone figure cite {
    padding-top: 3em;
  }
  .base .frame .fr-item.lone figure .slate {
    font-size: 5.6vw;
    border-radius: 9.6vw;
    padding: 4.3vw 0;
    margin-bottom: 1vw;
  }
  .base h2[role="heading"] {
    font-size: 7.5vw;
    padding: 1.6vw 0 4.3vw;
    text-shadow:
      0 0 2.4vw rgba(0, 153, 204, 0.9),
      0 0 2.7vw rgba(0, 153, 204, 0.9),
      0 0 2.9vw rgba(0, 153, 204, 0.8);
  }
  .base .menu {
    margin-top: 82vw;
    padding-bottom: 14vw;
  }
  .base .menu ul {
    justify-content: space-between;
  }
  .base .menu ul li a {
    border-radius: 8.8vw;
    padding: 0.9vw;
  }
  .base .menu ul li a .bdr {
    border-width: 0.7vw;
    border-radius: 6.7vw;
  }
  .base .menu ul li a span {
    font-size: 4vw;
    padding: 1.6vw 5.1vw 2.1vw;
  }
  .base .menu.opened {
    z-index: 100;
  }
  .base .kv img[role="heading"] {
    position: relative;
    z-index: 1;
  }
  .base .kv img[mb] {
    -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  }
  .base .kv .btn-menu {
    display: block;
    position: absolute;
    z-index: 101;
    top: 5.7vw;
    right: 4.9vw;
    width: 9.3vw;
    height: 8vw;
    cursor: pointer;
    appearance: none;
    background: transparent;
    border: none;
    line-height: 1;
    place-items: center;
  }
  .base .kv .btn-menu img {
    width: 100%;
  }
  .base .kv .btn-menu .btn-cross {
    display: none;
  }
  .base .kv .btn-menu.opened .btn-lines {
    display: none;
  }
  .base .kv .btn-menu.opened .btn-cross {
    display: block;
  }
  .base .rule {
    position: relative;
    z-index: 3;
  }
  .base .notice .aligner {
    padding-bottom: 7vw;
  }
  .base .frame .fr-ctn article .rule-label,
  .base .frame .fr-ctn article .rule-content.rule-body-title {
    font-size: 0.65rem;
  }
  .base .frame .fr-ctn article .rule-content {
    font-size: 0.65rem;
  }
}

@media screen and (max-width: 420px) {
  .base .frame .fr-ctn article .rule-label,
  .base .frame .fr-ctn article .rule-content.rule-body-title,
  .base .frame .fr-ctn article .rule-content {
    font-size: 0.6rem;
  }
}