@charset "utf-8";
/* CSS Document */


#original_wrapper .topimg{
margin: 0 calc(50% - 50vw);
width: 100vw;
max-width: inherit;
}


/*リード*/
.benefit-cont .lead {margin: 0 calc(50% - 50vw);width: 100vw;max-width: inherit;padding: 15px 20px;background: #f3f3f3;}
.benefit-cont .lead p {
    margin:0;
    letter-spacing: 0.1px;
    font-size: 100%;
}


a.btn_newmember {
    display: block;
    width: 70%;
    margin: 15px auto 10px;
    padding: 5%;
    background: #db829a;
    text-align: center;
    color: #fff;
    border-radius: 5px;
}
a.btn_newmember::after {
    content:"→";
}

#original_wrapper h2 {
    text-align:center;
    margin: 50px 10px 20px;
    font-weight:bold;
    border-bottom: dotted 2px #000000;
    padding-bottom: 10px;
    line-height: 1.4em;
}

.benefit-box {
    margin: 10% 5% 10%;
    border: solid 1px #666666;
    padding: 5%;
    position:relative;
    display: block;
    border-radius: 10px;
}

.benefit-box h3 {
   font-weight:bold;
   font-size: 150%;
   text-align: center;
   margin: 10px 0 0;
}


.benefit-box .benefit-box_num {
    position:absolute;
    top: -10px;
    height:auto;
    left: 2.9%;
    width: 40px;
}

img.icon {
    margin: 0 auto;
    display: block;
    width: 150px;
}

/* サイズ表
-------------------------------------*/
.memberstage_table+.memberstage_table {
  margin-top: 20px;
}

.memberstage_table table {
  width: 100%;
  border-spacing: 0;
  /* border-left: solid #000000 1px; */
  /*  border-top: solid #d9d9d9 1px;*/
  display: block;
  overflow-x: auto;
  white-space: nowrap; /* 折り返し防止 */
  margin: 0;
}

.memberstage_table th,
.memberstage_table td {
  padding: 10px;
  border-right: solid #000000 1px;
  border-bottom: solid #000000 1px;
  text-align: center;
  height: 70px;
}

.memberstage_table th {
  background: #ededed;
  text-align: center;
  font-weight: 400;
  border-top: solid #000000 1px;/* tableのtopにボーダー入れるとPCで横幅いっぱいにボーダーが表示されてしまうの解消のため */
}

.memberstage_table td {
  font-size: 130%;
}

/* 横スクロール時一番左の列（会員ランク）を固定 */
.memberstage_table table tr th:first-child,
.memberstage_table table tr td:first-child {
  position: sticky;
  left: 0;
  background: #ededed;
  z-index: 10;
  border-left: solid #000000 1px;
  width: 100%;
  font-size:1.4rem;
  font-weight: 600;
}

/* スクロールバーの全体 */
.memberstage_table table::-webkit-scrollbar {
  width: 6px;  /* 横スクロールバーの太さ */
  height: 6px; /* 縦スクロールバーの太さ */
}

/* スクロールバーのつまみ（バー部分） */
.memberstage_table table::-webkit-scrollbar-thumb {
  background-color: #b3b3b3;  /* 色 */
  border-radius: 4px;       /* 丸みをつける */
}

/* スクロールバーのつまみをホバーした時 */
.memberstage_table table::-webkit-scrollbar-thumb:hover {
  background-color: #7e7e7e;  /* ホバー時の色 */
}

/* スクロールバーの背景部分 */
.memberstage_table table::-webkit-scrollbar-track {
  background: #f1f1f1;  /* 背景色 */
  border-radius: 4px;    /* 丸みをつける */
}

.memberstage_table #bronze {
    background: #b58640;
    color: #fff;
    font-size: 120%;
    font-weight: 600;
}
.memberstage_table #silver {
    background: #a6a7ab;
    color: #fff;
    font-size: 120%;
    font-weight: 600;
}
.memberstage_table #gold {
    background: #ac9410;
    color: #fff;
    font-size: 120%;
    font-weight: 600;
}
.memberstage_table #platinum {
    background: #90b7c6;
    color: #fff;
    font-size: 120%;
    font-weight: 600;
}

.memberstage_table {
    padding: 0 10px;
}

/*h2下のリード文*/
.benefit-cont p {padding: 0 10px;}

/*注意書き*/
.small {
    font-size: 80%;
}
.benefit-cont .notes {
    margin: 15px 0;
    font-size: 90%;
    padding: 0 10px;
    letter-spacing:0;
    line-height:1.6em;
}
ui.notes {
    display: table;
    width: 100%;
    margin: 0;
    padding-left: 0;
}

ui.notes li {
    list-style:none;
    padding-left: 4px;
    text-indent: -10px;
    margin-left:8px;
}
ui.notes li::before {
    content:"※";
}

/*ラスト*/
.benefit-last {
margin: 50px calc(50% - 50vw);
	width: 100vw;
    padding: 0;
}

.benefit-last-tit {
    background: #c04040;
    padding: 20px 10px;
    position: relative;
    color: #fff;
}
.benefit-last-tit::after {
	display: block;
	position: absolute;
	bottom: -20px;
	left: 50%;
	width: 0;
	transform: translateX(-50%);
	border: 20px solid transparent;
	border-bottom-width: 0;
	border-top-color: #c04040;
	content: "";
}

#original_wrapper .benefit-last-tit h2 {
    border-bottom: none;
    margin: 0;
    padding: 0;
}
#original_wrapper .benefit-last-btn h3 {
    padding: 0;
    text-align:center;
    font-size: 200%;
    font-weight: bold;
}

.benefit-last-area {
	margin-top: 0;
	background: #f3f3f3;
	padding: 30px 15px;
}

.benefit-last-btn {
    background: #fff;
    padding: 15px;
}

.benefit-last-btn p {
    text-align: center;
    font-size: 100%;
    padding: 10px 0;
}

a.btn_alreadymember {
    text-decoration: underline;
}

/*ポイント強調*/
span.point {
    font-size: 150%;
    font-weight: bold;
    color: #f57a00;
}



/*-----PC設定-----*/
@media only screen and (min-width: 750px) {
#original_wrapper{
    width: 80%;
    margin-bottom:50px;
    margin-right: auto;
    margin-left: auto;
}

#original_wrapper .topimg{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

#original_wrapper h2{
    margin:20px 0;
    padding:20px 0;
    font-size:200%;
}

.benefit-cont .lead{
    width:100%;
    margin: 0 auto;
}
.benefit-cont .lead p {
    text-align:center;
    font-size:150%;
    margin:10px 0 20px;
}
a.btn_newmember {
    width: 420px;
    font-size:200%;
    padding: 30px;
}

.benefit-cont p {
    margin:30px 0;
    font-size:120%;
}
.benefit-column {display:flex;flex-wrap:wrap;justify-content:space-between;}
.benefit-box {
  width: 48%;
  height:auto;
  display:flex;/* 高さを揃えるための指定 */
  flex-direction:column;/* 高さを揃えるための指定 */
  margin:30px 0 0;
  padding: 30px;
}
.benefit-box p {margin: 10px 0 0;}
.benefit-box h3{font-size: 200%;line-height:1.5em;margin: 0 0 10px;}

.memberstage_table th:nth-child(n+2) {
    min-width: 190px;
}

.benefit-last {
    margin: 50px 0 0;
    padding: 0;
    width: 100%;
}

.benefit-last-tit {
    padding: 30px 0;
    position: relative;
}
.benefit-last-tit::after {
	display: block;
	position: absolute;
	bottom: -29px;
	left: 50%;
	width: 0;
	transform: translateX(-50%);
	border: 30px solid transparent;
	border-bottom-width: 0;
	border-top-color: #c04040;
	content: "";
}

#original_wrapper .benefit-last-tit h2 {
    border-bottom: none;
    margin: 0;
    padding: 0;
}
#original_wrapper .benefit-last-btn h3 {
    padding: 0;
    text-align:center;
    font-size: 200%;
    font-weight: bold;
}

.benefit-last-area {
	margin-top: 0;
	background: #ccc;
	padding: 50px 150px;
}

.benefit-last-btn {
    background: #fff;
    padding: 30px;
}

.benefit-last-btn p {
    text-align: center;
    font-size: 120%;
    padding: 15px 0;
}

a.btn_alreadymember {
    text-decoration: underline;
}
}