@charset "UTF-8";

.sp {
  display: none;
}

/* SIZE */
.sizeChart__outer {
  display: flex;
  width: 1200px;
  transition: transform .5s;
}
.answarshow .sizeChart__outer {
  transform: translateX(-600px);
}
.page__block {
  margin: 0 auto;
  max-width: 600px;
  overflow: hidden;
  padding-top: 30px;
}
.page__title {
  text-align: center;
  margin-bottom: 30px;
}
.page__title span,
.page__title strong {
   display: block;
   font-weight: 400;
}
.page__title span {
  font-family: eb-garamond;
  font-size: 2.6rem;
  letter-spacing: .05em;
  line-height: 1.2;
}
.page__title strong {
  font-size: 1rem;
}
.sizeChart_top__inner {
  background-color: #EFEDEC;
  padding: 25px 10px 35px;
}
.sizeChart__size {
  background-color: #fff;
  max-width: 400px;
  margin: 0 auto;
  padding: 25px 35px;
}
.sizeChart__input {
  margin-bottom: 15px;
}
.sizeChart__input label {
  font-size: 1.2rem;
  display: block;
  margin-bottom: 5px;
}
.sizeChart__input p {
  position: relative;
}
.sizeChart__input p span {
  font-size: 1.2rem;
  color: #999;
  position: absolute;
  right: 24px;
  top: 14px;
  line-height: 1;
}
.sizeChart__input input[type=text] {
  background-color: #F7F7F7;
  border: none;
  color: #000;
}
.sizeChart__input input:disabled {
  color: #000;
  opacity: 1;
}
.text__link {
  font-size: 1rem;
  text-align: center;
  text-decoration: underline;
}
.sizeChart_error1,
.sizeChart_error2 {
  color: #FF0000;
  text-align: center;
  margin-top: 20px;
  display: none;
}
.page__block .sizeChart_btn {
  font-size: 1.2rem;
  text-align: center;
  min-width: 200px;
  padding: 12px;
  width: fit-content;
  margin: 30px auto 0;
  display: block;
  border-radius: 3px;
  border: 1px solid;
  text-decoration: none;
  letter-spacing: .05em;
  color: #000;
}
.page__block .sizeChart_btn--submit {
  background-color: #595A62;
  border-color: #595A62;
  color: #fff;
}
.page__block .sizeChart_btn--second {
  border-color: #ccc;
  background-color: #fff;
}
.page__block .sizeChart_btn--wide {
  min-width: 240px;
}
.sizeChart__subtitle {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 25px;
  padding-top: 10px;
}
#sizeChart_top {
  width: 600px;
}
#sizeChart_result {
  text-align: center;
  width: 600px;
}
#sizeChart_result .sizeChart__input {
  width: 180px;
  margin: 0 auto 15px;
}
#sizeChart_result input {
  text-align: center;
  letter-spacing: .05em;
}
#check:disabled {
  opacity: .2;
  cursor:unset;
}

/* MY CARTE */
#mycarte,
#question {
  text-align: center;
}
.carte__main {
  height: 346px;
  background: url(https://chut.itembox.design/item/images/chart/carte1.png) no-repeat center top / auto 346px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#question .carte__main {
  background-image: url(https://chut.itembox.design/item/images/chart/carte2.png);
}
.carte__head {
  font-size: 3rem;
  font-weight: 600;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  margin-bottom: 35px;
  line-height: 1.2;
}
.carte__text {
  font-size: 2rem;
  line-height: 2;
}
.carte__desc {
  font-size: 1.2rem;
  line-height: 1.67;
  margin: 40px 0 50px;
}
.carte__btn {
  display: flex !important;
  justify-content: center;
}
#question .carte__btn .sizeChart_btn {
  min-width: 150px;
  margin: 30px 10px 0;
}
.carte__btn + .sizeChart_btn {
  margin-top: 50px;
}

/*-------------
 SP
 -------------- */
 .is-mobile .sp {
  display: block;
}
.is-mobile .sizeChart__outer {
  width: 200%;
}
.is-mobile .answarshow .sizeChart__outer {
  transform: translateX(-50%);
}
.is-mobile .page__block {
  margin: 0 calc(20 / 375 * 100vw);
  max-width: 100%;
  padding-top: calc(5 / 375 * 100vw);
}
.is-mobile .page__title {
  margin-bottom: calc(28 / 375 * 100vw);
}
.is-mobile .page__title span {
  font-size: calc(26 / 375 * 100vw);
}
.is-mobile .page__title strong {
  font-size: calc(10 / 375 * 100vw);
}
.is-mobile .sizeChart_top__inner {
  padding: calc(25 / 375 * 100vw) calc(22 / 375 * 100vw) calc(35 / 375 * 100vw);
}
.is-mobile .sizeChart__size {
  max-width: 100%;
  padding: calc(25 / 375 * 100vw) calc(35 / 375 * 100vw);
}
.is-mobile .sizeChart__input {
  margin-bottom: calc(15 / 375 * 100vw);
}
.is-mobile .sizeChart__input input[type=text] {
  min-height: calc(40 / 375 * 100vw);
  font-size: calc(16 / 375 * 100vw) !important;
}
.is-mobile .sizeChart__input label {
  font-size: calc(12 / 375 * 100vw);
  margin-bottom: calc(5 / 375 * 100vw);
}
.is-mobile .sizeChart__input p span {
  font-size: calc(12 / 375 * 100vw);
  right: calc(24 / 375 * 100vw);
  top: calc(14 / 375 * 100vw);
}
.is-mobile .text__link {
  font-size: calc(10 / 375 * 100vw);
}
.is-mobile .sizeChart_error1,
.is-mobile .sizeChart_error2 {
  margin-top: calc(20 / 375 * 100vw);
}
.is-mobile .page__block .sizeChart_btn {
  font-size: calc(12 / 375 * 100vw);
  min-width: calc(200 / 375 * 100vw);
  padding: calc(12 / 375 * 100vw);
  margin: calc(30 / 375 * 100vw) auto 0;
  border-radius: calc(3 / 375 * 100vw);
}
.is-mobile .page__block .sizeChart_btn--wide {
  min-width: calc(240 / 375 * 100vw);
}
.is-mobile .sizeChart__subtitle {
  margin-bottom: calc(25 / 375 * 100vw);
  padding-top: calc(10 / 375 * 100vw);
}
.is-mobile #sizeChart_result .sizeChart__input {
  width: calc(180 / 375 * 100vw);
  margin: 0 auto calc(15 / 375 * 100vw);
}
.is-mobile #sizeChart_top,
.is-mobile #sizeChart_result {
  width: 100%;
}

/* MY CARTE */
.is-mobile .carte__main {
  height: calc(252 / 375 * 100vw);
  background-size: auto calc(252 / 375 * 100vw);
}
.is-mobile .carte__head {
  font-size: calc(26 / 375 * 100vw);
  margin-bottom: calc(30 / 375 * 100vw);
}
.is-mobile .carte__text {
  font-size: calc(16 / 375 * 100vw);
}
.is-mobile .carte__desc {
  font-size: calc(12 / 375 * 100vw);
  margin: calc(25 / 375 * 100vw) 0 calc(30 / 375 * 100vw);
}
.is-mobile #question .carte__btn {
  justify-content: space-around;
}
.is-mobile #question .carte__btn .sizeChart_btn {
  min-width: calc(150 / 375 * 100vw);
  margin: calc(30 / 375 * 100vw) 0 0;
}
.is-mobile .carte__btn + .sizeChart_btn {
  margin-top: calc(30 / 375 * 100vw);
}
.sizeChart_btn--member.my-false,
.sizeChart_btn--guest.my-true {
  display: none;
}