@charset "UTF-8";
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
/*--------------------
共通設定
----------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a {
  text-decoration: none;
  color: #171717;
  transition: .4s; }
  a:hover {
    color: #171717; }
  a:visited {
    color: transparent; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }

ul, ol {
  list-style: none; }

.pc {
  display: block; }
  @media screen and (max-width: 1080px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 1080px) {
    .sp {
      display: block; } }

p {
  margin: 0;
  padding: 0; }

/*--------------------- ここから ----------------------*/
main {
  width: 90%;
  margin: 0 auto 15%;
  padding-top: 60px;
  overflow-x: hidden;
  max-width: 1800px; }
  @media screen and (max-width: 1920px) {
    main {
      max-width: 1500px; } }
  @media screen and (max-width: 600px) {
    main {
      margin-bottom: 15%;
      width: 100%; } }

.wrapper {
  background: rgba(236, 104, 0, 0.1);
  /*member*/ }
  .wrapper .member {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    text-align: center; }
    .wrapper .member .mv {
      margin-bottom: 15vh; }
    .wrapper .member h1 {
      font-size: 1.2em;
      margin-bottom: 2.0em;
      font-weight: 700; }
      @media screen and (max-width: 600px) {
        .wrapper .member h1 {
          font-size: 3.2vw; } }
    .wrapper .member p {
      font-size: 1.2em;
      font-weight: 700;
      line-height: 2.0; }
      @media screen and (max-width: 600px) {
        .wrapper .member p {
          font-size: 3.0vw; } }
    .wrapper .member .member_btn {
      width: 80%;
      margin: 10vh auto; }
      .wrapper .member .member_btn a {
        background: #ec6800;
        color: #ffffff;
        font-weight: 700;
        text-align: center;
        display: block;
        padding: 1.0em;
        letter-spacing: 0.1em;
        position: relative;
        border: 1px solid #ec6800; }
        @media screen and (max-width: 600px) {
          .wrapper .member .member_btn a {
            font-size: 3.0vw;
            font-weight: 400; } }
        .wrapper .member .member_btn a::after {
          position: absolute;
          content: "";
          width: 8px;
          height: 8px;
          border-bottom: 1px solid #ffffff;
          border-left: 1px solid #ffffff;
          transform: translateY(-50%) rotate(-135deg);
          top: 50%;
          right: 2.0em; }
        .wrapper .member .member_btn a:hover {
          color: #ec6800;
          background: #ffffff; }
          .wrapper .member .member_btn a:hover::after {
            border-bottom: 1px solid #ec6800;
            border-left: 1px solid #ec6800; }
    .wrapper .member .benefit {
      margin: 15vh auto;
      width: 80%; }
      .wrapper .member .benefit ul {
        display: flex;
        align-items: flex-end;
        justify-content: space-between; }
        .wrapper .member .benefit ul li {
          width: calc(100%/3 - 2%); }
      .wrapper .member .benefit .at {
        font-size: 1.0em;
        text-align: right;
        color: #ec6800;
        letter-spacing: 1px;
        line-height: 3.0;
        font-weight: 400; }
        @media screen and (max-width: 600px) {
          .wrapper .member .benefit .at {
            font-size: 2.7vw; } }
      .wrapper .member .benefit .anchor_btn {
        display: block;
        margin: 5vh auto;
        border: 1px solid #ec6800;
        background: #ffffff;
        color: #ec6800;
        padding: 1.0em;
        font-size: 1.0em;
        font-weight: 700;
        position: relative; }
        @media screen and (max-width: 600px) {
          .wrapper .member .benefit .anchor_btn {
            font-size: 3.0vw;
            font-weight: 400; } }
        .wrapper .member .benefit .anchor_btn::after {
          content: "";
          position: absolute;
          width: 8px;
          height: 8px;
          border-bottom: 1px solid #ec6800;
          border-left: 1px solid #ec6800;
          transform: translateY(-50%) rotate(-45deg);
          top: 50%;
          right: 2.0em; }
        .wrapper .member .benefit .anchor_btn:hover {
          background: #ec6800;
          color: #ffffff; }
          .wrapper .member .benefit .anchor_btn:hover::after {
            border-bottom: 1px solid #ffffff;
            border-left: 1px solid #ffffff; }
    .wrapper .member section {
      margin: 15vh auto; }
      .wrapper .member section .box {
        width: 80%;
        margin: 5vh auto;
        border: 1px solid #ec6800;
        border-radius: 1.0em;
        background: #ffffff;
        padding: 2.0em;
        position: relative;
        overflow: hidden; }
        .wrapper .member section .box p {
          font-size: 1.1em; }
          @media screen and (max-width: 600px) {
            .wrapper .member section .box p {
              font-size: 3.0vw; } }
          .wrapper .member section .box p.ttl {
            position: absolute;
            color: #ec6800;
            background: rgba(236, 104, 0, 0.2);
            top: 0;
            left: 0;
            padding: 0.7em 1.0em;
            border-bottom-right-radius: 1.0em;
            border: solid #ec6800;
            border-width: 0 1px 1px 0;
            box-sizing: border-box;
            line-height: 1.0;
            font-size: 1.2em; }
            @media screen and (max-width: 600px) {
              .wrapper .member section .box p.ttl {
                font-size: 3.2vw; } }
          .wrapper .member section .box p a {
            text-decoration: underline !important; }
          .wrapper .member section .box p span {
            color: #ec6800; }
        .wrapper .member section .box h3 {
          font-size: 1.3em;
          margin: 1.0em auto;
          font-weight: 700; }
          @media screen and (max-width: 600px) {
            .wrapper .member section .box h3 {
              font-size: 3.5vw; } }
          .wrapper .member section .box h3 span {
            color: #ec6800;
            font-size: 100%; }
      .wrapper .member section p.attention {
        font-size: .9em;
        font-weight: 400; }
        @media screen and (max-width: 600px) {
          .wrapper .member section p.attention {
            font-size: 2.8vw;
            text-align: left;
            width: 80%;
            margin: 0 auto; } }
      .wrapper .member section h2 {
        color: #ec6800;
        text-align: left;
        font-size: 1.5em;
        margin-bottom: 1.0em;
        font-weight: 700; }
        @media screen and (max-width: 600px) {
          .wrapper .member section h2 {
            font-size: 3.7vw; } }
      .wrapper .member section.rank {
        width: 95%; }
        .wrapper .member section.rank p {
          font-size: 1.0em;
          text-align: left; }
          @media screen and (max-width: 600px) {
            .wrapper .member section.rank p {
              font-size: 2.8vw;
              font-weight: 400; } }
        .wrapper .member section.rank table {
          margin: 5vh auto;
          border-collapse: collapse;
          width: 100%;
          background: #ffffff; }
          .wrapper .member section.rank table th, .wrapper .member section.rank table td {
            border: 1px solid;
            padding: 1.0em 0;
            font-size: 1.0em;
            border: 1px solid #171717;
            font-weight: 700; }
            @media screen and (max-width: 600px) {
              .wrapper .member section.rank table th, .wrapper .member section.rank table td {
                font-size: 2.3vw;
                padding: 1.0em 0.3em;
                font-weight: 400; } }
          .wrapper .member section.rank table .orange {
            background: #ec6800;
            color: #ffffff; }
          .wrapper .member section.rank table .silver {
            color: #ffffff;
            background: #b8b8b8; }
          .wrapper .member section.rank table .gold {
            color: #ffffff;
            background: #bbb090; }
          .wrapper .member section.rank table .vip {
            color: #ffffff;
            background: #171717; }
          .wrapper .member section.rank table .size {
            font-size: 2.0em; }
            @media screen and (max-width: 600px) {
              .wrapper .member section.rank table .size {
                font-size: 4.2vw;
                font-weight: 700; } }
          .wrapper .member section.rank table .circle {
            font-size: 2.0em;
            color: #ec6800;
            padding: 0.5em; }
      @media screen and (max-width: 600px) {
        .wrapper .member section#benefit {
          width: 90%; } }
      .wrapper .member section .benefitBox {
        margin-bottom: 5.0vh; }
        .wrapper .member section .benefitBox h3 {
          text-align: left;
          margin-bottom: 1.0em;
          font-size: 1.2em;
          font-weight: 700; }
          @media screen and (max-width: 600px) {
            .wrapper .member section .benefitBox h3 {
              font-size: 3.5vw;
              font-weight: 400; } }
        .wrapper .member section .benefitBox p {
          text-align: left;
          font-size: 1.0em; }
          @media screen and (max-width: 600px) {
            .wrapper .member section .benefitBox p {
              font-size: 3.0vw;
              font-weight: 400; } }
        .wrapper .member section .benefitBox ul {
          text-align: left; }
          .wrapper .member section .benefitBox ul li {
            padding-left: 1.5em;
            position: relative;
            font-size: 1.0em;
            font-weight: 700;
            line-height: 2.0; }
            @media screen and (max-width: 600px) {
              .wrapper .member section .benefitBox ul li {
                font-size: 3.0vw;
                font-weight: 400; } }
            .wrapper .member section .benefitBox ul li::before {
              content: "";
              top: 0.8em;
              left: 0.5em;
              width: 5px;
              height: 5px;
              border-radius: 50vh;
              background: #171717;
              position: absolute; }
        .wrapper .member section .benefitBox .point p {
          margin-bottom: 1.0em; }