@charset "UTF-8";
* {
  font-family: "Noto Sans、Hiragino Kaku Gothic ProN、ヒラギノ角ゴ ProN、Hiragino Kaku Gothic Pro、ヒラギノ角ゴ Pro、メイリオ";
}
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  src: url("../assets/font/Noto_Sans_JP/static/NotoSansJP-Regular.woff") format('woff');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 700;
  src: url("../assets/font/Noto_Sans_JP/static/NotoSansJP-Bold.woff") format('woff');
}
/* base */
.forSp {
  display: none !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
@media (max-width: 767px) {
  .forSp {
    display: block !important;
  }
}
.forPc {
  display: block !important;
}
@media (max-width: 767px) {
  .forPc {
    display: none !important;
  }
}
.contentWidth800 {
  max-width: 800px;
  margin: 0 auto;
}
.contentWidth700 {
  max-width: 700px;
  margin: 0 auto;
}
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.0s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* heading */
h2 {
  text-align: center;
}
h3 {
  font-size: 1.25em;
  font-style: normal;
  font-weight: 600;
  line-height: 170%;
  /* 34px */
  background: var(--BRAND_ATOKARA,
      linear-gradient(180deg, #00a1b0 0%, #86c9ab 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  padding-bottom: 0;
  align-items: center;
  gap: 0.5em;
  align-self: stretch;
}
h3 .dots {
  content: url(/campaign/xprice/img/logo_h3_dot.svg);
  width: 0.625em;
  height: 0.625em;
}
h4 {
  color: #141210;
  text-align: center;
  font-size: 0.875em;
  font-style: normal;
  font-weight: 300;
  line-height: 160%;
  /* 22.4px */
}
/* text */
.detailText {
  font-family: "Noto Sans JP";
  color: #4f433a;
  font-size: 1.0em;
  font-style: normal;
  font-weight: 300;
  line-height: 200%;
}
.textLarge {
  font-size: 20px;
}
.textSmall {
  font-size: 0.875em;
  line-height: 180%;
}
/* details */
.detailsContents .detailText {
  color: #141210;
}
/* how to use */
.useSlider .detailText {
  color: #141210;
}
.featuresText .detailText {
  text-align: left;
}
.featuresText .linkText {
  justify-content: left;
}
.aboutHeadText .detailText {
  text-align: center;
}
.featuresText .notesList {
  width: auto;
}
/* faq */
.question.detailText {
  font-weight: 600;
}
/* link */
.linkText {
  font-family: "Noto Sans JP";
  color: #4f433a;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 130%;
  text-decoration-line: underline;
  display: flex;
  align-items: center;
  gap: 4px;
}
.linkText-text {
  font-size: 12px;
  font-family: "Noto Sans JP";
}
.linkText .blank {
  padding-left: 4px;
}
.linkText .blank::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 11px;
  background: url(/campaign/xprice/img/icon_link_black.svg) no-repeat;
}
.about_atokaraContents .linkText .blank::before, .caution .linkText .blank::before  {
  background: url(/campaign/xprice/img/icon_link_brown.svg) no-repeat;
}
.signUpArea .blank::before  {
  content: "";
  display: inline-block;
  width: 16px;
  height: 10px;
  background: url(/campaign/xprice/img/icon_link_white.svg) no-repeat;
}
.linkText .anchor {
  height: 16px;
}
.linkText .anchor::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(/campaign/xprice/img/icon_arrow_bottom.svg) no-repeat;
}
@media (max-width: 767px) {
  .linkText  {
    font-size: 16px;
  }
  .linkText .blank {
    padding-left: 1.067vw;
  }
  .linkText .blank::before {
    /* width: 4.267vw;
    height: 2.667vw; */
  }
}
.app_dlContents .linkText {
  color: #141210;
  font-size: 12px;
}
.caution .linkText {
  display: inline-block;
}
.mvContentsIntroText {
  text-align: center;
  color: #000;
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
footer .linkText {
  color: #000;
}


@media screen and (min-width: 1100px) {
  a:hover {
    opacity: 50%;
  }
  .howToUse-tabs li:hover {
    opacity: 0.5;
  }
}
button:hover {
  opacity: 0.5;
}
/* note */
.notesList {
  display: table;
  width: 100%;
  margin: 0;
  padding-left: 0;
}
.notesList li {
  list-style: none;
}
.noteHead {
  display: table-cell;
  font-size: 0.875em;
  line-height: 160%;
  white-space: nowrap;
  padding-right: 4px;
  color: #000;
}
.noteText {
  font-family: "Noto Sans JP";
  color: #4f433a;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 140%;
  /* 22.4px */
  display: table-cell;
}
.flowContents .noteText,
.flowContents .noteHead {
  font-size: 12px;
}
.detailsContents .noteText,
.detailsContents .noteHead {
  color: #141210;
}
/* header */
#header {
  display: flex;
  padding: 16px 0;
  flex-direction: column;
  align-items: center;
  gap: 0.625em;
  align-self: stretch;
  background-color: #fff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
}
#header .headerLogo img {
  width: 339px;
}
/* floating */
.box {
  background: #ddd;
  width: 100%;
  height: 800px;
}
.fix-btn {
  position: fixed;
  z-index: 10;
  width: 150px;
  right: 0px;
  bottom: 5em;
}
/* section */
/* mv */
.mv {
  background-color: #FCF5ED;
  ;
}
.mvBg {
  background: url(/campaign/xprice/img/kv_bg_material_pc.png) no-repeat;
  background-position: top center;
  background-size: contain;
}
.mvContents {
  max-width: 659px;
  padding: 160px 0 115px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
}
.mvContentsIntro {
  padding: 12px;
  border-top: 3px solid #00A0AF;
  border-bottom: 3px solid #00A0AF;
}
.mvContentsIntroText {
  text-align: center;
  color: #000;
  font-family: "Noto Sans JP";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
.mvContentsIntroTextLarge {
  font-family: "Noto Sans JP";
  font-size: 32px;
}
/* mvCv */
.mvCvBG {
  height: 100%;
  background: #FCF5E9;
}
@media (min-width: 768px) {
  .mvCvBG {
    padding: 0 50px 10px;
  }
}
.mvCvContentsInner {
  display: flex;
  padding: 32px 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
}

.mvCvContentsInner >.mvCvContentsText > .notesList {
  width: auto;
  margin: 8px auto 0;
}

.mvCvContentsInner h2 {
  width: 263px;
}
.mvCvContentsInner h2 img {
  width: 263px;
}
.mvCvContentsItemWrap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.mvCvContentsItem {
  width: 100%;
}
.mvCvContentsItem img {
  max-width: 344px;
  width: 100%;
}
.mvCvContentsItem:first-child {
  border-right: dashed 2px rgba(79, 67, 58, 0.2);
}
.mvCvContentsItemMain {
  width: 250px;
}
.mvCvContentsBtnList {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.mvCvContentsBtn {
  display: flex;
  max-width: 344px;
  width: 100%;
  padding: 14px 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
}
.mvCvContentsLink {
  width: 100%;
}
.mvCvContentsBtnSignUpLink {
  text-decoration: none;
  display: block;
  max-width: 344px;
  width: 100%;
  padding: 16px 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
}
.mvCvContentsBtnSignUpLink:hover {
  opacity: 0.5;
}
.mvCvContentsBtnApp {
  display: block;
  padding: 2px;
  background: linear-gradient(to bottom, #00A1B0, #86C9AB);
  border: none;
}
.mvCvContentsBtnApp-inner {
  border-radius: 100px;
  background: #FFF;
  padding: 14px 0;
}
.mvCvContentsBtnApp > .mvCvContentsBtnApp-inner >.mvCvContentsBtnText {
  background: linear-gradient(180deg, #00A1B0 0%, #86C9AB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mvCvContentsBtnSignApp {
  color: #00A1B0;
  border: 2px solid var(--atokara_color, #00A1B0);
  background: #FFF;
}
.mvCvContentsLinkSignUp {
  color: #FFF;
  background: #F075A9;
  border: none;
}
.mvCvContentsBtnText {
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
/* intro */
.intro {
  position: relative;
  background: url(/campaign/xprice/img/pattern_dot.svg), repeat;
}
.intro::before {
  position: absolute;
  content: "";
  background: url(/campaign/xprice/img/bg_curve_joint_beige.svg), no-repeat;
  background-repeat: no-repeat;
  /* 画像の繰り返しを指定  */
  background-position: top center;
  /* 画像の表示位置を指定  */
  background-size: cover;
  /* 画像のサイズを指定    */
  width: 100%;
  min-height: 65px;
  top: 0;
  display: block;
}
.introBG {
  height: 100%;
  background: #FCF5E9;
}
@media (min-width: 768px) {
  .introBG {
    padding-left: 50px;
    padding-right: 50px;
  }
}
.introContents {
  padding: 8em 0 4em 0;
}
.introContentsInner {
  background: url(/campaign/xprice/img/section01_bg_pc.png), no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 30px;
  background-color: #FFFFFF;
  display: flex;
  max-width: 800px;
  height: auto;
  padding: 32px 0px 15px;
  flex-direction: column;
  align-items: center;
  gap: 2.75px;
  flex-shrink: 0;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
}
.introContentsItemList {
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding-top: 24px;
}
.introContentsItem {
  display: flex;
  align-items: center;
  gap: 16px;
}
.intro h2 {
  font-family: "Noto Sans JP";
  color: #000;
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 81.25% */
  letter-spacing: 0.96px;
}
.CPDesc h2 img {
  margin: 0 auto;
}
.introContentsText {
  font-family: "Noto Sans JP";
  color: #000;
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px; /* 158.333% */
  letter-spacing: 0.72px;
}
.introContentsTextBig {
  font-family: "Noto Sans JP";
  font-size: 24px;
  font-weight: 700;
}
.introContentsPoint {
  font-family: "Noto Sans JP";
  text-align: center;
  color: #F075A9;
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  line-height: 68px;
  letter-spacing: 2.16px;
}
.introContentsPointSub {
  font-family: "Noto Sans JP";
  color: #F075A9;
  font-size: 24px;
  letter-spacing: 0.72px;
}
/* CPDesc */
.CPDescBG {
  background-color: #FCF5E9;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .CPDescBG {
    padding-left: 50px;
    padding-right: 50px;
  }
}
.CPDescH2Cap {
  font-family: "Noto Sans JP";
  color: #4F433A;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 162.5% */
  letter-spacing: 0.48px;
  padding-top: 8px;
}
.CPDescContentsFlowItem {
  position: relative;
  margin: 16px 0;
  display: flex;
  max-width: 800px;
  padding: 20px 55px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 30px;
  background: #FFF;
  /* shadow_gr */
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);
}
.CPDescContentsFlowItem .notesList {
  width: auto;
  font-size: 11px;
}
.CPDescContentsFlowItem .noteText {
  color: #000;
}
.CPDescContentsFlowItem .linkText {
  display: inline-block;
  color: #000;
}
.CPDescContentsFlowStep {
  font-family: "Noto Sans JP";
  color: #000;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 108.333% */
  letter-spacing: 0.72px;
}
.CPDescContentsFlowItemText {
  font-family: "Noto Sans JP";
  text-align: center;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}
.CPDescContentsFlowItemTextBig {
  font-family: "Noto Sans JP";
  color: #000;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px; /* 130% */
}
.CPDescContentsFlowItemText .atokara-color {
  font-size: 20px;
  font-weight: bold;
}
.CPDescContentsFlowArrow {
  margin: auto;
  width:52px;
  height:19px;
}
.CPDescContentsFlowItemDecoStep1 {
  position: absolute;
  right: 8%;
  top: -12%;
}
.CPDescContentsFlowItemDecoStep1 img, .CPDescContentsFlowItemDecoStep2 img, .CPDescContentsFlowItemDecoStep3 img {
  width: 92px;
}
.CPDescContentsFlowItemDecoStep2 {
  position: absolute;
  left: 11%;
  bottom: -20%;
}
.CPDescContentsFlowItemDecoStep3 {
  position: absolute;
  right: 8%;
  bottom: -35%;
}
.present {
  padding: 16px;
}
.presentText {
  font-family: "Noto Sans JP";
  color: #000;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 130% */
  letter-spacing: 0.6px;
}
.presentText:nth-of-type(3) {
  margin-left: 84px;
}
.presentTextBig {
  font-family: "Noto Sans JP";
  font-size: 72px;
  line-height: 72px;
  letter-spacing: 2.16px;
}
.atokara-color {
  font-family: "Noto Sans JP";
  background: linear-gradient(180deg, #00A1B0 12.75%, #86C9AB 47.06%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.atokara-color.price {
  font-size: 22px;
}
.xprice-color {
  font-family: "Noto Sans JP";
  color: #F075A9;
  font-weight: bold;
}
.CPDescContentsFlowGreen {
  font-family: "Noto Sans JP";
  padding: 1px 27px;
  border-radius: 30px;
  background: #00A0AF;
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 144.444% */
  letter-spacing: 0.54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
/* about */
.about_atokara {
  position: relative;
  ;
}
.about_atokaraBg {
  background: #FCF5E9;
}
.about_atokaraContents {
  position: relative;
}
.about_atokaraInner {
  max-width: 860px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5em;
  padding-top: 1.4375em;
  padding-bottom: 5.5em;
}
.aboutHeadArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5em;
}
.aboutFeaturesArea {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.77vw;
}

.about_atokaraDeco2:before {
  position: absolute;
  content: "";
  display: block;
  transform: translate(-50%, -50%);
  left: 50%;
  bottom: -10%;
  width: 168.722px;
  height: 78.92px;
  background-size: contain;
  background-image: url(/campaign/xprice/img/atocaracco_img_01_pc.png);
  background-repeat: no-repeat;
}
.featuresText .noteText,
.featuresText .noteHead {
  font-family: "Noto Sans JP";
  font-size: 12px;
  padding-top: 4px;
}
.featuresText p{
  padding-bottom: 16px;
}
.featuresText 
.featuresImageArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  align-self: stretch;
}
.featuresImageArea img {
  margin: 0 auto 15px;
}
.featuresItem {
  display: flex;
  width: 318px;
  flex-direction: column;
  align-items: center;
  gap: 1.0em;
}
@media screen and (max-width: 850px) and (min-width: 768px) {
  .featuresItem {
    width: 220px;
  }
}
/* app_dl */
.app_dlBg {
  background-image: url(/campaign/xprice/img/pattern_stripe_atokara.svg);
  background-repeat: repeat;
}
.app_dlContents {
  max-width: 642px;
  margin: 0 auto;
  display: flex;
  padding: 3em 0px;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  align-self: stretch;
}
.appBadgeArea {
  display: flex;
  align-items: center;
  gap: 3em;
}
.signUpWebLink {
  display: flex;
  text-decoration: none;
  width: 280px;
  padding: 16px 0;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 70px;
  background: var(--atokara_color, linear-gradient(180deg, #00A1B0 0%, #86C9AB 100%));
}
.signUpWebLinkText {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 216.667% */
  letter-spacing: 0.36px;
  padding-right: 4px;
}
.signUpXpriceLink {
  display: flex;
  text-decoration: none;
  width: 280px;
  padding: 16px 0;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 70px;
  background:#F075A9;;
}
.signUpXpriceLinkText {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px; /* 216.667% */
  letter-spacing: 0.36px;
  padding-right: 4px;
}
.appStore {
  display: flex;
  align-items: center;
  gap: 1.5em;
}
.appQr {
  width: 90px;
  height: 90px;
}
@media (min-width: 768px) {
  .signUpArea {
    display: flex;
    align-items: center;
    gap: 3em;
  }
}
@media (max-width: 767px) {
  .signUpArea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.267vw;
  }
  .signUpArea .blank {
    margin: auto 0;
  }
  .signUpArea .blank::before{
    width: 16px;
    height: 16px;
    background-size: cover;
  }
}

@media (max-width: 767px) {
  .appBadgeArea {
    gap: 24px;
  }
}
/* flow */
.flowBg {
  background: #FCF5ED;
  ;
}
.flowInner {
  max-width: 856px;
  margin: 0 auto;
  display: flex;
  padding: 88px 0px;
  flex-direction: column;
  align-items: center;
  gap: 3em;
  align-self: stretch;
}
.flowContents {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flowStepInner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  padding-bottom: 3.5em;
}
.flowStepInner::before {
  top: 40%;
  content: "";
  display: inline-block;
  background-image: url(/campaign/xprice/img/img_flow_arrow.svg);
  background-repeat: no-repeat;
  background-position: bottom center;
  width: 30px;
  height: 490px;
  position: absolute;
}
.flowStepArea {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.txtLink .noteText,
.txtLink .noteHead {
  font-size: 12px;
}
.detailsContents_txtLink {
  padding-left: 17px;
}
.flowStepHead {
  position: absolute;
}
.flowStepContents {
  display: flex;
  max-width: 800px;
  align-items: center;
  gap: 3.5em;
      padding: 0px 100px 0px 40px;
  background: rgba(255, 255, 255, 0.8);
  height: 100%;
  border-radius: 30px;
}
.flowStepContentsBg {
  margin-top: 3.5em;
  background: url(/campaign/xprice/img/pattern_dot.svg), repeat #FFF;
  border-radius: 30px;
}
@media screen and (min-width: 768px) {
.flowStepArea.step2 .flowStepContents {
  padding: 2em 2.5em 1.5em 2.5em;
}
}
.stepTextArea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
}
.flowContents .notesList li {
  padding-top: 8px;
}
/* details */
.detailsBg {
  background-color: #FFFFFF;
}
.detailsInner {
  display: flex;
  padding: 5.5em 0;
  flex-direction: column;
  align-items: center;
  gap: 3em;
  align-self: stretch;
}
.detailsContents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5em;
}
.h3_section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
/* how_to_use */
.how_to_useBg {
  background: #FCF5ED;
}
.how_to_useInner {
  display: flex;
  max-width: 1440px;
  width: 100%;
  padding: 5.5em 0;
  flex-direction: column;
  align-items: center;
  gap: 3em;
}
.how_to_useTabArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
}
.tabButton {
  height: 73px;
}
.howToUse-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.howToUse-tabs li {
  color: var(--BRAND_ATOKARA, linear-gradient(180deg, #00A1B0 0%, #86C9AB 100%));
  border: 2px solid var(--BRAND_ATOKARA, #00A1B0);
  border-radius: 100px;
  background: #FFF;
  width: 332px;
  display: flex;
  padding: 1.25em 2.5em;
  justify-content: center;
  align-items: center;
  gap: 0.625em;
  align-self: stretch;
  position: relative;
  cursor: pointer;
}
.howToUse-tabs li .tabText {
  font-family: "Noto Sans JP";
  font-size: 1.0em;
  font-style: normal;
  font-weight: 700;
  line-height: 115%;
  /* 18.4px */
  letter-spacing: 0.8px;
  background: var(--BRAND_ATOKARA, linear-gradient(180deg, #00A1B0 0%, #86C9AB 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.howToUse-tabs li.-current .tabText {
  color: #FFF;
  background: #FFF;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.howToUse-tabs li.-current {
  color: #FFF;
  border: none;
  background: var(--BRAND_ATOKARA, linear-gradient(180deg, #00A1B0 0%, #86C9AB 100%));
  pointer-events: none;
  z-index: 1;
}
.howToUse-tabs li:first-child {
  margin-right: -3em;
}
.howToUse-tabs li.-current::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 47%;
  width: 0;
  height: 0;
  border-top: 15px solid #84C9AB;
  border-left: 8.5px solid transparent;
  border-right: 8.5px solid transparent;
}
li::after {
  transition: 0.3s;
}
.howToUse-tabContents {
  margin: 0px auto 2.1875em;
}
.howToUse-tabContents>div.-current {
  display: block;
}
.howToUse-tabContents>div {
  display: none;
}
.howToUse-tabContents .detailText {
  text-align: center;
}
.howToUse-slider {
  padding-top: 0.625em;
  margin: 2em -1.25em 0;
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  display: flex;
  max-width: 800px;
  align-items: flex-start;
}
.swiper-slideContents {
  display: flex;
  max-width: 240px;
  width: auto;
  flex-direction: column;
  align-items: inherit;
  flex-shrink: 0;
}
.swiper-slideContents img:nth-child(2) {
  width: 200px;
  margin: 16px auto 24px auto;
}
.swiper-container-buy,
.swiper-container-register {
  margin: 0 auto 2em;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}
.swiper-container-register .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 567.21px;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  /* transition-property: transform; */
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  transform: translate3d(0px, 0px, 0px);
}
.swiper-slideContents img {
  display:block;
  margin:0 auto;
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.howToUse-swiper {
  max-width: 410px;
  height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.howToUse-swiper .swiper-button-buy-right {
  cursor: pointer;
}
.howToUse-swiper .swiper-button-register-right {
  cursor: pointer;
}
.howToUse-swiper .swiper-button-buy-left {
  cursor: pointer;
}
.howToUse-swiper .swiper-button-register-left {
  cursor: pointer;
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  display: flex;
  align-items: flex-start;
  /* gap: 1.0em; */
  max-width: 169px;
  margin: 0;
  justify-content: center;
}
.howToUse-swiper .swiper-buy-pagenation .swiper-pagination-bullet {
  background-color: #D9D9D9;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  cursor: pointer;
}
.howToUse-swiper .swiper-buy-pagenation .swiper-pagination-bullet-active {
  background: var(--BRAND_ATOKARA, linear-gradient(180deg, #00A1B0 0%, #86C9AB 100%));
}
.howToUse-swiper .swiper-register-pagenation .swiper-pagination-bullet {
  background-color: #D9D9D9;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  cursor: pointer;
}
.howToUse-swiper .swiper-register-pagenation .swiper-pagination-bullet-active {
  background: var(--BRAND_ATOKARA, linear-gradient(180deg, #00A1B0 0%, #86C9AB 100%));
}
.howToUse-swiper .swiper-button-disabled {
  opacity: 0.5;
}
@media screen and (max-width: 850px) and (min-width: 768px) {
  .swiper-slideContents {
    width: 23.5vw;
    max-width: unset;
  }
  .swiper-autoheight .swiper-wrapper {
    max-width: 700px;
  }
}
/* article */
.article {
  background: #F0F1F4;
  padding-bottom: 48px;
}
.article_ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px 0px 24px 0px;
}
.article_ttl img {
  max-width: 10px;
  height: 22px;
}
.article_ttl p {
  padding: 0px 16px;
  text-align: center;
}
.article_column {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 32px;
  border-radius: 10px;
}
.article_column img {
  width: 180px;
  border-radius: 10px 0px 0px 10px;
}
.article_column a {
  display: flex;
  align-items: center;
  gap: 32px;
  text-decoration: none;
}
.article_column a:hover {
  opacity: .6
}
.article_column p {
  max-width: 356px;
}

@media (max-width: 767px) {
.article {
  padding: 0px 19px 40px 19px;
}
.article_ttl {
  padding: 40px 0px 16px 0px;
}
.article_ttl p {
  padding: 0px 8px;
  text-align: center;
  font-size: 14px;
}
.article_ttl img {
  max-width: 16px;
  height: 34px;
}
.article_column {
  gap: 16px;
}
.article_column img {
  width: 125px;
}
.article_column p {
  font-size: 12px;
  max-width: 180px;
}
.article_column a {
  gap: 16px;
}
}
/* faq */
.faqBg {
  background-color: #FFFFFF;
}
.faqInner {
  display: flex;
  padding-top: 5.5em;
  flex-direction: column;
  align-items: center;
  gap: 3em;
  align-self: stretch;
}
.faqInner h2 {
  max-width: 317px;
}
.faqItem {
  border-top: 2px solid #CCC8C6;
  border-bottom: 2px solid #CCC8C6;
  background: var(--WHITE, #FFF);
}
.faqItem:last-child {
  border-top: none;
}
.qaList dl {
  position: relative;
  margin: 0;
  padding: 2em 6.375em 2em 2.5em;
  cursor: pointer;
  border-bottom: 1px solid #000;
}
.qafirst {
  border-top: 1px solid #000;
}
.qaList dl .plus {
  position: absolute;
  top: 0;
  right: -70px;
  display: block;
  width: 29px;
  height: 29px;
  margin: auto;
  content: '';
  transition: 0.3s ease all;
}
.qaList dl .plus:before,
.qaList dl .plus:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #4F433A;
  left: 50%;
  top: 50%;
  width: 90%;
  height: 2px;
  transform: translate(-50%, -50%);
}
.qaList dl .plus:before {
  transform: translate(-50%, -50%) rotate(90deg)
}
.qaList dl.open .plus::before {
  transform: translate(-50%, -50%) rotate(0deg);
}
.qaList dl dt {
  position: relative;
  margin: 0;
  padding: 0 0 0 2.75em;
}
.qaList dl dt::before {
  line-height: 1;
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  content: url(/campaign/xprice/img/icon_q.svg);
}
.qaList dl dd::before {
  font-size: 1.375em;
  line-height: 1;
  position: absolute;
  top: 3px;
  left: 2px;
  display: block;
  font-weight: bold;
}
.qaList dl dd {
  position: relative;
  height: 0;
  overflow: hidden;
  opacity: 0;
  line-height: 0;
  padding: 0 0 0 2.75em;
  transition-duration: .3s;
}
.qaList dl.open dd {
  position: relative;
  height: auto;
  opacity: 1;
  margin: 1.5em 0 0;
}
.qaList dl dd p {
  margin: 1.875em 0 0;
}
.qaList dl dd p:first-child {
  margin-top: 0;
}
.accordionContent .txtLink,
.accordionContent .notesList {
  padding-top: 8px;
}
/* caution */
.cautionBg {
  background-color: #FFF;
}
.cautionInner {
  display: flex;
  padding: 5.5em 0;
  flex-direction: column;
  align-items: center;
  gap: 3em;
  align-self: stretch;
}
.cautionInner h2 {
  width: 271px;
}
.cautionContents .notesList {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7em;
}
/* footer */
footer {
  display: flex;
  flex-flow: column;
  width: 100%;
  padding: 1.0em 0;
  margin-bottom: 111px;
  justify-content: center;
  align-items: center;
  gap: 0.625em;
  background: #D1D0D0;
}
footer p {
  font-size: 10px;
  color: #000;
}
.footerBtn {
  position: relative;
  transition: .2s;
  opacity: 0;
  z-index:-1;
}
.footerBtnPop {
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 0;
  border-radius: 8px;
  border: 1px solid #00A1B0;
  background: linear-gradient(90deg, #00A1B0 0%, #86C9AB 100%);
  display: flex;
  padding: 2px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #FFF;
  text-align: center;
  font-family: "Hiragino Kaku Gothic Pro";
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 200%; /* 24px */
}
.footerBtnInner {
  width: 100%;
  height: 111px;
  line-height: 80px;
  background-color: rgba(79, 73, 66, 0.50);
  color: #fff;
  display: inline-block;
  text-align: center;
  position: fixed; /* 画面に固定する */
  bottom: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.footerBtnInner .mvCvContentsBtnList {
  max-width: 438px;
  margin: 0 auto;
  justify-content: center;
  padding: 30px 0;
}
@media screen and (max-width: 767px) {
  footer p {
    font-size: 2.667vw;
    font-family: "Hiragino Kaku Gothic Pro";
  }
}
/* モーダル */
.mvCvContentsBtnAppModal {
  position: relative;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 40px 20px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  box-sizing: border-box;
  z-index: 800;
}
.mvCvContentsBtnAppModal.is-active {
  opacity: 1;
  visibility: visible;
}
.mvCvContentsBtnAppModalInner {
  position: absolute;
  margin: 0 auto;
  width: 800px;
  height: auto;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 107px 97px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: url(<path-to-image>) #fff 0% 0% / 50px 50px repeat;
  background-image: url(/campaign/xprice/img/pattern_stripe_atokara.svg);
  background-repeat: repeat;
  background-size: contain;
}
.mvCvContentsBtnAppModalClose {
  transform: translate(-50%, -50%);
  position: absolute;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  top: -8%;
  left: 97%;
  width: 32px;
  height: 32px;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 900;
  font-size: 30px;
}
.atokaraMain {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.atokaraiIcon {
  margin-right: 15px;
}
.atokaraText {
  color: var(--TEXT-BASE, #4F433A);
  font-family: "DNP ShueiMGoStd";
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  text-align: left;
}
.atokraAppDl {
  display: flex;
}
.atokraAppDlApple {
  display: flex;
  margin-right: 24px;
}
.atokraAppDlGoogle {
  display: flex;
}
.atokraAppDlIcon {
  margin-right: 20px;
  display: flex;
  align-items: center;
}
.atokraAppDlAppleIconQR, .atokraAppDlGoogleIconQR {
  width: 105px;
}
/* SP */
@media (max-width: 767px) {
  .mvCvContentsBtnAppModalInner {
    width: 93.6vw;
    padding: 10.667vw 4.267vw;
  }
  .mvCvContentsBtnAppModalClose {
    bottom: -5.6vw;
    right: 5.333vw;
    width: 4.267vw;
    height: 4.267vw;
  }
  .atokaraTextWrap {
    display: flex;
    align-items: center;
    font-family: "DNP ShueiMGoStd";
  }
  .atokraAppDl {
    justify-content: center;
  }
  .atokaraText {
    font-family: "DNP ShueiMGoStd";
    font-size: 4.8vw;
  }
  .atokaraMain {
    margin-bottom: 6.4vw;
  }
  .atokraAppDlApple {
    margin-right: 4vw;
  }
  .atokraAppDlIcon {
    margin-right: 0;
  }
  
}
/* backTopBtn */
.backTopBtn {
  position: relative;
  transition: .2s;
  opacity: 0;
  z-index:-1;
}
.backTopBtn img {
  position: fixed;
  width: 60px;
  transform: translate(-50%, -50%);
  right: 0%;
  bottom: 11%;
}
/* SP */
@media (max-width: 767px) {
  .backTopBtn img {
    width: 16vw;
    right: -5.333vw;
    bottom: 21.333vw;
  }
}

/* SP */
@media (max-width: 1000px) {
  .mvBg {
    background: url(/campaign/xprice/img/kv_bg_material_sp.png) no-repeat;
    background-size: cover;
    background-position: top center;
  }
}
@media (max-width: 767px) {
  /* br */
  .br-sp::before {
    content: "\A";
    white-space: pre;
  }
  /* headline */
  h3 {
    font-size: 16px;
  }
  h3 .dots {
    content: url(/campaign/xprice/img/logo_h3_dot.svg);
    width: 8px;
    height: 8px;
  }
  /* text */
  .detailText {
    color: #4f433a;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 200%;
  }
  .textLarge {
    font-size: 16px;
  }
  .textSmall {
    line-height: 180%;
  }
  /* details */
  .detailsContents .detailText {
    text-align: center;
    color: #141210;
  }
  /* how to use */
  .useSlider .detailText {
    text-align: left;
    color: #141210;
  }
  .swiper-slide-text .detailText {
    text-align: center;
    font-size: 16px;
  }
  .featuresText {
    margin: 0 auto;
  }
  .featuresText .linkText {
    justify-content: center;
    font-size: 14px;
  }
  .featuresText .notesList {
    margin: 0 auto;
  }
  .featuresText > .txtLink > .notesList > li > .noteText {
    font-size: 14px;
  }
  .txtLink .noteText, .txtLink .noteHead {
    font-size: 16px;
  }
  .aboutHeadText .detailText {
    text-align: left;
  }
  /* faq */
  .question.detailText {
    font-weight: 600;
  }
  /* notelist */
  .noteHead {
    font-size: 16px;
    line-height: 180%;
    padding-right: 4px;
  }
  .noteText {
    padding-bottom: 1.067vw;
    color: #4f433a;
    font-size: 16px;
    line-height: 140%;    /* 22.4px */
  }
  .flowContents .noteText,
  .flowContents .noteHead {
    font-size: 12px;
  }
  /* header */
  #header {
    display: flex;
    width: 100%;
    padding: 4.267vw 0;
  }
  #header .headerLogo img {
    width: 66.133vw;
  }
  /* floatbtn */
  .fix-btn {
    width: 72px;
    bottom: 3.2vw;
  }
  .mvContents {
    gap: 4.267vw;
    padding: 42.667vw 0 40.267vw;
  }
  .mvContentsIntro {
    padding: 3.2vw;
    border-top: 0.8vw solid #00A0AF;
    border-bottom: 0.8vw solid #00A0AF;
  }
  .mvContentsIntroText {
    text-align: center;
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 3.2vw;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
  }
  .mvContentsIntroTextLarge {
    font-family: "Noto Sans JP";
    font-size: 4.8vw;
  }
  /* mvCv */
  .mvCvContents {
    padding: 14.667vw 5.067vw;
  }
  .mvCvContentsInner {
    display: flex;
    /* padding: 8.533vw 6.133vw; */
    padding: 32px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.267vw;
    border-radius: 8vw;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0vw 0.533vw 2.667vw 0vw rgba(0, 0, 0, 0.10);
  }
  .mvCvContentsInner h2 {
    width: 45.067vw;
  }
  .mvCvContentsInner h2 img {
    width: 45.067vw;
  }
  .mvCvContentsItemWrap {
    display: flex;
    width: 77.333vw;
    justify-content: center;
    gap: 4.267vw;
  }
  .mvCvContentsItem {
    width: auto;
  }
  .mvCvContentsItem:first-child {
    border-right: dashed 0.533vw rgba(79, 67, 58, 0.2);
    padding-right: 2.667vw;
  }
  .mvCvContentsItemMain {
    width: 30.667vw;
  }
  .mvCvContentsBtnList {
    align-items: flex-start;
    gap: 4.267vw;
  }
  .mvCvContentsBtn {
    width: 100%;
  }
  .mvCvContentsBtnSignUpLink {
    padding: 4vw 0;
    border-radius: 26.667vw;
  }
  
  .mvCvContentsBtnApp > .mvCvContentsBtnApp-inner{
    padding: 4vw 0;
  }
  .mvCvContentsBtnText {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 3.2vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  /* intro */
  .intro {
    position: relative;
    background: url(/campaign/xprice/img/pattern_dot.svg), repeat;
  }
  .intro::before {
    position: absolute;
    content: "";
    background: url(/campaign/xprice/img/bg_curve_joint_beige.svg), no-repeat;
    background-size: cover;
    background-position: top center;
    width: 100%;
    height: 65px;
    top: -65px;
    display: block;
  }
  .introBG {
    height: 100%;
    background: #FCF5E9;
  }
  .introContents {
    padding: 55px 19px;
  }
  .intro::before {
    position: absolute;
    content: "";
    background: url(/campaign/xprice/img/bg_curve_joint_beige.svg), no-repeat;
    background-repeat: no-repeat;
    /* 画像の繰り返しを指定  */
    background-position: top center;
    /* 画像の表示位置を指定  */
    background-size: contain;
    /* 画像のサイズを指定    */
    width: 100%;
    min-height: 65px;
    top: 0;
    display: block;
  }
  .introContentsInner {
    background: url(/campaign/xprice/img/section01_bg_sp.png), no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8vw;
    background-color: #fff;
    display: flex;
    width: 89.583vw;
    padding: 8.533vw 0vw 4vw;
    flex-direction: column;
    align-items: center;
    gap: 2.667vw;
    box-shadow: 0vw 0.533vw 2.667vw 0vw rgba(0, 0, 0, 0.10);
  }
  .introContentsItem {
    display: flex;
    align-items: center;
    gap: 0vw;
  }
  .intro h2 {
    color: #000;
    text-align: center;
    font-size: 6.4vw;
    font-style: normal;
    font-weight: 700;
    line-height: 6.933vw; /* 108.333% */
    letter-spacing: 0.192vw;
  }
  .introContentsText {
    color: #000;
    font-size: 3.467vw;
    font-style: normal;
    font-weight: 400;
    line-height: 6.933vw;
    letter-spacing: 0.104vw;
    letter-spacing: 0.192vw;
  }
  .introContentsTextBig {
    font-size: 4.8vw;
    font-weight: 700;
    letter-spacing: 0.144vw;
  }
  .introContentsPoint {
    text-align: center;
    color: #F075A9;
    font-size: 10.667vw;
    font-style: normal;
    font-weight: 700;
    line-height: 11.2vw;
    letter-spacing: 0.32vw;
  }
  .introContentsPointSub {
    color: #F075A9;
    font-size: 4.267vw;
    letter-spacing: 0.128vw;
  }
  /* CPDesc */
  .CPDescBG {
    background-color: #FCF5E9;
    padding-bottom: 21.333vw;
  }
  .CPDesc h2 {
    font-size: 6.4vw;
  }
  .CPDescH2Cap {
    color: #4F433A;
    text-align: center;
    font-size: 3.2vw;
    font-style: normal;
    font-weight: 400;
    line-height: 25.999px; /* 216.667% */
    letter-spacing: 0.096vw;
    padding-top: 2.133vw;
  }
  .CPDescContentsFlowItem {
    margin:  4.267vw auto;
    display: flex;
    width: 89.6vw;
    padding: 5.333vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.133vw;
    border-radius: 8vw;
    background: #FFF;
    /* shadow_gr */
    box-shadow: 0vw 0.533vw 2.667vw 0vw rgba(0, 0, 0, 0.10);
  }
  .CPDescContentsFlowItem .linkText {
    display: inline-block;
    font-size: 13px;
  }
  .CPDescContentsFlowStep {
    color: #000;
    text-align: center;
    font-size: 5.333vw;
    font-style: normal;
    font-weight: 700;
    line-height: 6.933vw; /* 130% */
    letter-spacing: 0.16vw;
  }
  .CPDescContentsFlowItemText {
    font-family: "Noto Sans JP";
    text-align: center;
    color: #000;
    /* font-size: 3.2vw; */
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 5.867vw;
  }
  .CPDescContentsFlowItemTextBig {
    color: #000;
    text-align: center;
    font-size: 4.267vw;
    font-style: normal;
    font-weight: 500;
    line-height: 5.867vw; /* 137.5% */
  }
  .CPDescContentsFlowItemText .atokara-color {
    font-size: 5.333vw;
  }
  .CPDescContentsFlowArrow {
    margin: auto;
    width:13.867vw;
    height:5.067vw;
  }
  .CPDescContentsFlowItemDecoStep1 {
    right: 3%;
    top: -12%;
  }
  .CPDescContentsFlowItemDecoStep1 img, .CPDescContentsFlowItemDecoStep2 img, .CPDescContentsFlowItemDecoStep3 img {
    width: 18.667vw;
  }
  .CPDescContentsFlowItemDecoStep2 {
    left: 0%;
    bottom: -21%;
  }
  .CPDescContentsFlowItemDecoStep3 {
    right: 0%;
    bottom: -25%;
  }
  .present {
    padding: 4.267vw 0;
  }
  .presentText {
    color: #000;
    text-align: center;
    font-size: 3.733vw;
    font-style: normal;
    font-weight: 700;
    line-height: 6.933vw; /* 130% */
    letter-spacing: 0.6px;
  }
  .presentText:nth-of-type(3) {
    margin-left: 14.667vw;
  }
  .presentTextBig {
    font-size: 10.667vw;
    line-height: 10.667vw;
    letter-spacing: 0.32vw;
  }
  .atokara-color {
    background: linear-gradient(180deg, #00A1B0 12.75%, #86C9AB 47.06%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .xprice-color {
    color: #F075A9;
  }
  .CPDescContentsFlowGreen {
    padding: 0.267vw 7.2vw;
    border-radius: 8vw;
    background: #00A0AF;
    color: #FFF;
    font-size: 4.8vw;
    font-style: normal;
    font-weight: 700;
    line-height: 6.933vw; /* 144.444% */
    letter-spacing: 0.144vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.667vw;
  }
  /* about */
  .about_atokara {
    position: relative;
  }
  .about_atokaraBg {
    background: #FCF5E9;
  }
  .about_atokaraDeco2:before {
    left: 50%;
    bottom: -4%;
  }
  .about_atokaraInner {
    max-width: 229.333vw;
    margin: 0px 1.25em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    padding-top: 13.067vw;
    padding-bottom: 32vw;
  }
  .aboutHeadArea {
    flex-direction: column;
    gap: 2em;
  }
  .aboutFeaturesArea {
    flex-direction: column;
    gap: 32px;
  }
  .featuresImageArea {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    align-self: stretch;
  }
  .featuresImageArea img {
    margin: 0 auto 4vw;
  }
  .featuresImageArea img:first-child {
    width: 200px;
    height: 200px;
  }
  .featuresItem {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  /* app_dl */
  .app_dlContents {
    padding: 10.667vw 5.067vw;
  }
  .signUpWebLink {
    width: 74.667vw;
    padding: 4.267vw 0;
    border-radius: 18.667vw;
  }
  .signUpWebLinkText {
    font-size: 3.2vw;
    line-height: 6.933vw; /* 216.667% */
    letter-spacing: 0.096vw;
    padding-right: 1.067vw;
  }
  .signUpXpriceLink {
    width: 74.667vw;
    padding: 4.267vw 0;
    border-radius: 18.667vw;
    background:#F075A9;;
  }
  .signUpXpriceLinkText {
    font-size: 3.2vw;
    line-height: 6.933vw; /* 216.667% */
    letter-spacing: 0.096vw;
    padding-right: 1.067vw;
  }
  /* flow */
  .flowInner {
    display: flex;
    padding: 64px 19px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    align-self: stretch;
  }
  .flowStepContents {
    flex-direction: column-reverse;
    gap: 16px;
    padding: 0;
    padding-top: 48px;
  }
  .flowStepContentsBg {
    margin-top: 32px;
  }
  .flowStepContents img:first-child {
    width: 200px;
  }
  .stepTextArea {
    align-items: center;
    gap: 16px;
  }
  .flowStepHead {
    width: 86px;
    height: 65.241px;
  }
  .flowStepInner {
    gap: 24px;
  }
  /* datails */
  .detailsInner {
    padding: 64px 19px;
  }
  /* how_to_use */
  .how_to_useTabArea {
    gap: 16px;
  }
  .how_to_useInner {
    padding: 64px 0px;
    gap: 35px;
  }
  .howToUse-tabs li {
    color: var(--BRAND_ATOKARA, linear-gradient(180deg, #00A1B0 0%, #86C9AB 100%));
    border: 2px solid var(--BRAND_ATOKARA, #00A1B0);
    border-radius: 100px;
    background: #FFF;
    width: 179.5px;
    display: flex;
    padding: 15px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    position: relative;
  }
  .howToUse-tabs li {
    border-radius: 0px 100px 100px 0px;
  }
  .howToUse-tabs li:first-child {
    border-radius: 100px 0px 0px 100px;
  }
  .howToUse-tabs li.-current {
    border-radius: 100px;
  }
  .howToUse-tabs li .tabText {
    font-size: 14px;
    letter-spacing: 0.8px;
  }
  .swiper-autoheight .swiper-wrapper {
    width: 360px;
  }
  .howToUse-swiper {
    max-width: 767px;
    height: auto;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8.533vw;
  }
  .howToUse-swiper .swiper-register-pagenation .swiper-pagination-bullet {
    width: 2.133vw;
    height: 2.133vw;
  }
  .howToUse-swiper .swiper-buy-pagenation .swiper-pagination-bullet {
    width: 2.133vw;
    height: 2.133vw;
  }
  .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    display: flex;
    align-items: flex-start;
    gap: 1.067vw;
    max-width: 103.999px;
    margin: 0;
    justify-content: center;
  }
  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0;
  }
  .swiper-slideContents {
    max-width: 240px;
    gap: 16px;
    display: block;
    margin: 0 auto;
  }
  .swiper-slideContents {
    max-width: 240px;
    gap: 4.267vw;
  }
  .swiper-imgeArea {
    gap: 2.133vw;
    width: 200px;
    display: block;
    margin: 0 auto;
  }
  .swiper-container-buy,
  .swiper-container-register {
    margin: 0 auto 24px;
  }
  .howToUse-tabs li:first-child {
    margin-right: -30px;
  }
  .faqInner {
    padding-top: 64px;
    gap: 32px;
  }
  .faqInner h2 {
    width: 100vw;
  }
  .faqInner h2  img {
    width: 100%;
  }
  .qaList dl {
    position: relative;
    padding: 16px 70px 16px 16px;
  }
  .qaList dl::before {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
  }
  .qaList dl dt {
    padding: 0 0 0 46px;
    font-size: 14px;
  }
  .qaList dl dd {
    margin: 16px 0 0;
    padding: 0 0 0 46px;
    font-size: 14px;
  }
  .qaList dl dd p {
    margin: 30px 0 0;
  }
  .qaList dl dd p:first-child {
    margin-top: 0;
  }
  .qaList dl .plus {
    right: -54px;
  }
  .cautionInner {
    display: flex;
    padding: 17.067vw 5.067vw;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    align-self: stretch;
  }
  .cautionInner h2 {
    width: 100vw;
  }
  .cautionInner h2 img {
    width: 100%;
  }
  .cautionContents .notesList {
    gap: 0;
  }
  /* footer */
  footer {
    margin-bottom: 23.667vw;
  }
  .footerBtnInner {
    height: 23.467vw;
  }
  .footerBtnPop {
    width: 67vw;
    border-radius: 2.133vw;
    border: 0.267vw solid #00A1B0;
    background: linear-gradient(90deg, #00A1B0 0%, #86C9AB 100%);
    padding: 0.533vw 3.2vw;
    gap: 2.667vw;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 3.2vw;
    font-style: normal;
    font-weight: 600;
    line-height: 200%;
  }
  .footerBtnInner .mvCvContentsBtnList {
    max-width: none;
    justify-content: center;
    padding: 6.4vw 11px;
  }
}
@media (max-width: 500px) {
  .howToUse-swiper .swiper-button-buy-right {
    width: 12.8vw;
    height: 12.8vw;
  }
  .howToUse-swiper .swiper-button-register-right {
    width: 12.8vw;
    height: 12.8vw;
  }
  .howToUse-swiper .swiper-button-buy-left {
    width: 12.8vw;
    height: 12.8vw;
  }
  .howToUse-swiper .swiper-button-register-left {
    width: 12.8vw;
    height: 12.8vw;
  }
}
@media (max-width: 550px) {
  .linkText {
      font-size: 3.2vw;
  }
  .noteText {
    padding-bottom: 1.067vw;
    color: #4f433a;
    font-size: 3.2vw;
    line-height: 140%;
    /* 22.4px */
  }
  .txtLink .noteText,
  .txtLink .noteHead {
    font-size: 3.2vw;
  }
  .noteHead {
    font-size: 3.2vw;
  }
  .signUpArea .blank::before {
    width: 3.2vw;
    height: 3.2vw;
  }
}
.js-scrollAnimation {
  opacity: 0;
}
.areaCenter{
 display: flex;
 justify-content: center;
}
.pat16{
  padding-top: 16px;
}
.paB0{
  padding-bottom: 0px!important;
}