@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@500;600;700&display=swap');
:root{
  --vw-large: 1280;/* PC */
  --vw-small: 750;/* SP */
}
.pc {
  display: block;
}
.sp {
  display: none;
}
@media screen and (max-width: 978px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
.point__main * {
  box-sizing: border-box;
}
.point__main img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}
.point__main {
  font-family: NotoSansJP;
  margin: 100px 0 180px;
}
.point-inner {
  max-width: 900px;
  margin: 0 auto;
}
.point-inner h2 {
  position: relative;
  padding-left: 45px;
  font-size: 30px;
  margin-bottom: 20px;
  font-weight: 600;
}
.point-inner h2 em {
  font-style: normal;
  font-family: 'din-2014';
  font-size: 43px;
  display: inline-block;
  margin: 0 3px;
  transform: translate(0px, 3px);
}
.point-inner h2 span {
  display: inline-block;
  font-weight: 500;
  color: #bba171;
  font-size: 18px;
  margin-left: 20px;
  transform: translate(0px, -3px);
}
.point-inner h2::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.point-inner h2.-variations::before {
  width: 38px;
  height: 35px;
  left: 0;
  bottom: 0;
  background: url(../img/icon_vari.svg) center/contain no-repeat;
}
.point-inner h2.-cd::before {
  width: 33px;
  height: 29px;
  left: 0;
  bottom: 0;
  background: url(../img/icon_cd.svg) center/contain no-repeat;
}
.point-inner h2.-friends::before {
  width: 39px;
  height: 45px;
  left: 0;
  bottom: 0;
  background: url(../img/icon_friends.svg) center/contain no-repeat;
}
.point-inner h2.-birth::before {
  width: 40px;
  height: 39px;
  left: 0;
  bottom: 0;
  background: url(../img/icon_birth.svg) center/contain no-repeat;
}
.point-inner h2.-rankup::before {
  width: 38px;
  height: 38px;
  left: 0;
  bottom: 0;
  background: url(../img/icon_rankup.svg) center/contain no-repeat;
}
.point-inner h2.-faq::before {
  width: 40px;
  height: 28px;
  left: 0;
  bottom: 0;
  background: url(../img/icon_faq.svg) center/contain no-repeat;
}
.point-inner h2.-contact {
  padding-left: 50px;
}
.point-inner h2.-contact::before {
  width: 44px;
  height: 38px;
  left: 0;
  bottom: 0;
  background: url(../img/icon_contact.svg) center/contain no-repeat;
}
.point__main p {
  font-size: 18px;
  font-weight: 300;
  line-height: 2;
}
.point__main p.point-note {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
.point-btn {
  width: 260px;
  height: 40px;
  border: 2px solid #306fa4;
  background: #306fa4;
  color: #fff;
  display: flex;
  text-decoration: none;
  transition-duration: 0.3s;
  position: relative;
  align-items: center;
  font-size: 13px;
  justify-content: center;
}
.point-btn.-white {
  background: #fff;
  color: #306fa4;
}
.point-inner .point-btn::before {
  content: '';
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background: url(../img/icon_blank.svg) center/contain no-repeat;
}
@media screen and (max-width: 978px) {
  .point__main {
    margin-top: calc((100vw / var(--vw-small)) * 80);
    margin-bottom: calc((100vw / var(--vw-small)) * 180);
    padding: 0 calc((100vw / var(--vw-small)) * 35);
  }
  .point-inner h2 {
    padding-left: calc((100vw / var(--vw-small)) * 68);
    font-size: calc((100vw / var(--vw-small)) * 38);
    margin-bottom: calc((100vw / var(--vw-small)) * 34);
    line-height: 1.2;
  }
  .point-inner h2 em {
    font-size: calc((100vw / var(--vw-small)) * 60);
  }
  .point-inner h2 span {
    font-size: calc((100vw / var(--vw-small)) * 25);
    margin-left: 0;
  }
  .point-inner h2::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .point-inner h2.-variations::before {
    width: calc((100vw / var(--vw-small)) * 57);
    height: calc((100vw / var(--vw-small)) * 53);
    left: 0;
    bottom: auto;
    top: calc((100vw / var(--vw-small))* 12);
    transform: translate(0,0);
  }
  .point-inner h2.-cd::before {
    width: calc((100vw / var(--vw-small)) * 50);
    height: calc((100vw / var(--vw-small)) * 44);
  }
  .point-inner h2.-friends::before {
    width: calc((100vw / var(--vw-small)) * 59);
    height: calc((100vw / var(--vw-small)) * 68);
  }
  .point-inner h2.-birth::before {
    width: calc((100vw / var(--vw-small)) * 60);
    height: calc((100vw / var(--vw-small)) * 59);
    left: 0;
    bottom: auto;
    top: calc((100vw / var(--vw-small))* 32);
  }
  .point-inner h2.-rankup::before {
    width: calc((100vw / var(--vw-small)) * 57);
    height: calc((100vw / var(--vw-small)) * 57);
  }
  .point-inner h2.-faq {
    padding-left: calc((100vw / var(--vw-small)) * 72);
  }
  .point-inner h2.-faq::before {
    width: calc((100vw / var(--vw-small)) * 64);
    height: calc((100vw / var(--vw-small)) * 44);
  }
  .point-inner h2.-contact {
    padding-left: calc((100vw / var(--vw-small)) * 80);
  }
  .point-inner h2.-contact::before {
    width: calc((100vw / var(--vw-small)) * 58);
    height: calc((100vw / var(--vw-small)) * 51);
  }
  .point__main p {
    font-size: calc((100vw / var(--vw-small)) * 28);
  }
  .point__main p.point-note {
    font-size: calc((100vw / var(--vw-small)) * 22);
  }
  .point-btn {
    width: calc((100vw / var(--vw-small)) * 332);
    height: calc((100vw / var(--vw-small)) * 68);
    font-size: calc((100vw / var(--vw-small)) * 20);
  }
  .point-inner .point-btn::before {
    width: calc((100vw / var(--vw-small)) * 15);
    height: calc((100vw / var(--vw-small)) * 15);
    right: calc((100vw / var(--vw-small)) * 27);
    transform: translateY(-50%);
  }
}

@media (hover: hover) {
  .point-btn:hover {
    background: #fff;
    color: #306fa4;
  }
  .point-btn.-white:hover {
    background: #306fa4;
    color: #fff;
    &::before {
      display: none;
    }
  }
}
.point__mv {
  margin-bottom: 60px;
}
.point__mv__column {
  background: #f0f0f0;
  display: flex;
  padding: 30px 0;
}
.point__mv__column__item {
  display: flex;
  width: 50%;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 978px) {
  .point__mv {
    margin-bottom: calc((100vw / var(--vw-small)) * 60);
  }
  .point__mv__column {
    padding-top: calc((100vw / var(--vw-small)) * 60);
    padding-right: calc((100vw / var(--vw-small)) * 58);
    padding-bottom: calc((100vw / var(--vw-small)) * 58);
    padding-left: calc((100vw / var(--vw-small)) * 58);
    flex-wrap: wrap;
    gap: calc((100vw / var(--vw-small)) * 55);
  }
  .point__mv__column__item {
    width: 100%;
  }
}

.point__back {
  margin-bottom: 70px;
}
.point__back__bggray {
  border-radius: 10px;
  background: #f0f0f0;
  padding: 45px 45px 40px 45px;
  margin-bottom: 5px;
  display: flex;
  gap: 44px;
  margin-bottom: 16px;
}
.point__back__bggray p {
  width: 396px;
  flex-shrink: 0;
}
@media screen and (max-width: 978px) {
  .point__back {
    margin-bottom: calc((100vw / var(--vw-small)) * 100);
  }
  .point__back__bggray {
    border-radius: calc((100vw / var(--vw-small)) * 20);
    padding-top: calc((100vw / var(--vw-small)) * 80);
    padding-right: calc((100vw / var(--vw-small)) * 45);
    padding-bottom: calc((100vw / var(--vw-small)) * 60);
    padding-left: calc((100vw / var(--vw-small)) * 45);
    margin-bottom: calc((100vw / var(--vw-small)) * 20);
    gap: calc((100vw / var(--vw-small)) * 60);
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .point__back__bggray p {
    width: 100%;
    line-height: 1.9;
  }
  .point__back__bggray figure {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
  }
}


.point__variations {
  margin-bottom: 80px;
}
.point__variations__tablewrap {
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 17px;
}
@media screen and (max-width: 978px) {
  .point__variations {
    margin-bottom: calc((100vw / var(--vw-small)) * 105);
  }
  .point__variations__tablewrap {
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: calc((100vw / var(--vw-small)) * 20);
    width: calc(100% + 5vw);
  }
  .point__main .point__variations__tablewrap figure img {
    max-width: max-content;
    width: calc((100vw / var(--vw-small)) * 1237);
    height: calc((100vw / var(--vw-small)) * 890);
  }
}


.point__cd {
  margin-bottom: 74px;
}
.point__cd__tablewrap {
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 17px;
}
@media screen and (max-width: 978px) {
  .point__cd {
    margin-bottom: calc((100vw / var(--vw-small)) * 105);
  }
  .point__cd__tablewrap {
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: calc((100vw / var(--vw-small)) * 20);
  }
}

.point__friends {
  margin-bottom: 74px;
}
.point__friends p {
  margin-bottom: 20px;
}
.point__friends__list {
  display: flex;
  gap: 10px;
  align-items: center;
}
.point__friends__list li {
  text-align: center;
  justify-content: center;
  padding: 5px 17px 6px 17px;
  border-radius: 6px;
  border: 1px solid #bba171;
  color: #bba171;
  font-size: 18px;
  font-weight: 300;
}
@media screen and (max-width: 978px) {
  .point__friends {
    margin-bottom: calc((100vw / var(--vw-small)) * 88);
  }
  .point__friends p {
    margin-bottom: calc((100vw / var(--vw-small)) * 30);
  }
  .point__friends__list {
    gap: calc((100vw / var(--vw-small)) * 20);
    flex-wrap: wrap;
  }
  .point__friends__list li {
    width: 100%;
    padding-top: calc((100vw / var(--vw-small)) * 14);
    padding-right: calc((100vw / var(--vw-small)) * 30);
    padding-bottom: calc((100vw / var(--vw-small)) * 14);
    padding-left: calc((100vw / var(--vw-small)) * 30);
    border-radius: calc((100vw / var(--vw-small)) * 14);
    font-size: calc((100vw / var(--vw-small)) * 30);
    border: 2px solid #bba171;
  }
}

.point__birth {
  margin-bottom: 80px;
}
.point__birth p {
  margin-bottom: 15px;
}
@media screen and (max-width: 978px) {
  .point__birth {
    margin-bottom: calc((100vw / var(--vw-small)) * 100);
  }
  .point__birth p {
    margin-bottom: calc((100vw / var(--vw-small)) * 20);
  }
}

.point__rankup {
  margin-bottom: 80px;
}
.point__rankup p {
  margin-bottom: 25px;
}
.point__rankup__tablewrap {
  overflow-x: auto;
  white-space: nowrap;
}
@media screen and (max-width: 978px) {
  .point__rankup {
    margin-bottom: calc((100vw / var(--vw-small)) * 100);
  }
  .point__rankup p {
    margin-bottom: calc((100vw / var(--vw-small)) * 35);
  }
  .point__rankup__tablewrap {
    overflow-x: auto;
    white-space: nowrap;
    width: calc(100% + 5vw);
  }
  .point__main .point__rankup__tablewrap figure img {
    max-width: max-content;
    width: calc((100vw / var(--vw-small)) * 1293);
    height: calc((100vw / var(--vw-small)) * 643);
  }
}

.point__faq {
  margin-bottom: 100px;
}
.point__faq dt,.point__faq dd {
  position: relative;
  background: #f0f0f0;
  padding: 15px 20px 15px 60px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}
.point__faq dd {
  background: #fff;
  font-weight: 300;
  font-size: 18px;
  margin-bottom: 15px;
  line-height: 1.8;
}
.point__faq dt::before {
  content: '';
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  background: url(../img/faq_q.svg) center/contain no-repeat;
  top: 16px;
  left: 16px;
}
.point__faq dd::before {
  content: '';
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  background: url(../img/faq_a.svg) center/contain no-repeat;
  top: 14px;
  left: 14px;
}
.point__faq .point-btn {
  margin: auto;
}
@media screen and (max-width: 978px) {
  .point__faq {
    margin-bottom: calc((100vw / var(--vw-small)) * 100);
  }
  .point__faq dt,.point__faq dd {
    padding-top: calc((100vw / var(--vw-small)) * 24);
    padding-right: calc((100vw / var(--vw-small)) * 27);
    padding-bottom: calc((100vw / var(--vw-small)) * 27);
    padding-left: calc((100vw / var(--vw-small)) * 89);
    font-size: calc((100vw / var(--vw-small)) * 28);
  }
  .point__faq dd {
    font-size: calc((100vw / var(--vw-small)) * 28);
    margin-bottom: calc((100vw / var(--vw-small)) * 15);
  }
  .point__faq dt::before {
    width: calc((100vw / var(--vw-small)) * 49);
    height: calc((100vw / var(--vw-small)) * 49);
    top: calc((100vw / var(--vw-small)) * 24);
    left: calc((100vw / var(--vw-small)) * 22);
  }
  .point__faq dd::before {
    width: calc((100vw / var(--vw-small)) * 49);
    height: calc((100vw / var(--vw-small)) * 49);
    top: calc((100vw / var(--vw-small)) * 24);
    left: calc((100vw / var(--vw-small)) * 22);
  }
  .point__faq .point-btn {
    margin: auto;
  }
}



.point__contact__column {
  display: flex;
}
.point__contact__column__left {
  background: #bba171;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 322px;
  padding: 35px 60px 44px 60px;
}
.point__contact__column__left h3 {
  font-weight: 500;
  text-align: center;
  margin-bottom: 14px;
  font-size: 18px;
  line-height: 1.6;
}
.point__contact__column__left figure {
  width: 128px;
  height: 128px;
  margin: auto;
}
.point__contact__column__right {
  background: #000;
  text-align: center;
  width: 578px;
  padding: 50px 60px 44px 60px;
}
.point__contact__column__right h3 {
  color: #bba171;
  font-size: 18px;
  margin-bottom: 28px;
  font-weight: 500;
}
.point__contact__column__right .point__contact__column__white {
  background: #fff;
  border-radius: 10px;
  text-align: center;
  justify-content: center;
  font-size: 20px;
  height: 130px;
  align-items: center;
  width: 100%;
  display: flex;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 978px) {
  .point__contact__column {
    display: flex;
    flex-wrap: wrap;
  }
  .point__contact__column__left {
    width: 100%;
    padding-top: calc((100vw / var(--vw-small)) * 35);
    padding-right: calc((100vw / var(--vw-small)) * 35);
    padding-bottom: calc((100vw / var(--vw-small)) * 52);
    padding-left: calc((100vw / var(--vw-small)) * 35);
    justify-content: center;
  }
  .point__contact__column__left .point-btn {
    margin: auto;
  }
  .point__contact__column__left h3 {
    margin-bottom: calc((100vw / var(--vw-small)) * 40);
    font-size: calc((100vw / var(--vw-small)) * 22);
  }
  .point__contact__column__left figure {
    display: none;
  }
  .point__contact__column__right {
    width: 100%;
    padding: calc((100vw / var(--vw-small)) * 35);
  }
  .point__contact__column__right h3 {
    font-size: calc((100vw / var(--vw-small)) * 22);
    margin-bottom: calc((100vw / var(--vw-small)) * 25);
  }
  .point__main .point__contact__column__right .point__contact__column__white {
    font-size: calc((100vw / var(--vw-small)) * 20);
    height:calc((100vw / var(--vw-small)) * 100);
    width: calc((100vw / var(--vw-small)) * 456);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .point__main .point__contact__column__right .point__contact__column__white p {
    font-size: calc((100vw / var(--vw-small)) * 20);
    margin: 0;
    letter-spacing: 0;
  }
}