@charset "UTF-8";
/*----------------------------------------------
 * * reset styles
 * *----------------------------------------------*/
main {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  display: block;
}

/*----------------------------------------------
 * * formatting styles
 * *----------------------------------------------*/
:root {
  --green: #60b424;
  --green02: #52943a;
  --blue: #00a7eb;
  --blue02: #005ca2;
  --red: #eb4e3d;
  --red02: #e64e3d;
  --pink: #fdedeb;
  --inputBgc: #fff;
  --inputBdc: #c3c3c3;
  --orange: #ffaa00;
  --pcw: 780px;
}

html {
  font-size: 62.5%;
  height: 100%;
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  height: 100%;
  min-width: 880px;
  overflow: auto;
  font-family: "Lato", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-size: 1.6em;
  line-height: 1.6;
  color: #333;
}
body > [id=__next] {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}
@media screen and (max-width: 767px) {
  body {
    min-width: initial;
    -webkit-text-size-adjust: 100%;
  }
}

a {
  color: inherit;
  transition-duration: 0.3s;
}

_::-webkit-full-page-media, _:future, :root a {
  text-underline-offset: 2px;
}

[href^="tel:"] {
  display: inline-block;
  pointer-events: none;
  text-decoration: none;
}

img, svg {
  border-style: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.fxd {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.hidden {
  display: none !important;
}

@media screen and (min-width: 768px) {
  a:hover {
    text-decoration: none;
  }
}
@media (any-pointer: coarse) {
  a:active {
    text-decoration: none;
  }
}
@media screen and (max-width: 767px) {
  [href^="tel:"] {
    pointer-events: auto;
    text-decoration: underline;
  }
}

/*----------------------------------------------
 * * clearfix
 * *----------------------------------------------*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/*----------------------------------------------
 * * svg
 * *----------------------------------------------*/
.icon-ball {
  width: 47px;
  height: 47px;
}
.icon-contact {
  width: 51px;
  height: 52px;
}
.icon-logout {
  width: 52px;
  height: 52px;
}
.icon-mail {
  width: 50px;
  height: 37px;
}
.icon-mypage {
  width: 52px;
  height: 37px;
}
.icon-password {
  width: 37px;
  height: 53px;
}
.icon-point {
  width: 48px;
  height: 48px;
}
.icon-pointlog {
  width: 52px;
  height: 52px;
}
.icon-qrcode {
  width: 50px;
  height: 50px;
}
.icon-tokuten {
  width: 42px;
  height: 49px;
}
.icon-member {
  width: 40px;
  height: 40px;
}
.icon-coupon {
  width: 62px;
  height: 38px;
}
@media screen and (max-width: 767px) {
  .icon-ball {
    width: 22px;
    height: 22px;
  }
  .icon-contact {
    width: 21px;
    height: 22px;
  }
  .icon-logout {
    width: 22px;
    height: 22px;
  }
  .icon-mail {
    width: 21px;
    height: 16px;
  }
  .icon-mypage {
    width: 22px;
    height: 15px;
  }
  .icon-password {
    width: 15px;
    height: 21px;
  }
  .icon-point {
    width: 22px;
    height: 22px;
  }
  .icon-pointlog {
    width: 24px;
    height: 24px;
  }
  .icon-qrcode {
    width: 21px;
    height: 21px;
  }
  .icon-tokuten {
    width: 18px;
    height: 22px;
  }
  .icon-member {
    width: 24px;
    height: 24px;
  }
  .icon-coupon {
    width: 26px;
    height: 16px;
  }
}

/* ----------------------------------------------
 * * header
 * *----------------------------------------------*/
svg.hidden ~ [type=checkbox] {
  display: none;
}

header {
  position: relative;
  z-index: 100;
  background-color: var(--green);
  display: flex;
  align-items: center;
  padding: 0 34px;
  color: #fff;
}
header label {
  cursor: pointer;
  transition-duration: 0.3s;
}
header .id01, header .id02, header .btnBeginner {
  display: none;
}
header .home {
  flex: 0 0 auto;
}
header .logo {
  position: absolute;
  z-index: 101;
  right: 50%;
  top: 10px;
  transform: translateX(50%);
  width: 60px;
}
.btnHamburger {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  width: 54px;
  height: 54px;
  position: relative;
  cursor: pointer;
}
.btnHamburger::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 15px;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background-color: #fff;
  transition-duration: 0.3s;
}
.btnHamburger::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 35px;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background-color: #fff;
  transition-duration: 0.3s;
}
.btnHamburger span {
  position: absolute;
  left: 7px;
  top: 25px;
  width: 40px;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  transition-duration: 0.3s;
}

#hamburgerSwitch:checked ~ header {
  position: fixed;
  top: 0;
  width: 100%;
}
#hamburgerSwitch:checked ~ header .btnHamburger::before {
  top: 25px;
  transform: rotate(-45deg);
}
#hamburgerSwitch:checked ~ header .btnHamburger:after {
  top: 25px;
  transform: rotate(45deg);
}
#hamburgerSwitch:checked ~ header .btnHamburger span {
  background-color: rgba(255, 255, 255, 0);
}
#hamburgerSwitch:checked ~ main {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 54px;
}
#hamburgerSwitch:checked ~ footer {
  position: fixed;
  top: 100vh;
  width: 100%;
}

header.notLogin {
  min-height: 54px;
}
header.notLogin .home, header.notLogin .btnHamburger {
  display: none;
}
@media screen and (min-width: 768px) {
  header a:hover, header label:hover {
    opacity: 0.6;
  }
}
@media (any-pointer: coarse) {
  header a:active, header label:active {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  header {
    padding: 0 12px;
  }
  header .logo {
    width: 42px;
  }
  .btnHamburger::before, .btnHamburger::after, .btnHamburger span {
    left: 13px;
    width: 28px;
    height: 3px;
  }
  .btnHamburger::before {
    top: 18px;
  }
  .btnHamburger::after {
    top: 32px;
  }
}

/* ----------------------------------------------
 * * nav
 * *----------------------------------------------*/
nav {
  position: fixed;
  z-index: 90;
  left: 0;
  top: 54px;
  width: 100%;
  padding: 60px 0 50px;
  background-color: var(--green);
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3);
  transform: scaleY(0);
  transform-origin: center top;
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.3s;
  transition-property: opacity, transform, padding, visibility;
}
#hamburgerSwitch:checked ~ header nav {
  padding: 60px 0 50px;
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  width: var(--pcw);
  margin: 0 auto;
}
nav li {
  flex: 0 0 16.66%;
  margin-top: 25px;
}
nav li:nth-child(-n+6) {
  margin-top: 0;
}
nav .other li {
  flex: 0 1 auto;
  margin-right: 2em;
}
nav .other a .text {
  font-weight: normal;
}
nav .navLine {
  display: none;
}
nav a {
  display: block;
  text-align: center;
  text-decoration: none;
  position: relative;
  transform: translateZ(0);
}
nav a .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 52px;
  height: 55px;
}
nav a .text {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}
nav a .num {
  position: absolute;
  right: calc(50% - 20px);
  top: 0;
  transform: translateX(50%);
  border-radius: 24px;
  padding: 0 0.5em;
  background-color: var(--blue);
  font-size: 1.4rem;
  color: #fff;
}
nav svg {
  fill: #fff;
}
nav .ttl {
  width: var(--pcw);
  margin: 25px auto 0;
  font-weight: bold;
}
nav .ttlSettings {
  display: none;
}
@media screen and (min-width: 768px) {
  nav a:hover {
    opacity: 0.6;
  }
  nav .other a:hover {
    opacity: 1;
    text-decoration: underline;
  }
}
@media screen and (max-width: 767px) {
  nav {
    background-color: #f3f3f3;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    height: 0;
    box-shadow: none;
    transition-property: opacity, transform, padding, visibility, height;
  }
  #hamburgerSwitch:checked ~ header nav {
    height: calc(100% - 54px);
    padding: 0 0 25px;
  }
  nav ul {
    display: block;
    width: auto;
    margin: 0;
    color: #333;
    font-size: 1.6rem;
  }
  nav li {
    margin-top: 0;
  }
  nav .navLine {
    display: list-item;
  }
  nav a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fff;
    padding: 18px 0 18px 4.375%;
    position: relative;
  }
  nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 95.625%;
    background-color: #dfdfdf;
  }
  nav a .icon {
    flex: 0 0 24px;
    width: auto;
    height: auto;
    margin: 0 16px 0 0;
  }
  nav a .icon img, nav a .icon svg {
    vertical-align: baseline;
  }
  nav a .icon img[class^=icon-] {
    filter: brightness(0) saturate(100%) invert(61%) sepia(45%) saturate(711%) hue-rotate(52deg) brightness(89%) contrast(93%);
  }
  nav a .icon-applyEvent {
    width: 18px;
  }
  nav a .text {
    flex: 1 0 0%;
    display: flex;
    align-items: center;
    margin-top: 0;
    text-align: left;
    font-weight: normal;
  }
  nav a .text .num {
    position: static;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 19px;
  }
  nav a .arrow {
    position: relative;
  }
  nav a .arrow::before {
    content: "";
    position: absolute;
    right: 24px;
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #b3b3b3;
    border-right: 2px solid #b3b3b3;
  }
  nav .ttl {
    width: auto;
    background-color: transparent;
    padding: 18px 4.375%;
    margin: 0;
    color: var(--green);
    font-weight: normal;
    font-size: 1.3rem;
  }
  nav .ttlSettings {
    display: list-item;
  }
  nav .other li {
    margin-right: 0;
  }
  nav svg {
    fill: var(--green);
  }
}

/* ----------------------------------------------
 * * main
 * *----------------------------------------------*/
.pageTtl {
  background-color: var(--green);
  height: 235px;
  padding-top: 94px;
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
}
.pageTtl .ttl {
  font-size: 2.4rem;
}
.pageTtl .lead {
  margin-top: 15px;
}

.eventsNone a, .eventsNone button, .eventsNone label {
  pointer-events: none;
  opacity: 0.3;
}

.btn01 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 356px;
  min-height: 44px;
  border-radius: 44px;
  background-color: var(--blue);
  border: 1px solid var(--blue);
  color: #fff;
  font-weight: bold;
  font-size: 100%;
  text-decoration: none;
}
.btn01.orange {
  background-color: var(--orange);
  border: 1px solid var(--orange);
}
.btn01.red {
  background-color: #f00;
  border-color: #f00;
}

.btn02 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 316px;
  min-height: 50px;
  border-radius: 3px;
  background-color: var(--green);
  border: 1px solid var(--green);
  color: #fff;
  font-weight: bold;
  font-size: 100%;
  text-decoration: none;
}
.btn02.white {
  background-color: #fff;
  color: var(--green);
  transform: translateZ(0);
}

.btnBack {
  margin: 48px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.btnBack .btn {
  flex: 0 0 100%;
  margin-top: 12px;
  text-align: center;
}

.fxdBtm {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 76px;
  background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  transform: scale(0, 0);
  visibility: hidden;
}
.popupbox {
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  background-color: #fff;
}
.popup .close {
  position: absolute;
  right: 0;
  top: 0;
  transition-duration: 0.3s;
  cursor: pointer;
}

[type=checkbox][id^=popup]:checked ~ header {
  position: fixed;
  top: 0;
  width: 100%;
}
[type=checkbox][id^=popup]:checked ~ main {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 54px;
}
[type=checkbox][id^=popup]:checked ~ footer {
  position: fixed;
  top: 100vh;
  width: 100%;
}

.copied {
  position: fixed;
  z-index: 10;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  padding: 0.6em 1.25em;
  color: #fff;
  font-size: 1.8rem;
}

@media screen and (min-width: 768px) {
  .btn01:hover, .btn02:hover {
    opacity: 0.6;
  }
  .popup .close:hover {
    opacity: 0.6;
  }
}
@media (any-pointer: coarse) {
  .btn01:active, .btn02:active {
    opacity: 0.6;
  }
  .popup .close:active {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .pageTtl {
    height: 128px;
    padding-top: 36px;
    font-size: 1.3rem;
  }
  .pageTtl .ttl {
    font-size: 1.9rem;
  }
  .pageTtl .lead {
    margin-top: 8px;
  }
  .btn01 {
    width: 100%;
    min-height: 48px;
    border-radius: 48px;
    font-size: 1.4rem;
  }
  .btnBack {
    margin: 22px auto;
  }
  .btnBack .btnMypage {
    width: 89.375%;
  }
  .btnBack .btnMypage a {
    width: 100%;
  }
  .btnBack .btn {
    flex-basis: 89.375%;
    margin-top: 15px;
  }
  .btnBack .btn a {
    width: 100%;
  }
  .fxdBtm {
    height: 92px;
  }
  .fxdBtm button {
    font-size: 1.8rem;
    width: 71.4667%;
    height: 58px;
    border-radius: 58px;
  }
  .copied {
    font-size: 100%;
  }
}
/* ----------------------------------------------
 * * form
 * *----------------------------------------------*/
[type=text], [type=email], [type=password], [type=tel], [type=search], textarea {
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  width: 100%;
  border-radius: 2px;
  height: 45px;
  border: 1px solid var(--inputBdc);
  background-color: var(--inputBgc);
  padding: 0 1em;
  font-size: 100%;
  font-family: inherit;
}

::placeholder {
  color: #908f8f;
  font-weight: bold;
}

.middle {
  width: 50%;
}

textarea {
  height: 122px;
  padding: 0.5em 1em;
}
textarea.long {
  height: 16em;
}

select {
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  width: 100%;
  border-radius: 2px;
  height: 45px;
  border: 1px solid var(--inputBdc);
  background: url(../img/arrow-down.svg) no-repeat right 14px center;
  background-size: 16px auto;
  background-color: var(--inputBgc);
  padding: 0 30px 0 1em;
  font-size: 100%;
  font-family: inherit;
  color: inherit;
}
select::-ms-expand {
  display: none;
}

.checkbox {
  position: relative;
  z-index: 0;
  display: inline-flex;
  cursor: pointer;
}
.checkbox [type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  margin: 0;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.checkbox .label {
  padding-left: 30px;
  padding-top: 1px;
  position: relative;
  min-height: 20px;
  line-height: 1.4;
}
.checkbox .label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid var(--inputBdc);
  background-color: var(--inputBgc);
  transition-duration: 0.3s;
}
.checkbox .label::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 16px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
  transition-duration: 0.3s;
}
.checkbox :checked + .label::before {
  border-color: var(--blue02);
  background-color: var(--blue02);
}
.checkbox :checked + .label::after {
  opacity: 1;
}

.radiobox {
  position: relative;
  z-index: 0;
  display: inline-flex;
  cursor: pointer;
}
.radiobox [type=radio] {
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  margin: 0;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.radiobox .label {
  padding-left: 30px;
  padding-top: 1px;
  position: relative;
  min-height: 20px;
  line-height: 1.4;
}
.radiobox .label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--inputBdc);
  background-color: var(--inputBgc);
  transition-duration: 0.3s;
}
.radiobox .label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--blue02);
  transform: scale(0.5, 0.5);
  opacity: 0;
  transition-duration: 0.3s;
}
.radiobox :checked + .label::before {
  border-color: var(--blue02);
}
.radiobox :checked + .label::after {
  opacity: 1;
}

.radiochecklist > div + div {
  margin-top: 0.5em;
}
.radiochecklist.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -2em;
  margin-top: -0.5em;
}
.radiochecklist.row > div {
  flex: 0 1 auto;
  margin-left: 2em;
  margin-top: 0.5em;
}

button {
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 100%;
  transition-duration: 0.3s;
  cursor: pointer;
}

.formbox {
  display: flex;
  border: 1px solid #dfdfdf;
  font-size: 1.5rem;
}
.formbox + .formbox {
  border-top: none;
}
.formLabel {
  flex: 0 0 188px;
  padding: 14px 32px;
  display: inline-flex;
  align-items: center;
  background-color: #f1f1f1;
  color: #808080;
}
.formLabel .hissu {
  display: inline-block;
  margin-left: 5px;
  color: var(--red);
  font-size: 1.3rem;
}
.formBody {
  flex: 1 0 0%;
  align-self: center;
  padding: 14px 32px;
  background-color: #fff;
}
.formBtn {
  margin: 38px auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.formBtn > div {
  flex: 0 0 auto;
}
.formBtn .back {
  margin-right: 10px;
}
.formCheck .formBody {
  font-size: 1.3rem;
}
.formComplete .lead {
  text-align: center;
  font-size: 1.5rem;
}

.errorbox {
  width: var(--pcw);
  margin: 20px auto;
  border: 1px solid var(--red02);
  background-color: var(--pink);
  padding: 10px 20px;
  color: var(--red);
  font-size: 1.5rem;
}
.errorText {
  display: none;
  margin-bottom: 4px;
  color: var(--red);
}
.error .errorText {
  display: block;
}
.error [type=text], .error [type=email], .error [type=password], .error [type=tel], .error [type=search], .error textarea, .error select {
  --inputBdc: var(--red02);
  --inputBgc: var(--pink);
}
.error .radiochecklist {
  position: relative;
  z-index: 0;
}
.error .radiochecklist::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  left: -2px;
  top: -2px;
  border: 1px solid var(--red02);
  background-color: var(--pink);
  border-radius: 3px;
  pointer-events: none;
}
.error .radiochecklist.row::before {
  width: calc(100% + 2px - 2em);
  height: calc(100% + 2px - 0.5em);
  left: calc(2em - 2px);
  top: calc(0.5em - 2px);
}

@media screen and (min-width: 768px) {
  button:hover {
    opacity: 0.6;
  }
}
@media (any-pointer: coarse) {
  button:active {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .radiobox {
    display: flex;
  }
  .radiobox .label {
    min-height: 24px;
    padding-top: 3px;
  }
  .radiobox .label::before {
    width: 24px;
    height: 24px;
  }
  .radiobox .label::after {
    width: 24px;
    height: 24px;
  }
  .checkbox {
    display: flex;
  }
  .checkbox .label {
    min-height: 24px;
    padding-top: 3px;
  }
  .checkbox .label::before {
    width: 24px;
    height: 24px;
  }
  .checkbox .label::after {
    width: 19px;
    height: 9px;
    top: 5px;
    left: 3px;
  }
  .radiochecklist > div + div {
    margin-top: 12px;
  }
  .radiochecklist.row {
    margin-top: -12px;
  }
  .radiochecklist.row > div {
    margin-top: 12px;
  }
  .formbox {
    display: block;
    border-left: none;
    border-right: none;
    font-size: 1.4rem;
  }
  .formLabel {
    width: 100%;
    padding: 5px calc((100% - var(--pcw)) / 2);
    border-bottom: 1px solid #dfdfdf;
    font-weight: bold;
    font-size: 1.3rem;
  }
  .formLabel .hissu {
    font-weight: normal;
    font-size: 1.2rem;
  }
  .formBody {
    padding-left: calc((100% - var(--pcw)) / 2);
    padding-right: calc((100% - var(--pcw)) / 2);
  }
  .formBtn {
    margin-top: 20px;
  }
  .formCheck .formBtn {
    display: block;
    width: var(--pcw);
  }
  .formCheck .formBtn .back {
    margin-right: 0;
    margin-bottom: 12px;
  }
  .formCheck .formBtn button {
    width: 100%;
  }
  .formComplete .lead {
    text-align: left;
    font-size: 1.4rem;
  }
  .formComplete + .btnBack {
    margin-top: 38px;
  }
  .errorbox {
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 1.4rem;
  }
  .error .radiochecklist::before {
    top: -1px;
  }
  .error .radiochecklist.row::before {
    height: calc(100% - 10px);
    top: 11px;
  }
}
/* ----------------------------------------------
 * * footoer
 * *----------------------------------------------*/
footer {
  padding: 30px 0;
  background-color: #f3f3f3;
  text-align: center;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  footer {
    padding-top: 50px;
    font-family: Verdana, "Droid Sans", "Lato", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  }
}

/* ----------------------------------------------
 * * login
 * *----------------------------------------------*/
.login, .login ~ * {
  background-color: var(--green);
  color: #fff;
}
.login, .login ~ footer {
  display: none;
}
.login + main {
  grid-row: 1/-1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.login + main .btnJIDLogin, .login + main .btnLine {
  margin-top: 58px;
}
.login + main .caution {
  margin: 35px auto 0;
  max-width: 770px;
  font-size: 1.2rem;
  text-align: center;
}
.login + main .btnLine + .caution {
  text-align: left;
}
.login + main form {
  width: 356px;
  margin: 0 auto;
}
.login + main form h1 {
  text-align: center;
  margin-bottom: 42px;
}
.login + main .formbox {
  border: none;
  display: block;
  width: 100%;
  font-size: 100%;
}
.login + main .formbox + .formbox {
  margin-top: 10px;
}
.login + main .formBody {
  background-color: transparent;
  padding: 0;
}
.login + main .formBody input {
  border-radius: 9px;
}
.login + main .formBtn {
  margin-top: 25px;
}
.login + main .errorbox {
  width: 100%;
  margin: 10px auto;
  padding: 5px 10px;
  font-size: 100%;
}
.login + main .lineMessage {
  padding-top: 40px;
  font-feature-settings: "palt";
  letter-spacing: 0.03em;
}
.login + main .lineMessage .ttl {
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
}
.login + main .lineMessage .info {
  width: 670px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 11px;
  padding: 20px 10px;
  text-align: center;
  font-size: 1.5rem;
  color: #333;
}
.login + main .lineMessage .btnRelease {
  margin-top: 36px;
  text-align: center;
}
.login + main .maintenance {
  background-color: #fff;
  width: 670px;
  margin: 40px auto 0;
  border-radius: 11px;
  padding: 20px;
  font-size: 1.5rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  color: #333;
}
.login + main .maintenance p + p {
  margin-top: 1.5em;
}
.login + main .maintenance dl {
  font-weight: bold;
}
.login + main .maintenance dt {
  margin-top: 1.5em;
}
@media screen and (max-width: 767px) {
  .login + main .btnJIDLogin {
    width: 81.875%;
    margin-top: 48px;
    text-align: center;
  }
  .login + main .btnJIDLogin .btn01 {
    width: 100%;
  }
  .login + main .btnLine {
    width: 82.1875%;
    margin-top: 48px;
    text-align: center;
  }
  .login + main .btnLine button {
    width: 100%;
  }
  .login + main .btnLine + .caution {
    width: 92%;
  }
  .login + main .caution {
    margin-top: 25px;
  }
  .login + main form {
    width: 81.875%;
    font-size: 1.2rem;
  }
  .login + main form h1 {
    margin-bottom: 25px;
  }
  .login + main .errorbox {
    font-size: 1.3rem;
  }
  .login + main .lineMessage {
    padding-top: 72px;
  }
  .login + main .lineMessage .ttl {
    font-size: 1.7rem;
  }
  .login + main .lineMessage .info {
    width: 82.0313%;
    border-radius: 4px;
    padding: 18px 12px;
    text-align: left;
    font-size: 1.2rem;
  }
  .login + main .lineMessage .btnRelease {
    width: 82.0313%;
    margin: 28px auto 0;
  }
  .login + main .maintenance {
    width: 82.0313%;
    padding: 18px 12px;
    border-radius: 4px;
    font-size: 1.2rem;
  }
  .login + main .maintenance dd span {
    display: block;
  }
}
.loginError {
  height: 54px;
}
.loginError .home, .loginError .btnHamburger {
  display: none;
}
.loginError + main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.loginError + main section {
  flex: 0 0 auto;
  background-color: #f3f3f3;
  border: 1px solid #dfdfdf;
  width: 780px;
  margin: 0 auto;
  padding: 60px 68px;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
}
.loginError + main h1 {
  font-size: 2.4rem;
}
.loginError + main .caution {
  margin-top: 30px;
  color: #de0012;
}
.loginError + main dt {
  margin-top: 32px;
  margin-bottom: 5px;
  color: #60b424;
}
.loginError + main dd {
  font-weight: normal;
}
.loginError + main .btn {
  margin-top: 16px;
  font-size: 1.6rem;
}
.loginError + main .errorContact {
  margin-top: 35px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .loginError + main section {
    width: 92.8%;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 60px auto;
    font-size: 1.4rem;
  }
  .loginError + main h1 {
    font-size: 1.9rem;
  }
  .loginError + main .caution {
    text-align: left;
  }
  .loginError + main dt {
    text-align: left;
  }
  .loginError + main dd {
    text-align: left;
  }
  .loginError + main .btn {
    font-size: 100%;
    text-align: center;
  }
  .loginError + main .btn .btn02 {
    width: 100%;
  }
  .loginError + main .error02 dt + dd br {
    display: none;
  }
}

/* ----------------------------------------------
 * * mypage
 * *----------------------------------------------*/
.mypage, .mypage ~ * {
  --mypageBgc: var(--green);
  --mypageColor: #fff;
  --pointColor: var(--green02);
  --pointBg: repeating-linear-gradient(-45deg, var(--pointColor) 0px, var(--pointColor) 2px, rgba(82, 148, 58, 0) 2px, rgba(82, 148, 58, 0) 5px);
  background-color: #f3f3f3;
}
.mypage .gold, .mypage ~ * .gold {
  display: none;
}
.mypage {
  background-color: var(--mypageBgc);
}
.mypage .logo, .mypage .home {
  display: none;
}
.mypage .id01, .mypage .id02, .mypage .btnBeginner {
  display: block;
}
.mypage .id02 {
  margin-left: 8px;
}
.mypage .btnBeginner {
  width: 22px;
  margin-left: auto;
}
.mypage .btnHamburger {
  margin-left: 25px;
}
.mypage nav {
  background-color: var(--mypageBgc);
}
.mypage ~ * .mainbox {
  padding-top: 118px;
  background-color: var(--mypageBgc);
  color: var(--mypageColor);
}
.mypage ~ * .mainbox svg {
  fill: var(--mypageColor);
}
.mypage ~ * .mainbox .pointbox {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  padding: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--pointBg);
  position: relative;
  z-index: 0;
  text-align: center;
  color: var(--pointColor);
  font-weight: bold;
  font-size: 1.8rem;
}
.mypage ~ * .mainbox .pointbox::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  width: calc(100% - 42px);
  height: calc(100% - 42px);
  border: 4px solid var(--pointColor);
  background-color: #fff;
  border-radius: 50%;
}
.mypage ~ * .mainbox .pointbox .num {
  font-size: 5.6rem;
  line-height: 1.1;
}
.mypage ~ * .mainbox .logo01 {
  margin: 0 auto;
  width: 95px;
  height: 127px;
  position: absolute;
  right: 50%;
  top: 0;
  transform: translate(50%, -50%);
  background: url(../img/logo.svg) no-repeat center;
  background-size: 100% auto;
}
.mypage ~ * .mainbox .logo01 img {
  display: none;
}
.mypage ~ * .mainbox h2 {
  margin-bottom: 10px;
  font-size: 1.7rem;
}
.mypage ~ * .mainbox .starbox {
  display: none;
  justify-content: center;
  align-items: center;
  margin: 12px 0 4px;
}
.mypage ~ * .mainbox .starbox .star {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../img/icon-star.svg) no-repeat center top;
  background-size: 100% auto;
}
.mypage ~ * .mainbox .limit {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}
.mypage ~ * .mainbox .pointLimit {
  width: var(--pcw);
  margin: 60px auto 0;
  text-align: center;
  font-weight: bold;
  color: var(--pointColor);
}
.mypage ~ * .mainbox .pointLimit a {
  display: block;
  background-color: #fff;
  border-radius: 5px;
  border: 2px solid;
  padding: 0.5em 5px;
}
.mypage ~ * .mainbox ul {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 0;
  list-style: none;
  width: var(--pcw);
  margin: 0 auto;
  padding: 60px 0 65px;
  font-weight: bold;
}
.mypage ~ * .mainbox li {
  flex: 0 0 auto;
  width: 20%;
  display: flex;
}
.mypage ~ * .mainbox li a {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  text-align: center;
}
.mypage ~ * .mainbox li .icon {
  flex: 1 0 auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  position: relative;
  transform: translateZ(0);
}
.mypage ~ * .mainbox li .icon .num {
  position: absolute;
  left: calc(100% - 0.75em);
  top: -0.25em;
  background-color: var(--blue);
  color: #fff;
  padding: 0 0.5em;
  border-radius: 24px;
}
.mypage ~ * .mainbox li .icon-tokuten ~ .num {
  left: calc(50% + 0.5em);
}
.mypage ~ * .mainbox li .icon-coupon ~ .num, .mypage ~ * .mainbox li .icon-eventCoupon ~ .num {
  left: calc(50% + 0.75em);
}
.mypage ~ * .mainbox li .icon-pointlog ~ .num {
  left: calc(50% + 0.8em);
}
.mypage ~ * .mainbox li .icon-applyEvent ~ .num {
  left: calc(50% + 0.6em);
}
.mypage ~ * .mainbox li .text {
  flex: 0 0 auto;
  margin-top: 10px;
  display: block;
}
.webContents {
  list-style: none;
  width: var(--pcw);
  margin: 54px auto 40px;
  border: 2px solid #e4e4e4;
  border-radius: 12px;
}
.webContents li:nth-child(n+2) {
  border-top: 1px solid #e4e4e4;
}
.webContents li:first-child a {
  border-radius: 10px 10px 0 0;
}
.webContents li:last-child a {
  border-radius: 0 0 10px 10px;
}
.webContents a {
  display: flex;
  align-items: center;
  background: #fff url(../img/logo.svg) no-repeat 25px center;
  background-size: 24px auto;
  position: relative;
  padding: 15px 45px 15px 70px;
  text-decoration: none;
}
.webContents a::before {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 50%;
  width: 10px;
  height: 10px;
  border-right: 1px solid #b3b3b3;
  border-bottom: 1px solid #b3b3b3;
  transform: translateY(50%) rotate(-45deg);
}
.webContents .text {
  flex: 1 0 0%;
}
.webContents .howtouse a {
  background-image: url(../img/icon-point.svg);
}
.webContents .tickets a {
  background-image: url(../img/icon-bellticke.svg);
  background-size: 33px auto;
  background-position: 18px center;
}
.webContents .jLeague a {
  background-image: url(../img/icon-jleague.webp);
}

.banner {
  list-style: none;
  width: var(--pcw);
  margin: 40px auto 50px;
  display: flex;
  flex-wrap: wrap;
}
.banner li {
  flex: 0 0 252px;
  margin-top: 12px;
  margin-left: 12px;
}
.banner li:nth-child(-n+3) {
  margin-top: 0;
}
.banner li:nth-child(3n+1) {
  margin-left: 0;
}

.popupbox {
  width: 566px;
  border-radius: 17px;
  background-color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}
.popup.id .popupHd {
  background-color: var(--mypageBgc);
  border-radius: 17px 17px 0 0;
  padding: 15px 0;
  color: var(--mypageColor);
  text-align: center;
  font-size: 2.6rem;
}
.popup.id .popupHd .close {
  padding: 0 5px;
  font-size: 4.8rem;
  font-weight: normal;
  line-height: 1;
}
.popup.id .popupBody .name {
  padding: 32px 0 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.6rem;
}
.popup.id .popupBody .name .icon {
  flex: 0 0 auto;
  margin-right: 18px;
}
.popup.id .popupBody .name .icon svg {
  fill: var(--mypageBgc);
}
.popup.id .popupBody .days {
  text-align: center;
  color: var(--mypageBgc);
}
.popup.id .popupBody .days em {
  display: inline-block;
  margin: 0 5px 0 10px;
  font-style: normal;
  font-size: 2.6rem;
}
.popup.id .popupBody dl {
  padding: 25px 54px 45px;
}
.popup.id .popupBody dt {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--mypageBgc);
  border-radius: 2em;
  padding: 0 0.5em;
  margin-bottom: 8px;
  min-width: 126px;
  color: var(--mypageColor);
}
.popup.id .popupBody dt:nth-of-type(n+2) {
  margin-top: 15px;
}
.popup.id .popupBody dd {
  font-size: 2.6rem;
}
.popup.id .popupBody .seat {
  display: none;
  background-color: #e4e4e4;
  border-radius: 0 0 17px 17px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.popup.id .popupBody .seat dd {
  font-weight: normal;
  font-size: 2.4rem;
}
.popup.id .popupBody .seat dd em {
  font-style: normal;
  font-weight: bold;
  font-size: 2.7rem;
}
.popup.notice .popupbox {
  border-radius: 0;
  text-align: center;
  font-weight: normal;
}
.popup.notice .popupHd {
  padding: 40px 15px 15px;
}
.popup.notice .popupHd .ttl01 {
  font-weight: bold;
}
.popup.notice .popupHd .close {
  border: none;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 2rem;
}
.popup.notice .popupBody {
  padding: 0 15px 20px;
  font-size: 1.6rem;
}
.popup.notice .popupBody p + p {
  margin-top: 0.5em;
}
.popup.notice .popupBody a {
  color: var(--green);
}
.popup.notice .popupFt .close {
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  border: none;
  background-color: var(--green);
  color: #fff;
  width: 100%;
  height: 44px;
}

#popupID:checked ~ .popup.id {
  visibility: visible;
  transform: scale(1, 1);
}

#popupNotice:checked ~ .popup.notice {
  visibility: visible;
  transform: scale(1, 1);
}

.mypage ~ .popup {
  background-color: rgba(0, 0, 0, 0.7);
}
.mypage.seasonTickets ~ * .mainbox .starbox {
  display: flex;
}
.mypage.seasonTickets ~ .popup.id .popupBody .seat {
  display: block;
}
.mypage.junior, .mypage.junior ~ * {
  --mypageBgc: var(--blue02);
  --pointColor: #004883;
  --pointBg: repeating-linear-gradient(-45deg, var(--pointColor) 0px, var(--pointColor) 2px, rgba(0, 72, 131, 0) 2px, rgba(0, 72, 131, 0) 5px);
}
.mypage.partner, .mypage.partner ~ * {
  --mypageBgc: #333;
  --mypageColor: #c5950f;
  --pointColor: #e5a500;
  --pointBg: repeating-linear-gradient(-45deg, var(--pointColor) 0px, var(--pointColor) 2px, rgba(229, 165, 0, 0) 2px, rgba(229, 165, 0, 0) 5px);
}
.mypage.partner .regular, .mypage.partner ~ * .regular {
  display: none;
}
.mypage.partner .gold, .mypage.partner ~ * .gold {
  display: inline;
}
.mypage.partner .btnHamburger::before, .mypage.partner .btnHamburger::after {
  background: linear-gradient(110deg, #de9e00 3%, #f0cb50 27.4%, #ffef90 34%, #ecb942 44%, #db8b00 100%);
}
.mypage.partner .btnHamburger span {
  background: linear-gradient(110deg, #de9e00 3%, #f0cb50 27.4%, #ffef90 34%, #ecb942 44%, #db8b00 100%);
}
#hamburgerSwitch:checked ~ .mypage.partner .btnHamburger span {
  background: none;
}
.mypage.partner ~ * .mainbox .logo01 {
  background-image: url(../img/logo-gold.svg);
}
.mypage.partner ~ * .mainbox .pointbox {
  background: var(--pointBg), linear-gradient(110deg, #de9e00 13%, #f0cb50 27.4%, #ffef90 34%, #ecb942 44%, #db8b00 100%);
}
.mypage.partner ~ * .mainbox .pointbox::before {
  background-color: var(--mypageBgc);
}
.mypage.partner ~ * .mainbox li .icon .num {
  background-color: var(--mypageColor);
}
.mypage.partner ~ .popup.id .popupbox {
  background-color: #222;
}
.mypage.partner ~ .popup.id .popupHd {
  background-color: #222;
}
.mypage.partner ~ .popup.id .popupBody {
  color: #fff;
}
.mypage.partner ~ .popup.id .popupBody .name .icon svg {
  fill: var(--mypageColor);
}
.mypage.partner ~ .popup.id .popupBody .days {
  color: var(--mypageColor);
}
.mypage.partner ~ .popup.id .popupBody dt {
  background-color: var(--mypageColor);
  color: var(--mypageBgc);
}
.mypage.partner ~ .popup.id .popupBody .seat {
  background-color: var(--mypageBgc);
}
.mypage.stop, .mypage.stop ~ * {
  background-color: var(--green);
  color: #fff;
}
.mypage.stop, .mypage.stop ~ footer {
  display: none;
}
.mypage.stop + main {
  grid-row: 1/-1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mypage.stop + main .memberStatus0 {
  background-color: #fff;
  max-width: 670px;
  margin: 60px auto 0;
  border-radius: 11px;
  padding: 30px;
  font-size: 1.5rem;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
  color: #333;
}
.mypage.stop + main .memberStatus0 h2 {
  margin-top: 2em;
}
.mypage.stop + main .memberStatus0 dl {
  margin-top: 2em;
}
.mypage.stop + main a {
  color: var(--green);
  word-wrap: break-word;
}
@media screen and (min-width: 768px) {
  .mypage ~ * .mainbox li a:hover {
    opacity: 0.6;
  }
  .webContents a:hover {
    text-decoration: underline;
    background-color: #f1f1f1;
  }
  .banner a:hover {
    opacity: 0.6;
  }
}
@media (any-pointer: coarse) {
  .mypage ~ * .mainbox li a:active {
    opacity: 0.6;
  }
  .webContents a:active {
    text-decoration: underline;
    background-color: #f1f1f1;
  }
  .banner a:active {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .mypage .btnBeginner {
    width: 18px;
  }
  .mypage .btnHamburger {
    margin-left: 8px;
  }
  .mypage nav {
    background-color: #f3f3f3;
  }
  .mypage ~ * .mainbox {
    padding-top: 45px;
  }
  .mypage ~ * .mainbox .pointbox {
    width: 250px;
    height: 250px;
    padding: 15px;
    font-size: 1.6rem;
  }
  .mypage ~ * .mainbox .pointbox::before {
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    border-width: 1px;
  }
  .mypage ~ * .mainbox .pointbox .point {
    line-height: 1.2;
  }
  .mypage ~ * .mainbox .pointbox .num {
    font-size: 4.7rem;
  }
  .mypage ~ * .mainbox .logo01 {
    width: 66px;
    height: 88px;
  }
  .mypage ~ * .mainbox h2 {
    margin-bottom: 6px;
    font-size: 1.4rem;
  }
  .mypage ~ * .mainbox .starbox {
    margin: 0 0 6px;
  }
  .mypage ~ * .mainbox .starbox .star {
    width: 18px;
    height: 18px;
  }
  .mypage ~ * .mainbox .limit {
    margin-top: 10px;
    font-size: 1.1rem;
  }
  .mypage ~ * .mainbox .pointLimit {
    width: 92%;
    margin-top: 42px;
  }
  .mypage ~ * .mainbox ul {
    width: 92%;
    max-width: 270px;
    padding: 42px 0 36px;
    gap: 25px 0;
    font-size: 1rem;
  }
  .mypage ~ * .mainbox li {
    width: 90px;
  }
  .mypage ~ * .mainbox .icon .num {
    transform: translate(2px, -2px);
  }
  .mypage ~ * .mainbox .icon-qrcode {
    width: 33px;
    height: 33px;
  }
  .mypage ~ * .mainbox .icon-qrcode + img {
    width: 33px;
  }
  .mypage ~ * .mainbox .icon-point {
    width: 33px;
    height: 33px;
  }
  .mypage ~ * .mainbox .icon-point + img {
    width: 33px;
  }
  .mypage ~ * .mainbox .icon-tokuten {
    width: 28px;
    height: 33px;
  }
  .mypage ~ * .mainbox .icon-tokuten + img {
    width: 28px;
  }
  .mypage ~ * .mainbox .icon-tokuten ~ .num {
    transform: translate(6px, -2px);
  }
  .mypage ~ * .mainbox .icon-mail {
    width: 34px;
    height: 26px;
  }
  .mypage ~ * .mainbox .icon-mail + img {
    width: 34px;
  }
  .mypage ~ * .mainbox .icon-mail ~ .num {
    transform: translate(0, -2px);
  }
  .mypage ~ * .mainbox .icon-ball {
    width: 32px;
    height: 32px;
  }
  .mypage ~ * .mainbox .icon-ball + img {
    width: 32px;
  }
  .mypage ~ * .mainbox .icon-pointlog {
    width: 35px;
    height: 35px;
  }
  .mypage ~ * .mainbox .icon-pointlog + img {
    width: 35px;
  }
  .mypage ~ * .mainbox .icon-coupon, .mypage ~ * .mainbox .icon-eventCoupon {
    width: 42px;
    height: 26px;
  }
  .mypage ~ * .mainbox .icon-coupon + img, .mypage ~ * .mainbox .icon-eventCoupon + img {
    width: 42px;
  }
  .mypage ~ * .mainbox .icon-applyEvent {
    width: 26px;
    height: auto;
  }
  .mypage ~ * .mainbox .icon-applyEvent + img {
    width: 26px;
  }
  .webContents {
    width: auto;
    margin: 0 0 22px;
    border-radius: 0;
    border: none;
    font-size: 1.3rem;
  }
  .webContents li:nth-child(n) {
    border-bottom: 1px solid #e4e4e4;
    border-top: none;
  }
  .webContents li:nth-child(n) a {
    border-radius: 0;
    padding: 15px 4% 15px calc(4% + 32px);
    background-position: 4% center;
    background-size: 20px auto;
  }
  .webContents li:nth-child(n) a::before {
    display: none;
  }
  .webContents li.tickets a {
    background-size: 26px auto;
    background-position: calc(4% - 3px) center;
  }
  .banner {
    width: 92%;
    margin: 0 auto;
  }
  .banner li {
    flex-basis: 48.8%;
  }
  .banner li:nth-child(n) {
    margin-left: auto;
    margin-top: 12px;
  }
  .banner li:nth-child(-n+2) {
    margin-top: 0;
  }
  .banner li:nth-child(2n+1) {
    margin-left: 0;
  }
  .popup.id .popupbox {
    width: 88.4375%;
    max-height: 90%;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    font-size: 1rem;
  }
  .popup.id .popupHd {
    font-size: 1.6rem;
  }
  .popup.id .popupHd .close {
    font-size: 2.9rem;
  }
  .popup.id .popupBody .name {
    padding: 20px 0 6px;
    font-size: 1.6rem;
  }
  .popup.id .popupBody .name .icon {
    margin-right: 12px;
  }
  .popup.id .popupBody .days em {
    font-size: 1.6rem;
  }
  .popup.id .popupBody dl {
    padding: 15px 32px 28px;
  }
  .popup.id .popupBody dt {
    min-width: 75px;
  }
  .popup.id .popupBody dd {
    font-size: 1.6rem;
  }
  .popup.id .popupBody .seat {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .popup.id .popupBody .seat dd {
    font-size: 1.4rem;
  }
  .popup.id .popupBody .seat dd em {
    font-size: 1.6rem;
  }
  .popup.notice .popupbox {
    width: 89.8125%;
    font-size: 1.6rem;
  }
  .popup.notice .popupBody {
    font-size: 1.4rem;
  }
  .mypage.stop + main {
    display: block;
    padding: 40px 0;
    overflow: auto;
  }
  .mypage.stop + main h1 {
    text-align: center;
  }
  .mypage.stop + main .memberStatus0 {
    width: 82.0313%;
    padding: 18px 12px;
    margin-top: 40px;
    border-radius: 4px;
    font-size: 1.2rem;
  }
}

/* ----------------------------------------------
 * * qrcode
 * *----------------------------------------------*/
.qrcode {
  background-color: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}
.qrcode + footer {
  background-color: var(--green);
  color: #fff;
}
.qrcode h1 {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 95px;
  text-align: center;
  font-size: 2.4rem;
}
.qrcode .lead {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 15px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 2.4;
}
.qrcodebox {
  flex: 0 0 auto;
  margin: 140px auto;
  display: flex;
  flex-direction: column;
}
.qrcodebox .img {
  flex: 0 0 auto;
  width: 408px;
  height: 408px;
  margin-bottom: auto;
  border-radius: 27px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qrcodebox ul {
  flex: 0 0 auto;
  list-style: none;
  display: flex;
  justify-content: space-between;
  width: 408px;
  margin: 70px auto auto;
  font-weight: bold;
  text-align: center;
  position: relative;
}
.qrcodebox ul::before {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  width: 2px;
  height: 100%;
  background-color: var(--green02);
}
.qrcodebox li {
  flex: 0 0 auto;
}
.qrcodebox a {
  display: block;
  text-decoration: none;
}
.qrcodebox a .icon {
  display: block;
  margin-bottom: 20px;
}
.qrcodebox a .icon svg {
  width: 55px;
  height: 55px;
  fill: #fff;
  transform: translateZ(0);
}
.qrcodebox .current a {
  pointer-events: none;
  opacity: 0.5;
}
@media screen and (min-width: 768px) {
  .qrcodebox a:hover {
    opacity: 0.6;
  }
}
@media (any-pointer: coarse) {
  .qrcodebox a:hover {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .qrcode h1 {
    margin-top: 36px;
    font-size: 1.9rem;
  }
  .qrcode .lead {
    margin-top: 12px;
    font-size: 1.3rem;
    line-height: 1.636;
  }
  .qrcodebox {
    width: 63.75%;
    margin: 40px auto 0;
  }
  .qrcodebox .img {
    width: 100%;
    height: auto;
    padding-top: 100%;
    position: relative;
    border-radius: 16px;
  }
  .qrcodebox .img img {
    position: absolute;
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    width: calc(100% - 76px);
  }
  .qrcodebox ul {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 0.9rem;
  }
  .qrcodebox ul::before {
    width: 1px;
  }
  .qrcodebox ul .icon {
    margin-bottom: 12px;
  }
  .qrcodebox ul .icon img, .qrcodebox ul .icon svg {
    width: 33px;
    height: 33px;
  }
}

/* ----------------------------------------------
 * * point
 * *----------------------------------------------*/
.couponPagettl {
  height: auto;
  min-height: 235px;
  padding-bottom: 30px;
}
.couponPagettl .error {
  width: var(--pcw);
  margin: 15px auto 0;
  padding: 5px 1em;
  border: 1px solid var(--red);
  background-color: var(--pink);
  text-align: left;
  color: var(--red);
  font-weight: bold;
}
.couponPagettl + .pointInfoWrap {
  margin-top: -30px;
  padding: 30px 0;
  position: sticky;
  top: 0;
  z-index: 1;
}

.couponlist {
  list-style: none;
  width: var(--pcw);
  margin: 50px auto 145px;
  border: 1px solid #dfdfdf;
  font-size: 1.8rem;
}
.couponlist li:not(:first-child) {
  border-top: 1px solid #dfdfdf;
}
.couponlist a {
  display: flex;
  padding: 10px 15px 10px 30px;
  text-decoration: none;
}
.couponlist .thumb {
  flex: 0 0 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 25px;
}
.couponlist .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  border-radius: 11px;
  overflow: hidden;
}
.couponlist .thumb.waku {
  position: relative;
  z-index: 0;
}
.couponlist .thumb.waku::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 11px;
}
.couponlist .thumb.waku img {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
.couponlist .text {
  flex: 1 0 0%;
  display: flex;
  flex-direction: column;
  padding-top: 0.2em;
  line-height: 1.5;
}
.couponlist .text .usePoint {
  margin-top: auto;
  text-align: right;
  color: var(--green);
  font-weight: bold;
  line-height: 1.2;
}
.couponlist .text em {
  display: inline-block;
  margin-right: 5px;
  font-style: normal;
  font-size: 3rem;
}
.couponlist .tag {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 1rem;
  line-height: 2;
}
.couponlist .tag > * {
  flex: 0 0 auto;
  background-color: var(--blue);
  padding: 0 1em;
  margin-right: 0.5em;
  border-radius: 2em;
  color: #fff;
  font-weight: bold;
}
.couponlist .tag .nyukai {
  background-color: var(--orange);
}
.couponlist .tag .raijou {
  background-color: var(--blue02);
}
@media screen and (min-width: 768px) {
  .couponlist a:hover {
    background-color: #f1f1f1;
  }
}
@media (any-pointer: coarse) {
  .couponlist a:active {
    background-color: #f1f1f1;
  }
}

@media screen and (max-width: 767px) {
  .couponPagettl {
    min-height: 128px;
    padding-bottom: 20px;
  }
  .couponPagettl .error {
    width: 92%;
    padding: 5px 0.5em;
  }
  .couponPagettl + .pointInfoWrap {
    margin-top: -20px;
    padding: 20px 0;
  }
  .couponlist {
    width: auto;
    margin: 12px auto 0;
    border: none;
    font-size: 1.4rem;
  }
  .couponlist li {
    border-bottom: 1px solid #dfdfdf;
  }
  .couponlist li:not(:first-child) {
    border-top: none;
  }
  .couponlist a {
    padding: 12px 4%;
  }
  .couponlist .thumb {
    margin-right: 12px;
  }
  .couponlist .text .usePoint {
    font-size: 1.3rem;
  }
  .couponlist .text em {
    font-size: 2.2rem;
  }
}
/* ======== detail ======== */
.couponWrap {
  background-color: var(--green);
  padding-bottom: 88px;
}
.coupon {
  background-color: #fff;
  width: var(--pcw);
  margin: 0 auto;
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  padding: 40px 46px 0;
  font-size: 1.8rem;
}
.coupon .thumb {
  flex: 0 0 200px;
  margin-bottom: 30px;
  margin-right: 25px;
}
.coupon .thumb img {
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
}
.coupon .text {
  flex: 1 0 0%;
  margin-bottom: 30px;
}
.coupon .name {
  margin-top: 0.3em;
  font-weight: bold;
  font-size: 2.2rem;
  line-height: 1.3;
}
.coupon .usePoint {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  color: var(--green);
  font-weight: bold;
  line-height: 1.3;
}
.coupon .usePoint em {
  display: inline-block;
  margin: 0 5px 0 0.75em;
  font-style: normal;
  font-size: 3.4rem;
}
.coupon .text01 {
  margin-top: 20px;
  font-size: 1.5rem;
}
.coupon .limit {
  flex: 0 0 100%;
  border-top: 1px dashed #c9c9c9;
  padding: 12px 0 18px;
  text-align: center;
  font-size: 1.5rem;
}
.coupon .limit em {
  font-style: normal;
  font-weight: bold;
}
.couponDetail + footer {
  padding-bottom: 106px;
}
.couponDetail .caution {
  width: var(--pcw);
  margin: 42px auto 52px;
  color: var(--red);
  font-size: 1.5rem;
  line-height: 2;
}
.couponDetail .caution .kome {
  color: #333;
  text-indent: -1em;
  padding-left: 1em;
}
.couponDetail .btnSlide {
  width: 284px;
  height: 56px;
  border-radius: 56px;
  background-color: #9d9b9e;
  position: relative;
  padding: 3px 3px 3px 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
}
.couponDetail .btnUse {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: none;
  background-color: #d70012;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.4rem;
  color: inherit;
  font-weight: bold;
  transition-duration: 0.3s;
}
.couponDetail .btnUse span {
  display: block;
  flex: 0 0 50px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .couponDetail {
    --pcw: 89.375%;
  }
  .couponWrap {
    padding-bottom: 38px;
  }
  .coupon {
    display: block;
    border-radius: 24px;
    padding: 0;
    font-size: 1.6rem;
  }
  .coupon .thumb {
    margin-right: 0;
    margin-bottom: 44px;
    height: 44.8vw;
  }
  .coupon .thumb img {
    height: 100%;
    object-fit: cover;
    border-radius: 24px 24px 0 0;
  }
  .coupon .text {
    margin: 0 5.3333vw;
  }
  .coupon .name {
    text-align: center;
    font-size: 2rem;
    line-height: 1.735;
  }
  .coupon .usePoint {
    margin-top: 8px;
  }
  .coupon .usePoint dt {
    margin-right: auto;
  }
  .coupon .usePoint em {
    margin-left: 0;
    font-size: 3rem;
  }
  .coupon .text01 {
    font-size: 1.2rem;
  }
  .coupon .limit {
    margin: 18px 5.3333vw 0;
    padding: 16px 0 24px;
    font-size: min(1.2rem, 2.965vw);
  }
  .couponDetail + footer {
    padding-bottom: 122px;
  }
  .couponDetail .caution {
    margin: 22px auto;
    font-size: 1.2rem;
    line-height: 1.5;
  }
  .couponDetail .btnSlide {
    width: 295px;
    height: 74px;
    border-radius: 74px;
    padding: 5px 0 5px 69px;
    font-size: 1.62rem;
  }
  .couponDetail .btnUse {
    left: 5px;
    top: 5px;
    width: 64px;
    height: 64px;
    border-radius: 64px;
    font-size: 1.8rem;
  }
  .couponDetail .btnUse span {
    flex-basis: 64px;
  }
}
/* ======== complete ======== */
.couponComplete {
  background-color: #f3f3f3;
}
.couponComplete .pageTtl .date {
  margin-top: 4px;
  font-weight: bold;
  font-size: 2.2rem;
}
.couponComplete .coupon {
  display: block;
  padding-bottom: 24px;
  text-align: center;
}
.couponComplete .coupon + .coupon {
  margin-top: 24px;
}
.couponComplete .couponTtl {
  margin-bottom: 20px;
  color: var(--green);
  font-weight: bold;
  font-size: 2.2rem;
}
.couponComplete .coupon .usePoint {
  justify-content: center;
}
.couponComplete .coupon .text01 {
  text-align: left;
}
.couponComplete .coupon .code {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.2rem;
  font-weight: bold;
}
.couponComplete .coupon .code span {
  flex-shrink: 1;
  min-width: 0;
  word-break: break-all;
  line-height: 1.2;
}
.couponComplete .coupon .code button {
  width: auto;
  margin-left: 15px;
  min-height: 0;
  padding: 0.3em 1em 0.2em;
  border-radius: 2em;
  border-color: var(--green);
  background-color: var(--green);
  font-size: 1rem;
}
.couponComplete .coupon .code ~ .text01 {
  text-align: center;
}
.couponComplete .pointLog {
  width: var(--pcw);
  margin: 46px auto;
  background-color: #fff;
  border-radius: 18px;
  padding: 18px 30px;
  font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
  .couponComplete {
    --pcw: 89.375%;
  }
  .couponComplete .pageTtl {
    font-size: 1.7rem;
  }
  .couponComplete .pageTtl .ttl, .couponComplete .pageTtl .date {
    font-size: 100%;
  }
  .couponComplete .coupon {
    padding: 24px 5.3333vw;
    border-radius: 17px;
  }
  .couponComplete .coupon + .coupon {
    margin-top: 14px;
  }
  .couponComplete .couponTtl {
    font-size: 1.8rem;
  }
  .couponComplete .pointLog {
    margin: 20px auto;
    padding: 24px 18px;
    border-radius: 15px;
    font-size: 1.3rem;
  }
}

/* ----------------------------------------------
 * * tokuten
 * *----------------------------------------------*/
.tokutenDetail + footer {
  padding-bottom: 106px;
}
.tokutenDetail .thumb {
  flex-basis: 195px;
}
.tokutenDetail .thumb img {
  border-radius: 8px;
}
.tokutenDetail .caution {
  width: var(--pcw);
  margin: 35px auto 0;
  color: var(--red);
  font-size: 1.5rem;
  line-height: 2;
}
.tokutenDetail .caution + .caution {
  margin-top: 15px;
  margin-bottom: 42px;
  font-size: 1.4rem;
  line-height: 1.6;
}
.tokutenDetail .caution .kome {
  color: #333;
  text-indent: -1em;
  padding-left: 1em;
}
.tokutenDetail .fxdBtm {
  color: #fff;
  font-weight: bold;
}
.tokutenDetail .fxdBtm .btnSlide {
  width: 284px;
  height: 56px;
  border-radius: 56px;
  background-color: #9d9b9e;
  position: relative;
  padding: 3px 3px 3px 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}
.tokutenDetail .fxdBtm .btnUse {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: none;
  background-color: #d70012;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 1.4rem;
  color: inherit;
  font-weight: bold;
  transition-duration: 0.3s;
}
.tokutenDetail .fxdBtm .btnUse span {
  display: block;
  flex: 0 0 50px;
  text-align: center;
}

.check .popupbox {
  width: 400px;
  border-radius: 0;
  font-weight: normal;
  font-size: 1.5rem;
}
.check .popupHd {
  border-bottom: 1px solid #d9dde1;
  display: flex;
  align-items: center;
  padding: 0 15px;
  min-height: 40px;
  font-size: 1.7rem;
}
.check .popupHd .close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 2rem;
  color: #808080;
}
.check .popupBody {
  padding: 20px;
  text-align: center;
}
.check .popupBody .ttl02 {
  margin-bottom: 12px;
  font-weight: bold;
  font-size: 1.8rem;
}
.check .popupBody .red {
  color: var(--red);
}
.check .popupFt {
  display: flex;
  font-size: 1.8rem;
}
.check .popupFt button {
  flex: 1 1 50%;
  min-height: 44px;
  border: none;
  background-color: var(--green);
  color: #fff;
}
.check .popupFt .cancel {
  background-color: #cacfd5;
  color: inherit;
}

#popupCheck:checked ~ main .fxdBtm .btnUse {
  width: 278px;
}
#popupCheck:checked ~ .popup.check {
  visibility: visible;
  transform: scale(1, 1);
  transition-delay: 0.3s;
}

.noCoupon {
  background-color: #f3f3f3;
}
.noCoupon .noCoupon {
  margin: 32px auto;
  text-align: center;
  font-size: 1.5rem;
}

/* ======== complete ======== */
.tokutenComplete {
  background-color: #f3f3f3;
}
.tokutenComplete .pageTtl .date {
  margin-top: 4px;
  font-weight: bold;
  font-size: 2.2rem;
}
.tokutenComplete .coupon {
  display: block;
  padding-bottom: 24px;
  text-align: center;
}
.tokutenComplete .coupon + .coupon {
  margin-top: 24px;
}
.tokutenComplete .couponTtl {
  margin-bottom: 20px;
  color: var(--green);
  font-weight: bold;
  font-size: 2.2rem;
}
.tokutenComplete .coupon .text01 {
  text-align: left;
}
.tokutenComplete .coupon .code {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.2rem;
  font-weight: bold;
}
.tokutenComplete .coupon .code span {
  flex-shrink: 1;
  min-width: 0;
  word-break: break-all;
  line-height: 1.2;
}
.tokutenComplete .coupon .code button {
  flex: 0 0 auto;
  width: auto;
  margin-left: 15px;
  min-height: 0;
  padding: 0.3em 1em 0.2em;
  border-radius: 2em;
  border-color: var(--green);
  background-color: var(--green);
  font-size: 1rem;
}
.tokutenComplete .coupon .code ~ .text01 {
  text-align: center;
}
.tokutenComplete .coupon .textTicket {
  text-align: left;
  color: var(--red);
  font-size: 1.6rem;
}
.tokutenComplete .coupon .textTicket dt {
  margin-bottom: 3px;
  font-weight: bold;
}
.tokutenComplete .coupon .textTicket dt::before {
  content: "■";
  display: inline;
}
.tokutenComplete .coupon .textTicket dt:nth-of-type(n+2) {
  margin-top: 10px;
}
.tokutenComplete .pointLog {
  width: var(--pcw);
  margin: 46px auto;
  background-color: #fff;
  border-radius: 18px;
  padding: 18px 30px;
  font-size: 1.5rem;
}
.tokutenComplete .btnExchangepage {
  position: sticky;
  left: 0;
  bottom: 0;
  background-color: inherit;
  padding: 20px 0;
}
.tokutenComplete .btnExchangepage .btn01 {
  display: flex;
  margin: 0 auto;
  width: 20em;
  height: 3em;
  border-radius: 3em;
  letter-spacing: 0.03em;
}

@media screen and (min-width: 768px) {
  .tokutenDetail .fxdBtm button:hover {
    opacity: 1;
  }
}
@media (any-pointer: coarse) {
  .tokutenDetail .fxdBtm button:active {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  .tokutenDetail {
    --pcw: 89.375%;
  }
  .tokutenDetail .coupon .thumb {
    margin-bottom: 20px;
    max-height: 55.7813vw;
    height: auto;
  }
  .tokutenDetail .coupon .thumb img {
    border-radius: 24px 24px 0 0;
  }
  .tokutenDetail .coupon .text01 {
    margin-top: 10px;
  }
  .tokutenDetail .caution {
    margin: 22px auto 0;
    font-size: 1.2rem;
    line-height: 1.5;
  }
  .tokutenDetail .caution + .caution {
    margin-top: 10px;
    font-size: 1.1rem;
  }
  .tokutenDetail .fxdBtm .btnSlide {
    width: 295px;
    height: 74px;
    border-radius: 74px;
    padding: 5px 0 5px 69px;
    font-size: 1.62rem;
  }
  .tokutenDetail .fxdBtm .btnUse {
    left: 5px;
    top: 5px;
    width: 64px;
    height: 64px;
    border-radius: 64px;
    font-size: 1.8rem;
  }
  .tokutenDetail .fxdBtm .btnUse span {
    flex-basis: 64px;
  }
  .check .popupbox {
    width: 89.8125%;
    font-size: 1.3rem;
  }
  .check .popupHd {
    font-size: 1.6rem;
  }
  .check .popupHd .close {
    font-size: 2.2rem;
  }
  .check .popupBody .ttl02 {
    font-size: 1.6rem;
  }
  .check .popupFt {
    font-size: 1.7rem;
  }
  #popupCheck:checked ~ main .fxdBtm .btnUse {
    width: 285px;
  }
  /* ======== complete ======== */
  .tokutenComplete {
    --pcw: 89.375%;
  }
  .tokutenComplete .pageTtl {
    font-size: 1.7rem;
  }
  .tokutenComplete .pageTtl .ttl, .tokutenComplete .pageTtl .date {
    font-size: 100%;
  }
  .tokutenComplete .coupon {
    padding: 24px 5.3333vw;
    border-radius: 17px;
  }
  .tokutenComplete .coupon + .coupon {
    margin-top: 14px;
  }
  .tokutenComplete .couponTtl {
    font-size: 1.8rem;
  }
  .tokutenComplete .coupon .textTicket {
    font-size: 1.3rem;
  }
  .tokutenComplete .coupon .textTicket dt {
    margin-bottom: 0;
  }
  .tokutenComplete .coupon .textTicket dt:nth-of-type(n+2) {
    margin-top: 5px;
  }
  .tokutenComplete .pointLog {
    margin: 20px auto;
    padding: 24px 18px;
    border-radius: 15px;
    font-size: 1.3rem;
  }
  .tokutenComplete .btnExchangepage .btn01 {
    width: var(--pcw);
    font-size: 1.6rem;
  }
}
/* ----------------------------------------------
 * * pointHistory
 * *----------------------------------------------*/
.pointInfo {
  background-color: #fff;
  border-radius: 11px;
  width: var(--pcw);
  margin: 0 auto;
  padding: 5px 32px 10px;
  font-size: 2rem;
}
.pointInfoWrap {
  background-color: var(--green);
  padding: 100px 0 62px;
}
.pointInfo .row {
  display: flex;
  align-items: center;
  padding: 15px 0;
}
.pointInfo .row + .row {
  border-top: 2px solid #dfdfdf;
}
.pointInfo .ttl {
  flex: 0 0 auto;
  padding-left: 15px;
}
.pointInfo .text {
  padding-right: 15px;
  flex: 0 1 auto;
  margin-left: auto;
  min-width: 0;
  word-wrap: break-word;
  text-align: right;
  font-weight: bold;
  font-size: 2.4rem;
}
.pointInfo .text em {
  margin-right: 5px;
  font-style: normal;
  font-size: 3.2rem;
}
.pointInfo .nowPoint {
  flex-wrap: wrap;
}
.pointInfo .nowPoint .text {
  font-size: 2.5rem;
}
.pointInfo .nowPoint .poitLimited {
  flex: 0 0 100%;
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 15px;
  margin-top: 5px;
  margin: 5px 0 -15px;
  position: relative;
  font-weight: bold;
  line-height: 1.2;
}
.pointInfo .nowPoint .poitLimited::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
  left: 0;
  top: 100%;
}
.pointInfo .nowPoint .poitLimited #poitLimitedMore {
  display: none;
}
.pointInfo .nowPoint .poitLimitedTable {
  display: grid;
  grid-template-columns: auto 1fr;
  color: #808080;
  font-size: 1.8rem;
}
.pointInfo .nowPoint .poitLimitedTable > :nth-of-type(-n+2) {
  color: var(--red);
}
.pointInfo .nowPoint .poitLimitedTable > *:last-of-type {
  color: #333;
}
.pointInfo .nowPoint .poitLimitedTable > * {
  margin-top: 0.3em;
}
.pointInfo .nowPoint .poitLimitedTable dd {
  text-align: right;
}
.pointInfo .nowPoint .poitLimitedTable dd label {
  display: block;
  font-weight: normal;
  color: var(--green);
  cursor: pointer;
}
.pointInfo .nowPoint .poitLimitedTable dd .unit {
  display: inline-block;
  margin-left: 0.25em;
  font-size: 77.8%;
}
.pointInfo .nowPoint .poitLimitedTable dd:last-of-type label {
  margin-top: 0.5em;
}
.pointInfo .nowPoint .poitLimitedMore .num {
  display: none;
}
.pointInfo .nowPoint .poitLimitedMore ~ * {
  display: none;
}
.pointInfo .nowPoint .poitLimited #poitLimitedMore:checked ~ dl .poitLimitedMore {
  display: none;
}
.pointInfo .nowPoint .poitLimited #poitLimitedMore:checked ~ dl .poitLimitedMoreDt {
  display: none;
}
.pointInfo .nowPoint .poitLimited #poitLimitedMore:checked ~ dl .poitLimitedMore ~ * {
  display: block;
}

.pointHistory {
  width: var(--pcw);
  margin: 25px auto 62px;
}
.pointHistory ol {
  list-style: none;
  border: 1px solid #dfdfdf;
  margin-top: 12px;
}
.pointHistory li {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 30px;
  font-size: 1.5rem;
}
.pointHistory li:nth-child(n+2) {
  border-top: 1px solid #dfdfdf;
}
.pointHistory .date {
  flex: 0 0 100%;
  color: #808080;
}
.pointHistory .text {
  flex: 1 0 0%;
}
.pointHistory .point {
  flex: 0 1 auto;
  text-align: right;
  margin-left: auto;
  min-width: 0;
  word-wrap: break-word;
  font-weight: bold;
}
.pointHistory .limit {
  flex: 0 0 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #808080;
}
.pointHistory .limit .tag {
  display: block;
  margin-right: 0.5em;
  background-color: var(--green);
  padding: 0 1em;
  border-radius: 1.6em;
  color: #fff;
  font-weight: normal;
  font-size: 1.2rem;
}
.pointHistory .minus .point {
  color: var(--red);
}
.pointHistory .minusLimit .text {
  color: var(--red);
}

.historyHd {
  display: flex;
  align-items: baseline;
}
.historyHd h1 {
  flex: 1 0 0%;
  color: #808080;
  font-size: 2rem;
}
.historyHd .select {
  flex: 0 0 212px;
}

@media screen and (max-width: 767px) {
  .pointInfo {
    width: 89.6063%;
    padding: 0 12px;
    border-radius: 15px;
    font-size: 1.4rem;
  }
  .pointInfoWrap {
    padding: 44px 0 28px;
  }
  .pointInfo .row {
    padding: 12px 0;
  }
  .pointInfo .row + .row {
    border-top-width: 1px;
  }
  .pointInfo .ttl {
    padding-left: 8px;
  }
  .pointInfo .text {
    padding-right: 8px;
    font-size: 1.7rem;
  }
  .pointInfo .text em {
    font-size: 2.8rem;
  }
  .pointInfo .nowPoint .text {
    font-size: 1.7rem;
  }
  .pointInfo .nowPoint .poitLimited {
    padding: 8px;
    margin-bottom: -12px;
    font-size: 1.5rem;
  }
  .pointInfo .nowPoint .poitLimited::before {
    height: 1px;
  }
  .pointInfo .nowPoint .poitLimitedTable {
    font-size: 1.3rem;
  }
  .pointHistory {
    margin: 0 0 34px;
    width: auto;
  }
  .pointHistory ol {
    margin-top: 0;
    border-left: none;
    border-right: none;
  }
  .pointHistory li {
    align-items: flex-end;
    padding: 15px 5.1968%;
    font-size: 1.4rem;
  }
  .pointHistory .text {
    flex: 0 0 50%;
  }
  .pointHistory .point {
    flex: 0 0 50%;
  }
  .historyHd {
    display: block;
    background-color: #f3f3f3;
    padding: 18px 5.1968%;
  }
  .historyHd h1 {
    margin-bottom: 12px;
    font-size: 100%;
  }
}
/* ----------------------------------------------
 * * news
 * *----------------------------------------------*/
.newsTtl {
  padding-top: 100px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 2.4rem;
}
.newsStatus {
  width: var(--pcw);
  margin: 0 auto 20px;
  text-align: right;
}
.newsStatus label {
  color: var(--green);
  font-weight: bold;
  cursor: pointer;
}
.newslist {
  width: var(--pcw);
  margin: 0 auto;
  list-style: none;
  border: 1px solid #dfdfdf;
  font-size: 1.5rem;
}
.newslist li:nth-child(n+2) {
  border-top: 1px solid #dfdfdf;
}
.newslist a {
  display: block;
  background: url(../img/arrow-right.svg) no-repeat right 20px center;
  background-size: 12px auto;
  padding: 14px 40px;
  text-decoration: none;
}
.newslist .date {
  color: #808080;
  font-weight: bold;
}
.newslist .unread a {
  position: relative;
}
.newslist .unread a::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--green);
  border-radius: 50%;
  left: 17px;
  bottom: 50%;
  transform: translateY(50%);
}
.popup.dialog .popupbox {
  width: 400px;
  border-radius: 0;
  font-weight: normal;
  font-size: 1.5rem;
}
.popup.dialog .popupHd {
  border-bottom: 1px solid #d9dde1;
  display: flex;
  align-items: center;
  padding: 0 15px;
  min-height: 40px;
  font-size: 1.7rem;
}
.popup.dialog .popupHd .close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 2rem;
  color: #808080;
}
.popup.dialog .popupBody {
  padding: 40px 0;
  text-align: center;
}
.popup.dialog .popupFt {
  display: flex;
  font-size: 1.8rem;
}
.popup.dialog .popupFt button {
  flex: 1 1 50%;
  min-height: 44px;
  border: none;
  background-color: var(--green);
  color: #fff;
}
.popup.dialog .popupFt .cancel {
  background-color: #cacfd5;
  color: inherit;
}

#popupDialog:checked ~ .dialog {
  transform: scale(1, 1);
  visibility: visible;
}

@media screen and (min-width: 768px) {
  .newsStatus label:hover {
    opacity: 0.6;
  }
  .newslist a:hover {
    background-color: #f3f3f3;
  }
  .popup.dialog .popupBtn label:hover {
    opacity: 0.6;
  }
}
@media (any-pointer: coarse) {
  .newsStatus label:active {
    opacity: 0.5;
  }
  .newslist a:active {
    background-color: #f3f3f3;
  }
  .popup.dialog .popupBtn label:active {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .newsTtl {
    padding-top: 42px;
    margin-bottom: 24px;
    font-size: 1.9rem;
  }
  .newsStatus {
    width: 92%;
    margin-bottom: 14px;
  }
  .newslist {
    width: auto;
    margin-bottom: 38px;
    border-left: none;
    border-right: none;
    font-size: 1.4rem;
  }
  .newslist a {
    background-image: none;
    position: relative;
    padding: 12px calc(5.5% + 12px) 12px 8%;
  }
  .newslist a::before {
    content: "";
    position: absolute;
    right: 5.5%;
    bottom: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #b3b3b3;
    border-bottom: 2px solid #b3b3b3;
    transform: translateY(50%) rotate(-45deg);
  }
  .newslist .date {
    font-size: 1.1rem;
  }
  .newslist .unread a::after {
    left: calc((8% - 10px) / 2);
  }
  .popup.dialog .popupbox {
    width: 89.8125%;
    font-size: 1.4rem;
  }
  .popup.dialog .popupHd {
    font-size: 1.6rem;
  }
  .popup.dialog .popupHd .close {
    font-size: 2.2rem;
  }
  .popup.dialog .popupBody {
    padding: 30px 0;
  }
  .popup.dialog .popupFt {
    font-size: 1.7rem;
  }
}
.newsDetail {
  width: var(--pcw);
  margin: 100px auto;
}
.newsDetail .ttl {
  margin-bottom: 6px;
  font-size: 2rem;
}
.newsDetail .date {
  color: #808080;
  font-weight: bold;
}
.newsDetail .body {
  margin-top: 30px;
  font-size: 1.4rem;
  line-height: 1.785;
}
@media screen and (max-width: 767px) {
  .newsDetail {
    --pcw: 89.375%;
    margin: 34px auto;
    font-size: 1.2rem;
  }
  .newsDetail .ttl {
    font-size: 1.9rem;
  }
}

/* ----------------------------------------------
 * * contact
 * *----------------------------------------------*/
.contact .pageTtl {
  background-color: transparent;
  color: inherit;
}
.contact .lead {
  width: var(--pcw);
  margin: 0 auto 20px;
  font-size: 1.3rem;
}
.contact .lead p + p {
  margin-top: 0.75em;
}
.contact .lead a {
  font-size: 1.4rem;
  color: var(--green);
}
.contact .caution {
  list-style: none;
  text-indent: -1em;
  padding-left: 1em;
}
.contact form {
  width: var(--pcw);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .contact {
    --pcw: 89.375%;
  }
  .contact .pageTtl {
    height: auto;
    padding-bottom: 28px;
  }
  .contact .lead {
    font-size: 1.4rem;
  }
  .contact .lead a {
    font-size: 100%;
  }
  .contact form {
    width: auto;
  }
}

/* ----------------------------------------------
 * * survey
 * *----------------------------------------------*/
.survey .pageTtl {
  background-color: transparent;
  color: inherit;
}
.survey .lead {
  width: var(--pcw);
  margin: 0 auto 20px;
  text-align: center;
  font-size: 1.3rem;
}
.survey .lead p + p {
  margin-top: 0.75em;
}
.survey .lead a {
  font-size: 1.4rem;
  color: var(--green);
}
.survey .caution {
  list-style: none;
  text-indent: -1em;
  padding-left: 1em;
}
.survey form {
  width: var(--pcw);
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .survey {
    --pcw: 89.375%;
  }
  .survey .pageTtl {
    height: auto;
    padding-bottom: 28px;
  }
  .survey .lead {
    text-align: left;
    font-size: 1.4rem;
  }
  .survey .lead a {
    font-size: 100%;
  }
  .survey form {
    width: auto;
  }
}

/* ----------------------------------------------
 * * records
 * *----------------------------------------------*/
.records {
  background-color: var(--green);
}
.records + footer {
  background-color: var(--green);
  color: #fff;
}
.records .tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--blue);
  border-radius: 2em;
  padding: 1px 1em 0;
  min-width: 58px;
  height: 21px;
  font-weight: bold;
  color: #fff;
}

.results {
  width: var(--pcw);
  margin: 118px auto 42px;
  border-radius: 12px;
  background-color: #fff;
  font-weight: bold;
  font-size: 1.9rem;
}
.results h2 {
  background-color: var(--blue);
  border-radius: 12px 12px 0 0;
  padding: 10px 0;
  text-align: center;
  font-size: 2.1rem;
  color: #fff;
}
.results dl {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: repeat(2, auto);
}
.results dt {
  grid-row: 1/-1;
  position: relative;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.2;
}
.results dt::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 90%;
  background-color: #dfdfdf;
  right: 0;
  bottom: 50%;
  transform: translateY(50%);
}
.results dt [for=popupSeasonSelect] {
  display: inline-block;
  padding-top: 0.3em;
  width: 1.2em;
  margin-right: 10px;
  cursor: pointer;
}
.results dt .dtText {
  flex-basis: auto;
}
.results dt em {
  padding-right: 5px;
  font-style: normal;
  font-size: 2.9rem;
}
.results dt span {
  flex: 0 0 100%;
  display: block;
}
.results dd {
  grid-column: -2/-1;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.3;
}
.results dd:nth-of-type(n+2) {
  padding-top: 0;
}
.results dd span {
  display: block;
  margin-bottom: 5px;
}
.results dd em {
  display: block;
  padding-right: 3px;
  font-style: normal;
  color: var(--green);
  font-size: 3.2rem;
}
.results .ttl {
  flex: 0 0 100%;
  font-size: 1.2rem;
}
.results .ttl span {
  margin: 0;
}
.results .num {
  display: flex;
  align-items: flex-end;
  margin-right: 10px;
}
.results .winlose {
  display: flex;
  align-items: flex-end;
  margin-left: 0;
}
.results .winlose span + em {
  margin-left: 5px;
}
.results .rate {
  flex: 0 0 126px;
  display: flex;
  align-items: flex-end;
  margin-left: auto;
}
.results .rate em {
  margin-left: auto;
  padding: 0 5px 0 8px;
}
.popup.seasonSelect {
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0);
}
.popup.seasonSelect .popupbox {
  width: auto;
  right: auto;
  bottom: auto;
  left: calc((100% - 780px) / 2 + 30px);
  top: 350px;
  transform: translate(0, 0);
  background-color: #f5f5f5;
  border-radius: 5px;
  font-weight: normal;
  font-size: inherit;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.popup.seasonSelect .popupbox label {
  display: block;
  position: relative;
  cursor: pointer;
}
.popup.seasonSelect .popupbox label:nth-child(n+2) {
  border-top: 1px solid #d7d7d7;
}
.popup.seasonSelect .popupbox [type=radio] {
  -webkit-appearance: none;
          appearance: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
}
.popup.seasonSelect .popupbox .label {
  display: block;
  padding: 10px 15px 10px calc(20px + 1em);
  position: relative;
  white-space: nowrap;
}
.popup.seasonSelect .popupbox .label::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  width: 1em;
  height: calc(100% - 10px);
  background: url(../img/icon-checked.svg) no-repeat center center;
  background-size: 100% auto;
  opacity: 0;
  transition-duration: 0.3s;
}
.popup.seasonSelect .popupbox :checked + .label::before {
  opacity: 1;
}

#popupSeasonSelect:checked ~ .popup.seasonSelect {
  visibility: visible;
  transform: scale(1, 1);
}

.stamps {
  width: var(--pcw);
  margin: 0 auto 46px;
  font-size: 1.3rem;
}
.stamps .count {
  background-color: #fff;
  width: 380px;
  border-radius: 12px;
  margin: 0 auto 30px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-weight: bold;
  text-align: center;
  font-size: 1.6rem;
}
.stamps .count span {
  margin-bottom: 5px;
}
.stamps .count em {
  padding: 0 5px 0 8px;
  font-style: normal;
  color: var(--green);
  font-size: 2.6rem;
}
.stamps .count::before {
  content: "";
  position: absolute;
  right: 50%;
  top: 100%;
  transform: translateX(50%);
  border-style: solid;
  border-width: 7px 4px 0;
  border-color: #fff transparent transparent;
}
.stamps .list {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
}
.stamps h3 {
  margin-bottom: 10px;
}
.stamps h3:nth-of-type(n+2) {
  margin-top: 30px;
}
.stamps ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.stamps li {
  flex: 0 0 54px;
  color: #c4c4c5;
  margin-top: 20px;
  margin-left: 44px;
}
.stamps li:nth-child(8n+1) {
  margin-left: 0;
}
.stamps li:nth-child(-n+8) {
  margin-top: 0;
}
.stamps li .img {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 54px auto;
}
.stamps li .date {
  height: 2.307em;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  line-height: 1;
}
.stamps li .opponent {
  font-size: 1.2rem;
  line-height: 1.2;
}
.stamps .done {
  color: var(--blue02);
}
.stamps .now .img {
  background-image: url(../img/logo-orange.svg);
}
.stamps .now .img img {
  opacity: 0;
}
.stamps .win .img {
  background-image: url(../img/logo-gold02.svg);
}
.stamps .win .img img {
  opacity: 0;
}
.stamps .lose .img {
  background-image: url(../img/logo-black.svg);
}
.stamps .lose .img img {
  opacity: 0;
}
.stamps .draw .img {
  background-image: url(../img/logo-green.svg);
}
.stamps .draw .img img {
  opacity: 0;
}
.stampInfo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  color: #717171;
}
.stampInfo dt {
  flex: 0 0 20px;
  margin-right: 5px;
}
.stampInfo dt:nth-of-type(n+2) {
  margin-left: 20px;
}
.stampInfo img {
  vertical-align: baseline;
}

.visitTokuten {
  width: var(--pcw);
  margin: 46px auto;
  border-radius: 12px;
  background-color: #fff;
  font-size: 1.8rem;
}
.visitTokuten h2 {
  background-color: var(--blue);
  border-radius: 12px 12px 0 0;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  font-size: 2.1rem;
}
.visitTokuten li {
  list-style: none;
  display: flex;
  padding: 12px 30px;
  border-bottom: 1px solid #dfdfdf;
}
.visitTokuten .thumb {
  flex: 0 0 auto;
  align-self: center;
  width: 70px;
  height: 70px;
  margin-right: 25px;
}
.visitTokuten .thumb img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  border-radius: 10px;
}
.visitTokuten .text {
  flex: 1 0 0%;
  display: flex;
}
.visitTokuten .name {
  flex: 1 0 0%;
  align-self: center;
}
.visitTokuten .count {
  align-self: flex-end;
  flex: 0 0 148px;
  margin-left: 92px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.visitTokuten .count .ttl {
  font-size: 1.3rem;
}
.visitTokuten .count .num {
  flex: 1 0 0%;
  text-align: right;
  color: var(--green);
}
.visitTokuten .count em {
  padding-right: 5px;
  font-size: 3rem;
  font-style: normal;
}
.visitTokuten .caution {
  padding: 24px 30px;
  font-size: 1.3rem;
}

@media screen and (max-width: 767px) {
  .records {
    --pcw: 89.6875%;
  }
  .records .tag {
    min-width: 52px;
    height: 16px;
  }
  .results {
    margin: 42px auto 15px;
    border-radius: 16px;
    font-size: 1.4rem;
  }
  .results h2 {
    border-radius: 16px 16px 0 0;
    padding: 8px 0;
    font-size: 100%;
  }
  .results dl {
    display: block;
    padding: 0 12px;
  }
  .results dt {
    padding: 14px 0 6px;
    border-bottom: 1px solid #dfdfdf;
    align-items: baseline;
    font-size: 100%;
  }
  .results dt::before {
    display: none;
  }
  .results dt [for=popupSeasonSelect] {
    width: auto;
    align-self: center;
    margin-right: auto;
    padding: 0 10px;
  }
  .results dt [for=popupSeasonSelect] img {
    width: 1.2em;
  }
  .results dt em {
    font-size: 2.2rem;
  }
  .results dt span {
    margin-right: auto;
    flex-basis: auto;
    display: inline;
  }
  .results dd {
    width: auto;
    padding: 12px 0;
    flex-wrap: wrap;
    font-size: 1.3rem;
  }
  .results dd span {
    margin-bottom: 4px;
  }
  .results dd em {
    font-size: 2.4rem;
  }
  .results .ttl {
    font-size: 1rem;
  }
  .results .num {
    font-size: 1.4rem;
  }
  .results .rate {
    flex-basis: 94px;
  }
  .popup.seasonSelect {
    background-color: rgba(0, 0, 0, 0.4);
  }
  .popup.seasonSelect .popupbox {
    left: 5.15625%;
    top: 190px;
  }
  .stamps {
    margin-bottom: 18px;
  }
  .stamps .count {
    margin-bottom: 10px;
    width: auto;
    padding: 5px 0;
    font-size: 1.4rem;
  }
  .stamps .count em {
    font-size: 2.4rem;
  }
  .stamps .list {
    border-radius: 16px;
    padding: 10px 18px 15px;
  }
  .stamps h3 {
    font-size: 1.1rem;
  }
  .stamps li {
    flex-basis: 48px;
  }
  .stamps li:nth-child(n) {
    margin-top: 8px;
    margin-left: calc((100% - 192px) / 3);
  }
  .stamps li:nth-child(-n+4) {
    margin-top: 0;
  }
  .stamps li:nth-child(4n+1) {
    margin-left: 0;
  }
  .stamps li .img {
    background-size: 48px auto;
  }
  .stamps li .date {
    font-size: 1.2rem;
  }
  .stamps li .opponent {
    font-size: 1.1rem;
  }
  .stampInfo {
    font-size: 1.2rem;
  }
  .stampInfo dt {
    flex-basis: 18px;
  }
  .stampInfo dt:nth-of-type(n+2) {
    margin-left: 12px;
  }
  .stampInfo dd {
    white-space: nowrap;
  }
  .visitTokuten {
    margin: 18px auto;
    font-size: 1.4rem;
    border-radius: 16px;
  }
  .visitTokuten h2 {
    border-radius: 16px 16px 0 0;
    padding: 8px 0;
    font-size: 100%;
  }
  .visitTokuten li {
    padding: 8px 18px;
    border-bottom: none;
  }
  .visitTokuten li:first-child {
    padding-top: 18px;
  }
  .visitTokuten .thumb {
    margin-right: 8px;
    align-self: flex-start;
  }
  .visitTokuten .text {
    display: block;
  }
  .visitTokuten .count {
    flex-basis: auto;
    margin-left: 0;
    font-size: 1.6rem;
  }
  .visitTokuten .count .ttl {
    margin-right: 8px;
    font-size: 1rem;
  }
  .visitTokuten .count .num {
    flex: 0 0 auto;
  }
  .visitTokuten .count em {
    font-size: 2.2rem;
  }
  .visitTokuten .caution {
    border-top: 1px solid #dfdfdf;
    margin: 0 18px;
    padding: 18px 0;
  }
}
/* ----------------------------------------------
 * * terms
 * *----------------------------------------------*/
.terms > * {
  width: var(--pcw);
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 2;
}
.terms > :last-child {
  margin-bottom: 200px;
}
.terms h1 {
  padding-top: 100px;
  text-align: center;
  font-size: 2.4rem;
}
.terms h2 {
  margin-top: 2em;
  margin-bottom: 0.25em;
  display: flex;
  align-items: baseline;
  font-size: 1.6rem;
  line-height: 1.4;
}
.terms h2 .no {
  display: block;
  flex: 0 0 auto;
  margin-right: 1em;
}
.terms h2 .ttl {
  display: block;
  flex: 1 0 0%;
}
.terms ol {
  list-style: none;
  counter-reset: count;
}
.terms ol li {
  position: relative;
  padding-left: 1.75em;
  counter-increment: count;
}
.terms ol li::before {
  content: counter(count) ".";
  width: 1.5em;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
}
.terms ol.parentheses li {
  padding-left: 3em;
}
.terms ol.parentheses li::before {
  content: "（" counter(count) "）";
  width: 3em;
}
@media screen and (max-width: 767px) {
  .terms {
    --pcw: 88.05%;
  }
  .terms > * {
    font-size: 1.3rem;
  }
  .terms > :last-child {
    margin-bottom: 120px;
  }
  .terms h1 {
    padding-top: 42px;
    font-size: 1.9rem;
  }
}

/* ----------------------------------------------
 * * coupon code list
 * *----------------------------------------------*/
.couponCodeList {
  list-style: none;
  width: var(--pcw);
  margin: 50px auto;
  border: 1px solid #dfdfdf;
  font-size: 1.8rem;
}
.couponCodeList li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 15px;
}
.couponCodeList li:not(:first-child) {
  border-top: 1px solid #dfdfdf;
}
.couponCodeList [class^=tag] {
  display: block;
  flex: 0 0 6em;
  margin-right: 15px;
  padding: 0.3em 0 0.2em;
  border-radius: 2em;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
}
.couponCodeList .tagUnused {
  background-color: var(--red);
}
.couponCodeList .tagUsed {
  display: none;
  background-color: #666;
}
.couponCodeList .date {
  flex: 1 0 0%;
  font-weight: bold;
  color: #666;
}
.couponCodeList .name {
  flex: 0 0 100%;
}
.couponCodeList .code {
  flex: 0 0 auto;
  width: calc(100% - 67px);
  overflow-wrap: anywhere;
  text-align: right;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3;
}
.couponCodeList .btnCopy {
  flex: 0 0 auto;
  margin-left: 15px;
}
.couponCodeList .btnCopy button {
  display: block;
  background-color: var(--green);
  border-color: var(--green);
  width: auto;
  min-height: 0;
  padding: 0.3em 1em 0.2em;
  font-size: 1rem;
}
.couponCodeList .btnExchangePage {
  flex: 0 0 100%;
  margin: 8px 0 5px;
}
.couponCodeList .btnExchangePage a {
  display: flex;
  margin: 0 auto;
  width: 15em;
  height: 3em;
  border-radius: 3em;
  font-size: 2rem;
  letter-spacing: 0.03em;
}
.couponCodeList .btnExchangePage .usedTxt {
  font-size: 2.4rem;
  font-weight: bold;
  display: none;
}
.couponCodeList .used {
  background-color: #dcdcdc;
  color: #808080;
}
.couponCodeList .used:not(:first-child) {
  border-top-color: #f7f7f7;
}
.couponCodeList .used .tagUnused {
  display: none;
}
.couponCodeList .used .tagUsed {
  display: block;
}
.couponCodeList .used .date {
  color: inherit;
}
.couponCodeList .used .code {
  width: 100%;
  flex: 0 0 100%;
}
.couponCodeList .used .btnCopy {
  display: none;
}
.couponCodeList .used .btnExchangePage {
  text-align: right;
}
.couponCodeList .used .btnExchangePage a {
  display: none;
}
.couponCodeList .used .btnExchangePage .usedTxt {
  display: inline;
}
@media screen and (max-width: 767px) {
  .couponCodeList {
    width: 100%;
    margin: 0;
    font-size: 1.4rem;
  }
  .couponCodeList .code {
    font-size: 2.2rem;
  }
  .couponCodeList + .btnBack {
    margin: 40px auto;
  }
  .couponCodeList .btnExchangePage a {
    font-size: 1.6rem;
  }
  .couponCodeList .btnExchangePage .usedTxt {
    font-size: 1.9rem;
  }
}

/* ----------------------------------------------
 * * event
 * *----------------------------------------------*/
.eventTtl {
  padding-top: 100px;
  margin-bottom: 25px;
  text-align: center;
  font-size: 2.4rem;
}
.eventTtl + .lead {
  text-align: center;
  font-size: 1.3rem;
}
.eventList {
  list-style: none;
  width: 778px;
  margin: 40px auto;
}
.eventList > li {
  border: 1px solid #dfdfdf;
}
.eventList > li:nth-child(n+2) {
  border-top: none;
}
.eventList a {
  display: block;
  padding: 25px 30px;
  text-decoration: none;
  font-size: 1.8rem;
}
.eventList .ttl {
  font-weight: bold;
}
.eventList dl {
  margin: 6px 0;
}
.eventList dl > div {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-weight: bold;
  font-size: 1.5rem;
  margin-top: 3px;
}
.eventList dt {
  flex: 0 0 auto;
  border: 2px solid;
  border-radius: 1.6em;
  padding: 0 0.75em;
  font-size: 1.1rem;
}
.eventList dd {
  flex: 0 1 auto;
}
.eventList .reception {
  color: var(--green);
}
.eventList .application {
  color: var(--red);
}
.eventList .taglist {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 1.1rem;
}
.eventList .taglist li {
  background-color: var(--green);
  padding: 2px 0.75em;
  border-radius: 1.6em;
  color: #fff;
  font-weight: bold;
}
.eventList .taglist .tagPartner {
  background-color: #231815;
  color: #e5a500;
}
.eventList .taglist .tagJunior {
  background-color: var(--blue02);
}
.eventList .taglist .tagLightblue {
  background-color: var(--blue);
}
.eventList .done a {
  background-color: #e4e4e4;
  color: #6e6e64;
}
.eventList .done .reception, .eventList .done .application {
  color: #6e6e64;
}
.eventList .done .taglist li {
  background-color: #6e6e64;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .eventList a:hover {
    background-color: #f3f3f3;
  }
}
@media (any-pointer: coarse) {
  .eventList a:active {
    background-color: #f3f3f3;
  }
}
@media screen and (max-width: 767px) {
  .eventTtl {
    padding-top: 42px;
    margin-bottom: 24px;
    font-size: 1.9rem;
  }
  .eventTtl + .lead {
    width: 89.0625%;
    margin: 0 auto;
    text-align: left;
    font-size: 1.4rem;
  }
  .eventList {
    width: auto;
    margin-top: 20px;
  }
  .eventList > li {
    border-left: none;
    border-right: none;
  }
  .eventList a {
    padding: 10px 5.46% 20px;
    font-size: 1.4rem;
    position: relative;
  }
  .eventList a::before {
    content: "";
    position: absolute;
    right: 5.46%;
    bottom: 50%;
    translate: 0 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #b3b3b3;
    border-bottom: 2px solid #b3b3b3;
    rotate: -45deg;
  }
  .eventList dl {
    padding-right: 6px;
  }
  .eventList dl > div {
    margin-top: 6px;
    font-size: 1.3rem;
  }
  .eventList dt {
    padding-top: 1px;
    border-width: 1px;
    font-size: 1rem;
  }
  .eventList dd {
    line-height: 1.3;
  }
  .eventList .taglist {
    font-size: 1rem;
  }
}
/* ======== eventFormTtl ======== */
.eventFormTtl .ttl {
  font-weight: bold;
}
.eventFormTtl .reception {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
}
.eventDetail {
  width: 780px;
  margin: 0 auto;
  padding: 0 0 55px;
}
.eventDetail .errorbox {
  margin-top: 40px;
  margin-bottom: 0;
  border-radius: 2px;
}
.eventDetail .errorbox + .errorbox {
  margin-top: 20px;
}
.eventDetail .errorbox span {
  display: inline-block;
}
.eventDetail h1 {
  margin-top: 55px;
  margin-bottom: 35px;
  text-align: center;
  font-size: 2.4rem;
}
.eventDetail .textArea {
  margin-top: 30px;
  font-size: 1.5rem;
}
.eventDetail .textArea a {
  color: var(--green);
}
.eventForm {
  width: 780px;
  margin: 0 auto;
  padding-top: 60px;
  border-top: 1px solid #a0a2a5;
}
.eventForm h2 {
  margin-bottom: 40px;
  text-align: center;
  font-size: 2.4rem;
}
.eventForm .checkbox .label::before {
  border-radius: 50%;
  background-color: #dfdfdf;
  border: none;
  width: 22px;
  height: 22px;
}
.eventForm .checkbox .label::after {
  opacity: 1;
  top: 7px;
  left: 5px;
  width: 12px;
  height: 6px;
}
.eventForm .checkbox :checked + .label::before {
  background-color: var(--blue02);
}
.eventForm p:has(+ .formBtn) {
  margin: 40px auto 50px;
  font-size: 1.5rem;
}
.eventForm .formBtn label {
  cursor: pointer;
}
#popupLottery:checked ~ main .popup.lottery {
  transform: scale(1, 1);
  visibility: visible;
}

.eventForm .popupbox {
  max-width: 400px;
  border-radius: 0;
  text-align: center;
  font-weight: normal;
  font-size: 1.5rem;
}
.eventForm .popupHd {
  padding: 30px 0 20px;
}
.eventForm .popupHd .ttl01 {
  color: var(--green);
  font-weight: bold;
  font-size: 2.4rem;
}
.eventForm .popupFt {
  margin-top: 48px;
  display: flex;
  font-size: 1.8rem;
}
.eventForm .popupFt > * {
  flex: 0 0 50%;
  height: 45px;
  background-color: var(--green);
  border: none;
  color: #fff;
}
.eventForm .popupFt .cancel {
  background-color: var(--red);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .eventForm .popupFt .cancel:hover {
    opacity: 0.6;
  }
}
@media (any-pointer: coarse) {
  .eventForm .popupFt .cancel:active {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .eventFormTtl .reception {
    margin-top: 8px;
    font-size: 1.6rem;
  }
  .eventDetail {
    width: auto;
    padding-bottom: 45px;
  }
  .eventDetail .errorbox {
    --pcw: 88.125%;
    margin-top: 24px;
    text-align: center;
  }
  .eventDetail .errorbox + .errorbox {
    margin-top: 8px;
  }
  .eventDetail h1 {
    width: 88.125%;
    margin-inline: auto;
    font-size: 1.9rem;
  }
  .eventDetail .textArea {
    width: 88.125%;
    margin-inline: auto;
    font-size: 1.4rem;
  }
  .eventForm {
    --pcw: 88.125%;
    width: auto;
    border-top: none;
    padding-top: 0;
  }
  .eventForm h2 {
    margin-bottom: 20px;
    font-size: 1.9rem;
  }
  .eventForm .radiochecklist.row {
    margin: 0;
    gap: 12px 3em;
  }
  .eventForm .radiochecklist.row > div {
    margin: 0;
  }
  .eventForm .radiobox {
    padding-right: 1em;
  }
  .eventForm .checkbox .label::before {
    width: 24px;
    height: 24px;
  }
  .eventForm .checkbox .label::after {
    width: 14px;
    height: 7px;
  }
  .eventForm p:has(+ .formBtn) {
    width: var(--pcw);
    margin: 30px auto 80px;
    font-size: 1.4rem;
  }
  .eventForm .formBtn .btn02 {
    max-width: var(--pcw);
  }
  .eventForm .popupbox {
    width: 89.8438%;
    font-size: 1.4rem;
  }
  .eventForm .popupHd {
    padding: 20px 0 15px;
  }
  .eventForm .popupHd .ttl01 {
    font-size: 1.9rem;
  }
  .eventForm .popupFt {
    margin-top: 28px;
    font-size: 1.7rem;
  }
}
/* ======== speedLottery ======== */
.slotMain {
  background: url(../img/slot-bg.webp) no-repeat center top;
  padding: 25px 0 30px;
}
.slotMain .btnBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 568px;
  margin: 0 auto;
  text-align: center;
  gap: 8px;
}
.slotMain .btnBox > div {
  width: calc((100% - 16px) / 3);
}
.slotMain .btnBox a {
  display: block;
  width: 104px;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.slotText {
  background-color: var(--green);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.6em;
  width: 425px;
  height: 42px;
  margin: 0 auto 15px;
  font-weight: bold;
  font-size: 1.8rem;
  color: #fff;
}
.slotBox {
  width: 568px;
  height: 324px;
  margin: 15px auto;
  padding: 8px;
  position: relative;
  background-color: #b7b9bb;
  border-radius: 7px;
  display: flex;
  gap: 8px;
}
.slotframe {
  width: calc((100% - 16px) / 3);
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 8px 5px;
}
.slotinner {
  background-color: #fff;
  border: 1px solid #cbcbcb;
  border-radius: 3px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.slotinner img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: -27.5%;
}
.slotProducts {
  width: 780px;
  margin: 35px auto;
  list-style: none;
  border: 1px solid #dfdfdf;
}
.slotProducts > li {
  display: flex;
  gap: 25px;
  padding: 25px 30px;
}
.slotProducts > li:nth-child(n+2) {
  border-top: 1px solid #dfdfdf;
}
.slotProducts .thumb {
  flex: 0 0 auto;
  width: 70px;
  overflow: hidden;
}
.slotProducts .thumb img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 11px;
}
.slotProducts .thumb + div {
  min-width: 0;
  overflow-wrap: break-word;
}
.slotProducts .icons {
  list-style: none;
  display: flex;
  gap: 8px;
  padding-top: 5px;
}
.slotProducts .icons li {
  flex: 0 0 32px;
}
.slotProducts .text {
  margin-top: 5px;
  font-weight: bold;
  font-size: 1.7rem;
}

#leftlin {
  position: absolute;
  z-index: 2;
  left: -3.5%;
  bottom: 50%;
  translate: 0 50%;
}

#rightlin {
  position: absolute;
  z-index: 2;
  right: -3.5%;
  bottom: 50%;
  translate: 0 50%;
}

@media screen and (min-width: 768px) {
  .slotMain .btnBox a:hover {
    opacity: 0.6;
  }
}
@media (any-pointer: coarse) {
  .slotMain .btnBox a:active {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .slotText {
    width: 16.6154em;
    font-size: 1.6rem;
  }
  .slotMain {
    background-image: url(../img/slot-bg-sp.webp);
    background-position: center center;
    background-size: cover;
  }
  .slotMain .btnBox {
    width: 87.8125%;
  }
  .slotMain .btnBox a {
    width: 58.6207%;
  }
  .slotMain .btnBox img {
    width: 100%;
    aspect-ratio: 1/1;
  }
  .slotBox {
    width: 87.8125%;
    height: auto;
    border-radius: 4px;
    padding: 4px;
    gap: 4px;
  }
  .slotframe {
    width: calc((100% - 8px) / 3);
    padding: 5px 3px;
  }
  .slotinner {
    height: auto;
    padding-top: 170.9091%;
  }
  .slotProducts {
    width: 100%;
    border-left: none;
    border-right: none;
    margin: 0;
  }
  .slotProducts > li {
    padding: 12px 18px;
    gap: 12px;
  }
  .slotProducts .thumb {
    width: 70px;
  }
  .slotProducts .thumb + div {
    width: calc(100vw - 118px);
  }
  .slotProducts .icons li {
    flex-basis: 28px;
  }
}
/* ======== speedLottery result ======== */
.result .slotMain {
  background: #fbed21 repeating-conic-gradient(from -90deg at 50% 105%, #faaf3b 12deg 24deg, rgba(250, 175, 59, 0) 24deg 36deg);
  padding-bottom: 60px;
}
.result .slotText {
  margin-bottom: 30px;
}
.result .slotResult {
  text-align: center;
  max-width: 572px;
  margin: 0 auto;
}
.result .slotResult img {
  border-radius: 20px;
}
.result .textArea {
  width: 776px;
  margin: 30px auto;
  font-size: 1.5rem;
}
.result .textArea .bold {
  font-weight: bold;
}
.result .caution {
  width: 776px;
  margin: 45px auto 60px;
  border-radius: 17px;
  border: 1px solid #cbcbcb;
  padding: 20px 30px;
  font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
  .result .slotMain {
    padding-bottom: 54px;
  }
  .result .slotResult {
    width: 89.375%;
  }
  .result .slotResult img {
    border-radius: 12px;
  }
  .result .textArea {
    margin-top: 18px;
    width: 85.9375%;
    font-size: 1.3rem;
  }
  .result .caution {
    width: 89.0625%;
    margin-bottom: 28px;
    padding: 18px 12px;
    border-radius: 10px;
    font-size: 1.3rem;
  }
}

/* ======== eventTicket list ======== */
.eventTicketList {
  list-style: none;
  width: 780px;
  margin: 38px auto;
  border: 1px solid #dfdfdf;
  /* ======== eventTicket detail ======== */
}
.eventTicketList > li:nth-child(n+2) {
  border-top: 1px solid #dfdfdf;
}
.eventTicketList a {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  text-decoration: none;
  padding: 20px 30px;
  font-size: 1.8rem;
}
.eventTicketList .thumb {
  flex: 0 0 auto;
  width: 70px;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.eventTicketList .thumb + div {
  min-width: 0;
  overflow-wrap: break-word;
}
.eventTicketList .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}
.eventTicketList .reception {
  display: flex;
  align-items: flex-start;
  margin-top: 5px;
  gap: 8px;
  color: var(--green);
  font-weight: bold;
}
.eventTicketList .reception dt {
  flex: 0 0 auto;
  margin-top: 0.4em;
  padding: 0 1em;
  border: 2px solid;
  border-radius: 2em;
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  .eventTicketList a:hover {
    background-color: #f3f3f3;
  }
}
@media (any-pointer: coarse) {
  .eventTicketList a:active {
    background-color: #f3f3f3;
  }
}
@media screen and (max-width: 767px) {
  .eventTicketList {
    width: auto;
    margin: 0 auto;
    border-left: none;
    border-right: none;
  }
  .eventTicketList a {
    padding: 12px 18px;
    gap: 12px;
    font-size: 1.4rem;
  }
  .eventTicketList .thumb + div {
    width: calc(100vw - 118px);
  }
  .eventTicketList .reception {
    font-size: 1.3rem;
  }
  .eventTicketList .reception dt {
    margin-top: 1px;
    padding-top: 1px;
    border-width: 1px;
  }
}
.eventTicketDetail {
  background-color: var(--green);
  padding-bottom: 52px;
}
.eventTicketDetail .ticket {
  width: 780px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 40px 60px;
  display: flex;
  gap: 25px;
  font-size: 1.5rem;
}
.eventTicketDetail .ticket .thumb {
  flex: 0 0 195px;
}
.eventTicketDetail .ticket .thumb img {
  border-radius: 8px;
}
.eventTicketDetail .ticket .name {
  font-weight: bold;
  font-size: 2.2rem;
}
.eventTicketDetail .ticket .text {
  margin-top: 8px;
}
@media screen and (max-width: 767px) {
  .eventTicketDetail {
    padding-bottom: 28px;
  }
  .eventTicketDetail .ticket {
    width: 89.375%;
    margin: 0 auto;
    padding: 0;
    border-radius: 24px;
    display: block;
    font-size: 1.2rem;
  }
  .eventTicketDetail .ticket .thumb img {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .eventTicketDetail .ticket .thumb + div {
    padding: 20px 6.29% 36px;
  }
  .eventTicketDetail .ticket .name {
    text-align: center;
    font-size: 2rem;
  }
  .eventTicketDetail .ticket .text {
    margin-top: 16px;
  }
}
/* redeemed */
.eventTicketDetail.redeemed .complete {
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
  color: #fff;
}
.eventTicketDetail.redeemed .complete .date {
  display: block;
  margin-top: 10px;
  font-size: 2.2rem;
}
.eventTicketDetail.redeemed .ticket {
  display: block;
  margin-top: 30px;
}
.eventTicketDetail.redeemed .ticket .name {
  text-align: center;
}
.eventTicketDetail.redeemed .receptionDate {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 20px;
  color: var(--green);
  font-weight: bold;
  font-size: 2.2rem;
}
.eventTicketDetail.redeemed .receptionDate dt {
  flex: 0 0 auto;
}
main:has(.eventTicketDetail.redeemed) {
  background-color: #f3f3f3;
}
.eventTicketDetail.redeemed + .redeemedLog {
  width: 780px;
  margin: 46px auto 40px;
  background-color: #fff;
  padding: 16px 30px;
  border-radius: 13px;
  font-size: 1.5rem;
}
@media screen and (max-width: 767px) {
  .eventTicketDetail.redeemed .complete {
    font-size: 1.7rem;
  }
  .eventTicketDetail.redeemed .complete .date {
    font-size: inherit;
  }
  .eventTicketDetail.redeemed .ticket {
    margin-top: 20px;
    padding: 24px 24px 30px;
  }
  .eventTicketDetail.redeemed .ticket .receptionDate {
    font-size: 1.8rem;
  }
  .eventTicketDetail.redeemed + .redeemedLog {
    width: 89.6875%;
    margin: 20px auto;
    padding: 18px 24px;
    font-size: 1.3rem;
  }
}

/* ======== roulette ======== */
@keyframes rouletteRotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
@keyframes rouletteRotate01 {
  0% {
    rotate: 10deg;
  }
  100% {
    rotate: 180deg;
  }
}
@keyframes rouletteRotate02 {
  0% {
    rotate: 10deg;
  }
  100% {
    rotate: 315deg;
  }
}
@keyframes rouletteRotate03 {
  0% {
    rotate: 10deg;
  }
  100% {
    rotate: 270deg;
  }
}
@keyframes rouletteRotate04 {
  0% {
    rotate: 10deg;
  }
  100% {
    rotate: 225deg;
  }
}
.rouletteArea {
  background-image: url(../img/roulette-bg02.webp), url(../img/roulette-bg01.webp), radial-gradient(circle farthest-corner at 50% 40%, #00b7ee 0%, #fff 250px, #00a7ea 100%);
  background-repeat: no-repeat;
  background-size: 835px auto, cover, 100% 100%;
  background-position: center 25px, center, center;
  padding: 60px 0 40px;
}
main:has(.rouletteArea) {
  background-color: var(--green);
}
.roulettebox {
  position: relative;
}
.roulettebox .arrow {
  width: 40px;
  position: absolute;
  right: 50%;
  top: 0;
  translate: 50% -75%;
}
.roulette {
  width: 500px;
  overflow: hidden;
  margin: 0 auto;
}
.roulette img {
  animation: rouletteRotate 1s linear infinite;
}
.roulette.stopWin img, .roulette.stopPrize01 img {
  animation-name: rouletteRotate01;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
}
.roulette.stopLose img, .roulette.stopPrize02 img {
  animation-name: rouletteRotate02;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.roulette.stopWinBlue img, .roulette.stopPrize03 img {
  animation-name: rouletteRotate03;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.roulette.stopPrize04 img {
  animation-name: rouletteRotate04;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.roulette.stop img {
  animation-play-state: paused;
}
.rouletteStop {
  margin: 40px auto 0;
  width: 392px;
  border-radius: 84px;
  background-color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
}
.rouletteStop button {
  background-color: #de0012;
  border: 5px solid #fff;
  width: 100%;
  height: 84px;
  border-radius: 84px;
  font-size: 3rem;
  letter-spacing: 0.1em;
  -webkit-tap-highlight-color: transparent;
}
.rouletteArea.premium {
  background-image: url(../img/roulette-bg02.webp), url(../img/roulette-premium-bg01.webp), radial-gradient(circle farthest-corner at 50% 40%, #231815 0%, #c5c5c5 250px, #231815 100%);
}
.rouletteArea.premium .rouletteStop button {
  border-color: #c5950f;
  background-color: #231815;
  color: #c5950f;
}
.rouletteCaution {
  background-color: #fff;
  border: 1px solid #cbcbcb;
  border-radius: 14px;
  width: 780px;
  margin: 40px auto;
  padding: 20px;
  text-align: center;
  color: var(--green);
}
.rouletteCaution br:not(:last-of-type) {
  display: none;
}
@media screen and (max-width: 767px) {
  .rouletteArea {
    background: url(../img/roulette-bg-sp.webp) no-repeat center;
    background-size: 134.375% auto;
    padding: 44px 0 22px;
  }
  .roulettebox .arrow {
    width: 26px;
  }
  .roulette {
    width: 85%;
  }
  .rouletteStop {
    margin-top: 24px;
    width: 61.25%;
    border-radius: 13.125vw;
  }
  .rouletteStop button {
    height: 13.125vw;
    border-width: 3px;
    border-radius: 13.125vw;
    font-size: min(1.8rem, 4.6875vw);
  }
  .rouletteArea.premium {
    background-image: url(../img/roulette-premium-bg-sp.webp);
  }
  .rouletteCaution {
    width: 89.0625%;
    margin: 18px auto;
    padding: 15px 24px;
    border-radius: 10px;
    font-size: 1.4rem;
  }
  .rouletteCaution br:not(:last-of-type) {
    display: inline;
  }
}

.result .rouletteMain {
  background-image: url(../img/roulette-bg02.webp), url(../img/roulette-result-bg01.webp), radial-gradient(circle farthest-corner at 50% 50%, #00b7ee 0%, #fff 180px, #00a7ea 100%);
  background-repeat: no-repeat;
  background-size: 835px auto, cover, 100% 100%;
  background-position: center 25px, center, center;
  padding: 25px 0 60px;
}
.result .rouletteText {
  background-color: var(--green);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 21px;
  width: 425px;
  min-height: 42px;
  padding: 8px 12px;
  margin: 0 auto 35px;
  text-align: center;
  font-weight: bold;
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 30px;
}
.result .rouletteResult {
  text-align: center;
  max-width: 572px;
  margin: 0 auto;
  position: relative;
}
.result .rouletteResult > img {
  border-radius: 20px;
}
.result .rouletteResult .icon {
  position: absolute;
  left: 0;
  bottom: 0;
  translate: -35% 45px;
  width: 170px;
}
.result.losing .rouletteMain {
  background: var(--blue02);
}
.result.losing .rouletteResult .icon {
  display: none;
}
.result .rouletteMain.premium {
  background-image: url(../img/roulette-bg02.webp), url(../img/roulette-premium-result-bg01.webp), radial-gradient(circle farthest-corner at 50% 50%, #231815 0%, #c5c5c5 180px, #231815 100%);
}
@media screen and (max-width: 767px) {
  .result .rouletteMain {
    background: url(../img/roulette-result-bg-sp.webp) no-repeat center bottom;
    background-size: cover;
    padding-bottom: 52px;
  }
  .result .rouletteText {
    width: 67.5%;
    font-size: min(1.5rem, 4.0625vw);
  }
  .result .rouletteResult {
    max-width: 89.375%;
  }
  .result .rouletteResult > img {
    border-radius: 12px;
  }
  .result .rouletteResult .icon {
    width: 30.2448%;
  }
  .result .rouletteMain.premium {
    background-image: url(../img/roulette-premium-result-bg-sp.webp);
  }
}