/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[13].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[13].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[11].oneOf[13].use[4]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[11].oneOf[13].use[5]!./src/scss/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
* 変数
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/**
* 基本設定
*/
body {
  font-family: "Montserrat", "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  color: #656565;
  font-size: min(3.59vw, 14px);
  font-weight: normal;
  line-height: 1.67;
  letter-spacing: 0;
}

p {
  margin: 0;
  margin-bottom: 1em;
}
p:last-child {
  margin-bottom: 0;
}

a {
  color: #656565;
  text-decoration: none;
}
a:link {
  color: #656565;
}
a:active {
  color: #656565;
}
a:visited {
  color: #656565;
}
@media screen and (min-width: 431px) {
  a:hover {
    cursor: pointer;
    color: #B6AB73;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  a.textLink {
    cursor: pointer;
    color: #B6AB73;
    transition: all 0.3s ease;
  }
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

ul, ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

dl, dd, dt {
  padding: 0;
  margin: 0;
}

/**
* コンテンツ幅
*/
/* support iOS */
html {
  height: -webkit-fill-available;
}

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

body {
  background-color: #ddd;
  margin: 0;
  height: 100%;
}

#pageWrapper {
  background-color: #fff;
  max-width: 430px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#pageWrapper:not(.pageLogin) {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

main {
  width: 100%;
  padding-bottom: 10px;
  padding-top: 84.07px;
  flex: 1 1;
}
main section:first-child .container, main article:first-child .container {
  padding-top: 30px;
}

section .container, article .container {
  margin: 0 auto;
  padding: 50px min(7.692vw, 30px);
}
section .container .case, article .container .case {
  margin-bottom: 38px;
}
section .container .case:last-child, article .container .case:last-child {
  margin-bottom: 0;
}
section .container .box, article .container .box {
  margin-bottom: 21px;
}
section .container .box:last-child, article .container .box:last-child {
  margin-bottom: 0;
}

/**
* ヘッダー
*/
header {
  max-width: 430px;
  position: absolute;
  top: 0;
  width: 100%;
}
header > .inner {
  background-image: url("/images/common/bgMenu.png"), url("/images/common/bgHeader.png");
  background-size: 95px auto, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: right bottom, center center;
  height: 84.07px;
  padding: 0 26px;
  position: relative;
  background-color: #ffffff;
  display: flex;
  align-items: center;
}
header > .inner .logo {
  max-width: 270.97px;
  width: 78%;
}
@media screen and (min-width: 431px) {
  header > .inner .logo:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
header > .inner .menuBtn {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 22px;
  height: 20px;
  width: 23px;
}
header > .inner .menuBtn .hamburger {
  position: absolute;
  width: 23px;
  height: 2.5px;
  right: 0;
  background-color: #250C38;
  transition: all 0.5s;
  border-radius: 5px;
}
header > .inner .menuBtn .hamburger:nth-of-type(1) {
  top: 0;
}
header > .inner .menuBtn .hamburger:nth-of-type(2) {
  top: 8px;
}
header > .inner .menuBtn .hamburger:nth-of-type(3) {
  top: 16px;
}
@media screen and (min-width: 431px) {
  header > .inner .menuBtn:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
header .menuOpenBox {
  opacity: 0;
  z-index: -1;
}
header .menuOpenBox {
  background-color: #fff;
  max-width: 430px;
  padding: min(7.692vw, 30px);
  position: fixed;
  top: 84.07px;
  height: calc(100% - 84.07px);
  width: 100%;
  overflow-y: scroll;
  transition: all 0.5s;
}
header .menuOpenBox .accountBox {
  margin-bottom: 26px;
}
header .menuOpenBox .accountBox .textUserName {
  margin-bottom: 20px;
}
header .menuOpenBox .accountBox .profile {
  display: flex;
  align-items: center;
}
header .menuOpenBox .accountBox .profile img {
  border-radius: 50%;
  height: 62px !important;
  margin-right: 23px;
}
header .menuOpenBox .accountBox .profile label {
  font-size: 15px;
  color: #363638;
  font-weight: 500px;
}
header .menuOpenBox .accountBox .profileEdit {
  border: 1px solid #707070;
  margin: 15px 0;
  border-radius: 50px;
  padding: 4px 14px;
  width: 145px;
  height: 25px;
  font-size: 11px;
}
header .menuOpenBox .loginSignUpBox {
  margin-bottom: 38px;
}
header .menuOpenBox .loginSignUpBox .login {
  width: 333px;
  background-color: #574337;
  color: #ffffff;
}
@media screen and (min-width: 431px) {
  header .menuOpenBox .loginSignUpBox .login:hover {
    cursor: pointer;
    color: #ffffff;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  header .menuOpenBox .loginSignUpBox .login:hover {
    cursor: pointer;
    background-color: #795E4E;
    transition: all 0.3s ease;
  }
}
header .menuOpenBox .loginSignUpBox .register {
  width: 333px;
  border: 1px solid #B6AB73;
  color: #B6AB73;
}
@media screen and (min-width: 431px) {
  header .menuOpenBox .loginSignUpBox .register:hover {
    cursor: pointer;
    color: #5B4235;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  header .menuOpenBox .loginSignUpBox .register:hover {
    cursor: pointer;
    border-color: #5B4235;
    transition: all 0.3s ease;
  }
}
header .menuOpenBox .qrLayout {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
header .menuOpenBox .qrLayout .qrContainer {
  position: relative;
}
header .menuOpenBox .qrLayout .qrContainer .qrSample {
  position: absolute;
  width: 208px;
  height: 207px;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header .menuOpenBox .qrLayout .qrContainer .pointWrapper {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 89%;
}
header .menuOpenBox .qrLayout .qrContainer .pointWrapper .pointLabel {
  font-size: 13px;
  font-weight: normal;
}
header .menuOpenBox .qrHelp {
  display: flex;
  justify-content: end;
  margin-bottom: 21px;
  color: #7E7E7E;
}
header .menuOpenBox .qrHelp div {
  cursor: pointer;
}
header .menuOpenBox .menuLabel {
  font-size: min(3.59vw, 13px);
  font-weight: 300;
  margin-bottom: 16.5px;
  margin-top: 38.5px;
  color: #ADADAD;
}

header.open {
  position: fixed;
  z-index: 100;
}
header.open .menuBtn .hamburger:nth-of-type(1) {
  transform: rotate(-45deg);
  top: 9px;
}
header.open .menuBtn .hamburger:nth-of-type(2) {
  opacity: 0;
}
header.open .menuBtn .hamburger:nth-of-type(3) {
  transform: rotate(45deg);
  top: 9px;
}
header.open .menuOpenBox {
  opacity: 100;
  z-index: 10;
}
header.open .menuOpenBox .textRed {
  color: #EF4040;
}

/**
* フッター
*/
footer {
  background-color: #B6AB73;
  width: 100%;
}
footer .inner {
  padding: 14px 35px 16px;
  padding-inline: min(7vw, 35px);
  display: grid;
}
footer .inner .btnBackToTop {
  display: block;
  margin: 0 auto 8px;
  width: 9px;
}
@media screen and (min-width: 431px) {
  footer .inner .btnBackToTop:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
footer .inner .logo {
  display: inline-block;
  margin: 33.5px auto;
}
@media screen and (min-width: 431px) {
  footer .inner .logo:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
footer .inner .footerMenuBox {
  -webkit-margin-after: 30.5px;
          margin-block-end: 30.5px;
  display: flex;
  justify-content: center;
}
footer .inner .footerMenuBox li {
  display: inline-block;
  margin-right: 1em;
}
footer .inner .footerMenuBox li a {
  color: #000;
  font-size: min(3.077vw, 12px);
}
@media screen and (min-width: 431px) {
  footer .inner .footerMenuBox li a:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
footer .inner .snsLinkBox li {
  display: inline-block;
  margin-right: 22px;
}
@media screen and (min-width: 431px) {
  footer .inner .snsLinkBox li:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
footer #copyright {
  color: #fff;
  font-size: min(2.821vw, 11px);
  padding: 11px;
  text-align: center;
  background: #000000;
}

/**
* ボタン
*/
.btnLinkBox {
  margin-bottom: 30.5px;
}
.btnLinkBox:last-child {
  margin-bottom: 0;
}
.btnLinkBox.half {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btnLinkBox.half .btn {
  margin: 0;
  width: 48%;
}

.btn {
  border-radius: 50px;
  border: none;
  display: block;
  line-height: 1.2;
  margin: 0 auto 22px;
  padding: 18px;
  text-align: center;
  width: 310px;
  height: 52px;
}
.btn.btnPurple {
  background-color: #574337;
  color: #fff;
}
@media screen and (min-width: 431px) {
  .btn.btnPurple:hover {
    cursor: pointer;
    background-color: #B6AB73;
    transition: all 0.3s ease;
  }
}
.btn.btnBlack {
  background-color: #121212;
  color: #fff;
}
@media screen and (min-width: 431px) {
  .btn.btnBlack:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
.btn.btnWhite {
  background-color: #fff;
  color: #656565;
}
@media screen and (min-width: 431px) {
  .btn.btnWhite:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
.btn.btnGray {
  background-color: #898989;
  color: #fff;
}
@media screen and (min-width: 431px) {
  .btn.btnGray:hover {
    cursor: pointer;
    background-color: #696969;
    transition: all 0.3s ease;
  }
}
.btn.btnBrown {
  background-color: #574337;
  color: #fff;
}
@media screen and (min-width: 431px) {
  .btn.btnBrown:hover {
    cursor: pointer;
    background-color: #795E4E;
    transition: all 0.3s ease;
  }
}
.btn.btnDarkBrown {
  background-color: #493228;
  color: #fff;
}
@media screen and (min-width: 431px) {
  .btn.btnDarkBrown:hover {
    cursor: pointer;
    background-color: #795E4E;
    transition: all 0.3s ease;
  }
}
.btn.btnArcanaGen {
  width: 333px;
  background-color: #574337;
  color: #fff;
}
@media screen and (min-width: 431px) {
  .btn.btnArcanaGen:hover {
    cursor: pointer;
    background-color: #795E4E;
    transition: all 0.3s ease;
  }
}
.btn.btnLogout {
  width: 277px !important;
  background-color: #5B4235;
  color: #fff;
}
@media screen and (min-width: 431px) {
  .btn.btnLogout:hover {
    cursor: pointer;
    background-color: #795E4E;
    transition: all 0.3s ease;
  }
}
.btn.btnBorder {
  border: 1px solid #B6AB73;
  color: #B6AB73;
  max-width: 230px;
  padding: 13px;
  margin-bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 431px) {
  .btn.btnBorder:hover {
    cursor: pointer;
    color: #574337;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .btn.btnBorder:hover {
    cursor: pointer;
    border-color: #574337;
    transition: all 0.3s ease;
  }
}
.btn.btnHome {
  font-size: 13px;
  border: 1px solid #B6AB73;
  color: #B6AB73;
  max-width: 200px;
  max-height: 40px;
  padding: 13px;
  margin-bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 431px) {
  .btn.btnHome:hover {
    cursor: pointer;
    color: #5B4235;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .btn.btnHome:hover {
    cursor: pointer;
    border-color: #5B4235;
    transition: all 0.3s ease;
  }
}
.btn.btnSetting {
  background-color: #5B4235;
  color: #fff;
  max-width: 277px;
  max-height: 52px;
  margin-top: 60px;
}
@media screen and (min-width: 431px) {
  .btn.btnSetting:hover {
    cursor: pointer;
    background-color: #795E4E;
    transition: all 0.3s ease;
  }
}
.btn.btnBorderGray {
  border: 1px solid #ccc;
}
@media screen and (min-width: 431px) {
  .btn.btnBorderGray:hover {
    cursor: pointer;
    color: #574337;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .btn.btnBorderGray:hover {
    cursor: pointer;
    border-color: #574337;
    transition: all 0.3s ease;
  }
}
.btn.btnBorderGold {
  border: 1px solid #B6AB73;
  color: #B6AB73;
}
@media screen and (min-width: 431px) {
  .btn.btnBorderGold:hover {
    cursor: pointer;
    color: #574337;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .btn.btnBorderGold:hover {
    cursor: pointer;
    border-color: #574337;
    transition: all 0.3s ease;
  }
}

.textLinkBox {
  display: block;
  text-align: center;
  margin-bottom: 30.5px;
}
.textLinkBox:last-child {
  margin-bottom: 0;
}
.textLinkBox.left {
  text-align: left;
}
.textLinkBox.right {
  text-align: right;
}

.textLink {
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
}
.textLink.textPurple {
  color: #B6AB73;
}
@media screen and (min-width: 431px) {
  .textLink.textPurple:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
.textLink.textGray {
  color: #7E7E7E;
}
@media screen and (min-width: 431px) {
  .textLink.textGray:hover {
    cursor: pointer;
    color: #B6AB73;
    transition: all 0.3s ease;
  }
}
.textLink.textWhite {
  color: #fff;
}
@media screen and (min-width: 431px) {
  .textLink.textWhite:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
.textLink.textGold {
  color: #B6AB73;
}
@media screen and (min-width: 431px) {
  .textLink.textGold:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}

.react-responsive-modal-closeButton svg {
  width: 17.98px;
  height: 17.98px;
}

/**
*  カテゴリ、タグ
*/
.badgesvBox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cate {
  background-color: black;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: min(3.333vw, 13px);
  line-height: 1.4;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 4px 6px;
}
.cate:last-child {
  margin-right: 0;
}

.tag {
  background-color: #ECECEC;
  border-radius: 3px;
  color: #3B3B3B;
  display: inline-block;
  font-size: min(3.333vw, 13px);
  line-height: 1.4;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 4px 6px;
}
.tag:last-child {
  margin-right: 0;
}

.tagCircle {
  border-radius: 50px;
  color: #fff;
  font-size: min(2.821vw, 11px);
  letter-spacing: 0.022em;
  padding: 4px 8px;
}
.tagCircle.tagCompleted {
  background-color: #656565;
}
.tagCircle.tagWaiting {
  background-color: #E551CE;
}

/**
* フォーム
*/
input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=datetime],
input[type=date],
input[type=password] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #C7C7C7;
  border-radius: 8px;
  line-height: 1.4;
  padding: 18px;
  transition: all 0.3s ease 0s;
  width: 100%;
}
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=datetime]:focus,
input[type=date]:focus,
input[type=password]:focus {
  border: 1px solid #B6AB73;
  outline: none;
}
input[type=text]:placeholder-shown,
input[type=number]:placeholder-shown,
input[type=email]:placeholder-shown,
input[type=tel]:placeholder-shown,
input[type=url]:placeholder-shown,
input[type=datetime]:placeholder-shown,
input[type=date]:placeholder-shown,
input[type=password]:placeholder-shown {
  color: #9F9F9F;
}
input[type=text]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
input[type=datetime]::-webkit-input-placeholder,
input[type=date]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder {
  color: #9F9F9F;
}
input[type=text]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=url]:-moz-placeholder,
input[type=datetime]:-moz-placeholder,
input[type=date]:-moz-placeholder,
input[type=password]:-moz-placeholder {
  color: #9F9F9F;
  opacity: 1;
}
input[type=text]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=url]::-moz-placeholder,
input[type=datetime]::-moz-placeholder,
input[type=date]::-moz-placeholder,
input[type=password]::-moz-placeholder {
  color: #9F9F9F;
  opacity: 1;
}
input[type=text]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
input[type=datetime]:-ms-input-placeholder,
input[type=date]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder {
  color: #9F9F9F;
}

textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #C7C7C7;
  border-radius: 8px;
  line-height: 1.4;
  padding: 18px;
  transition: all 0.3s ease 0s;
  width: 100%;
  display: block;
  resize: vertical;
}
textarea:focus {
  border: 1px solid #B6AB73;
  outline: none;
}
textarea:placeholder-shown {
  color: #9F9F9F;
}
textarea::-webkit-input-placeholder {
  color: #9F9F9F;
}
textarea:-moz-placeholder {
  color: #9F9F9F;
  opacity: 1;
}
textarea::-moz-placeholder {
  color: #9F9F9F;
  opacity: 1;
}
textarea:-ms-input-placeholder {
  color: #9F9F9F;
}

input.error {
  border: 1px solid #EF4040;
}
input:invalid {
  border: 1px solid #EF4040;
}

.errorMessage {
  color: #EF4040;
  display: inline-block;
  font-size: min(3.077vw, 12px);
  margin-top: min(2.564vw, 10px);
}

.selectBox {
  width: 100%;
}
.selectBox label {
  display: inline-block;
  position: relative;
  width: 100%;
}
.selectBox label::after {
  position: absolute;
  content: "";
  pointer-events: none;
}
.selectBox label::after {
  background: url("/images/common/iconArrowSelect.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  content: "";
  display: inline-block;
  position: absolute;
  top: calc(50% - 9px);
  right: 13px;
  height: 17px;
  width: 17px;
  z-index: 1;
}
.selectBox select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #C7C7C7;
  border-radius: 8px;
  line-height: 1.4;
  padding: 18px;
  transition: all 0.3s ease 0s;
  width: 100%;
  color: #9F9F9F;
}
.selectBox select:focus {
  border: 1px solid #B6AB73;
  outline: none;
}
.selectBox.half {
  display: flex;
  justify-content: space-between;
}
.selectBox.half label {
  width: 48%;
}

.checkBox label {
  cursor: pointer;
  gap: 0 0.5em;
  position: relative;
  display: flex;
  align-items: center;
}
.checkBox label::before, .checkBox label:has(:checked)::after {
  content: "";
}
.checkBox label::before {
  width: 17px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid #B7B7B7;
}
.checkBox label:has(:checked)::before {
  background-color: #ffffff;
  border: 1px solid #B7B7B7;
}
.checkBox label:has(:checked)::after {
  background: url("/images/common/iconCheck.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
  content: "";
  display: inline-block;
  position: absolute;
  top: calc(50% - 3.25px);
  left: 4px;
  height: 6.5px;
  width: 8.17px;
}
.checkBox label input {
  display: none;
}

.searchBox {
  position: relative;
  height: 50px;
}
.searchBox input {
  padding: 0;
  padding-right: 82px;
  height: 50px;
  -webkit-padding-start: 15px;
          padding-inline-start: 15px;
  font-size: 13px;
}
.searchBox input:focus {
  color: #5B4235;
}
.searchBox input:focus {
  border: 1px solid #5B4235;
}
.searchBox button {
  background-color: #574337;
  border-radius: 0 8px 8px 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  height: 100%;
  outline: none;
  position: absolute;
  right: 0;
  width: 75.68px;
  font-size: 13px;
  z-index: 1;
}
@media screen and (min-width: 431px) {
  .searchBox button:hover {
    cursor: pointer;
    background-color: #B6AB73;
    transition: all 0.3s ease;
  }
}

.passwordBox {
  display: block;
  position: relative;
}
.passwordBox #inputPassword {
  padding-right: 40px;
}
.passwordBox .togglePassword {
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: calc(50% - 12px);
}

.loginFormBox p .textLinkBox {
  margin-top: 10px;
}
.loginFormBox p .textLink {
  color: #4B2C80;
}
@media screen and (min-width: 431px) {
  .loginFormBox p .textLink:hover {
    cursor: pointer;
    color: #B6AB73;
    transition: all 0.3s ease;
  }
}
.loginFormBox .btnOrBox .btn.btnPurple {
  margin-bottom: 0;
}
.loginFormBox .btnOrBox p.textOr {
  margin: 8px auto;
}

/**
* アイコン
*/
.icon {
  padding-left: 20px;
  position: relative;
}
.icon:before {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: calc(50% - 7px);
  height: 14px;
  width: 14px;
}
.icon.iconTop:before {
  background-image: url("/images/common/iconTop.svg");
}
.icon.iconMypage:before {
  background-image: url("/images/common/iconMypage.png");
}
.icon.iconLike:before {
  background-image: url("/images/common/iconLike.png");
}
.icon.iconArticle:before {
  background-image: url("/images/common/iconArticle.png");
}
.icon.iconGame:before {
  background-image: url("/images/common/iconGame.png");
}
.icon.iconMarchandises:before {
  background-image: url("/images/common/iconMarchandises.png");
  width: 14.93px;
  height: 14.9px;
}
.icon.iconHelp:before {
  background-image: url("/images/common/iconHelp.png");
}
.icon.iconHelpWhite:before {
  background-image: url("/images/common/iconHelpWhite.png");
}
.icon.iconSignOut:before {
  background-image: url("/images/common/iconSignout.svg");
}
.icon.iconPoint:before {
  background-image: url("/images/common/iconPoint.png");
}
.icon.iconLearning:before {
  background-image: url("/images/common/iconLearning.png");
}
.icon.iconTeaching:before {
  background-image: url("/images/common/iconTeaching.png");
}
.icon.iconEvent:before {
  background-image: url("/images/common/iconEvent.svg");
}
.icon.iconCelebration:before {
  background-image: url("/images/common/iconCelebration.svg");
  top: calc(50% - 11px);
  height: 17.3px;
  width: 18.35px;
}
.icon.iconMyAddress:before {
  background-image: url("/images/common/iconMyAddress.png");
}
.icon.iconProfile:before {
  background-image: url("/images/common/iconProfile.png");
}
.icon.iconSetting:before {
  background-image: url("/images/common/iconSetting.png");
  width: 14.29px;
  height: 14.89px;
}
.icon.iconNftRequest:before {
  background-image: url("/images/common/iconNftRequest.png");
  top: calc(50% - 10px);
  height: 20px;
  width: 20px;
}
.icon.iconNft:before {
  background-image: url("/images/common/iconAboutNft.svg");
  top: calc(50% - 13px);
  height: 25px;
  width: 25px;
  margin-left: -2px;
}
.icon.iconAnicana:before {
  background-image: url("/images/common/iconAnicana.svg");
  height: 18.43px;
  top: calc(50% - 9px);
}
.icon.iconQR:before {
  background-image: url("/images/common/iconQR.svg");
}
.icon:hover {
  transition: all 0.3s ease;
}
.icon:hover.iconTop:before {
  background-image: url("/images/common/iconTopHover.svg");
}
.icon:hover.iconMypage:before {
  background-image: url("/images/common/iconMypage.png");
}
.icon:hover.iconLike:before {
  background-image: url("/images/common/iconLikeHover2.png");
}
.icon:hover.iconArticle:before {
  background-image: url("/images/common/iconArticleHover.svg");
}
.icon:hover.iconGame:before {
  background-image: url("/images/common/iconGame.png");
}
.icon:hover.iconMarchandises:before {
  background-image: url("/images/common/iconMarchandisesHover.svg");
}
.icon:hover.iconHelp:before {
  background-image: url("/images/common/iconHelp.png");
}
.icon:hover.iconSignOut:before {
  background-image: url("/images/common/iconSignoutHover.svg");
}
.icon:hover.iconPoint:before {
  background-image: url("/images/common/iconPointHover2.png");
}
.icon:hover.iconLearning:before {
  background-image: url("/images/common/iconLearning.png");
}
.icon:hover.iconTeaching:before {
  background-image: url("/images/common/iconTeaching.png");
}
.icon:hover.iconEvent:before {
  background-image: url("/images/common/iconEvent.svg");
}
.icon:hover.iconCelebration:before {
  background-image: url("/images/common/iconCelebrationHover.svg");
}
.icon:hover.iconProfile:before {
  background-image: url("/images/common/iconProfile.png");
}
.icon:hover.iconSetting:before {
  background-image: url("/images/common/iconSettingHover.svg");
}
.icon:hover.iconNftRequest:before {
  background-image: url("/images/common/iconNftRequest.png");
}
.icon:hover.iconNft:before {
  background-image: url("/images/common/iconAboutNft.svg");
}
.icon:hover.iconAnicana:before {
  background-image: url("/images/common/iconAnicanaHover.svg");
}
.icon:hover.iconQR:before {
  background-image: url("/images/common/iconQRHover.svg");
}

.iconCircle {
  background-color: #F7F7F7;
  background-size: 20px auto;
  border-radius: 50px;
  height: 42px;
  line-height: 42px !important;
  text-align: center;
  width: 42px;
}

.material-symbols-outlined {
  font-size: 22px;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 48;
}

/**
* iframe box
*/
.iframeBox {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background-color: #D3D3D3;
  padding: 80px 0;
  text-align: center;
}

/**
* リスト
*/
.listDecimal {
  list-style: decimal;
  list-style-position: inside;
}
.listDecimal li {
  margin-bottom: 18px;
}
.listDecimal li:last-child {
  margin-bottom: 0;
}

.listDecimalSub {
  list-style: decimal;
  list-style-position: inside;
  margin-top: 18px;
}
.listDecimalSub li {
  margin-bottom: 17px;
  padding-left: 1.5em;
  position: relative;
}
.listDecimalSub li:before {
  content: "ー";
  color: #B9B9B9;
  position: absolute;
  left: 0;
}
.listDecimalSub li:last-child {
  margin-bottom: 0;
}

.listDecimalOutside {
  list-style: decimal;
  list-style-position: outside;
  padding-left: 30px;
}
.listDecimalOutside li {
  margin-bottom: 18px;
}
.listDecimalOutside li:last-child {
  margin-bottom: 0;
}
.listDecimalOutside li::marker {
  font-weight: bold;
}

.listContactInfo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.listContactInfo dt, .listContactInfo dd {
  margin-bottom: 18px;
}
.listContactInfo dt {
  width: 36%;
}
.listContactInfo dd {
  width: 64%;
}

/**
* モーダル
*/
.modalBg {
  background-color: rgba(0, 0, 0, 0.8);
  max-width: 430px;
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  z-index: 200;
}

.modalInner {
  background-color: #fff;
  border-radius: 16px;
  max-width: min(84.615vw, 370px);
  padding: min(7.179vw, 28px);
  width: 100%;
  z-index: 202;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media screen and (min-width: 431px) {
  .modalInner {
    max-width: calc(430px - min(15.385vw, 60px));
  }
}
.modalInner.center {
  text-align: center;
}
.modalInner.paddingMin {
  padding: min(7.179vw, 28px) min(4.615vw, 18px);
}
.modalInner .textBox {
  margin-bottom: 30.5px;
}
.modalInner .textBox:last-child {
  margin-bottom: 0;
}
.modalInner .textBox p {
  margin-bottom: 9px;
}
.modalInner .textBox p:last-child {
  margin-bottom: 0;
}
.modalInner .text {
  margin-bottom: 20px;
}

.btnClose {
  cursor: pointer;
  position: absolute;
  left: calc(50% - 13px);
  bottom: -100px;
  z-index: 201;
  width: 26px;
}
@media screen and (min-width: 431px) {
  .btnClose:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
@media screen and (max-height: 430px) {
  .btnClose {
    bottom: -60px;
  }
}

/**
* QRコード
*/
.qrCodeBox {
  background-color: #B6AB73 !important;
}
@media screen and (max-height: 430px) {
  .qrCodeBox {
    top: 30px;
    transform: translateX(-50%) translateY(0%);
  }
}
.qrCodeBox .inner .ttlModal {
  color: #fff;
  margin-top: 6.5px;
}
.qrCodeBox .inner .imgBox {
  background-color: #fff;
  border-radius: 15px;
  margin-bottom: 36px;
  width: 310px;
  height: 310px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qrCodeBox .inner .imgBox img {
  height: auto;
  width: 100%;
}
.qrCodeBox .inner .textLink {
  font-size: min(3.333vw, 13px);
}

/**
* スライダーbox
*/
.sliderBox .sliderDots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 28px;
}
.sliderBox .sliderDots li {
  height: 17px;
  width: 17px;
}
.sliderBox .sliderDots li button {
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  text-indent: -99999px;
  height: 17px;
  width: 17px;
}
.sliderBox .sliderDots li button::before {
  content: "";
  background-color: #DBDBDB;
  border-radius: 6px;
  display: block;
  position: absolute;
  top: calc(50% - 3px);
  left: calc(50% - 3px);
  height: 6px;
  width: 6px;
}
@media screen and (min-width: 431px) {
  .sliderBox .sliderDots li button:hover::before {
    background-color: #3B3B3B;
    transition: all 0.3s ease;
  }
}
.sliderBox .sliderDots li.active {
  width: 18px;
  margin: 0 4px;
}
.sliderBox .sliderDots li.active button {
  width: 18px;
}
.sliderBox .sliderDots li.active button::before {
  background-color: #3B3B3B;
  left: calc(50% - 9px);
  width: 18px;
}
.sliderBox.sliderCenter {
  overflow: hidden;
}
.sliderBox.sliderCenter .articleListBox {
  display: flex;
  align-items: flex-end;
  transition: all 0.3s ease, opacity 0s ease 0.3s;
  transform: translateX(-59.5vw);
  width: 500vw;
}
@media screen and (min-width: 431px) {
  .sliderBox.sliderCenter .articleListBox {
    transform: translateX(-256px);
  }
}
.sliderBox.sliderCenter .articleListBox .item {
  margin-bottom: 0;
  margin-right: min(5.641vw, 24px);
  width: 74%;
  max-width: min(74.103vw, 318px);
  transition: all 0.3s ease;
}
.sliderBox.sliderCenter .articleListBox .item:not(.centered) .thumbBox.imgLarge {
  padding-top: 80%;
}
.sliderBox.sliderCenter .articleListBox .item a {
  flex-direction: column;
}
.sliderBox.sliderCenter .articleListBox .item .textBox .title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sliderBox.sliderCenter .articleListBox .item .textBox .text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sliderBox.sliderCenter .articleListBox .item .thumbBox {
  margin-right: 0;
  margin-bottom: 15px;
}
.sliderBox.sliderCenter .articleListBox .item .thumbBox.imgLarge {
  padding-top: 86.4%;
  width: 100%;
}
.sliderBox.sliderCenter .articleListBox .item:not(.active) {
  width: min(67vw, 288px);
}

/**
* テーブルbox
*/
.tableBox table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
.tableBox table tr {
  border: 1px solid #D1D1D1;
}
.tableBox table tr th {
  background-color: #FAFAFA;
  border-bottom: 1px solid #D1D1D1;
  color: #000;
  display: block;
  font-weight: normal;
  letter-spacing: 0.04em;
  padding: 13px 18px;
  text-align: left;
  width: 100%;
}
.tableBox table tr td {
  display: block;
  padding: 18px;
  text-align: left;
  width: 100%;
}

/**
* 見出し
*/
h1, h2, h3, h4, h5 {
  font-size: unset;
  font-weight: 500;
  line-height: 1.67;
  margin: 0;
}

.ttlTop {
  color: #000;
  font-size: min(4.359vw, 17px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: 30px;
  padding-left: 28px;
  position: relative;
}
.ttlTop span {
  color: #7E7E7E;
  font-family: "ヒラギノ角ゴ ProN", "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  font-size: min(3.077vw, 12px);
  font-weight: normal;
  letter-spacing: 0;
  padding-left: 8px;
}
.ttlTop::before {
  background-image: url("/images/common/iconTtlPink.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: calc(50% - 2px);
  height: 4px;
  width: 19px;
}
.ttlTop .ja {
  margin-left: 0;
}

.ttlLogin {
  color: #3B3B3B;
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(5.897vw, 23px);
  line-height: 1.48;
  margin-bottom: 28px;
  text-align: center;
}

.ttlModal {
  color: #3B3B3B;
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(5.897vw, 25px);
  line-height: 1.48;
  margin-bottom: 30.5px;
  text-align: center;
}

.ttlPage {
  color: #3B3B3B;
  font-size: min(5.641vw, 22px);
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 1.55;
  margin-bottom: 22px;
}

.ttlSub {
  color: #3B3B3B;
  border-bottom: 1px solid #D1D1D1;
  font-size: min(4.103vw, 16px);
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 1.34;
  margin-bottom: 18px;
  padding-bottom: 10px;
}

.ttlTopic {
  color: #000;
  font-size: min(4.103vw, 17px);
  font-weight: normal;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}

.ttlArticleMain {
  color: #3B3B3B;
  font-size: min(5.385vw, 21px);
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 1.24;
  margin-bottom: 16px;
}

.articleContentBox h3 {
  color: #3B3B3B;
  border-bottom: 1px solid #D1D1D1;
  font-size: min(4.103vw, 16px);
  font-weight: normal;
  letter-spacing: 0.02em;
  line-height: 1.34;
  margin-bottom: 30.5px;
  margin-top: 30.5px;
  padding-bottom: 10px;
}
.articleContentBox h3:first-child {
  margin-top: 0;
}
.articleContentBox h4 {
  color: #3B3B3B;
  font-size: min(3.59vw, 14px);
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-bottom: 30.5px;
  margin-top: 30.5px;
}
.articleContentBox h4:first-child {
  margin-top: 0;
}

.ttlLine {
  position: relative;
}
.ttlLine::before {
  background-color: #D1D1D1;
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
}
.ttlLine span {
  background-color: #fff;
  padding: 0 1em;
  position: relative;
  z-index: 1;
}

.ttlPurple {
  background-color: #4B2C80;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-size: min(3.333vw, 13px);
  line-height: 1.1;
  margin-right: 8px;
  padding: 4px 6px;
}

.ttlGold {
  background-color: #B6AB73;
  border-radius: 2px;
  color: #fff;
  display: inline-block;
  font-size: min(3.333vw, 13px);
  margin-right: 8px;
  padding: 3px 6px;
  height: 25px;
}

/**
* ON/OFFボタン
*/
.onOffBox {
  margin-inline: 30px;
}
.onOffBox .item {
  margin-bottom: 30.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onOffBox .item:last-child {
  margin-bottom: 0;
}
.onOffBox .item p {
  flex: 1 1;
  margin: 0;
}

.toggleBtn {
  position: relative;
  width: 88px;
  height: 40px;
}
.toggleBtn .toggleInput {
  border-radius: 40px;
  cursor: pointer;
  margin: 0;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 5;
}
.toggleBtn .toggleLabel {
  background-color: #656565;
  box-sizing: border-box;
  border-radius: 40px;
  display: inline-block;
  height: 40px;
  position: relative;
  transition: all 0.3s ease;
  width: 88px;
}
.toggleBtn .toggleLabel::after {
  background-color: #fff;
  border-radius: 100%;
  content: "";
  height: 32px;
  position: absolute;
  transition: all 0.3s ease;
  left: 4px;
  top: 4px;
  width: 32px;
  z-index: 2;
}
.toggleBtn .toggleLabel::before {
  content: "OFF";
  color: #fff;
  font-size: 12px;
  position: absolute;
  right: 18px;
  top: 14px;
}
.toggleBtn .toggleInput:checked + .toggleLabel {
  background-color: #B6AB73;
}
.toggleBtn .toggleInput:checked + .toggleLabel::after {
  left: 52px;
}
.toggleBtn .toggleInput:checked + .toggleLabel::before {
  content: "ON";
  position: absolute;
  right: 48px;
}

/**
* 画像 box　（角丸トリミング）
*/
.imgBox {
  overflow: hidden;
  position: relative;
}
.imgBox.imgLarge {
  border-radius: 14px;
}
.imgBox.imgMedium {
  border-radius: 14px;
}
.imgBox.imgSmall {
  border-radius: 12px;
}
.imgBox img {
  width: 100%;
  height: 100%;
}

/**
* サムネ画像 box　(画像トリミング有り ＋ 角丸トリミング)
*/
.thumbBox {
  overflow: hidden;
  position: relative;
}
.thumbBox.imgLarge {
  border-radius: 14px;
  padding-top: 65.15%;
  width: 100%;
}
.thumbBox.imgMedium {
  border-radius: 14px;
  padding-top: 100%;
  width: 100%;
}
.thumbBox.imgSmall {
  border-radius: 12px;
  width: 100px;
  height: 107px;
}
.thumbBox .ttlHoverBox {
  background: linear-gradient(rgba(0, 0, 0, 0), rgb(11, 0, 52));
  padding: 18px;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 55%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.thumbBox .ttlHoverBox p {
  color: #fff;
}
.thumbBox .ttlHoverBox p.ttlHover {
  font-size: min(4.103vw, 16px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.025em;
  margin-bottom: 12px;
  padding-left: 28px;
  position: relative;
}
.thumbBox .ttlHoverBox p.ttlHover::before {
  background-image: url("/images/common/iconTtlWhite.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: calc(50% - 2px);
  height: 4px;
  width: 19px;
}
.thumbBox img {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/**
* 画像サイズ
*/
.imgW100 {
  width: 100%;
}

/**
* メニューbox
*/
.menuBox {
  border-top: 1px solid #F2F2F2;
}
.menuBox li {
  border-bottom: 1px solid #F2F2F2;
}
.menuBox li a {
  display: block;
  padding: 14px 0;
  padding-left: 20px;
}
.menuBox li a.icon {
  position: relative;
}
.menuBox li a.icon:after {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  display: inline-block;
}
.menuBox li a.icon:after {
  background-image: url("/images/common/iconArrow.svg");
  position: absolute;
  right: 0;
  top: calc(50% - 4px);
  height: 6px;
  width: 15.5px;
}
@media screen and (min-width: 431px) {
  .menuBox li a:hover {
    cursor: pointer;
    color: #B6AB73;
    transition: all 0.3s ease;
  }
}
.menuBox.iconCircleMenu {
  border: none;
}
.menuBox.iconCircleMenu li {
  border: none;
  margin-bottom: 28px;
  padding: 3px 0;
}
.menuBox.iconCircleMenu li:last-child {
  margin-bottom: 0;
}
.menuBox.iconCircleMenu li a {
  padding: 0;
  display: flex;
  align-items: center;
}
.menuBox.iconCircleMenu li a.icon::before {
  display: none;
}
.menuBox.iconCircleMenu li a .iconCircle {
  margin-right: 18px;
}
@media screen and (min-width: 431px) {
  .menuBox.iconCircleMenu li a:hover .iconCircle {
    cursor: pointer;
    background-color: rgba(182, 171, 115, 0.35);
    transition: all 0.3s ease;
  }
}

#topDiscoverBox .menuBox a {
  font-size: 13px;
}

/**
* ログインフォーム　box
*/
.loginFormBox {
  max-width: 277px;
  margin: 0 auto 30.5px;
}
.loginFormBox:last-child {
  margin-bottom: 0;
}
.loginFormBox p.textOr {
  color: #9399A3;
  font-size: min(2.821vw, 11px);
  text-align: center;
}
.loginFormBox p .title {
  color: #898989;
  display: inline-block;
  font-size: min(3.333vw, 13px);
  font-weight: 500;
  margin-bottom: 8px;
}
.loginFormBox input {
  max-width: 277px;
}
.loginFormBox .btn {
  max-width: 277px;
}

/**
* ログイン - 新規登録　　切り替えボタン
*/
.loginSwitchBox {
  background-color: #F5F5F5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 6px 9px;
}
.loginSwitchBox a {
  padding: 5px;
  text-align: center;
  width: 50%;
}
.loginSwitchBox a.active {
  background-color: #fff;
  border-radius: 8px;
  color: #4B2C80;
  font-weight: 500;
  pointer-events: none;
}

/**
* ログインor新規登録　box
*/
.loginSignUpBox p.text {
  font-size: min(3.333vw, 11px);
  font-weight: 300;
  margin-bottom: 17px;
  letter-spacing: 0.02em;
}
.loginSignUpBox p.text:last-child {
  margin-bottom: 32px;
}
.loginSignUpBox p.ttlLine {
  margin: 30px 0;
  text-align: center;
}
.loginSignUpBox p.external {
  margin-bottom: 32px;
  color: #707070;
}
.loginSignUpBox p.title {
  color: #707070;
  text-align: justify;
}

/**
* ユーザー情報 box
*/
.accountBox .userName {
  color: #363638;
}
.accountBox .ttlAccount {
  font-weight: normal;
  margin-bottom: 1em;
  pointer-events: none;
}
.accountBox .ttlAccount.iconMyAddress {
  padding-left: 28px;
}
.accountBox .ttlAccount.iconMyAddress:before {
  width: 19px;
  height: 18px;
  top: calc(50% - 9px);
}
.accountBox .ttlAccount.iconPoint {
  display: flex;
  padding-left: 26px;
}
.accountBox .ttlAccount.iconPoint:before {
  width: 19px;
  height: 19px;
  top: calc(50% - 9.5px);
}
.accountBox .ttlAccount.iconPoint span {
  padding-top: 2px;
}
.accountBox .textLink {
  font-size: min(3.333vw, 13px);
}

.myAddressBox {
  margin-bottom: 21px;
}
.myAddressBox .ttlAccount {
  margin-bottom: 10px;
  font-size: min(3.077vw, 14px);
  font-weight: 300;
}
.myAddressBox .textCopyBox .textCopy {
  color: #656565;
  font-size: min(3.077vw, 11px);
  margin-bottom: 0;
  word-break: break-all;
}
.myAddressBox .textCopyBox .btnCopy {
  border: none;
  background: none;
  cursor: pointer;
  margin-left: 8px;
  padding: 0;
  position: relative;
  top: 2px;
}
@media screen and (min-width: 431px) {
  .myAddressBox .textCopyBox .btnCopy:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}

.pointBox {
  border: 1px solid #D1D1D1;
  border-radius: 14px;
  margin-bottom: 30.5px;
  padding: 16px;
}

.textPoint {
  color: #A5A5A5;
  line-height: 1.2;
  text-align: center;
}
.textPoint span {
  color: #363638;
  font-size: min(10.256vw, 40px);
  font-weight: 700;
  padding-right: 5px;
}

/**
* ポイント取得 box
*/
.pointGetBox {
  background-color: #FAFAFA;
  border-radius: 15px;
  padding-left: min(7.179vw, 28px);
  padding-top: min(7.179vw, 25px);
  padding-right: min(7.179vw, 33px);
  padding-bottom: min(7.179vw, 11px);
}
.pointGetBox .topBox {
  padding-bottom: 17px;
  border-bottom: 1px solid #B4AB7A;
}
.pointGetBox .topBox .pointBox {
  border: none;
  margin-bottom: 25px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pointGetBox .topBox .pointBox .textPoint .point {
  font-size: min(9.333vw, 32px);
  color: #574337;
  font-weight: 700;
  padding-right: 5px;
}
.pointGetBox .topBox .pointBox .textPoint .pointLabel {
  color: #656565;
  font-size: unset;
  font-weight: unset;
  padding-right: unset;
}
.pointGetBox .topBox .pointBtn {
  padding: 0;
  font-family: "Montserrat";
  display: flex;
}
.pointGetBox .topBox .pointBtn .time {
  color: #656565;
  padding-top: 2px;
}
.pointGetBox .topBox .pointBtn .ttlGold {
  max-width: 64px;
  width: 100%;
}
.pointGetBox .textBox {
  margin-bottom: 25px;
  margin-top: 12px;
}

.textCircle {
  margin: 0;
}
.textCircle span {
  border: 1px solid #656565;
  border-radius: 50px;
  display: inline-block;
  font-size: min(3.333vw, 13px);
  line-height: 1.1;
  padding: 4px 8px;
}

.textCircle {
  margin: 0;
}
.textCircle span {
  border: 1px solid #656565;
  border-radius: 50px;
  display: inline-block;
  font-size: min(3.333vw, 13px);
  line-height: 1.1;
  padding: 4px 8px;
}

.ttlpoint {
  color: #3B4043;
  font-size: min(4.103vw, 14px);
  margin-bottom: 0;
  padding-top: 3px;
}

.textReflectionTime {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

/**
* ポイント履歴一覧 box
*/
.pointsHistoryListBox {
  border-top: 1px solid #D1D1D1;
}
.pointsHistoryListBox li {
  border-bottom: 1px solid #D1D1D1;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pointsHistoryListBox li .title {
  display: block;
  font-size: 13px;
  letter-spacing: 0.02em;
  flex: 1 1;
  height: 40px;
  overflow: hidden;
}
.pointsHistoryListBox li .pointDateBox {
  text-align: right;
  margin-left: 10px;
}
.pointsHistoryListBox li .pointDateBox .point {
  color: #A5A5A5;
  display: block;
  font-size: min(3.077vw, 12px);
  letter-spacing: 0.03em;
}
.pointsHistoryListBox li .pointDateBox .point span {
  color: #363638;
  font-size: min(4.103vw, 16px);
  font-weight: 500;
  margin-right: 2px;
}
.pointsHistoryListBox li .pointDateBox .date {
  color: #7E7E7E;
  display: block;
  font-size: min(3.077vw, 12px);
  letter-spacing: 0.03em;
}

/**
* 記事一覧　box
*/
.articleListBox .item {
  margin-bottom: 42px;
}
.articleListBox .item:last-child {
  margin-bottom: 0;
}
.articleListBox .item a {
  display: flex;
  justify-content: space-between;
}
.articleListBox .item a .thumbBox {
  margin-right: min(5.128vw, 15.2px);
}
.articleListBox .item a .textBox {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.articleListBox .item a .textBox .title {
  color: #222;
  line-height: 1.4;
  margin-bottom: 7px;
  text-wrap: wrap;
}
.articleListBox .item a .textBox .text {
  font-size: min(3.077vw, 11px);
  line-height: 1.5;
  margin-bottom: 5px;
  letter-spacing: 0.03em;
  height: 3em; /* height and line-height for browser compatibility*/
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.articleListBox .item a .textBox .text.pickupText {
  font-size: min(3.077vw, 12px);
}
.articleListBox .item a .textBox .bottomBox {
  display: flex;
  flex-wrap: wrap;
}
.articleListBox .item a .textBox .bottomBox span {
  color: #7E7E7E;
  display: inline-block;
  font-size: min(3.077vw, 10px);
  line-height: 1;
  letter-spacing: 0.03em;
  padding-left: 16px;
  margin-right: 18.1px;
}
.articleListBox .item a .textBox .bottomBox span::before {
  top: calc(50% - 6px);
  width: 12.74px;
  height: 11.69px;
}
.articleListBox .item a .textBox .bottomBox span.point {
  margin-right: 15px;
  padding-left: 16.2px;
}
.articleListBox .item a .textBox .bottomBox span.point::before {
  top: calc(50% - 7px);
  width: 13.61px;
  height: 13px;
  margin-right: 4.2px;
}
.articleListBox .item a .textBox .bottomBox span.date {
  padding-left: 0;
  margin-right: 0;
}
@media screen and (min-width: 431px) {
  .articleListBox .item a:hover img {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .articleListBox .item a:hover .textBox .title {
    cursor: pointer;
    color: #B6AB73;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .articleListBox .item a:hover .textBox .bottomBox span {
    cursor: pointer;
    color: #B6AB73;
    transition: all 0.3s ease;
  }
}
.articleListBox .item a:hover .icon.iconLike:before {
  background-image: url("/images/common/iconLikeHover2.png");
}
.articleListBox .item a:hover .icon.iconPoint:before {
  background-image: url("/images/common/iconPointHover2.png");
}
.articleListBox.imgRight .item a .thumbBox {
  margin-right: 0;
  margin-left: min(5.128vw, 20px);
  order: 2;
}
.articleListBox.imgRight .item a .thumbBox.imgSmall {
  height: 100px;
}

/**
* 商品一覧box
*/
.itemListBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.itemListBox .item {
  margin-top: 30.5px;
  width: 46.97%;
}
.itemListBox .item:nth-of-type(1), .itemListBox .item:nth-of-type(2) {
  margin-top: 0;
}
.itemListBox .item a .thumbBox {
  margin-bottom: 20px;
}
.itemListBox .item a .textBox .name {
  color: #222;
  line-height: 1.4;
  margin-bottom: 10px;
}
.itemListBox .item a .textBox .text {
  font-size: min(3.077vw, 12px);
  line-height: 1.5;
  margin-bottom: 10px;
}
.itemListBox .item a .textBox .price {
  color: #000;
  font-family: "ヒラギノ角ゴ ProN", "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  font-size: min(3.333vw, 13px);
  letter-spacing: 0.022em;
}
@media screen and (min-width: 431px) {
  .itemListBox .item a:hover img {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .itemListBox .item a:hover .textBox .name, .itemListBox .item a:hover .textBox .price {
    cursor: pointer;
    color: #B6AB73;
    transition: all 0.3s ease;
  }
}

/**
* 一覧box（Sサイズ）
*/
.itemListSBox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.itemListSBox .item {
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(196, 196, 196, 0.3);
  border-radius: 14px;
  overflow: hidden;
  width: 30.333%;
}
.itemListSBox .item a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.itemListSBox .item a .thumbBox {
  border-radius: 0;
  margin-bottom: 8px;
  padding-top: 90.47%;
}
.itemListSBox .item a p {
  padding: 0 8px;
}
.itemListSBox .item a p.text {
  color: #000;
  display: -webkit-box;
  font-size: min(3.333vw, 13px);
  line-height: 1.5;
  margin-bottom: 6px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.itemListSBox .item a p.tagCircleBox {
  margin-top: auto;
  margin-bottom: 8px;
}
@media screen and (min-width: 431px) {
  .itemListSBox .item a:hover img {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .itemListSBox .item a:hover .text {
    cursor: pointer;
    color: #B6AB73;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .itemListSBox .item a:hover .tagCircle {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}

/**
* ページネーション box
*/
.paginationBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.paginationBox li {
  margin: 0 12px;
}
@media screen and (max-width: 374px) {
  .paginationBox li {
    margin: 0 10px;
  }
}
.paginationBox li a {
  border-radius: 10px;
  color: #aaa;
  font-size: min(4.103vw, 16px);
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.paginationBox li a.active {
  background-color: #493228;
  color: #fff;
  pointer-events: none;
  width: 50px;
}
.paginationBox li a.iconArrow {
  width: 50px;
}
.paginationBox li a.iconArrow img {
  width: 100%;
}
@media screen and (min-width: 431px) {
  .paginationBox li a:hover {
    cursor: pointer;
    color: #574337;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .paginationBox li a:hover.iconArrow {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
@media screen and (max-width: 374px) {
  .paginationBox li a {
    height: 40px;
  }
  .paginationBox li a.active {
    width: 40px;
  }
  .paginationBox li a.iconArrow {
    width: 40px;
  }
}

/**
* 検索フォーム　box
*/
.searchFormBox {
  width: 100%;
}
.searchFormBox .selectBox {
  margin-bottom: 25.8px;
}
.searchFormBox .checkBox {
  margin-bottom: 30.5px;
  margin-bottom: 25.5px;
}
.searchFormBox .checkBox.right {
  display: flex;
  justify-content: flex-end;
  -webkit-padding-end: 15px;
          padding-inline-end: 15px;
}

/**
* 記事詳細タイトル　box
*/
.articleTitleBox .imgBox {
  margin-bottom: 30.5px;
  height: 350px;
}
.articleTitleBox .textDate {
  margin-bottom: 30.5px;
}
.articleTitleBox .likeBox {
  margin-bottom: 8px;
}

.textDate {
  display: flex;
  align-items: center;
}

.likeBox {
  text-align: right;
}

.linkContainer {
  margin-block: 30.5px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.linkContainer .textLink {
  color: #8F8653;
}
.linkContainer .textLink:not(:first-child) {
  font-size: 12px;
}
.linkContainer img {
  margin-top: 2px;
}

h2.ttlArticleMain {
  text-wrap: wrap;
}

/**
* 記事詳細　box
*/
.articleContentBox {
  overflow: hidden;
  word-break: break-all;
}
.articleContentBox img {
  border-radius: 14px;
  margin-top: 30.5px;
  margin-bottom: 30.5px;
  overflow: hidden;
  position: relative;
}
.articleContentBox img:last-child {
  margin-bottom: 0;
}
.articleContentBox a {
  color: #4C12AD;
  text-decoration: underline;
}
.articleContentBox a:link {
  color: #4C12AD;
}
.articleContentBox a:active {
  color: #4C12AD;
}
.articleContentBox a:visited {
  color: #4C12AD;
}
.articleContentBox blockquote {
  border-left: 4px solid #D1D1D1;
  padding-left: 16px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.articleContentBox blockquote:first-child {
  margin-top: 22px;
}
.articleContentBox blockquote:last-child {
  margin-bottom: 22px;
}
.articleContentBox ul {
  padding-left: 20px !important;
  list-style: disc;
}
.articleContentBox ol {
  padding-left: 20px !important;
  list-style: decimal;
}
.articleContentBox p {
  margin-bottom: 4px !important;
}
.articleContentBox h3 {
  color: #3B3B3B !important;
  border-bottom: 1px solid #B4AB7A !important;
  font-size: 16px !important;
  font-weight: bold;
  letter-spacing: 0.02em !important;
  line-height: 1.34 !important;
  margin-bottom: 22px !important;
  margin-top: 22px !important;
  padding-bottom: 10px !important;
}
.articleContentBox h3:first-child {
  margin-top: 0 !important;
}
.articleContentBox h4 {
  color: #3B3B3B !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.5 !important;
  margin-bottom: 22px !important;
  margin-top: 22px !important;
  font-weight: bold !important;
}
.articleContentBox h4:first-child {
  margin-top: 0 !important;
}
.articleContentBox img {
  border-radius: 14px;
  margin-top: 22px;
  margin-bottom: 22px;
  overflow: hidden;
  position: relative;
}
.articleContentBox img:last-child {
  margin-bottom: 0;
}
.articleContentBox iframe {
  width: 100% !important;
  height: 300px !important;
}

/**
* いいねボタン　
*/
.btnLike {
  padding-left: 20px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding-left: 22px;
  font-size: 11px;
}
.btnLike:before {
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: calc(50% - 7px);
  height: 14px;
  width: 14px;
}
.btnLike::before {
  background-image: url("/images/common/iconLike.svg");
  top: calc(50% - 9px);
  width: 18px;
  height: 18px;
  transition: all 0.3s ease;
}
.btnLike.active::before {
  background-image: url("/images/common/iconLikeActive.png");
}

/**
* トップページ
*/
#pageTop {
  padding-bottom: 0;
}
#pageTop section {
  background-image: url("/images/common/bdTop.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
}
#pageTop section .btnBorder {
  margin-top: 21px;
}
#pageTop section#topAboutBox {
  background: none;
}
#pageTop section#topAboutBox .thumbBox {
  margin-bottom: 30.5px;
}
@media screen and (min-width: 431px) {
  #pageTop section#topAboutBox .thumbBox a:hover {
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.3s ease;
  }
}
#pageTop section#topAboutBox .ttlTop {
  margin-bottom: 16px;
}
#pageTop section#topPickUpBox .btnBorder {
  margin-top: 50px;
}
#pageTop section#topPickUpBox .btnHome {
  margin-top: 50px;
}
#pageTop section#topArticlesBox .container {
  padding-left: 0;
  padding-right: 0;
}
#pageTop section#topArticlesBox .ttlTop {
  margin-left: min(7.692vw, 30px);
  margin-right: min(7.692vw, 30px);
}
#pageTop section#topArticlesBox .btnHome {
  margin-top: 28px;
}
/**
* ログインページ 共通
*/
.pageLogin {
  background-image: url("/images/common/bgLogin.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 100%;
  padding: min(7.692vw, 30px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pageLogin .container {
  margin-bottom: min(9.744vw, 38px);
}
.pageLogin .container:last-child {
  margin-bottom: 0;
}

.loginBox {
  margin: 0 auto;
  padding: 0 min(7.692vw, 30px);
  width: 100%;
}
.loginBox .container {
  background-color: #fff;
  border-radius: 16px;
  padding-top: 28px !important;
  padding: min(7.179vw, 28px) min(2.564vw, 10px);
}
.loginBox .container .descriptionBox {
  font-size: 13px;
  line-height: 23px;
  font-family: "Helvetica Neue";
  margin: 0 18px;
}
.loginBox .container .descriptionBox.redirectAlert {
  font-size: 11px;
  margin-top: 10px;
  margin-bottom: 28px;
}
.loginBox .container .btn {
  margin-bottom: 28px;
  width: 277px;
}
.loginBox .container .btn:last-child {
  margin-bottom: 0;
}
.loginBox .container .btn.idmsLogin {
  background-color: #5B4235;
  color: #ffffff;
}
@media screen and (min-width: 431px) {
  .loginBox .container .btn.idmsLogin:hover {
    cursor: pointer;
    color: #ffffff;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .loginBox .container .btn.idmsLogin:hover {
    cursor: pointer;
    background-color: #795E4E;
    transition: all 0.3s ease;
  }
}
.loginBox .container .btn.idmsRegister {
  border: 1px solid #B6AB73;
  color: #B6AB73;
}
@media screen and (min-width: 431px) {
  .loginBox .container .btn.idmsRegister:hover {
    cursor: pointer;
    color: #5B4235;
    transition: all 0.3s ease;
  }
}
@media screen and (min-width: 431px) {
  .loginBox .container .btn.idmsRegister:hover {
    cursor: pointer;
    border-color: #5B4235;
    transition: all 0.3s ease;
  }
}
.loginBox .logo {
  display: block;
  margin: 0 auto 25.6px;
  max-width: 270px;
  width: 68.702vw;
}
.loginBox .loginSwitchBox {
  max-width: 277px;
  margin: 0 auto min(4.103vw, 16px);
}
.loginBox p {
  margin-bottom: 30.5px;
}
.loginBox p:last-child {
  margin-bottom: 0;
}
.loginBox p.text {
  color: #707070;
  line-height: 1.8;
  text-align: center;
}
.loginBox .textLink.textWhite {
  position: relative;
  padding-left: 30px;
}
.loginBox .textLink.textWhite::before {
  content: "";
  background-image: url("/images/common/iconAllowBack.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: calc(50% - 9px);
  height: 18px;
  width: 18px;
}

/**
* ログイン TOP
*/
#pageLoginTop .loginBox .ttlLogin {
  margin-bottom: min(2.051vw, 8px);
}
#pageLoginTop .loginFormBox p {
  margin-bottom: 16px;
}
#pageLoginTop .loginFormBox .btnOrBox p.textOr {
  margin-bottom: 8px;
}

/**
* 基本情報入力(新規登録)
*/
/**
* メールアドレスの認証(新規登録)
*/
/**
* メールアドレスの認証コード
*/
/**
* 電話番号の認証(新規登録)
*/
/**
* 電話番号の認証(コード)
*/
/**
* パスワード入力(新規登録)
*/
/**
* 登録完了(新規登録)
*/
/**
* パスワード再設定開始
*/
/**
* パスワード再設定
*/
/**
* パスワード再設定完了
*/
/**
* マイページ 共通
*/
/**
* マイページ
*/
#pageMypageTop .accountBox {
  margin-bottom: 38px;
}
#pageMypageTop .accountBox .pointBox {
  margin-bottom: 10px;
}
#pageMypageTop .likeProductBox {
  margin-bottom: 38px;
  position: relative;
}
#pageMypageTop .likeProductBox .textLink {
  font-size: min(3.333vw, 13px);
  position: absolute;
  top: 5px;
  right: 0;
}
#pageMypageTop .loginSignUpBox .textRed {
  color: #EF4040;
}

/**
* ポイント履歴
*/
/**
* ペルソナ発行申請
*/
#pagePersonaRequest .textBox {
  margin-bottom: 30.5px;
}
#pagePersonaRequest textarea {
  margin-bottom: 30.5px;
  min-height: 240px;
}

/**
* 記事一覧ページ 共通
*/
.pageArticleList .searchFormBox {
  margin-bottom: 30.5px;
}
.pageArticleList .articleListBox {
  margin-bottom: 40px;
}

/**
* 記事詳細ページ 共通
*/
.pageArticleDetail .articleTitleBox {
  margin-bottom: 30px;
}
.pageArticleDetail .articleTitleBox:last-child {
  margin-bottom: 0;
}
.pageArticleDetail .articleContentBox {
  margin-bottom: 38px;
}
.pageArticleDetail .articleContentBox:last-child {
  margin-bottom: 0;
}
.pageArticleDetail .relatedProductsBox .container {
  padding-top: 0;
}
.pageArticleDetail .pointGetBox {
  margin-bottom: 38px;
}
.pageArticleDetail .pointGetBox:last-child {
  margin-bottom: 0;
}
.pageArticleDetail .iframeBox {
  margin-bottom: 38px;
}
.pageArticleDetail .iframeBox:last-child {
  margin-bottom: 0;
}

/**
* プロダクト一覧
*/
/**
* プロダクト詳細
*/
/**
* 記事一覧
*/
/**
* 記事詳細
*/
/**
* ゲーム一覧
*/
/**
* ゲーム詳細
*/
/**
* 商品一覧
*/
/**
* 商品詳細
*/
/**
* 設定ページ
*/
#pageSetting {
  min-height: 410px;
}