@charset "UTF-8";
/* Scss Document */
/* CSS Document */
@font-face {
  font-family: 'mincho';
  src: url("../font/GenEiAntiquePv5-M.ttf"); }
html {
  scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  color: #170e0b; }
  body * {
    letter-spacing: 0.22em; }

picture {
  display: block; }

img {
  width: 100%; }

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0 auto;
  width: 100%;
  max-width: 750px;
  overflow: hidden; }

main {
  flex: 1;
  width: 100%; }

.font-din {
  font-family: din-2014, sans-serif;
  font-weight: 700;
  font-style: normal; }

.font-mincho {
  font-family: mincho, serif;
  font-style: normal;
  font-weight: normal; }

.blue {
  color: #10649e; }

.gray-blue {
  color: #59819d; }

.green {
  color: #3ba9b8; }

section {
  position: relative;
  width: 100%;
  margin: 0 auto; }

.inner {
  width: 100%;
  margin: 0 auto;
  position: relative; }

/*------------------FV------------------*/
.fv--head {
  height: 78.1333333333vw;
  background: url("../img/fv_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative; }
  @media only screen and (min-width: 750px) {
    .fv--head {
      height: 586px; } }
  .fv--head .inner {
    width: 100%;
    height: 100%; }
  .fv--head--ttl {
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    color: #fff;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 4.8vw;
    position: relative;
    top: 4.2666666667vw;
    left: 6.1333333333vw; }
    @media only screen and (min-width: 750px) {
      .fv--head--ttl {
        font-size: 36px;
        top: 32px;
        left: 46px; } }
    .fv--head--ttl span {
      padding: 3.2vw 1.8666666667vw;
      background: #10649e; }
      @media only screen and (min-width: 750px) {
        .fv--head--ttl span {
          padding: 24px 14px; } }
      .fv--head--ttl span + span {
        margin-right: 2.1333333333vw; }
        @media only screen and (min-width: 750px) {
          .fv--head--ttl span + span {
            margin-right: 16px; } }
  .fv--head p {
    color: #fff;
    font-size: 8vw;
    position: absolute;
    bottom: 2.1333333333vw;
    right: 3.7333333333vw; }
    @media only screen and (min-width: 750px) {
      .fv--head p {
        font-size: 60px;
        bottom: 16px;
        right: 28px; } }
.fv--content {
  background: #10649e;
  padding: 2.9333333333vw 0 4.8vw;
  position: relative; }
  @media only screen and (min-width: 750px) {
    .fv--content {
      padding: 22px 0 36px; } }
  .fv--content::before {
    content: "";
    width: 33.7333333333vw;
    height: 44.6666666667vw;
    background: url(../img/fv_img_man.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    bottom: 0;
    left: 4.2666666667vw; }
    @media only screen and (min-width: 750px) {
      .fv--content::before {
        width: 253px;
        height: 335px;
        left: 32px; } }
  .fv--content::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 2.9333333333vw 2.5333333333vw 0 2.5333333333vw;
    border-color: #10649e transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; }
    @media only screen and (min-width: 750px) {
      .fv--content::after {
        border-width: 22px 19px 0 19px; } }
  .fv--content .inner {
    padding: 0 4.5333333333vw; }
    @media only screen and (min-width: 750px) {
      .fv--content .inner {
        padding: 0 34px; } }
  .fv--content--ttl {
    display: flex;
    justify-content: flex-end; }
    .fv--content--ttl p {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      .fv--content--ttl p > span:nth-child(1) {
        color: #10649e;
        background: #fff;
        font-size: 7.4666666667vw;
        padding: 0.5333333333vw 11.4666666667vw 1.0666666667vw;
        border-radius: 9999px; }
        @media only screen and (min-width: 750px) {
          .fv--content--ttl p > span:nth-child(1) {
            font-size: 56px;
            padding: 4px 86px 8px; } }
      .fv--content--ttl p > span:nth-child(2) {
        color: #fff;
        font-size: 5.2vw;
        margin-top: 2.4vw;
        letter-spacing: 0.16em; }
        @media only screen and (min-width: 750px) {
          .fv--content--ttl p > span:nth-child(2) {
            font-size: 39px;
            margin-top: 18px; } }
      .fv--content--ttl p > span:nth-child(3) {
        color: #fef099;
        font-size: 12.5333333333vw;
        margin-top: -2.1333333333vw;
        letter-spacing: 0.06em; }
        @media only screen and (min-width: 750px) {
          .fv--content--ttl p > span:nth-child(3) {
            font-size: 94px;
            margin-top: -16px; } }
        .fv--content--ttl p > span:nth-child(3) .large {
          font-size: 16vw;
          letter-spacing: 0.06em;
          position: relative;
          top: 1.0666666667vw; }
          @media only screen and (min-width: 750px) {
            .fv--content--ttl p > span:nth-child(3) .large {
              font-size: 120px;
              top: 8px; } }

/*------------------紹介------------------*/
.introduction {
  background: url(../img/comparison-table_bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top 0 center; }
  .introduction--comparison-table {
    padding: 6.1333333333vw 2.6666666667vw 9.6vw;
    text-align: center; }
    @media only screen and (min-width: 750px) {
      .introduction--comparison-table {
        padding: 46px 20px 72px; } }
    .introduction--comparison-table--ttl {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 7.2vw; }
      @media only screen and (min-width: 750px) {
        .introduction--comparison-table--ttl {
          font-size: 54px; } }
      .introduction--comparison-table--ttl span {
        letter-spacing: 0.16em; }
        .introduction--comparison-table--ttl span.bouten {
          margin-top: -0.2em;
          font-size: 9.2vw;
          padding-top: .8em;
          background-position: top left -0.1em;
          background-repeat: repeat-x;
          background-size: 1.14em 1.14em;
          background-image: radial-gradient(#fff 8%, transparent 9%); }
          @media only screen and (min-width: 750px) {
            .introduction--comparison-table--ttl span.bouten {
              font-size: 69px; } }
      .introduction--comparison-table--ttl + p {
        background: #fff;
        color: #51a8ce;
        border-radius: 9999px;
        line-height: 1.61;
        font-size: 4.8vw;
        margin-top: 2.6666666667vw; }
        @media only screen and (min-width: 750px) {
          .introduction--comparison-table--ttl + p {
            font-size: 36px;
            margin-top: 20px; } }
    .introduction--comparison-table--ranking {
      margin-top: 9.3333333333vw;
      display: flex;
      justify-content: space-between; }
      @media only screen and (min-width: 750px) {
        .introduction--comparison-table--ranking {
          margin-top: 70px; } }
      .introduction--comparison-table--ranking--item {
        width: 32.6%;
        background: #fff;
        display: flex;
        flex-direction: column; }
        .introduction--comparison-table--ranking--item h3 {
          color: #fff;
          background: #10649e;
          height: 13.3333333333vw;
          font-size: 2.8vw;
          line-height: 1.43;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative; }
          @media only screen and (min-width: 750px) {
            .introduction--comparison-table--ranking--item h3 {
              height: 100px;
              font-size: 21px; } }
          .introduction--comparison-table--ranking--item h3::before {
            content: "";
            width: 6.9333333333vw;
            height: 9.7333333333vw;
            background: url("../img/introduction_ranking_01_deco.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            position: absolute;
            top: -3.4666666667vw;
            left: -1.2vw; }
            @media only screen and (min-width: 750px) {
              .introduction--comparison-table--ranking--item h3::before {
                width: 52px;
                height: 73px;
                top: -26px;
                left: -9px; } }
        .introduction--comparison-table--ranking--item picture {
          height: 32.2666666667vw;
          display: flex;
          justify-content: center;
          align-items: center; }
          @media only screen and (min-width: 750px) {
            .introduction--comparison-table--ranking--item picture {
              height: 242px; } }
          .introduction--comparison-table--ranking--item picture img {
            width: 28vw; }
            @media only screen and (min-width: 750px) {
              .introduction--comparison-table--ranking--item picture img {
                width: 210px; } }
        .introduction--comparison-table--ranking--item dl dt {
          background: #10649e;
          color: #fff;
          font-size: 2.4vw;
          line-height: 2; }
          @media only screen and (min-width: 750px) {
            .introduction--comparison-table--ranking--item dl dt {
              font-size: 18px; } }
        .introduction--comparison-table--ranking--item dl dd {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 13.3333333333vw;
          font-size: 3.2vw; }
          @media only screen and (min-width: 750px) {
            .introduction--comparison-table--ranking--item dl dd {
              height: 100px;
              font-size: 24px; } }
          .introduction--comparison-table--ranking--item dl dd .font-din {
            font-size: 7.0666666667vw;
            letter-spacing: 0.02em;
            line-height: 0.8; }
            @media only screen and (min-width: 750px) {
              .introduction--comparison-table--ranking--item dl dd .font-din {
                font-size: 53px; } }
          .introduction--comparison-table--ranking--item dl dd .yen {
            position: relative; }
            .introduction--comparison-table--ranking--item dl dd .yen .tax {
              font-size: 0.2em;
              letter-spacing: 0;
              white-space: nowrap;
              position: absolute;
              bottom: 5.8em;
              left: 0.2em; }
          .introduction--comparison-table--ranking--item dl dd .note {
            font-size: 1.8666666667vw; }
            @media only screen and (min-width: 750px) {
              .introduction--comparison-table--ranking--item dl dd .note {
                font-size: 14px; } }
          .introduction--comparison-table--ranking--item dl dd .small {
            font-size: 3.2vw; }
            @media only screen and (min-width: 750px) {
              .introduction--comparison-table--ranking--item dl dd .small {
                font-size: 24px; } }
        .introduction--comparison-table--ranking--item dl.large {
          flex: 1;
          display: flex;
          flex-direction: column; }
          .introduction--comparison-table--ranking--item dl.large dd {
            flex: 1;
            height: auto;
            padding: 4vw 0; }
            @media only screen and (min-width: 750px) {
              .introduction--comparison-table--ranking--item dl.large dd {
                height: auto;
                padding: 30px 0; } }
            .introduction--comparison-table--ranking--item dl.large dd .small {
              margin-top: 2.1333333333vw;
              display: inline-block;
              padding: 0 1.3333333333vw;
              font-size: 1.8666666667vw;
              font-weight: 500;
              text-align: justify;
              letter-spacing: 0.04em;
              line-height: 1.5; }
              @media only screen and (min-width: 750px) {
                .introduction--comparison-table--ranking--item dl.large dd .small {
                  margin-top: 16px;
                  padding: 0 10px;
                  font-size: 14px; } }
        .introduction--comparison-table--ranking--item + li h3 {
          background: #59819d; }
          .introduction--comparison-table--ranking--item + li h3::before {
            background: url("../img/introduction_ranking_02_deco.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center; }
        .introduction--comparison-table--ranking--item + li dl dt {
          background: #59819d; }
        .introduction--comparison-table--ranking--item + li + li h3::before {
          background: url("../img/introduction_ranking_03_deco.png");
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center; }
  .introduction--point--ttl {
    padding: 4.8vw 5.0666666667vw 20.8vw 8.2666666667vw;
    display: flex;
    justify-content: space-between;
    position: relative; }
    @media only screen and (min-width: 750px) {
      .introduction--point--ttl {
        padding: 36px 38px 156px 62px; } }
    .introduction--point--ttl::before {
      content: "";
      width: 40.5333333333vw;
      height: 45.6vw;
      background: url("../img/point_ttl_img_man.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: absolute;
      top: 0.2666666667vw;
      left: 29.8666666667vw; }
      @media only screen and (min-width: 750px) {
        .introduction--point--ttl::before {
          width: 304px;
          height: 342px;
          top: 2px;
          left: 224px; } }
    .introduction--point--ttl span {
      color: #fff;
      font-size: 10.5333333333vw;
      letter-spacing: 0.16em; }
      @media only screen and (min-width: 750px) {
        .introduction--point--ttl span {
          font-size: 79px; } }
  .introduction--point--content {
    background: #fff;
    padding: 12.8vw 1.6vw 15.4666666667vw; }
    @media only screen and (min-width: 750px) {
      .introduction--point--content {
        padding: 96px 12px 116px; } }
    .introduction--point--content::before, .introduction--point--content::after {
      content: "";
      width: 50%;
      height: 28vw;
      background: linear-gradient(to bottom left, transparent 50%, #51a8ce 50.1%);
      position: absolute;
      bottom: 0;
      left: 0; }
      @media only screen and (min-width: 750px) {
        .introduction--point--content::before, .introduction--point--content::after {
          height: 210px; } }
    .introduction--point--content::after {
      background: linear-gradient(to bottom right, transparent 50%, #51a8ce 50.1%);
      left: auto;
      right: 0; }
    .introduction--point--content--ttl {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 6.4vw;
      position: relative;
      padding-bottom: 4.2666666667vw; }
      @media only screen and (min-width: 750px) {
        .introduction--point--content--ttl {
          font-size: 48px;
          padding-bottom: 32px; } }
      .introduction--point--content--ttl::after {
        content: "";
        width: 60vw;
        height: 2vw;
        background: url("../img/point_content_ttl_deco.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%); }
        @media only screen and (min-width: 750px) {
          .introduction--point--content--ttl::after {
            width: 450px;
            height: 15px; } }
      .introduction--point--content--ttl .bg-yellow {
        background: #fff600;
        padding: 0.5333333333vw 1.8666666667vw;
        margin-top: 3.2vw; }
        @media only screen and (min-width: 750px) {
          .introduction--point--content--ttl .bg-yellow {
            padding: 4px 14px;
            margin-top: 24px; } }
    .introduction--point--content--point-list {
      margin-top: 5.6vw;
      position: relative;
      z-index: 1; }
      @media only screen and (min-width: 750px) {
        .introduction--point--content--point-list {
          margin-top: 42px; } }
      .introduction--point--content--point-list--item--head {
        background: #10649e;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 0 6.1333333333vw;
        border-radius: 9999px;
        height: 16.8vw;
        width: 97.0666666667vw;
        position: absolute; }
        @media only screen and (min-width: 750px) {
          .introduction--point--content--point-list--item--head {
            padding: 0 46px;
            height: 126px;
            width: 728px; } }
        .introduction--point--content--point-list--item--head .number {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding-right: 3.7333333333vw;
          position: relative; }
          @media only screen and (min-width: 750px) {
            .introduction--point--content--point-list--item--head .number {
              padding-right: 28px; } }
          .introduction--point--content--point-list--item--head .number::before {
            content: "";
            width: 0.2666666667vw;
            height: 6.4vw;
            background: #fff;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%); }
            @media only screen and (min-width: 750px) {
              .introduction--point--content--point-list--item--head .number::before {
                width: 2px;
                height: 48px; } }
          .introduction--point--content--point-list--item--head .number span:nth-child(1) {
            font-size: 1.8666666667vw; }
            @media only screen and (min-width: 750px) {
              .introduction--point--content--point-list--item--head .number span:nth-child(1) {
                font-size: 14px; } }
          .introduction--point--content--point-list--item--head .number span:nth-child(2) {
            font-size: 5.0666666667vw; }
            @media only screen and (min-width: 750px) {
              .introduction--point--content--point-list--item--head .number span:nth-child(2) {
                font-size: 38px; } }
        .introduction--point--content--point-list--item--head h4 {
          font-size: 4.4vw;
          line-height: 1.39;
          text-align: center;
          flex: 1; }
          @media only screen and (min-width: 750px) {
            .introduction--point--content--point-list--item--head h4 {
              font-size: 33px; } }
      .introduction--point--content--point-list--item--content {
        border: 0.8vw solid #10649e;
        border-radius: 5.2vw;
        margin: 0 2.8vw;
        padding: 23.7333333333vw 5.0666666667vw 8.5333333333vw;
        background: #fff; }
        @media only screen and (min-width: 750px) {
          .introduction--point--content--point-list--item--content {
            border: 6px solid #10649e;
            border-radius: 39px;
            margin: 0 21px;
            padding: 178px 38px 64px; } }
        .introduction--point--content--point-list--item--content p {
          font-size: 3.2vw;
          line-height: 2;
          text-align: justify; }
          @media only screen and (min-width: 750px) {
            .introduction--point--content--point-list--item--content p {
              font-size: 24px; } }
      .introduction--point--content--point-list--item + li {
        margin-top: 9.0666666667vw; }
        @media only screen and (min-width: 750px) {
          .introduction--point--content--point-list--item + li {
            margin-top: 68px; } }

/*------------------ランキング------------------*/
.ranking {
  background: #51a8ce;
  padding: 10.4vw 5.0666666667vw 28.8vw;
  position: relative; }
  @media only screen and (min-width: 750px) {
    .ranking {
      padding: 78px 38px 216px; } }
  .ranking::after {
    content: "Men’s CLINIC";
    color: #fff;
    font-size: 8vw;
    font-family: din-2014, sans-serif;
    letter-spacing: 0.22em;
    white-space: nowrap;
    position: absolute;
    bottom: 5.6vw;
    left: 50%;
    transform: translateX(-50%); }
    @media only screen and (min-width: 750px) {
      .ranking::after {
        font-size: 60px;
        bottom: 42px; } }
  .ranking--ttl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .ranking--ttl .sub {
      color: #51a8ce;
      background: #fff;
      border-radius: 9999px;
      padding: 0 7.4666666667vw;
      font-size: 4.2666666667vw;
      line-height: 1.69; }
      @media only screen and (min-width: 750px) {
        .ranking--ttl .sub {
          padding: 0 56px;
          font-size: 32px; } }
    .ranking--ttl .main {
      color: #fff;
      font-size: 8.2666666667vw;
      margin-top: 3.2vw; }
      @media only screen and (min-width: 750px) {
        .ranking--ttl .main {
          font-size: 62px;
          margin-top: 24px; } }
      .ranking--ttl .main .yellow {
        color: #fff600;
        font-size: 10.6666666667vw; }
        @media only screen and (min-width: 750px) {
          .ranking--ttl .main .yellow {
            font-size: 80px; } }
  .ranking--ranking {
    margin-top: 21.3333333333vw; }
    @media only screen and (min-width: 750px) {
      .ranking--ranking {
        margin-top: 160px; } }
    .ranking--ranking--item {
      background: #fff;
      padding: 12.2666666667vw 5.3333333333vw 9.6vw;
      position: relative; }
      @media only screen and (min-width: 750px) {
        .ranking--ranking--item {
          padding: 92px 40px 72px; } }
      .ranking--ranking--item * {
        position: relative;
        z-index: 1; }
      .ranking--ranking--item h3 {
        background: #fff;
        border-radius: 50%;
        width: 35.2vw;
        height: 35.2vw;
        display: flex;
        justify-content: center;
        position: absolute;
        top: -12.2666666667vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0; }
        @media only screen and (min-width: 750px) {
          .ranking--ranking--item h3 {
            width: 264px;
            height: 264px;
            top: -92px; } }
        .ranking--ranking--item h3 > span {
          margin-top: 12.2666666667vw;
          font-size: 4.6666666667vw;
          position: relative; }
          @media only screen and (min-width: 750px) {
            .ranking--ranking--item h3 > span {
              margin-top: 92px;
              font-size: 35px; } }
          .ranking--ranking--item h3 > span::before {
            content: "";
            width: 11.8666666667vw;
            height: 5.3333333333vw;
            background: url("../img/ranking_01_crown.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            position: absolute;
            top: -5.8666666667vw;
            left: 50%;
            transform: translateX(-50%); }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item h3 > span::before {
                width: 89px;
                height: 40px;
                top: -44px; } }
          .ranking--ranking--item h3 > span .font-din {
            font-size: 7.2vw; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item h3 > span .font-din {
                font-size: 54px; } }
      .ranking--ranking--item h4 {
        width: 41.6vw;
        margin: 0 auto 5.0666666667vw; }
        @media only screen and (min-width: 750px) {
          .ranking--ranking--item h4 {
            width: 312px;
            margin: 0 auto 38px; } }
      .ranking--ranking--item--benefit-list {
        margin-top: 5.6vw; }
        @media only screen and (min-width: 750px) {
          .ranking--ranking--item--benefit-list {
            margin-top: 42px; } }
        .ranking--ranking--item--benefit-list li {
          background: #dcf1f4; }
          .ranking--ranking--item--benefit-list li dt {
            background: #3ba9b8;
            color: #fff;
            font-size: 3.3333333333vw;
            line-height: 1.29;
            letter-spacing: 0.18em;
            padding: 1.3333333333vw 2.9333333333vw 1.3333333333vw 8.5333333333vw;
            text-align: center; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--benefit-list li dt {
                font-size: 25px;
                padding: 10px 22px 10px 64px; } }
            .ranking--ranking--item--benefit-list li dt::before {
              content: "";
              width: 9.2vw;
              height: 9.2vw;
              background: url("../img/ranking_benefit_icon.png");
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              position: absolute;
              top: -0.5333333333vw;
              left: -2.4vw; }
              @media only screen and (min-width: 750px) {
                .ranking--ranking--item--benefit-list li dt::before {
                  width: 69px;
                  height: 69px;
                  top: -4px;
                  left: -18px; } }
            .ranking--ranking--item--benefit-list li dt .small {
              font-size: 0.5em;
              letter-spacing: 0; }
          .ranking--ranking--item--benefit-list li dd {
            padding: 4vw 2.9333333333vw 4.5333333333vw;
            font-size: 3.2vw;
            font-weight: 500;
            line-height: 1.875;
            text-align: justify;
            letter-spacing: 0.2em; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--benefit-list li dd {
                padding: 30px 22px 34px;
                font-size: 24px; } }
            .ranking--ranking--item--benefit-list li dd .small {
              font-size: 0.5em;
              letter-spacing: 0; }
            .ranking--ranking--item--benefit-list li dd .note {
              font-size: 2.4vw; }
              @media only screen and (min-width: 750px) {
                .ranking--ranking--item--benefit-list li dd .note {
                  font-size: 18px; } }
          .ranking--ranking--item--benefit-list li + li {
            margin-top: 5.6vw; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--benefit-list li + li {
                margin-top: 42px; } }
      .ranking--ranking--item--charge {
        margin-top: 11.7333333333vw; }
        @media only screen and (min-width: 750px) {
          .ranking--ranking--item--charge {
            margin-top: 88px; } }
        .ranking--ranking--item--charge h5 {
          color: #fff;
          background: #10649e;
          font-size: 4.8vw;
          line-height: 9.6vw;
          text-align: center; }
          @media only screen and (min-width: 750px) {
            .ranking--ranking--item--charge h5 {
              font-size: 36px;
              line-height: 72px; } }
          .ranking--ranking--item--charge h5::before {
            content: "";
            width: 8.9333333333vw;
            height: 8.9333333333vw;
            background: url("../img/ranking_charge_ttl_icon.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            position: absolute;
            top: -3.2vw;
            left: -0.8vw; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--charge h5::before {
                width: 67px;
                height: 67px;
                top: -24px;
                left: -6px; } }
        .ranking--ranking--item--charge dl {
          display: flex;
          text-align: center; }
          .ranking--ranking--item--charge dl dt {
            font-size: 2.4vw;
            line-height: 9.3333333333vw;
            width: 25.8666666667vw;
            background: #10649e;
            color: #fff;
            border-top: 0.1333333333vw solid #fff;
            border-bottom: 0.1333333333vw solid #fff;
            display: flex;
            justify-content: center;
            align-items: center; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--charge dl dt {
                font-size: 18px;
                line-height: 70px;
                width: 194px;
                border-top: 1px solid #fff;
                border-bottom: 1px solid #fff; } }
          .ranking--ranking--item--charge dl dd {
            flex: 1;
            font-size: 3.2vw;
            border: 0.1333333333vw solid #10649e;
            display: flex;
            align-items: center;
            justify-content: center; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--charge dl dd {
                font-size: 24px;
                border: 1px solid #10649e; } }
            .ranking--ranking--item--charge dl dd .font-din {
              font-size: 7.0666666667vw;
              letter-spacing: 0.02em; }
              @media only screen and (min-width: 750px) {
                .ranking--ranking--item--charge dl dd .font-din {
                  font-size: 53px; } }
            .ranking--ranking--item--charge dl dd .yen {
              position: relative;
              top: 0.2em; }
              .ranking--ranking--item--charge dl dd .yen .tax {
                font-size: 0.4em;
                letter-spacing: 0;
                position: absolute;
                bottom: 2.6em;
                left: 0em;
                white-space: nowrap; }
            .ranking--ranking--item--charge dl dd.clinic {
              flex-direction: column;
              padding: 0.8vw 0 2.1333333333vw; }
              @media only screen and (min-width: 750px) {
                .ranking--ranking--item--charge dl dd.clinic {
                  padding: 6px 0 16px; } }
              .ranking--ranking--item--charge dl dd.clinic .small {
                display: inline-block;
                font-size: 1.8666666667vw;
                line-height: 1.5;
                text-align: justify;
                padding: 0 1.8666666667vw; }
                @media only screen and (min-width: 750px) {
                  .ranking--ranking--item--charge dl dd.clinic .small {
                    font-size: 14px;
                    padding: 0 14px; } }
      .ranking--ranking--item--cta {
        margin-top: 4.8vw; }
        @media only screen and (min-width: 750px) {
          .ranking--ranking--item--cta {
            margin-top: 36px; } }
        .ranking--ranking--item--cta dl dt {
          display: flex;
          justify-content: flex-start;
          width: 100%;
          padding-top: 2.4vw; }
          @media only screen and (min-width: 750px) {
            .ranking--ranking--item--cta dl dt {
              padding-top: 18px; } }
          .ranking--ranking--item--cta dl dt h5 {
            font-size: 4vw;
            line-height: 1.23;
            letter-spacing: 0.16em;
            text-align: center;
            padding: 4.8vw 2.9333333333vw 3.4666666667vw 0;
            position: relative; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--cta dl dt h5 {
                font-size: 30px;
                padding: 36px 22px 26px 0; } }
            .ranking--ranking--item--cta dl dt h5::after {
              content: "";
              width: 8.4vw;
              height: 17.6vw;
              background: url("../img/ranking_cta_baloon_deco.png");
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              position: absolute;
              top: 0;
              right: 0; }
              @media only screen and (min-width: 750px) {
                .ranking--ranking--item--cta dl dt h5::after {
                  width: 63px;
                  height: 132px; } }
          .ranking--ranking--item--cta dl dt picture {
            width: 20.6666666667vw;
            position: absolute;
            right: 1.0666666667vw;
            top: 0; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--cta dl dt picture {
                width: 155px;
                right: 8px; } }
        .ranking--ranking--item--cta dl dd a {
          display: block;
          background: #f58b02;
          border: 0.5333333333vw solid #ffc67c;
          border-radius: 9999px;
          color: #fff;
          width: 100%;
          padding: 3.7333333333vw 0;
          z-index: 3; }
          @media only screen and (min-width: 750px) {
            .ranking--ranking--item--cta dl dd a {
              font-size: 16px;
              border: 4px solid #ffc67c;
              padding: 28px 0; } }
          .ranking--ranking--item--cta dl dd a::after {
            content: "";
            width: 1.7333333333vw;
            height: 3.8666666667vw;
            background: url("../img/ranking_cta_btn_arrow.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            position: absolute;
            top: 50%;
            right: 6.6666666667vw;
            transform: translateY(-50%); }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--cta dl dd a::after {
                width: 13px;
                height: 29px;
                right: 50px; } }
          .ranking--ranking--item--cta dl dd a p {
            text-align: center;
            font-size: 4.8vw;
            letter-spacing: 0.1em;
            font-weight: 500; }
            @media only screen and (min-width: 750px) {
              .ranking--ranking--item--cta dl dd a p {
                font-size: 36px; } }
            .ranking--ranking--item--cta dl dd a p + p {
              margin-top: 1.6vw;
              font-size: 2.1333333333vw;
              font-weight: 700; }
              @media only screen and (min-width: 750px) {
                .ranking--ranking--item--cta dl dd a p + p {
                  margin-top: 12px;
                  font-size: 16px; } }
      .ranking--ranking--item + li {
        margin-top: 31.3333333333vw; }
        @media only screen and (min-width: 750px) {
          .ranking--ranking--item + li {
            margin-top: 235px; } }
      .ranking--ranking--item:nth-child(2) h3 > span::before {
        background: url("../img/ranking_02_crown.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center; }
      .ranking--ranking--item:nth-child(2) h4 {
        width: 50vw; }
        @media only screen and (min-width: 750px) {
          .ranking--ranking--item:nth-child(2) h4 {
            width: 375px; } }
      .ranking--ranking--item:nth-child(3) h3 > span::before {
        background: url("../img/ranking_03_crown.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center; }
      .ranking--ranking--item:nth-child(3) h4 {
        width: 52.1333333333vw; }
        @media only screen and (min-width: 750px) {
          .ranking--ranking--item:nth-child(3) h4 {
            width: 391px; } }

/*----------------まとめ summary----------------*/
.summary--content {
  position: relative;
  padding: 16.2666666667vw 0 21.3333333333vw 9.8666666667vw;
  background: #f8f8f8; }
  @media only screen and (min-width: 750px) {
    .summary--content {
      padding: 122px 0 160px 74px; } }
  .summary--content h2 {
    background: #16486b;
    border: 0.5333333333vw solid #fff;
    border-radius: 1.3333333333vw;
    padding: 0.5333333333vw 0.5333333333vw;
    height: 13.4666666667vw;
    position: absolute;
    top: -18.6666666667vw;
    left: 10.1333333333vw;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media only screen and (min-width: 750px) {
      .summary--content h2 {
        border: 4px solid #fff;
        padding: 2px 4px;
        height: 101px;
        border-radius: 10px;
        top: -140px;
        left: 76px; } }
    .summary--content h2 span {
      background: #10649e;
      color: #fff;
      font-size: 6.4vw;
      line-height: 11.3333333333vw;
      padding: 0 19.2vw;
      white-space: nowrap;
      border-radius: 0.4vw; }
      @media only screen and (min-width: 750px) {
        .summary--content h2 span {
          font-size: 48px;
          line-height: 85px;
          padding: 0 144px;
          border-radius: 3px; } }
  .summary--content p {
    font-size: 3.7333333333vw;
    line-height: 1.71;
    letter-spacing: 0.14em;
    width: 81.7333333333vw; }
    @media only screen and (min-width: 750px) {
      .summary--content p {
        font-size: 28px;
        width: 613px; } }
    .summary--content p .blue {
      font-weight: 900; }
    .summary--content p + p {
      margin-top: 6.6666666667vw; }
      @media only screen and (min-width: 750px) {
        .summary--content p + p {
          margin-top: 50px; } }
.summary--footer {
  background: #51a8ce;
  padding: 6.9333333333vw 0 9.0666666667vw;
  text-align: center;
  position: relative; }
  @media only screen and (min-width: 750px) {
    .summary--footer {
      padding: 52px 0 68px; } }
  .summary--footer::after {
    content: "";
    width: 34.6666666667vw;
    height: 38.6666666667vw;
    background: url("../img/summary_footer_img_man.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); }
    @media only screen and (min-width: 750px) {
      .summary--footer::after {
        width: 260px;
        height: 290px; } }
  .summary--footer p {
    color: #fff;
    letter-spacing: 0.22em;
    font-size: 8vw; }
    @media only screen and (min-width: 750px) {
      .summary--footer p {
        font-size: 60px; } }

/*------------------フッター------------------*/
footer {
  text-align: center;
  padding: 4.2666666667vw 0;
  background: #170e0b;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center; }
  @media only screen and (min-width: 750px) {
    footer {
      padding: 32px 0; } }
  footer a {
    color: #fff;
    font-size: 2.6666666667vw;
    text-decoration: underline;
    margin-bottom: 2.6666666667vw; }
    @media only screen and (min-width: 750px) {
      footer a {
        font-size: 20px;
        margin-bottom: 20px; } }
  footer small {
    color: #fff;
    font-size: 2.6666666667vw; }
    @media only screen and (min-width: 750px) {
      footer small {
        font-size: 20px; } }