@charset "utf-8";
/* 
※scssから除外したCSS。追加のCSSはこちらに記入
*/


/******************************
会員構成：男女別
******************************/
.membershipData_gender {
    --color1: #ea2f4e;
    --color2: #29abe2;

    --ratio1: 53%;
    --ratio2: 47%;
}

.membershipData_gender .membership_graphCircle {
  background-image: conic-gradient(
    var(--color1) 0% calc(0% + var(--ratio1)),
    var(--color2) var(--ratio1) calc(var(--ratio1) + var(--ratio2))
    );
}


/******************************
会員構成：成婚実績
******************************/
.membershipData_record .graphBar {
  --cont1: 11909;
  /* グラフ1の数値 */
  --cont2: 12249;
  /* グラフ2の数値 */
  --cont3: 14671;
  /* グラフ3の数値 */
  --max: 15000;
  /* 区切り最大値 */
  --separate: 11000;
  /* 区切り最小値 */
  --height: 50px;
  /* 区切りの高さ */
  --reminder: 100px;
  /* 区切り最小値以下の余白 */

  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.membershipData_record .graphBar_dataBox {
  padding-bottom: var(--reminder);
}

.membershipData_record .graphBar_line>div {
  height: var(--height);
}

.membershipData_record .graphBar_bar,
.membershipData_record .graphBar_year {
  padding: 0 65px;
}

.membershipData_record .graphBar_bar>div,
.membershipData_record .graphBar_year>div {
  width: 65px;
  font-size: 18px;
}

.membershipData_record .graphBar_bar {
  height: calc(100% - var(--reminder));
}

.membershipData_record .graphBar_bar>div:nth-child(1) {
  background: #af8969;
  height: calc((var(--cont1) - var(--separate)) / (var(--max) - var(--separate)) * 100% + var(--reminder));
}

.membershipData_record .graphBar_bar>div:nth-child(2) {
  background: #eccc43;
  height: calc((var(--cont2) - var(--separate)) / (var(--max) - var(--separate)) * 100% + var(--reminder));
}

.membershipData_record .graphBar_bar>div:nth-child(3) {
  background: #18414c;
  height: calc((var(--cont3) - var(--separate)) / (var(--max) - var(--separate)) * 100% + var(--reminder));
}

@media screen and (max-width: 767px) {
  .membershipData_record .graphBar {
    max-width: 405px;
  }

  .membershipData_record .graphBar_bar,
  .membershipData_record .graphBar_year {
    justify-content: space-around;
    padding: 0 40px;
  }

  .membershipData_record .graphBar_bar>div,
  .membershipData_record .graphBar_year>div {
    width: 60px;
  }
}


/******************************
会員構成：共通

※円グラフ計算方法 色 / 一つ前の合計 / calc(一つ前の合計 + 今回の割合)
******************************/

.membershipData_cont .-men {
  --color1: #192759;
  --color2: #005a6f;
  --color3: #299a89;
  --color4: #5cc593;
  --color5: #8fd78b;
}

.membershipData_cont .-women {
  --color1: #b6000f;
  --color2: #fe2713;
  --color3: #ff814b;
  --color4: #ffc883;
  --color5: #e2e7a6;
}

.membershipData_cont .-men .membershipData_graphList li:nth-child(1) span {
  background: var(--color1);
}
.membershipData_cont .-men .membershipData_graphList li:nth-child(2) span {
  background: var(--color2);
}
.membershipData_cont .-men .membershipData_graphList li:nth-child(3) span {
  background: var(--color3);
}
.membershipData_cont .-men .membershipData_graphList li:nth-child(4) span {
  background: var(--color4);
}
.membershipData_cont .-men .membershipData_graphList li:nth-child(5) span {
  background: var(--color5);
}
.membershipData_cont .-women .membershipData_graphList li:nth-child(1) span {
  background: var(--color1);
}
.membershipData_cont .-women .membershipData_graphList li:nth-child(2) span {
  background: var(--color2);
}
.membershipData_cont .-women .membershipData_graphList li:nth-child(3) span {
  background: var(--color3);
}
.membershipData_cont .-women .membershipData_graphList li:nth-child(4) span {
  background: var(--color4);
}
.membershipData_cont .-women .membershipData_graphList li:nth-child(5) span {
  background: var(--color5);
}


/******************************
会員構成：年齢別
******************************/
/* 男性 */
.membershipData_age .-men {
  --ratio1: 11.1%;
  --ratio2: 27.5%;
  --ratio3: 28.9%;
  --ratio4: 17.5%;
  --ratio5: 5%;
}
.membershipData_age .-men .membership_graphCircle {
  background-image: conic-gradient(
    var(--color1) 0% calc(0% + var(--ratio1)),
    var(--color2) var(--ratio1) calc(var(--ratio1) + var(--ratio2)),
    var(--color3) calc(var(--ratio1) + var(--ratio2)) calc(var(--ratio1) + var(--ratio2) + var(--ratio3)),
    var(--color4) calc(var(--ratio1) + var(--ratio2) + var(--ratio3)) calc(var(--ratio1) + var(--ratio2) + var(--ratio3) + var(--ratio4)),
    var(--color5) calc(100% - var(--ratio5)) 100%
  );
}


/* 女性 */
.membershipData_age .-women {
  --ratio1: 26.2%;
  --ratio2: 38.4%;
  --ratio3: 25.4%;
  --ratio4: 8.4%;
  --ratio5: 1.6%;
}
.membershipData_age .-women .membership_graphCircle {
  background-image: conic-gradient(
    var(--color1) 0% calc(0% + var(--ratio1)),
    var(--color2) var(--ratio1) calc(var(--ratio1) + var(--ratio2)),
    var(--color3) calc(var(--ratio1) + var(--ratio2)) calc(var(--ratio1) + var(--ratio2) + var(--ratio3)),
    var(--color4) calc(var(--ratio1) + var(--ratio2) + var(--ratio3)) calc(var(--ratio1) + var(--ratio2) + var(--ratio3) + var(--ratio4)),
    var(--color5) calc(100% - var(--ratio5)) 100%
    );
}


/******************************
会員構成：職業別
******************************/
/* 男性 */
.membershipData_profession {
  --ratio1: 80%;
  --ratio2: 10%;
  --ratio3: 5%;
  --ratio4: 5%;
}

.membershipData_profession .membership_graphCircle {
  background-image: conic-gradient(
    var(--color1) 0% calc(0% + var(--ratio1)),
    var(--color2) var(--ratio1) calc(var(--ratio1) + var(--ratio2)),
    var(--color3) calc(var(--ratio1) + var(--ratio2)) calc(var(--ratio1) + var(--ratio2) + var(--ratio3)),
    var(--color4) calc(100% - var(--ratio4)) 100%
    );
}


/******************************
会員構成：学歴別
******************************/
/* 男性 */
.membershipData_educational .-men {
  --ratio1: 62.8%;
  --ratio2: 25.7%;
  --ratio3: 1%;
  --ratio4: 10.5%;
}

.membershipData_educational .-men .membership_graphCircle {
  background-image: conic-gradient(
    var(--color1) 0% calc(0% + var(--ratio1)),
    var(--color2) var(--ratio1) calc(var(--ratio1) + var(--ratio2)),
    var(--color3) calc(var(--ratio1) + var(--ratio2)) calc(var(--ratio1) + var(--ratio2) + var(--ratio3)),
    var(--color4) calc(100% - var(--ratio4)) 100%
  );
}

/* 女性 */
.membershipData_educational .-women {
  --ratio1: 71%;
  --ratio2: 7.7%;
  --ratio3: 8.3%;
  --ratio4: 13%;
  
}

.membershipData_educational .-women .membership_graphCircle {
  background-image: conic-gradient(
    var(--color1) 0% calc(0% + var(--ratio1)),
    var(--color2) var(--ratio1) calc(var(--ratio1) + var(--ratio2)),
    var(--color3) calc(var(--ratio1) + var(--ratio2)) calc(var(--ratio1) + var(--ratio2) + var(--ratio3)),
    var(--color4) calc(100% - var(--ratio4)) 100%
  );
}


/******************************
会員構成：収入別
******************************/
/* 男性 */
.membershipData_income {
  --ratio1: 15%;
  --ratio2: 20%;
  --ratio3: 35%;
  --ratio4: 19%;
  --ratio5: 11%;
}

.membershipData_income .-men .membership_graphCircle {
  background-image: conic-gradient(var(--color1) 0% calc(0% + var(--ratio1)),
    var(--color2) var(--ratio1) calc(var(--ratio1) + var(--ratio2)),
    var(--color3) calc(var(--ratio1) + var(--ratio2)) calc(var(--ratio1) + var(--ratio2) + var(--ratio3)),
    var(--color4) calc(var(--ratio1) + var(--ratio2) + var(--ratio3)) calc(var(--ratio1) + var(--ratio2) + var(--ratio3) + var(--ratio4)),
    var(--color5) calc(100% - var(--ratio5)) 100%);
}





/******************************
会員構成：医療職は成婚しやすい？
******************************/

.membershipEasy_container {
  padding-top: 160px;
  overflow: hidden;
}

.membershipEasy_dataContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 20px;
  background: #f2f2f2;
  padding: 0 24px;
  position: relative;
}

.membershipEasy_dataContainer::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 70px 400px 0 400px;
  border-color: #f2f2f2 transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: calc(50% - 400px);
}

.membershipEasy_dataContainer>*:not(.membershipEasy_dataNotes) {
  width: calc(50% - 10px);
  max-width: 350px;
  padding-top: 80px;
  position: relative;
}

.membershipEasy_dataTtl {
  width: 168px;
  position: absolute;
  top: -140px;
  left: calc(50% - 84px);
}

.membershipEasy_dataNotes {
  width: 100%;
  text-align: center;
  margin-top: 25px;
}

.membershipEasy .graphBar_bar {
  padding: 0 60px;
}

.membershipEasy .graphBar_bar>div {
  width: 60px;
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  .membershipEasy_container {
    /* padding-top: 160px; */
    padding-top: 0;
    overflow: visible;
  }

  .membershipEasy_dataContainer {
    flex-direction: column;
    align-items: center;
    background: transparent;
    padding: 0;
  }

  .membershipEasy_dataContainer::after {
    display: none;
  }

  .membershipEasy_dataContainer>*:not(.membershipEasy_dataNotes) {
    width: 100%;
    margin-top: 160px;
    background: #f2f2f2;
    padding: 80px 24px 30px;
  }

  .membershipEasy_dataTtl {
    width: 140px;
    top: -120px;
    left: calc(50% - 70px);
  }

  .membershipEasy .graphBar_bar {
    justify-content: space-around;
    padding: 0 10px 0 40px;
  }

  .membershipEasy .graphBar_bar>div {
    width: 55px;
  }
}


/* 会員構成：医療職は成婚しやすい：男性 */
.membershipEasy_man .graphBar {
  --cont1: 70;
  /* グラフ1の数値 */
  --cont2: 72;
  /* グラフ2の数値 */
  --cont3: 97;
  /* グラフ3の数値 */
  --max: 100;
  /* 区切り最大値 */
  --separate: 70;
  /* 区切り最小値 */
  --height: 60px;
  /* 区切りの高さ */
  --reminder: 100px;
  /* 区切り最小値以下の余白 */
}

.membershipEasy_man .graphBar_dataBox {
  padding-bottom: var(--reminder);
}

.membershipEasy_man .graphBar_line>div {
  height: var(--height);
}

.membershipEasy_man .graphBar_bar {
  height: calc(100% - var(--reminder));
}

.membershipEasy_man .graphBar_bar>div:nth-child(1) {
  background: #b3b3b3;
  height: calc((var(--cont1) - var(--separate)) / (var(--max) - var(--separate)) * 100% + var(--reminder));
}

.membershipEasy_man .graphBar_bar>div:nth-child(2) {
  background: #808080;
  height: calc((var(--cont2) - var(--separate)) / (var(--max) - var(--separate)) * 100% + var(--reminder));
}

.membershipEasy_man .graphBar_bar>div:nth-child(3) {
  background: #29abe2;
  height: calc((var(--cont3) - var(--separate)) / (var(--max) - var(--separate)) * 100% + var(--reminder));
}




/* 会員構成：医療職は成婚しやすい：女性 */
.membershipEasy_woman .graphBar {
  --cont1: 83;
  /* グラフ1の数値 */
  --cont2: 95;
  /* グラフ2の数値 */
  --cont3: 110;
  /* グラフ3の数値 */
  --max: 100;
  /* 区切り最大値 */
  --separate: 70;
  /* 区切り最小値 */
  --height: 60px;
  /* 区切りの高さ */
  --reminder: 100px;
  /* 区切り最小値以下の余白 */
}

.membershipEasy_woman .graphBar_dataBox {
  padding-bottom: var(--reminder);
}

.membershipEasy_woman .graphBar_line>div {
  height: var(--height);
}

.membershipEasy_woman .graphBar_bar {
  height: calc(100% - var(--reminder));
}

.membershipEasy_woman .graphBar_bar>div:nth-child(1) {
  background: #b3b3b3;
  height: calc((var(--cont1) - var(--separate)) / (var(--max) - var(--separate)) * 100% + var(--reminder));
}

.membershipEasy_woman .graphBar_bar>div:nth-child(2) {
  background: #808080;
  height: calc((var(--cont2) - var(--separate)) / (var(--max) - var(--separate)) * 100% + var(--reminder));
}

.membershipEasy_woman .graphBar_bar>div:nth-child(3) {
  background: #ea2f4e;
  height: calc((var(--cont3) - var(--separate)) / (var(--max) - var(--separate)) * 100% + var(--reminder));
}