@charset "utf-8";
/* CSS Document */
/*-------------------------------
 media screen break point
- monitor: over 768px @media screen and (min-width: 768px)
- tablet: under 767px @media screen and (max-width: 767px)
- sp only: under 475px @media (max-width: 475px)
- sp only: under 375 @media (max-width: 375px)
---------------------------------*/
:root {
  /*color*/
  --c-app-red: #971e25;
  --c-app-blu01: #0062dd;
  --c-app-blu02: #003883;
  --c-app-ylw01: #fedd01;
  --c-app-ylw02: #fdd100;
  --c-app-ylw03: #f8ba01;
  /*font-size*/
  --fs: min(2.114vw,1rem);
  /*responsive-size*/
  --rs: clamp(0.5rem, 1.042vw, 1rem);
}
/* anchor link margin */
  a[id]:not([href]) {
      height: calc(var(--rs) * 9);
      margin-top: calc(var(--rs) * -9);
      display: block;
  }
a#appAbout:not([href]) {
      height: calc(var(--rs) * 0);
      margin-top: calc(var(--rs) * -0);
      display: block;
  }
/* app ic */
.app-ic {
  width: min(25%, 10rem);
}
/*Font*/
.font-mincho {
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
@font-face {
  font-family: "wf-tegaki";
  src: url("/cs/assets/fonts/HuiFontP29.eot");/*For IE*/
  src: url("/cs/assets/fonts/HuiFontP29.woff") format("woff"),/*For Modern browser*/
    url("/cs/assets/fonts/HuiFontP29.ttf") format("truetype");/*For iOS Android*/
}
.wf-sawarabi { /*@Google Fonts*/
  font-family: "Sawarabi Mincho";
}
.wf-tegaki {
  font-family:"wf-tegaki";
}
.wf-tegaki sup {
  font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica,sans-serif;
}
/*-------------------------------
 overwriting base.css
---------------------------------*/
main {
  font-feature-settings: "palt";
}
.heading-category {
  font-size: calc(var(--fs) * 3.2);
}
.heading-category-shoulder {
  margin-top: 0;
}
/*-------------------------------
 common elements
---------------------------------*/
.app-notice {
  padding-left: 1em;
  margin: 0.5em 0;
  color: #000;
  font-size: calc(var(--fs) * 1.2);
  line-height: 1.4;
  text-indent: -1em;
  display: inline-block;
}
/*-------------------------------
 contents page header
---------------------------------*/
section#members-topsection {
  max-width: 100%;
  padding-bottom: 2rem;
}
/*-------------------------------
 hero area
---------------------------------*/
section#appHeroare {
  width: 100%;
  max-width: 100%;
  padding: 0;
  background: #f5f1e8;
}
#appHeroareContainer {
  width: min(100%, 96rem);
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-flow: row-reverse wrap;
}
/*-------------------------------
 hero area - contents
---------------------------------*/
.app-heroarea-cont {
  width: min(96%, 38rem);
  padding: 1rem;
  margin: 0 auto;
  flex: 1 1 auto;
}
.app-title {
  padding: 0 2%;
  margin: 1rem auto;
  color: var(--color-main);
  font-size: calc(var(--fs) * 3.6);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
.app-ic--title {
  width: min(25%, calc(var(--fs) * 5));
  margin: 0 1rem 0 calc(var(--rs) * -2.5);
}
.app-title > b {
  padding-top: 0.2em;
}
.app-readtext {
  margin-top: 0.5em;
  color: #971e25;
  font-size: calc(var(--fs) * 2.4);
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
.app-readtext > b {
  font-size: 112.5%;
  display: block;
}
/*-------------------------------
 hero area - image
---------------------------------*/
.app-heroarea-img {
  /*width: min(100%, 36rem);*/
  /*padding: calc(var(--fs) * 2) 0 0 calc(var(--fs) * 4);*/
  /*margin-top: calc(var(--fs) * 2);*/
  width: min(100%, 42rem);
  /*filter: drop-shadow(0px 0px 2px rgb(204 152 100 / 40%));*/
  line-height: 0;
  text-align: center;
  align-self: flex-end;
  flex: 1 1 auto;
}
.app-heroarea-img-cap {
  margin-left: calc(var(--fs) * -6);
  color: var(--c-app-red);
  font-size: calc(var(--fs) * 2.6);
  line-height: 1.1;
  position: relative;
  display: none; /*テキスト画像内埋め込みへ変更*/
}
.app-heroarea-img-cap span {
  display: inline-block;
  position: relative;
}
.app-heroarea-img-cap span::before,
.app-heroarea-img-cap span::after {
  content: "";
  width: 1px;
  height: 1em;
  background: var(--c-app-red);
  border-radius: 3px;
  position: absolute;
  bottom: 0;
}
.app-heroarea-img-cap span:nth-child(1)::before {
  left: calc(var(--fs) * -3.5);
  bottom: calc(var(--fs) * -1);
  transform: rotate(-30deg);
}
.app-heroarea-img-cap span:nth-child(2)::before {
  left: calc(var(--fs) * -2);
  transform: rotate(-50deg);
}
.app-heroarea-img-cap span:nth-child(1)::after {
  right: calc(var(--fs) * -3.8);
  bottom: calc(var(--fs) * -1);
  transform: rotate(35deg);
}
.app-heroarea-img-cap span:nth-child(2)::after {
  right: calc(var(--fs) * -2.4);
  transform: rotate(60deg);
}
/*-------------------------------
 app download
---------------------------------*/
#app-downloadHeroarea {
  width: 96%;
  padding: calc(var(--rs) * 2) calc(var(--fs) * 1);
  margin: calc(var(--rs) * 2) auto calc(var(--rs) * 1);
  background: #fff;
  border-radius: 1rem;
  box-shadow: var(--bs-cmn);
}
.app-download-section {
  padding: calc(var(--rs) * 2);
  background: #fff;
  display: none;
}
.app-download-footer {
  padding: calc(var(--rs) * 10) calc(var(--rs) * 2);
  background: #fffaf7;
  border: 1px solid #f5e6dd;
  border-right: none;
  border-left: none;
}
@media screen and (max-width: 764px) {
  #app-downloadHeroarea {
    display: none;
  }
  .app-download-section {
    display: block;
  }
}
/* download */
.app-download {
  width: min(96%, 96rem);
  padding: 0;
  margin: 0 auto;
}
.app-download-container {
  width: min(100%, 48rem);
  margin: 1em auto 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  gap: 1rem;  
}
.app-download-title {
  width: 100%;
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  text-align: center;
}
.app-download-btn {
  margin: 0;;
}
.app-download-btn img {
  max-height: calc(var(--fs) * 7);
}
.app-download-btn img.link-qrcode {
  max-height: calc(var(--fs) * 10);
  margin: calc(var(--fs) * 1) auto;
  display: block;
}
.app-download-note {
  width: min(100%, 48rem);
  padding: 1em 1em 0em 2em;
  margin: 0 auto;
  font-size: calc(var(--fs) * 1.2);
  line-height: 1.4;
  text-indent: -1em;
}
.app-download-note + .app-download-note {
  padding-top: 0.5em;
}
/*-------------------------------
 campaign - hero area
---------------------------------*/
.app-camp01DL {
  width: min(98%, 80rem);
  margin: 1rem auto 0;
  color: var(--c-app-red);
}
.app-camp01DL-container {
  padding: var(--fs-s);
  background: var(--c-app-ylw01); 
  background-image: linear-gradient(180deg,  var(--c-app-ylw01) 50%,  var(--c-app-ylw02) 100%);
  text-align: center;
}
.app-camp01DL-text {
  font-size: calc(var(--fs) * 1.5);
  font-weight: bold;
}
.app-camp01DL-text > b {
  display: inline-block;
}
.app-camp01DL-priod {
  padding: 0.5em;
  padding-top: 0.7em;
  margin-top: 0.5em;
  background: var(--c-app-red);
  color: #fff;
  font-size: calc(var(--fs) * 1.6);
  line-height: 1;
}
.app-camp01DL-notice {
  padding-left: 1em;
  margin-top: 0.3em;
  font-size: calc(var(--fs) * 1.2);
  line-height: 1.3;
  text-indent: -1em;
}
.app-camp01DL-container + .app-camp01DL-notice {
  margin-top: 1em;
}
/*-------------------------------
 campaign - content area
---------------------------------*/
.cont-campaign {
  width: min(96%, 96rem);
  padding: var(--fs-s);
  margin: 0 auto;
  background: var(--c-app-ylw01); 
  background-image: linear-gradient(180deg,  var(--c-app-ylw01) 50%,  var(--c-app-ylw02) 100%);
  font-size: var(--fs-ml);
  text-align: center;
}
.campaign-title {
  padding: calc(var(--rs) * 1.5) calc(var(--rs) * 1);
  background: var(--c-app-red);
  color: #fff;
  font-size: calc(var(--rs) * 3.6);
  line-height: 1.2;
}
.campaign-bnr {
  line-height: 0;
}
.campaign-detail {
  padding: 1em;
  background: #fff;
  text-align: left;
}
.campaign-text {
  padding: 0 calc(var(--rs) * 1);
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  text-align: justify;
}
.campaign-text > b {
    color: var(--c-app-red);
  font-size: 112.5%;
}
.campaign-priod {
  padding: 0.5em;
  padding-top: 0.7em;
  margin: calc(var(--fs) * 1) auto;
  background: #0062dd/*var(--c-app-red)*/;
  border: 2px solid #fff;
  border-radius: 3rem;
  box-shadow: var(--bs-cmn);
  color: #fff;
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
.campaign-notice {
  padding-left: 1em;
  margin-top: 0.5em;
  color: var(--c-app-red);
  font-size: calc(var(--fs) * 1.2);
  line-height: 1.4;
  text-indent: -1em;
}
.campaign-priod + .campaign-notice {
  margin-top: calc(var(--fs) * 2);
}
/*-------------------------------
 App contents section
---------------------------------*/
section.app-contSection {
  width: 100%;
  max-width: 100%;
  padding: 0 0 1px;
}
.app-sectionTitle {
  padding: calc(var(--rs) * 2.5) 2% calc(var(--rs) * 2);
  background-size: auto auto;
  background-color: var(--title-bg);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 0.5rem, rgba(250, 250, 250, 0.1) 0.5rem, rgba(250, 250, 250, 0.1) 1rem );
  /*background-image: url(https://www.volks.lol/cs/assets/image/bg/bg_ptrn_strp_oblq01_bright.png);
  background-position: 0 0;
  background-repeat: repeat;*/
   text-align: center;
}
.app-sectionTitle--blu {
  --title-ds: #3287f9;
  --title-bg: #569eff/*#4586de*/;
}
.app-sectionTitle--pnk {
  --title-ds: #cb132b;
  --title-bg: #f15f76;
}
.app-contTitle {
  padding: 0 0.5em;
  color: #fff;
  font-size: calc(var(--fs-xxl) * 1.5);
  font-weight: bold;
  line-height: 1.3;
  text-shadow: 0 2px 1px var(--title-ds);
  filter: drop-shadow(0 0 2px var(--title-ds));
  display: inline-block;
  position: relative;
}
.app-contTitle::before,
.app-contTitle::after {
  content: "";
  width: 3px;
  height: 1.1em;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  bottom: 0.1em;
}
.app-contTitle::before {
  left: -0.5rem;
  transform: rotate(-25deg);
}
.app-contTitle::after {
  right: -0.5rem;
  transform: rotate(25deg);
}
/* contents section - container */
.contSection-container {
  width: min(100%, 96rem);
  padding-top: calc(var(--rs) * 4);
  margin: 0 auto;
}
/*-------------------------------
 content - recommend point
---------------------------------*/
.contSection-recoPoint {
  background: #fff;
}
/* recomend point */
.app-recoPoint {
  width: min(96%, 96rem);
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: space-around;
}
.recoPoint {
  width: min(48%, 40rem);
  height: calc(var(--rs) * 40);
  padding: calc(var(--rs) * 4) 2% calc(var(--rs) * 2) ;
  margin: calc(var(--rs) * 2) 1%;
  border-radius: 50%;
  color: #fff;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
}
@media screen and (max-width: 764px) {
  .recoPoint {
    border-radius: 10%;
  }
}
.recoPoint::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--c-app-red);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.recoPoint:nth-child(2)::before,
.recoPoint:nth-child(3)::before {
  background: var(--c-app-blu01);
}
.recoPoint > * {
  position: relative;
  z-index: 1;
}
.recoPoint-title {
  padding: 0 calc(var(--fs) * 2);
  font-size: calc(var(--rs) * 2.0 + var(--fs) * 0.4);
  line-height: 1.3;
  text-align: center;
}
.recoPont-text {
  padding: 1em;
  padding-top: 0.5em;
  margin: auto;
  font-size: calc(var(--fs) * 0.4 + var(--rs) * 1.4);
}
.recoPoint-ic {
  max-height: calc(var(--rs) * 10);
  margin: 0 auto;
  text-align: center;
}
/*-------------------------------
 content - app use pr
---------------------------------*/
.app-usepr {
  width: min(98%, 96rem);
  padding: calc(var(--rs) * 2) 0;
  margin: 0 auto calc(var(--rs) * 4);
  background: var(--c-app-red);
  color: #fff;
  font-size: calc(var(--rs) * 3.6);
  letter-spacing: -0.05em;
  text-align: center;
}
.cont-campaign + .app-usepr {
  margin: 0 auto calc(var(--rs) * 8);
}
.app-usepr > b {
  font-size: 125%;
  display: inline-block;
  position: relative;
}
.app-usepr > b::before,
.app-usepr > b::after {
  content: "";
  width: 3px;
  height: 1em;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  bottom: 0.3em;
}
.app-usepr > b::before {
  left: -0.7em;
  transform: rotate(-30deg);
}
.app-usepr > b::after {
  right: -0.5em;
  transform: rotate(30deg);
}
/*-------------------------------
 content - app download
---------------------------------*/
  .howto-appDownload {
    padding: calc(var(--fs) * 3) 0;
    background: #ffe4e8;
  }
  .video-heading {
    margin-top: calc(var(--fs) * 4);
    color: var(--c-app-red);
    font-size: calc(var(--fs) * 1.5);
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
  }
  .video-container {
    width: min(94%, 34rem);
    padding: calc(var(--fs) * 1);
    margin:  calc(var(--rs) * 1) auto;
    background: #000;
    position: relative;
  }
  #appVideo {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16; /* 動画のアスペクト比 */
    display: block;
  }
/*-------------------------------
 content - how to
---------------------------------*/
.contSection-howto {
  background: #fffbd7;
}
.howto-container {
  width: min(96%, 96rem);
  margin: calc(var(--fs) * 2) auto;
}
/* how to text*/
.howto-title {
  font-size: calc(var(--fs) * 2);
  margin-top: 1.5em;
}
.howto-step {
  margin-top: 1em;
  font-size: calc(var(--fs) * 1.6);
  list-style: outside;
}
.howto-step li {
  margin-top: 1em;
  margin-left: 1.5em;
}
/*flowcahrt */
.howto-flow {
  padding: calc(var(--rs) * 1);
  margin-top: calc(var(--rs) * 4);
  background: #fff6f0;
  border: 1px solid #f5e6dd;
}
.flow-title {
  margin: calc(var(--fs) * 1) 0;
  font-size: calc(var(--fs) * 1.8);
  text-align: center;
}
.flow-ask {
  padding: calc(var(--rs) * 1) 1em;
  background: var(--c-app-ylw01);
  border: 2px solid var(--c-app-ylw03);
  font-size: calc(var(--fs) * 1.5);
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
}
.flow-ask small {
  font-size: 93.75%;
  font-weight: bold;
}
.flow-ask-imgcut {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
}
.flow-ask-imgcut > span {
  padding: 0 0.5em 0 0.8em;
  margin-left: auto;
  text-indent: -1.5em;
  text-align: left;
}
.flow-ask-imgcut img.flow-imgcut {
  max-width: calc(var(--rs) * 10);
  margin: 0 -0.8em 0 -1em;
}
.flow-select {
  padding: calc(var(--rs) * 2.8) 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
.flow-select-answer {
  min-width: 6em;
  padding: calc(var(--fs) * 1);
  margin: 0 calc(var(--fs) * 1);
  background: #fff;
  border: 2px solid #ddd;
  border-radius: calc(var(--fs) * 0.5);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  display: inline-block;
  position: relative;
}
.flow-select-1st > .flow-select-answer {
  margin-left: -8.5%;
}
.flow-select-answer::before,
.flow-select-answer::after {
  content: "";
  width: 2px;
  height: calc(var(--rs) * 3);
  background: #ddd;
  position: absolute;
  left: 50%;
}
.flow-select-answer::before {
  top: calc(var(--rs) * -3);
}
.flow-select-answer::after {
  bottom: calc(var(--rs) * -3);
}
.answer-yes {
  border-color: var(--c-app-red);
  color: var(--c-app-red);
}
.flow-select-answer.answer-yes::before,
.flow-select-answer.answer-yes::after {
  background: var(--c-app-red);
}
.answer-no {
  border-color: var(--c-app-blu01);
  color: var(--c-app-blu01);
}
.flow-select-answer.answer-no::before,
.flow-select-answer.answer-no::after {
  background: var(--c-app-blu01);
}
.flow-next {
  margin-bottom: calc(var(--fs) * 1);
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: space-around;
  gap: calc(var(--rs) * 2);
}
.flow-next-cont:nth-child(1) {
  width: 40%;
}
.flow-next-cont:nth-child(2) {
  width: 60%;
}
.flow-last {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  gap: calc(var(--rs) * 1);
}
.flow-last-info {
  padding: calc(var(--rs) * 1);
  background: #fff;
  border: 2px solid var(--c-app-ylw03);
  border-radius: calc(var(--rs) * 1);
  font-size: calc(var(--fs) * 1.4);
  flex: 1 1 50%;
}
.flow-linkbtn {
  padding: calc(var(--rs) * 1);
  margin-top: calc(var(--rs) * 1);
  background: var(--c-app-ylw03);
  border-radius: calc(var(--rs) * 0.5);
  color: #000;
  font-size: calc(var(--fs) * 1.7);
  font-weight: bold;
  line-height: 1;
  text-align: center;
  display: block;
  position: relative;
}
.flow-linkbtn:hover {
  background: var(--c-app-ylw01);
  color: #000;
  text-decoration: none;
}
/*-------------------------------
 content - step
---------------------------------*/
.step-title {
  /*padding: calc(var(--rs) * 1);
  padding-left: 0;*/
  margin-top: calc(var(--rs) * 6);
  background: #fff;
  border: 2px solid var(--c-app-ylw03);
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  line-height: 1.3;
  display: flex;
  flex-flow: row nowrap;
}
.step-title > b {
  padding: calc(var(--rs) * 1) calc(var(--rs) * 0.5);
  background: var(--c-app-ylw03);
  display: flex;
  align-items: center;
}
.step-title > span {
  padding: calc(var(--rs) * 1.5) calc(var(--rs) * 1);
}
/* step status */
.step-status {
  width: min(96%, 94rem);
  margin: calc(var(--rs) * 2) auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.step-status-img {
  margin-right: calc(var(--rs) * 4);
  position: relative;
}
.status-not > img {
  filter: grayscale(1) brightness(1.1);
}
.status-not::before,
.status-not::after {
  content: "";
  width: 5px;
  height: 120%;
  background: #f00;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: -10%;
  z-index: 1;
}
.status-not::before {
  transform: rotate(-45deg);
}
.status-not::after {
  transform: rotate(45deg);
}
.step-imgcut {
  max-height: calc(var(--fs) * 8);
}
/* step process */
.step-process {
  margin: 1.5em 1em;
  font-size: calc(var(--fs) * 1.6);
  list-style: decimal;
}
.step-process > li {
  margin-top: 1em;
  margin-left: 1.5em;
}
.step-process-eclink {
  padding: 0.5em;
  margin-top: 0.5em;
  background: #fff9f6;
  border: 1px solid #cfcfcf;
  list-style: disc;
}
.step-process-eclink > li {
  margin-left: 1.5em;
  color: var(--color-link-nml);
}
.step-process-eclink > li + li {
  margin-top: 0.5em;
}
/* step img */
.step-img {
  width: min(100%, 92rem);
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  counter-reset: number 0;
}
.step-img::before,
.step-img::after {
  content: "";
  order: 1;
}
.step-img > li,
.step-img::before,
.step-img::after {
  width: min(48%, 18rem);
  margin: 2% 1%;
  position: relative;
  flex: 1 1 auto;
}

.step-img > li::after {
  counter-increment: number 1;
  content: counter(number) " ";
  padding: 0.5em 1em;
  background: var(--c-app-ylw03);
  border-radius: 4em;
  font-size: calc(var(--fs) * 1.2);
  font-weight: bold;
  display: inline-block;
  position: absolute;
  left: -0.5em;
  top: -1em;
}
/*-------------------------------
 content - inquiry
---------------------------------*/
section.contSection-inquiry {
  padding: calc(var(--fs) * 10) 0;
  background: #fff;
  text-align: center;
}
.inquiry-title {
  font-size: calc(var(--fs) * 2.8);
}
.inquiry-text {
  width: min(96%, 23em);
  padding: 0 1em;
  margin: 1em auto;
  font-size: calc(var(--fs) * 1.7);
}
.inquiry-link {
  margin-top: 1em;
  font-size: calc(var(--fs) * 1.8);
}
/* base css overwrite */
.pagetop {
  margin-top: 0;
}