@charset "utf-8";

header#header_img{
	width:100%;
	max-width:700px;
}

/* article */
article{
	max-width:700px;
	margin:auto;
	padding:25px 15px;
}
article > p{
	margin-bottom:30px;
	text-align: justify;
	text-justify: inter-ideograph;
	letter-spacing:-0.05em;
}

.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0, 0, 0, 0);
	border:0;
}

.rank-table-wrap{
	margin:20px 0 30px;
	overflow-x:auto;
}
.rank-mobile{
	display:none;
	margin:20px 0 30px;
}
.rank-mobile__card{
	--rank-color:#333;
	border:1px solid #000;
	background:#fff;
	padding:10px;
	margin-bottom:10px;
}
.rank-mobile__head{
	display:flex;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
}
.rank-mobile__crown{
	width:28px;
	height:20px;
	background-color:var(--rank-color);
	-webkit-mask:url("../../v2/css/img/common/crown_icon.svg") no-repeat center / contain;
	mask:url("../../v2/css/img/common/crown_icon.svg") no-repeat center / contain;
}
.rank-mobile__title{
	font-size:15px;
	font-weight:bold;
	color:var(--rank-color);
}
.rank-mobile__range{
	font-size:12px;
	color:#000;
}
.rank-mobile__list{
	list-style:none;
	padding:0;
	margin:8px 0 0;
}
.rank-mobile__list li{
	position:relative;
	padding-left:14px;
	font-size:12px;
	line-height:1.4;
	margin:6px 0;
}
.rank-mobile__list li:before{
	content:"";
	position:absolute;
	left:0;
	top:0.45em;
	width:8px;
	height:8px;
	border-radius:50%;
	background:var(--rank-color);
}
.rank-mobile__card--white{ --rank-color:#b9b9b9; }
.rank-mobile__card--bronze{ --rank-color:#b57a2c; }
.rank-mobile__card--silver{ --rank-color:#8f8f8f; }
.rank-mobile__card--gold{ --rank-color:#d8b900; }
.rank-mobile__card--platinum{ --rank-color:#bfb5a4; }
.rank-mobile__card--diamond{ --rank-color:#1aa4da; }
.rank-table{
	--cell:65px;
	--col-min:90px;
	width:100%;
	min-width:calc(var(--corner) + (var(--col-min) * 6));
	border-collapse:collapse;
	text-align:center;
	font-size:14px;
	table-layout:fixed;
	background-color:#fff;
	margin:0 auto;
}
.rank-table thead th{
	background:#fff;
	font-weight:bold;
}
.rank-table th,
.rank-table td{
	border:1px solid #000;
	padding:8px 6px;
	vertical-align:middle;
	height:var(--cell);
	text-align: center;
}
.rank-table__corner{
	width: 110px;
	text-align: center;
	min-width:0;
	background:#f7f7f7;
	font-weight:bold;
	position:relative;
	padding:0;
	height:var(--cell);
}
.rank-table__diag{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	z-index:0;
}
.rank-table__diag line{
	stroke:#000;
	stroke-width:1;
}
.rank-table__corner-top{
	display:block;
	font-size:11px;
	line-height:1.3;
	position:absolute;
	top:10px;
	right:3px;
	left:48%;
	text-align:right;
	z-index:1;
}
.rank-table__corner-bottom{
	display:block;
	position:absolute;
	bottom:10px;
	left:30px;
	font-size:13px;
	z-index:1;
}
.rank-table__rank{
	display:block;
	font-size:12px;
	font-weight:bold;
}
.rank-table__crown{
	display:block;
	width:34px;
	height:24px;
	margin:0 auto 6px;
	background-color:currentColor;
	-webkit-mask:url("../../v2/css/img/common/crown_icon.svg") no-repeat center / contain;
	mask:url("../../v2/css/img/common/crown_icon.svg") no-repeat center / contain;
}
.rank-table__range{
	display:block;
	margin-top:4px;
	font-size:11px;
	color:#000;
	line-height:1.2;
}
.rank-table__col{
	height:var(--cell);
}
.rank-table__col--white{ color:#b9b9b9; }
.rank-table__col--bronze{ color:#b57a2c; }
.rank-table__col--silver{ color:#8f8f8f; }
.rank-table__col--gold{ color:#d8b900; }
.rank-table__col--platinum{ color:#bfb5a4; }
.rank-table__col--diamond{ color:#1f9fd3; }
.rank-table__benefit{
	text-align:left;
	font-weight:bold;
	padding:8px 8px;
	width:var(--corner);
	font-size:11px;
	line-height:1.3;
}
.rank-table__benefit--purple{ background:#f2dff1; }
.rank-table__benefit--orange{ background:#f7e4c2; }
.rank-table__benefit--green{ background:#dff2e0; }
.rank-table__benefit--blue{ background:#dfe8f9; }
.rank-table__benefit--yellow{ background:#f6f0bf; }
.rank-table__benefit--teal{ background:#d9eff1; }
.rank-table__benefit--mint{ background:#e0f3e9; }
.rank-table__benefit--lavender{ background:#e8e3f6; }
.rank-table__benefit--rose{ background:#f7e0e0; }
.rank-table__benefit--sky{ background:#e0f1f8; }

.rank-dot{
	display:inline-block;
	width:20px;
	height:20px;
	border-radius:50%;
}
.rank-dot--bronze{ background:#b67a2d; }
.rank-dot--silver{ background:#9fa0a0; }
.rank-dot--gold{ background:#e2c300; }
.rank-dot--platinum{
	background:repeating-linear-gradient(135deg, #bdbdbd 0 4px, #e4e4e4 4px 8px);
	border:1px solid #9a9a9a;
}
.rank-dot--diamond{
	background:
		radial-gradient(circle at 30% 30%, #ffffff 0 20%, #c9f3ff 35%, #7fd3ff 60%, #4db2e4 100%);
	border:1px solid #58bde8;
	box-shadow:inset -2px -2px 0 rgba(0,0,0,0.08);
}

/* #cont1 */
#cont1{
	padding:50px 0;
}
#cont1 h2{
	text-align:left;
}
#cont1 h2 img{
	width:248px;
}
#cont1 dl{
	text-align: justify;
	text-justify: inter-ideograph;
}
#cont1 dl dt{
	margin-top:40px;
	padding-left:50px;
	font-size:20px;
	font-weight:bold;
	position:relative;
}
#cont1 dl dt span{
	font-size:18px;
	font-weight:bold;
	display:block;
	width:43px;
	line-height:43px;
	background-color:#dcae4a;
	color:#fff;
	border-radius:50%;
	text-align:center;
	position:absolute;
	left:0;
	top:-5px
}

#cont1 dl dd{
	margin-top:25px;
	padding-left:50px;
	font-size:14px;
	position:relative;
}
#cont1 dl dd span{
	font-size:18px;
	font-weight:bold;
	display:block;
	width:43px;
	line-height:43px;
	background-color:#a72b21;
	color:#fff;
	border-radius:50%;
	text-align:center;
	position:absolute;
	left:0;
	top:50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#cont1 dl dd:last-of-type span{
	top:0;
	-webkit-transform:translateY(0);
	transform:translateY(0);
}

/* top_top */
#topbtn{
	width:50px;
	line-height:50px;
	font-size:21px;
	border-radius:50%;
	color:#fff;
	background-color:rgba(0,0,0,0.5);
	position:fixed;
	z-index:101;
	right:20px;
	bottom:-150px;
	-webkit-transition: bottom 0.8s;
	-moz-transition: bottom 0.8s;
	-ms-transition: bottom 0.8s;
	transition: bottom 0.8s;
}


@media screen and (max-width:700px){

header#header_img{
	width:100%;
	max-width:1000px;
}

/* article */
article{
	max-width:700px;
	margin:auto;
	padding:15px 5%;
}
article > p{
	margin-bottom:15px;
	text-align: justify;
	text-justify: inter-ideograph;
	letter-spacing:-0.05em;
}

.rank-table{
	--cell:84px;
	--corner:200px;
	--col-min:80px;
	font-size:12px;
	width:100%;
	min-width:calc(var(--corner) + (var(--col-min) * 6));
}
.rank-table-wrap{
	display:none;
}
.rank-mobile{
	display:block;
}
.rank-table th,
.rank-table td{
	padding:6px 4px;
}
.rank-table__rank{
	font-size:13px;
}
.rank-table__range{
	font-size:11px;
}
.rank-table__benefit{
	font-size:11px;
}
.rank-dot{
	width:16px;
	height:16px;
}
.rank-table__crown{
	width:28px;
	height:20px;
	margin-bottom:4px;
}
.rank-table__col{
	height:var(--cell);
}

/* #cont1 */
#cont1{
	padding:30px 0;
}
#cont1 h2{
	text-align:left;
}
#cont1 h2 img{
	width:200px;
}
#cont1 dl{
	text-align: justify;
	text-justify: inter-ideograph;
}
#cont1 dl dt{
	margin-top:25px;
	padding-left:30px;
	font-size:16px;
	font-weight:bold;
	position:relative;
}
#cont1 dl dt span{
	font-size:14px;
	font-weight:bold;
	display:block;
	width:25px;
	line-height:25px;
	background-color:#dcae4a;
	color:#fff;
	border-radius:50%;
	text-align:center;
	position:absolute;
	left:0;
	top:-1px
}

#cont1 dl dd{
	margin-top:5px;
	padding-left:30px;
	font-size:12px;
	position:relative;
}
#cont1 dl dd span{
	font-size:14px;
	font-weight:bold;
	display:block;
	width:25px;
	line-height:25px;
	background-color:#a72b21;
	color:#fff;
	border-radius:50%;
	text-align:center;
	position:absolute;
	left:0;
	top:-3px;
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
#cont1 dl dd:last-of-type span{
	top:-3px;
	-webkit-transform:translateY(0);
	transform:translateY(0);
}
}