@charset "UTF-8";

/*all----------------------------*/
html {
  font-size: 62.5%;
}

body {
  -webkit-tap-highlight-color: transparent;
}

#Wrap {
  width: auto;
}

footer {
  position: relative;
  z-index: 2;
}

article > * + * {
  margin-top: 0 !important;
}

:root {
  --color_01: #004A80;
  --color_02: #2B8BA5;
  --color_03: #196899;
  --color_04: #004C66;
  --color_05: #515F9B;
  --color_accent: #FFFF00;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  font-feature-settings: normal;
}

.LP_page {
  background: #fff;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: clip;
  opacity: 0;
  transition: opacity 1s;
}

.LP_page.active {
  opacity: 1;
}

.LP_page picture {
  display: block;
  font-size: 0;
}

.LP_page a {
  display: block;
}

.LP_page a:hover {
  opacity: 1 !important;
}

.LP_page img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*----------------------------all*/

/*mv-----------------------------*/
.LP_page .each_sec {
  position: relative;
  z-index: 1;
  padding: 10rem 0;
}

.LP_page .each_sec::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_001.svg) center center / cover no-repeat;
  content: "";
  opacity: .6;
  mix-blend-mode: multiply;
}

.mv_area {
  padding: 4rem 0 6rem !important;
  background: var(--color_01);
}

.main_ttl {
  position: relative;
  margin-bottom: 5rem;
  padding: 12rem 0 10rem;
  font-family: "ryo-display-plusn", serif;
  font-size: 3.3rem;
  font-weight: 700;
  text-align: center;
  color: var(--color_accent);
}

.main_ttl::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100rem;
  height: 3rem;
  background: url(../img/deco_001.svg) center center / cover no-repeat;
  content: "";
}

.main_ttl::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100rem;
  height: 3rem;
  background: url(../img/deco_001.svg) center center / cover no-repeat;
  content: "";
}

.main_ttl picture {
  position: relative;
  z-index: 1;
  width: 98rem;
  margin: 0 auto 2rem;
}

.main_ttl picture::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 15rem;
  height: 15rem;
  margin-top: -6rem;
  background: url(../img/txt_002.svg) center center / cover no-repeat;
  content: "";
}

.main_lead {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .1em;
  text-align: center;
}

.main_lead .txt_L {
  display: inline-block;
  margin-bottom: 1.2rem;
  font-size: 2.5rem;
  letter-spacing: .1em;
}

.LP_page .txt_markerline {
  position: relative;
  z-index: 1;
}

.LP_page .txt_markerline::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + .2rem);
  height: .8rem;
  margin-bottom: -.2rem;
  background: #8CC5D3;
  content: "";
}
/*-----------------------------mv*/

/*rank benefits------------------*/
.rank-benefits_area {
  background: var(--color_02);
}

.sec_ttl {
  margin-bottom: 5rem;
  font-family: "ryo-display-plusn", serif;
  font-size: 5.3rem;
  font-weight: 800;
  text-align: center;
}

.sec_ttl .txt_S {
  display: block;
  margin-top: 3rem;
  font-size: 2.5rem;
}

.benefits_list {
  width: 90rem;
  margin: 0 auto !important;
}

.benefits_list li:nth-of-type(n+2) {
  margin-top: 7.7rem;
}

.campaign_ttl_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin: 0 auto 2rem;
  padding-bottom: .5rem;
  border-bottom: dotted #fff;
  border-width: .1rem;
}

.campaign_logo {
  display: block;
  width: 11rem;
}

.campaign_ttl_wrap .campaign_ttl {
  display: block;
  width: 27rem;
}

.cp_PlayFriday .campaign_ttl_wrap .campaign_ttl {
  width: 36rem;
}

.benefits_list li dt {
  position: relative;
  border-radius: 2rem;
  padding: .5rem 6rem 2rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  cursor: pointer;
}

.benefits_list li .open dt {
  cursor: auto;
}

.benefits_list li.cp_NewMoon dt {
  background: var(--color_01);
}

.benefits_list li.cp_FullMoon dt {
  background: #004C66;
}

.benefits_list li.cp_PlayFriday dt {
  background: #515F9B;
}

.benefits_list li dt > span {
  position: relative;
  padding-right: 4rem;
}

.benefits_list li dt > span::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -.3rem;
  border-right: solid #fff;
  border-bottom: solid #fff;
  border-width: .3rem;
  content: "";
}

.benefits_list li dd {
  margin-top: -2rem;
  background: #fff;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .1s, padding .1s;
}

.benefits_list li .open dd {
  grid-template-rows: 1fr;
  padding: 6rem 0 5rem;
}

.benefits_list li dd .accordion_inner {
  overflow: hidden;
}

.benefits_list li dd table {
  margin: 0 auto;
  background: #fff;
  font-weight: 500;
  text-align: center;
  color: #000;
  border-spacing: 0;
  border: solid #808080;
  border-width: .1rem;
}

.benefits_list li dd tr {
  height: 6.5rem;
}

.benefits_list li dd thead th {
  width: 20rem;
  background: #F1F1F1;
  font-size: 2rem;
}

.benefits_list li dd th:nth-of-type(1) {
  width: 25rem;
}

.benefits_list li dd th:nth-of-type(n+2) {
  border-left: solid #808080;
  border-width: .1rem;
}

.benefits_list li dd tbody td {
  border-top: solid #808080;
  border-width: .1rem;
}

.benefits_list li dd td:nth-of-type(n+2) {
  border-left: solid #808080;
  border-width: .1rem;
}

.benefits_list li dd td:nth-of-type(1) {
  position: relative;
  font-size: 1.8rem;
}

.rank_diamond td:nth-of-type(1) {
  background: #D9D9F4;
  color: #615AA0;
}

.rank_platinum td:nth-of-type(1) {
  background: #CBDDEF;
  color: #365E99;
}

.rank_gold td:nth-of-type(1) {
  background: #F4E2C1;
  color: #936C38;
}

.rank_silver td:nth-of-type(1) {
  background: #E5E5E5;
  color: #666666;
}

.rank_blonde td:nth-of-type(1) {
  background: #E0C9C3;
  color: #723A24;
}

.benefits_list li dd td:nth-of-type(1)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 4.6rem;
  height: 4.6rem;
  margin-left: 2rem;
  content: "";
}

.rank_diamond td:nth-of-type(1)::before {
  background: url(../img/rank_diamond.svg) center center/ cover no-repeat;
}

.rank_platinum td:nth-of-type(1)::before {
  mask-image: url(../img/rank_diamond.svg);  
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  -webkit-mask-image: url(../img/rank_diamond.svg);
  -webkit-mask-repeat:  no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: cover;
  background: #365E99;
}

.rank_gold td:nth-of-type(1)::before {
  background: url(../img/rank_gold.svg) center center/ cover no-repeat;
}

.rank_silver td:nth-of-type(1)::before {
  background: url(../img/rank_silver.svg) center center/ cover no-repeat;
}

.rank_blonde td:nth-of-type(1)::before {
  background: url(../img/rank_blonde.svg) center center/ cover no-repeat;
}

.benefits_list li dd td:nth-of-type(1) span {
  display: inline-block;
  width: 15rem;
  margin-left: 5rem;
}

.benefits_list li dd td:nth-of-type(2) {
  font-size: 2.4rem;
}

.benefits_list li dd td:nth-of-type(3) {
  font-size: 3.2rem;
}

.benefits_list li dd td:nth-of-type(3) .txt_S {
  font-size: 2rem;
}

.table_close {
  position: relative;
  width: fit-content;
  margin: 4rem auto 0;
  padding-right: 4rem;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--color_01);
  cursor: pointer;
}

.table_close::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 1.6rem;
  height: 1.6rem;
  margin-top: .3rem;
  border-top: solid var(--color_01);
  border-left: solid var(--color_01);
  border-width: .3rem;
  content: "";
}
/*------------------rank benefits*/

/*calendar-----------------------*/
.calendar_area {
  background: var(--color_03);
}

.calendar_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10rem 13rem;
  width: 90rem;
  margin: 0 auto !important;
  padding-top: 5rem !important;
}

.calendar_list > li {
  width: 34rem;
}

.calendar_list > li:nth-of-type(1) {
  width: 46rem;
}

.calendar_list > li .month_wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 10rem;
  height: 10rem;
  margin: 0 auto 3rem;
  border-radius: 50%;
  background: var(--color_accent);
  font-family: "ryo-display-plusn", serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--color_03);
}

.calendar_list > li:nth-of-type(1) .month_wrap {
  width: 13.6rem;
  height: 13.6rem;
  font-size: 3.8rem;
}

.calendar_list > li .month_wrap::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16rem;
  height: 16rem;
  background: url(../img/deco_002.svg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.calendar_list > li:nth-of-type(1) .month_wrap::before {
  width: 22rem;
  height: 22rem;
}

.calendar_list > li .month_wrap .month {
  margin-top: -.3rem;
}

.calendar_list > li .month_wrap .txt_L {
  font-size: 4.8rem;
}

.calendar_list > li:nth-of-type(1) .month_wrap .txt_L {
  font-size: 6.5rem;
}

.campaign_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.campaign_list li:nth-of-type(n+2) {
  border-left: dotted #fff;
  border-width: .1rem;
}

.campaign_list li .date {
  border-bottom: dotted #fff;
  border-width: .1rem;
  padding: .5rem 0 1.2rem;
  font-size: 2.3rem;
  font-weight: 700;
  text-align: center;
}

.calendar_list > li:nth-of-type(1) .campaign_list li .date {
  font-size: 2.8rem;
}

.campaign_list li .date .txt_S {
  margin-left: .5rem;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .05em;
}

.calendar_list > li:nth-of-type(1) .campaign_list li .date .txt_S {
  font-size: 2rem;
}

.campaign_list li .campaign {
  padding-top: 2rem;
}

.campaign_list li .campaign .icon_moon {
  position: relative;
  z-index: 1;
  display: block;
  width: 5rem;
  margin: 0 auto;
}

.calendar_list > li:nth-of-type(1) .campaign_list li .campaign .icon_moon {
  width: 6rem;
}

.cp_PlayFriday .campaign .icon_moon::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  background: #fff;
  opacity: .5;
  content: "";
}

.calendar_list > li:nth-of-type(1) .cp_PlayFriday .campaign .icon_moon::before {
  width: 5rem;
  height: 5rem;
}

.campaign_list li .campaign .campaign_ttl {
  display: grid;
  place-items: center;
  height: 6rem;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
}

.calendar_list > li:nth-of-type(1) .campaign_list li .campaign .campaign_ttl {
  height: 8rem;
  font-size: 2.2rem;
}


/*-----------------------calendar*/

/*how to-------------------------*/
.howto_area {
  background: var(--color_02);
}

.howto_area .sec_ttl {
  font-size: 4.2rem;
}

.sec_ttl .txt_M {
  display: block;
  margin-bottom: 2.5rem;
  font-size: 3.2rem;
}

.sec_lead {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2;
  letter-spacing: .1em;
  text-align: center;
}

.sec_lead .txt_L {
  font-size: 2.5rem;
}

.sec_lead .notes {
  display: block;
  margin-top: 1rem;
  line-height: 2;
  letter-spacing: .1em;
}

.howto_list {
  display: flex;
  justify-content: center;
  gap: 10rem;
  margin-top: 5rem !important;
}

.howto_list li {
  width: 22rem;
  padding: 3rem 0;
  border-radius: 1.5rem;
  background: #fff;
}

.howto_list li figure {
  width: 14rem;
  margin: 0 auto;
}

.howto_list li p {
  display: grid;
  place-content: center;
  height: 7rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  color: #000;
}

.link_brandList {
  width: fit-content;
  margin: 7rem auto 0;
}

.link_brandList a {
  position: relative;
  display: grid;
  place-items: center;
  width: 40rem;
  height: 7rem;
  border-radius: 3.5rem;
  background: var(--color_01);
  font-size: 1.8rem;
  font-weight: 500;
}

.link_brandList a::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 2.5rem;
  border-top: solid #fff;
  border-right: solid #fff;
  border-width: .3rem;
  content: "";
}
/*-------------------------how to*/

/*about Moon Beauty--------------*/
.about-MoonBeauty_area {
  background: var(--color_03);
}

.about_area .sec_ttl {
  position: relative;
  padding-top: 11rem;
  font-size: 4rem;
  letter-spacing: .05em;
}

.about_area .sec_ttl::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20rem;
  height: 7rem;
  content: "";
}

.about-MoonBeauty_area .sec_ttl::before {
  background: url(../img/deco_moon.svg) center center / cover no-repeat;
}

.about_area .sec_ttl .txt_S {
  margin: 0 0 2.5rem;
}
/*--------------about Moon Beauty*/

/*about Play Friday--------------*/
.about-PlayFriday_area {
  background: var(--color_02);
}

.about-PlayFriday_area .sec_ttl::before {
  background: url(../img/logo_playfriday_02.svg) center center / cover no-repeat;
}
/*--------------about Play Friday*/

/*app download-------------------*/
.app-download_area {
  padding: 10rem 0;
  color: #000;
}

.app-download_area h3 {
  margin-bottom: 5rem;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
}

.app_summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  margin-bottom: 7rem;
}

.app_summary figure {
  width: 13.8rem;
}

.app_summary dt {
  margin-bottom: 3rem;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: .05em;
}

.app_summary dd {
  font-size: 1.6rem;
  line-height: 2;
}

.app-download_area > p {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
}

.download-btn_list {
  display: flex;
  justify-content: center;
  gap: 5rem;
  margin-top: 4rem !important;
}

.download-btn_list li a {
  height: 10rem;
}

.download-btn_list li a img {
  width: auto;
  height: 100%;
}

/*-------------------app download*/

/*Smart phone---------------------------------------------*/
@media screen and  (max-width:768px) {
/*all----------------------------*/
.LP_page .only_pc {
  display: none;
}

#share {
  z-index: 5 !important;
  transition: margin .3s;
}

.share-txt {
  margin: 0 !important;
  padding-bottom: calc(40 * (100vw / 750));
  background: #fff;
}

/*----------------------------all*/

/*mv-----------------------------*/
.LP_page .each_sec {
  padding: calc(120 * (100vw / 750)) 0;
}

.mv_area {
  padding: calc(40 * (100vw / 750)) 0 calc(100 * (100vw / 750)) !important;
  background: var(--color_01);
}

.main_ttl {
  position: relative;
  margin-bottom: calc(100 * (100vw / 750));
  padding: calc(180 * (100vw / 750)) 0;
  font-size: calc(34 * (100vw / 750));
}

.main_ttl::before {
  width: calc(620 * (100vw / 750));
  height: calc(40 * (100vw / 750));
  background: url(../img/deco_001_sp.svg) center center / cover no-repeat;
}

.main_ttl::after {
  width: calc(620 * (100vw / 750));
  height: calc(40 * (100vw / 750));
  background: url(../img/deco_001_sp.svg) center center / cover no-repeat;
}

.main_ttl picture {
  width: calc(620 * (100vw / 750));
  margin: 0 auto calc(10 * (100vw / 750));
}

.main_ttl picture::before {
  width: calc(150 * (100vw / 750));
  height: calc(150 * (100vw / 750));
  margin: calc(-40 * (100vw / 750)) calc(50 * (100vw / 750)) 0 0;
}

.main_lead {
  font-size: calc(27 * (100vw / 750));
  line-height: 2;
}

.main_lead .txt_L {
  display: inline-block;
  margin-bottom: 0;
  font-size: calc(36 * (100vw / 750));
}

.LP_page .txt_markerline::before {
  width: calc(100% + calc(4 * (100vw / 750)));
  height: calc(8 * (100vw / 750));
  margin-bottom: calc(-4 * (100vw / 750));
}
/*-----------------------------mv*/

/*rank benefits------------------*/
.sec_ttl {
  margin-bottom: calc(80 * (100vw / 750));
  font-size: calc(53 * (100vw / 750));
}

.sec_ttl .txt_S {
  margin-top: calc(30 * (100vw / 750));
  font-size: calc(35 * (100vw / 750));
}

.benefits_list {
  width: calc(700 * (100vw / 750));
}

.benefits_list li:nth-of-type(n+2) {
  margin-top: calc(70 * (100vw / 750));
}

.campaign_ttl_wrap {
  gap: calc(20 * (100vw / 750));
  margin: 0 auto calc(30 * (100vw / 750));
  padding-bottom: calc(10 * (100vw / 750));
  border-width: calc(2 * (100vw / 750));
}

.campaign_logo {
  width: calc(130 * (100vw / 750));
}

.campaign_ttl_wrap .campaign_ttl {
  width: calc(300 * (100vw / 750));
}

.cp_PlayFriday .campaign_ttl_wrap .campaign_ttl {
  width: calc(400 * (100vw / 750));
}

.benefits_list li dt {
  border-radius: calc(20 * (100vw / 750));
  padding: calc(10 * (100vw / 750)) calc(40 * (100vw / 750)) calc(30 * (100vw / 750));
  font-size: calc(30 * (100vw / 750));
}

.benefits_list li dt > span {
  padding-right: calc(50 * (100vw / 750));
}

.benefits_list li dt > span::before {
  width: calc(24 * (100vw / 750));
  height: calc(24 * (100vw / 750));
  margin-top: calc(-6 * (100vw / 750));
  border-width: calc(4 * (100vw / 750));
}

.benefits_list li dd {
  margin-top: calc(-20 * (100vw / 750));
  transition: grid-template-rows .3s, padding .3s;
}

.benefits_list li .open dd {
  padding: calc(45 * (100vw / 750)) 0 calc(20 * (100vw / 750));
}

.benefits_list li dd table {
  border-width: calc(2 * (100vw / 750));
}

.benefits_list li dd tr {
  height: calc(65 * (100vw / 750));
}

.benefits_list li dd thead th {
  width: calc(200 * (100vw / 750));
  font-size: calc(22 * (100vw / 750));
}

.benefits_list li dd th:nth-of-type(1) {
  width: calc(245 * (100vw / 750));
}

.benefits_list li dd th:nth-of-type(n+2) {
  border-width: calc(2 * (100vw / 750));
}

.benefits_list li dd tbody td {
  border-width: calc(2 * (100vw / 750));
}

.benefits_list li dd td:nth-of-type(n+2) {
  border-width: calc(2 * (100vw / 750));
}

.benefits_list li dd td:nth-of-type(1) {
  font-size: calc(20 * (100vw / 750));
}

.benefits_list li dd td:nth-of-type(1)::before {
  width: calc(50 * (100vw / 750));
  height: calc(50 * (100vw / 750));
  margin-left: calc(20 * (100vw / 750));
}

.benefits_list li dd td:nth-of-type(1) span {
  width: calc(150 * (100vw / 750));
  margin-left: calc(50 * (100vw / 750));
}

.benefits_list li dd td:nth-of-type(2) {
  font-size: calc(24 * (100vw / 750));
}

.benefits_list li dd td:nth-of-type(3) {
  font-size: calc(32 * (100vw / 750));
}

.benefits_list li dd td:nth-of-type(3) .txt_S {
  font-size: calc(20 * (100vw / 750));
}

.table_close {
  margin: calc(10 * (100vw / 750)) auto 0;
  padding-right: calc(35 * (100vw / 750));
  font-size: calc(27 * (100vw / 750));
}

.table_close::before {
  width: calc(20 * (100vw / 750));
  height: calc(20 * (100vw / 750));
  margin-top: calc(6 * (100vw / 750));
  border-width: calc(2 * (100vw / 750));
}
/*------------------rank benefits*/

/*calendar-----------------------*/
.calendar_list {
  gap: calc(100 * (100vw / 750)) calc(60 * (100vw / 750));
  width: calc(700 * (100vw / 750));
  padding-top: calc(50 * (100vw / 750)) !important;
}

.calendar_list > li {
  width: calc(300 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) {
  width: calc(650 * (100vw / 750));
}

.calendar_list > li .month_wrap {
  width: calc(90 * (100vw / 750));
  height: calc(90 * (100vw / 750));
  margin: 0 auto calc(30 * (100vw / 750));
  font-size: calc(24 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) .month_wrap {
  width: calc(192 * (100vw / 750));
  height: calc(192 * (100vw / 750));
  font-size: calc(54 * (100vw / 750));
}

.calendar_list > li .month_wrap::before {
  width: calc(150 * (100vw / 750));
  height: calc(150 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) .month_wrap::before {
  width: calc(315 * (100vw / 750));
  height: calc(315 * (100vw / 750));
}

.calendar_list > li .month_wrap .month {
  margin-top: calc(-6 * (100vw / 750));
}

.calendar_list > li .month_wrap .txt_L {
  font-size: calc(40 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) .month_wrap .txt_L {
  font-size: calc(92 * (100vw / 750));
}

.campaign_list li:nth-of-type(n+2) {
  border-width: calc(2 * (100vw / 750));
}

.campaign_list li .date {
  border-width: calc(2 * (100vw / 750));
  padding: calc(10 * (100vw / 750)) 0 calc(20 * (100vw / 750));
  font-size: calc(20 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) .campaign_list li .date {
  font-size: calc(40 * (100vw / 750));
}

.campaign_list li .date .txt_S {
  margin-left: calc(5 * (100vw / 750));
  font-size: calc(12 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) .campaign_list li .date .txt_S {
  margin-left: calc(10 * (100vw / 750));
  font-size: calc(27 * (100vw / 750));
}

.campaign_list li .campaign {
  padding-top: calc(15 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) .campaign {
  padding-top: calc(30 * (100vw / 750));
}

.campaign_list li .campaign .icon_moon {
  width: calc(40 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) .campaign_list li .campaign .icon_moon {
  width: calc(90 * (100vw / 750));
}

.cp_PlayFriday .campaign .icon_moon::before {
  width: calc(34 * (100vw / 750));
  height: calc(34 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) .cp_PlayFriday .campaign .icon_moon::before {
  width: calc(74 * (100vw / 750));
  height: calc(74 * (100vw / 750));
}

.campaign_list li .campaign .campaign_ttl {
  height: calc(46 * (100vw / 750));
  font-size: calc(16 * (100vw / 750));
}

.calendar_list > li:nth-of-type(1) .campaign_list li .campaign .campaign_ttl {
  height: calc(120 * (100vw / 750));
  font-size: calc(30 * (100vw / 750));
}


/*-----------------------calendar*/

/*how to-------------------------*/
.howto_area .sec_ttl {
  font-size: calc(53 * (100vw / 750));
}

.sec_ttl .txt_M {
  margin-bottom: calc(20 * (100vw / 750));
  font-size: calc(40 * (100vw / 750));
}

.sec_lead {
  font-size: calc(27 * (100vw / 750));
}

.sec_lead .txt_L {
  font-size: calc(36 * (100vw / 750));
}

.sec_lead .txt_markerline::before {
  margin-bottom: 0;
}

.sec_lead .notes {
  margin-top: 0;
}

.howto_list {
  gap: calc(15 * (100vw / 750));
  margin-top: calc(100 * (100vw / 750)) !important;
}

.howto_list li {
  width: calc(220 * (100vw / 750));
  padding: calc(30 * (100vw / 750)) 0;
  border-radius: calc(15 * (100vw / 750));
}

.howto_list li figure {
  width: calc(130 * (100vw / 750));
}

.howto_list li p {
  height: calc(80 * (100vw / 750));
  font-size: calc(22 * (100vw / 750));
}

.link_brandList {
  margin: calc(100 * (100vw / 750)) auto 0;
}

.link_brandList a {
  width: calc(600 * (100vw / 750));
  height: calc(130 * (100vw / 750));
  border-radius: calc(70 * (100vw / 750));
  font-size: calc(30 * (100vw / 750));
}

.link_brandList a::before {
  width: calc(15 * (100vw / 750));
  height: calc(15 * (100vw / 750));
  margin-right: calc(40 * (100vw / 750));
  border-width: calc(2 * (100vw / 750));
}
/*-------------------------how to*/

/*about Moon Beauty--------------*/
.about_area .sec_ttl {
  padding-top: calc(130 * (100vw / 750));
  font-size: calc(53 * (100vw / 750));
}

.about_area .sec_ttl::before {
  width: calc(200 * (100vw / 750));
  height: calc(70 * (100vw / 750));
}

.about_area .sec_ttl .txt_S {
  margin: 0 0 calc(30 * (100vw / 750));
  font-size: calc(40 * (100vw / 750));
}
/*--------------about Moon Beauty*/

/*about Play Friday--------------*/
.about-PlayFriday_area .sec_lead .notes {
  display: inline-block;
  margin-top: calc(60 * (100vw / 750));
  font-size: calc(21 * (100vw / 750));
  letter-spacing: .005em;
}

/*--------------about Play Friday*/

/*app download-------------------*/
.app-download_area {
  padding: calc(100 * (100vw / 750)) 0 calc(170 * (100vw / 750));
}

.app-download_area h3 {
  margin-bottom: calc(60 * (100vw / 750));
  font-size: calc(27 * (100vw / 750));
}

.app_summary {
  gap: calc(30 * (100vw / 750));
  margin-bottom: calc(70 * (100vw / 750));
}

.app_summary figure {
  width: calc(150 * (100vw / 750));
}

.app_summary dt {
  margin-bottom: calc(25 * (100vw / 750));
  font-size: calc(27 * (100vw / 750));
}

.app_summary dd {
  font-size: calc(22 * (100vw / 750));
  line-height: 1.5;
}

.app-download_area > p {
  font-size: calc(27 * (100vw / 750));
}

.download-btn_list {
  gap: calc(50 * (100vw / 750));
  margin-top: calc(30 * (100vw / 750)) !important;
}

.download-btn_list li a {
  height: calc(100 * (100vw / 750));
}

/*-------------------app download*/

}

/*---------------------------------------------Smart phone*/

/*PC------------------------------------------------------*/
@media screen and  (min-width:769px) {
  .only_sp {
    display: none !important;
  }

}
/*------------------------------------------------------PC*/

/*レスポンシブ＆タブレット対応-------------------------------*/
@media screen and (max-width: 1400px){
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/