@charset "UTF-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * File name: home.css
 * Summary:   モジュール用スタイル
 * Author:    CrEa Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    home
 *
 * ===============================================================
*/

/** =1
 * ========================================
 * home
 * ========================================
*/
body[id="home"] {
}
body[id="home"] .l-contents {
  overflow-x: clip;
  position: relative;
}

/*========================================
 * myApp
 * ========================================
 */
.sectionMyApp {
  width: fit-content;
  margin-inline: auto;
}

.sectionMyApp .sectionMyAppDescription {
  font-size: clamp(1.8rem, calc(24 / 1024 * 100cqw), 2.4rem);
  line-height: 1.4;
}
.sectionMyApp .sectionMyAppDescription strong {
  color: var(--color-main);
  font-weight: 600;
}

.sectionMyApp .listMyAppDownload {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-block-start: clamp(24px, calc(40 / 1024 * 100cqw), 40px);
}
.sectionMyApp .listMyAppDownloadItem img {
  width: auto;
  height: min(57px, calc(48 / 390 * 100cqw));
}

/*========================================
 * intro
 * ========================================
 */

.mvHome {
  margin-block-end: clamp(48px, calc(80 / 1024 * 100cqw), 80px);
  text-align: center;
}
.mvHome .mvHomeTitle {
}
.mvHome .mvHomeTitle img {
  width: 100%;
  height: auto;
}

/* 終了表示 */
.boxMessageClose {
  box-sizing: border-box;
  background-color: rgb(from var(--color-accent) r g b, 0.85);
  color: var(--color-text-bright);
}
.boxMessageClose::before {
  position: absolute;
  content: "";
}
.boxMessageClose .boxMessageCloseText {
  font-weight: bold;
  text-align: center;
}
@media (max-width: 767px) {
  .boxMessageClose {
    position: relative;
    margin-block-start: 20px;
    margin-inline: 20px;
    padding: 20px;
    border-radius: 10px;
  }
  .boxMessageClose::before {
    inset: 3px;
    border: 2px solid var(--color-text-bright);
    border-radius: 7px;
  }
  .boxMessageCloseText {
    font-size: 1.6rem;
  }
}
@media (min-width: 768px) {
  .boxMessageClose {
    position: absolute;
    bottom: 2.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    padding: 30px;
    border-radius: 15px;
  }
  .boxMessageClose::before {
    inset: 5px;
    border: 2px solid var(--color-text-bright);
    border-radius: 10px;
  }
  .boxMessageCloseText {
    font-size: 2rem;
  }
}

/*========================================
 * howto
 * ========================================
 */
.sectionHowTo {
  position: relative;
  margin-block-end: clamp(56px, calc(96 / 1440 * 100cqw), 96px);
  padding-block-start: 0;
  border: 4px solid var(--color-text-bright);
  border-block-start: 0;
  color: var(--color-text-bright);
}
.sectionHowTo::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -4px;
  z-index: 10;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    var(--color-base) 50%,
    var(--color-text-bright) 50%,
    var(--color-text-bright) calc(50% + 3px),
    transparent calc(50% + 3px)
  );
  background-size: 100% 100%;
  content: "";
}
.sectionHowTo::after {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-end: -4px;
  z-index: 10;
  width: 40px;
  height: 40px;
  background: linear-gradient(
    -45deg,
    var(--color-base) 50%,
    var(--color-text-bright) 50%,
    var(--color-text-bright) calc(50% + 3px),
    transparent calc(50% + 3px)
  );
  background-size: 100% 100%;
  content: "";
}

.sectionHowTo .sectionHowToTitle {
  display: flex;
  align-items: center;
  column-gap: 20px;
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 0;
  translate: 0 calc(-50% + 2px);
}
.sectionHowTo .sectionHowToTitle img {
  width: clamp(120px, calc(160 / 390 * 100cqw), 200px);
}
.sectionHowTo .sectionHowToTitle::before,
.sectionHowTo .sectionHowToTitle::after {
  flex-grow: 1;
  border-block-start: 4px solid var(--color-text-bright);
  content: "";
}

.sectionHowTo .sectionHowToContent {
  position: relative;
  margin-inline: -4px;
  padding-block: clamp(48px, calc(80 / 1440 * 100cqw), 80px);
  padding-inline: clamp(30px, calc(80 / 1440 * 100cqw), 80px);
}

.sectionHowTo .listHowToHome {
  display: grid;
}
@media (max-width: 767px) {
  .sectionHowTo .listHowToHome {
    row-gap: min(40px, calc(24 / 390 * 100cqw));
  }
}
@media (min-width: 768px) {
  .sectionHowTo .listHowToHome {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
  }
}

.sectionHowTo .listHowToHome .listHowToHomeItem {
  display: flex;
  flex-direction: column;
  position: relative;
  container-type: inline-size;
}

.sectionHowTo .listHowToHome .listHowToHomeTitle {
  display: flex;
  align-items: center;
  min-height: calc(40 / 24 * 1em);
  margin-block-end: min(12px, calc(12 / 24 * 1em));
  padding-block: calc(8 / 24 * 1em) calc(7 / 24 * 1em);
  padding-inline: calc(18 / 24 * 1em);
  font-size: clamp(1.6rem, calc(24 / 250 * 100cqw), 2.4rem);
  background-image: linear-gradient(
      135deg,
      transparent 7px,
      var(--color-main) 0
    ),
    linear-gradient(-45deg, transparent 7px, var(--color-main) 0);
  background-position: top left, top center, top right;
  background-size: 10px 100%, calc(100% - 20px) 100%, 10px 100%;
  background-repeat: no-repeat;
  color: var(--color-text-bright);
}
.sectionHowTo .listHowToHome .listHowToHomeTitle .text {
  transform: skew(-16deg);
  font-family: var(--sans-serif-en);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  text-box: trim-both cap alphabetic;
}
@supports not (text-box: trim-both cap alphabetic) {
  .sectionHowTo .listHowToHome .listHowToHomeTitle .text {
    margin-block: calc((1em - 1lh) / 2);
  }
}

.sectionHowTo
  .listHowToHome
  .listHowToHomeItem:nth-child(1)
  .listHowToHomeTitle {
  background-image: linear-gradient(
      135deg,
      transparent 7px,
      var(--color-gradient-1) 0
    ),
    linear-gradient(to right, var(--color-gradient-1), var(--color-gradient-2)),
    linear-gradient(-45deg, transparent 7px, var(--color-gradient-2) 0);
}
.sectionHowTo
  .listHowToHome
  .listHowToHomeItem:nth-child(2)
  .listHowToHomeTitle {
  background-image: linear-gradient(
      135deg,
      transparent 7px,
      var(--color-gradient-2) 0
    ),
    linear-gradient(to right, var(--color-gradient-2), var(--color-gradient-3)),
    linear-gradient(-45deg, transparent 7px, var(--color-gradient-3) 0);
}
.sectionHowTo
  .listHowToHome
  .listHowToHomeItem:nth-child(3)
  .listHowToHomeTitle {
  background-image: linear-gradient(
      135deg,
      transparent 7px,
      var(--color-gradient-3) 0
    ),
    linear-gradient(to right, var(--color-gradient-3), var(--color-gradient-4)),
    linear-gradient(-45deg, transparent 7px, var(--color-gradient-4) 0);
}
.sectionHowTo
  .listHowToHome
  .listHowToHomeItem:nth-child(4)
  .listHowToHomeTitle {
  background-image: linear-gradient(
      135deg,
      transparent 7px,
      var(--color-gradient-4) 0
    ),
    linear-gradient(to right, var(--color-gradient-4), var(--color-gradient-5)),
    linear-gradient(-45deg, transparent 7px, var(--color-gradient-5) 0);
}

.sectionHowTo .listHowToHome .listHowToHomeDescription {
  overflow-x: clip;
  font-size: clamp(1.4rem, calc(16 / 250 * 100cqw), 1.6rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.sectionHowTo .listHowToHome .listHowToHomeDescription a:has(strong) {
  color: var(--color-main);
  font-weight: 500;
}
.sectionHowTo .listHowToHome .listHowToHomeDescription strong,
.sectionHowTo .listHowToHome .listHowToHomeDescription span {
  font-weight: inherit;
}
.sectionHowTo .listHowToHome .listHowToHomeDescription strong {
  color: var(--color-main);
  font-weight: 500;
}

.sectionHowTo .boxHowToStation {
  display: flex;
  position: relative;
  min-height: 96px;
  color: var(--color-text);
}
.sectionHowTo .boxHowToStation:not(:first-child) {
  margin-block-start: clamp(24px, calc(48 / 1024 * 100cqw), 48px);
}
@media (max-width: 767px) {
  .sectionHowTo .boxHowToStation {
    flex-direction: column;
  }
}

.sectionHowTo .boxHowToStationTitle {
  display: flex;
  align-items: center;
  padding-block: calc(12 / 20 * 1em);
  padding-inline: calc(24 / 20 * 1em);
  background-image: linear-gradient(
      135deg,
      transparent 7px,
      var(--color-main-deep) 0
    ),
    var(--color-gradient);
  background-position: top left, top right;
  background-size: 10px 100%, calc(100% - 10px) 100%;
  background-repeat: no-repeat;
  color: var(--color-text-bright);
  font-size: clamp(1.6rem, calc(20 / 1024 * 100cqw), 2rem);
  font-weight: 700;
  line-height: 1.2;
}
.sectionHowTo .boxHowToStationTitle .text {
  transform: skew(-16deg);
}
@media (min-width: 768px) {
  .sectionHowTo .boxHowToStationTitle {
    flex-shrink: 0;
    width: max(calc((100% - 40px * 3) / 4), 200px);
  }
}

.sectionHowTo .boxHowToStationContent {
  display: flex;
  align-items: center;
  padding-block: clamp(12px, calc(20 / 1020 * 100cqw), 24px);
  padding-inline: clamp(20px, calc(40 / 1024 * 100cqw), 40px);
  background-image: linear-gradient(
    -45deg,
    transparent 7px,
    var(--color-base-bright) 0
  );
  background-position: bottom right;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.sectionHowTo .listStation {
  display: flex;
  flex-wrap: wrap;
  font-weight: 800;
  font-size: clamp(2rem, calc(32 / 1024 * 100cqw), 3.2rem);
  line-height: 1.4;
}
.sectionHowTo .listStation li:not(:first-child)::before {
  font-weight: 400;
  content: "／";
}
@media (min-width: 768px) {
  .sectionHowTo .boxHowToStationContent {
    flex-grow: 1;
  }
}

.sectionHowTo .sectionHowToButton {
  margin-block-start: clamp(40px, calc(72 / 1440 * 100cqw), 72px);
}

/*========================================
 * prize
 * ========================================
 */
.sectionPrize {
  margin-block-end: clamp(56px, calc(96 / 1440 * 100cqw), 96px);
}
body[id="mypage"] .sectionPrize {
  margin-block-end: clamp(80px, calc(128 / 1440 * 100cqw), 128px);
}

.sectionPrize .sectionPrizeTitle {
  margin-inline: auto;
  margin-block-end: clamp(24px, calc(48 / 1024 * 100cqw), 48px);
  width: clamp(211px, calc(282 / 390 * 100cqw), 352px);
}

.sectionPrize .listPrize {
  display: grid;
}
@media (max-width: 1023px) {
  .sectionPrize .listPrize {
    row-gap: clamp(20px, calc(24 / 390 * 100cqw), 40px);
  }
}
@media (min-width: 1024px) {
  .sectionPrize .listPrize {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
  }
}

.sectionPrize .listPrizeItem {
  --color-prize: var(--color-main);
}
.sectionPrize .listPrizeItem.prizeWChance {
  --color-prize: var(--color-sub);
}
@media (max-width: 1023px) {
  .sectionPrize .listPrizeItem {
    font-size: clamp(1.4rem, calc(16 / 390 * 100cqw), 1.6rem);
  }
}
@media (min-width: 1024px) {
  .sectionPrize .listPrizeItem {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    font-size: clamp(1.4rem, calc(16 / 1280 * 100cqw), 1.6rem);
  }
  .sectionPrize:has(.listPrizeButton) .listPrizeItem {
    grid-row: span 6;
  }
}

.sectionPrize .listPrizeHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: calc(16 / 16 * 1em);
  padding-block-start: calc(20 / 16 * 1em);
  padding-inline: calc(32 / 16 * 1em);
  padding-block-end: calc(20 / 16 * 1em);
  background-image: linear-gradient(
      135deg,
      transparent 14px,
      var(--color-prize) 0
    ),
    linear-gradient(to right, var(--color-prize));
  background-position: top left, top right;
  background-size: 20px 100%, calc(100% - 20px) 100%;
  background-repeat: no-repeat;
  color: var(--color-text-bright);
}
/* .sectionPrize .listPrizeItem.prizeWChance .listPrizeHeader {
  color: var(--color-text-bright);
} */

.sectionPrize .listPrizeTitle {
  font-weight: 600;
  text-align: center;
}
@media (max-width: 1023px) {
  .sectionPrize .listPrizeTitle {
    font-size: clamp(2rem, calc(28 / 390 * 100cqw), 3.2rem);
  }
}
@media (min-width: 1024px) {
  .sectionPrize .listPrizeTitle {
    font-size: clamp(2rem, calc(32 / 1280 * 100cqw), 3.2rem);
  }
}

.sectionPrize .listPrizeNumber {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(4 / 16 * 1em);
  position: relative;
  width: fit-content;
  min-width: 140px;
  min-height: 32px;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  background-color: var(--color-base-bright);
}
.sectionPrize .listPrizeNumber::before,
.sectionPrize .listPrizeNumber::after {
  position: absolute;
  inset-block-start: 50%;
  z-index: 0;
  aspect-ratio: 1;
  height: 70.7%;
  background-image: linear-gradient(
    -45deg,
    transparent 48%,
    var(--color-base-bright) 0
  );
  background-size: cover;
  content: "";
}
.sectionPrize .listPrizeNumber::before {
  inset-inline-start: 0;
  translate: -50% -50%;
  rotate: -45deg;
}
.sectionPrize .listPrizeNumber::after {
  inset-inline-end: 0;
  translate: 50% -50%;
  rotate: 135deg;
}
.sectionPrize .listPrizeNumber .textLarge {
  font-size: calc(20 / 16 * 1em);
  font-weight: 800;
  color: var(--color-prize);
}
.sectionPrize .listPrizeNumber .textLarge.textNumber {
  font-family: var(--sans-serif-en);
  font-size: calc(24 / 16 * 1em);
}

.sectionPrize .listPrizeBody {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  row-gap: calc(20 / 16 * 1em);
  padding-block: calc(20 / 16 * 1em);
  padding-inline: calc(32 / 16 * 1em);
  background-image: linear-gradient(to right, var(--color-base-bright)),
    linear-gradient(-45deg, transparent 14px, var(--color-base-bright) 0);
  background-position: top left, top right;
  background-size: calc(100% - 20px) 100%, 20px 100%;
  background-repeat: no-repeat;
  color: var(--color-text);
}
.sectionPrize:has(.listPrizeButton) .listPrizeBody {
  grid-row: span 3;
}

.sectionPrize .listPrizeName {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.sectionPrize .listPrizeName .listPrizeNameBalloon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: 0 -90%;
  padding-block: calc(8 / 12 * 1em);
  padding-inline: calc(14 / 12 * 1em);
  border-radius: 100vmax;
  background-color: #e36a93;
  color: var(--color-text-bright);
  font-size: 1.2rem;
  white-space: nowrap;
}
.sectionPrize .listPrizeName .listPrizeNameBalloon::after {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 20%;
  margin-block-start: calc(-4 / 12 * 1em);
  border-block-start: calc(20 / 12 * 1em) solid #e36a93;
  border-inline: calc(5 / 12 * 1em) solid transparent;
  content: "";
  rotate: 30deg;
}
@media (max-width: 1023px) {
  .sectionPrize .listPrizeName {
    font-size: clamp(2rem, calc(28 / 390 * 100cqw), 3.2rem);
  }
  .sectionPrize .listPrizeName .listPrizeNameBalloon {
    margin-inline-start: min(70px, 15cqw);
  }
}
@media (min-width: 1024px) {
  .sectionPrize .listPrizeName {
    font-size: clamp(2rem, calc(32 / 1280 * 100cqw), 3.2rem);
  }
  .sectionPrize .listPrizeName .listPrizeNameBalloon {
    margin-inline-start: 5cqw;
  }
}

.sectionPrize .listPrizeSummary {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: calc(8 / 16 * 1em);
  line-height: 1.4;
  text-align: center;
}
.sectionPrize .listPrizeSummary:not(:first-child) {
  padding-block-start: calc(16 / 16 * 1em);
  border-block-start: 2px solid var(--color-prize);
}
.sectionPrize .listPrizeSummaryItem {
  grid-column: span 2;
}
.sectionPrize .listPrizeSummaryTitle {
  color: var(--color-prize);
  font-weight: 600;
}

.sectionPrize .listPrizeItem.prizeAllCourse .listPrizeSummary {
  text-align: left;
}
.sectionPrize .listPrizeItem.prizeAllCourse .listPrizeSummaryItem {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  column-gap: calc(16 / 16 * 1em);
}

.sectionPrize .listPrizeButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  padding-inline: calc(30 / 16 * 1em);
}
.sectionPrize .listPrizeButton .linkBtn {
  background-color: var(--color-prize);
}
.sectionPrize .listPrizeButton .linkBtn::before,
.sectionPrize .listPrizeButton .linkBtn::after {
  background-image: linear-gradient(
    -45deg,
    transparent 48%,
    var(--color-prize) 0
  );
}

.sectionPrize .listPrizeNotice {
  margin-block-start: calc(12 / 12 * 1rem);
  font-size: 1.2rem;
}

/*========================================
 * exhibition
 * ========================================
 */
.bannerExhibition {
  container-type: inline-size;
  margin-block-end: clamp(56px, calc(96 / 1440 * 100cqw), 96px);
}
.bannerExhibition .bannerExhibitionInner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: clamp(20px, calc(40 / 1440 * 100cqw), 40px);
  row-gap: clamp(20px, calc(40 / 1440 * 100cqw), 40px);
  position: relative;
  padding-block-start: clamp(24px, calc(48 / 1440 * 100cqw), 48px);
  padding-inline: clamp(20px, calc(80 / 1440 * 100cqw), 80px);
  padding-block-end: clamp(32px, calc(64 / 1440 * 100cqw), 64px);
  background: var(--color-gradient);
}
.bannerExhibition .bannerExhibitionInner::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-base) 50%, transparent 50%);
  content: "";
}
.bannerExhibition .bannerExhibitionInner::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(-45deg, var(--color-base) 50%, transparent 50%);
  content: "";
}
@media (max-width: 767px) {
  .bannerExhibition .bannerExhibitionInner {
    background: linear-gradient(
      to bottom,
      var(--color-gradient-1) 0%,
      var(--color-gradient-2) 25%,
      var(--color-gradient-3) 50%,
      var(--color-gradient-4) 75%,
      var(--color-gradient-5) 100%
    );
  }
  .bannerExhibition .bannerExhibitionInner::before,
  .bannerExhibition .bannerExhibitionInner::after {
    width: 20px;
    height: 20px;
  }
}
@media (min-width: 768px) {
  .bannerExhibition .bannerExhibitionInner {
    background: var(--color-gradient);
  }
}

@media (any-hover: hover) {
  .bannerExhibition .bannerExhibitionInner {
    transition: opacity 0.4s ease;
  }
  .bannerExhibition .bannerExhibitionInner:hover {
    opacity: var(--opacity-hover);
  }
}

.bannerExhibitionTitle {
}
.bannerExhibitionText {
}

@media (max-width: 767px) {
  .bannerExhibitionTitle {
    width: min(560px, 100%);
  }
  .bannerExhibitionText {
    width: min(367px, 80%);
  }
}
@media (min-width: 768px) {
  .bannerExhibitionTitle {
    width: min(560px, calc(560 / 1127 * 100cqw));
  }
  .bannerExhibitionText {
    width: min(367px, calc(367 / 1127 * 100cqw));
  }
}

.bannerExhibitionInfo {
  /* display: grid;
  grid-template-columns: auto 1fr; */
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: calc(16 / 16 * 1em);
  row-gap: calc(16 / 16 * 1em);
  width: 100%;
  font-weight: 600;
  font-size: clamp(1.2rem, calc(16 / 768 * 100cqw), 1.6rem);
}
.bannerExhibitionInfo .bannerExhibitionInfoTitle {
  transform: skew(-16deg);
  padding-block: calc(7 / 16 * 1em) calc(9 / 16 * 1em);
  padding-inline: calc(12 / 16 * 1em);
  background-color: var(--color-base);
  color: var(--color-text-bright);
  text-align: center;
}
.bannerExhibitionInfo .bannerExhibitionInfoDescription {
  line-height: 1.2;
}
.bannerExhibitionInfo .bannerExhibitionInfoDescription.textLarge {
  font-size: calc(24 / 16 * 1em);
}
@media (min-width: 760px) {
  .bannerExhibitionInfo {
    margin-block-start: calc(-24 / 16 * 1em);
  }
}

.bannerExhibitionButton .linkBtn.large {
  margin-inline: calc(40 / 32 * 1em);
}
@media (max-width: 767px) {
  .bannerExhibitionButton .linkBtn.large {
    margin-inline: calc(36 / 24 * 1em);
    padding-block-end: calc(12 / 24 * 1em);
  }
  .bannerExhibitionButton .linkBtn .text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bannerExhibitionButton .linkBtn .text .textSmallSp {
    font-size: calc(12 / 24 * 1em);
  }
}

/*========================================
 * caution
 * ========================================
 */
.sectionCaution {
}
.sectionCaution .sectionCautionPrivacy:not(:first-child) {
  margin-block-start: clamp(32px, calc(48 / 1280 * 100cqw), 48px);
}
.sectionCaution .sectionCautionPrivacy .sectionCautionPrivacyTitle {
  margin-block-end: calc(8 / 16 * 1em);
  color: var(--color-main);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.6;
}
.sectionCaution .sectionCautionPrivacy .sectionCautionPrivacyContent {
  font-size: clamp(1.4rem, calc(16 / 768 * 100cqw), 1.6rem);
  line-height: 1.6;
}

/*========================================
 * mypage - main
 * ========================================
 */

/*
 * username
 * ---------------------------------- */
.userName {
  position: relative;
  width: fit-content;
  margin-block-end: clamp(56px, calc(96 / 1440 * 100cqw), 96px);
  margin-inline: auto;
  padding-block: calc(14 / 20 * 1em);
  padding-inline: calc(24 / 20 * 1em);
  border: 2px solid var(--color-text-bright);
  /* background-color: var(--color-main); */
  color: var(--color-text-bright);
  font-weight: 700;
  font-size: clamp(2rem, calc(24 / 768 * 100cqw), 2.4rem);
}
.userName::before {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: -2px;
  z-index: 10;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    var(--color-base) 50%,
    var(--color-text-bright) 50%,
    var(--color-text-bright) calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
  background-size: 100% 100%;
  content: "";
}
.userName::after {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -2px;
  z-index: 10;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    -45deg,
    var(--color-base) 50%,
    var(--color-text-bright) 50%,
    var(--color-text-bright) calc(50% + 1.5px),
    transparent calc(50% + 1.5px)
  );
  background-size: 100% 100%;
  content: "";
}
.userName .userNameInner {
  display: flex;
  justify-content: center;
  align-items: baseline;
  column-gap: calc(6 / 20 * 1em);
  transform: skew(-16deg);
}
.userName .text {
  line-height: 1.4;
  text-box: trim-both cap alphabetic;
}
@supports not (text-box: trim-both cap alphabetic) {
  .userName .text {
    margin-block: calc((1em - 1lh) / 2);
  }
}
.userName .textHonorificTitle {
  font-size: calc(14 / 20 * 1em);
}

/*
 * sectionSpotList
 * ---------------------------------- */
.sectionSpotList {
  position: relative;
  margin-block-end: clamp(56px, calc(96 / 1440 * 100cqw), 96px);
  padding-block-start: 0;
  border: 4px solid var(--color-text-bright);
  border-block-start: 0;
  color: var(--color-text-bright);
}
.sectionSpotList::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -4px;
  z-index: 10;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    135deg,
    var(--color-base) 50%,
    var(--color-text-bright) 50%,
    var(--color-text-bright) calc(50% + 3px),
    transparent calc(50% + 3px)
  );
  background-size: 100% 100%;
  content: "";
}
.sectionSpotList::after {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-end: -4px;
  z-index: 10;
  width: 20px;
  height: 20px;
  background: linear-gradient(
    -45deg,
    var(--color-base) 50%,
    var(--color-text-bright) 50%,
    var(--color-text-bright) calc(50% + 3px),
    transparent calc(50% + 3px)
  );
  background-size: 100% 100%;
  content: "";
}

.sectionSpotList .sectionSpotListTitle {
  display: flex;
  align-items: center;
  column-gap: clamp(8px, calc(20 / 768 * 100cqw), 20px);
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 0;
  translate: 0 calc(-50% + 2px);
}
.sectionSpotList .sectionSpotListTitle img {
  width: clamp(168px, calc(224 / 390 * 100cqw), 280px);
}
.sectionSpotList .sectionSpotListTitle::before,
.sectionSpotList .sectionSpotListTitle::after {
  flex-grow: 1;
  border-block-start: 4px solid var(--color-text-bright);
  content: "";
}

.sectionSpotList .sectionSpotListContent {
  margin-inline: -4px;
  padding-block-start: clamp(64px, calc(96 / 1440 * 100cqw), 96px);
  padding-block-end: clamp(32px, calc(64 / 1440 * 100cqw), 64px);
  padding-inline: clamp(30px, calc(80 / 1440 * 100cqw), 80px);
}

.listSpot {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: clamp(12px, calc(24 / 768 * 100cqw), 24px);
  justify-content: center;
}
@media (max-width: 767px) {
  .listSpot {
    flex-direction: column;
  }
  .listSpot .listSpotItem .linkBtn {
    width: 100%;
    justify-content: space-between;
  }
  /* .listSpot .listSpotItem .linkBtn .icon-arrow:last-child {
    margin-inline-start: auto;
  } */
}

.listSpot .listSpotItem:has(.linkBtn.large) {
  padding-inline: calc(40 / 32 * 1em);
  font-size: clamp(2.4rem, calc(32 / 768 * 100cqw), 3.2rem);
}
.listSpot .iconStampStatus {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.listSpot .iconStampStatus .icon-get {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  rotate: -30deg;
  color: var(--color-main);
}
.listSpot .iconStampStatus:has(.icon-get) .icon-target {
  opacity: 0.4;
}