/*PC用*/


#suifeel-graph, #suifeel-graph * { 
	box-sizing: border-box;
}

#suifeel-graph{
	background:#fff; 
	color:#e8f0f7;
	max-width:100%; 
	margin:0 auto; 
	padding:0 0 80px;
	text-align:left; 
	line-height:1.5;
}

.sg-badge{
	display:flex;
	align-items:center;
	gap:18px;
	background:linear-gradient(to right, #0D0B2B, #2F4565);
	color:#fff;
	border-radius:18px;
	padding:18px 24px;
	box-shadow:0 8px 24px rgba(0,0,0,.25);
	margin-bottom:80px
}

.sg-badge_ul{
	display: table;
	width: 100%;
	margin:  auto;
}

.sg-badgeCrown{
	display: inline-block;
	width: 100%;
	vertical-align: middle;
	text-align: center;
}

.sg-badgeCrown img{
	width:25%;
}


.sg-badgeTitleArea{
	display: inline-block;
	width:100%;
	vertical-align: middle;
	text-align: right;
	box-sizing: border-box;
	padding: 2%;
}

.sg-badgeTitleArea h1{
	margin: 5% auto 0;
	text-align: center;
	font-size: clamp(18px, 2.5vw, 32px);
	font-weight: 800;

}

.sg-badgeTitleArea p{
	margin: 25px auto 0;
	text-align: center;
	font-size: clamp(11px, 2.5vw, 18px);
	color: #7fcbea;
}

.sg-badgeTitleArea p .sp-br {
  display: none; /* PCでは改行しない */
}

.sg-sub{
	color:#9fb3c7;
	margin:10px 0 18px
}

.sg-chart{
	position:relative;
	padding-left:80px;
	padding-right:0px
}

.sg-grid{
	position:absolute;
	left:95px;
	right:42px;
	top:0;
	height:460px;
	background:repeating-linear-gradient(to bottom,transparent 0 45px,#ddd 45px 46px);
	opacity:.55
}

.sg-y{
	position:absolute;
	left:0;top:0;
	height:460px;
	width:100px;display:flex;
	flex-direction:column;
	justify-content:space-between;
	color:#0D0B2B;
	font-size:14px
}

.sg-y span{
	text-align:left;
	font-size:10px;
}

.sg-bars{
	position:relative;
	height:459px;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:6px;
	align-items:end
}

.sg-xline{
	height:1px;
	background:#2e435c;
	opacity:.6;
	margin-top:12px
}

.bar {
	position: relative;
	width: 100%;
	max-width: 50px;
	margin: 0 auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.a{background:linear-gradient(#f6f8fa,#e9edf1);height:30%}   /* 600 / 2000 = 30% */
.b{background:linear-gradient(#eff4f7,#dfe7ee);height:80%}   /* 1280 / 2000 */
.c{background:linear-gradient(#c1c8d0,#a9b1ba);height:85%}   /* 1700 / 2000 */
.s{background:linear-gradient(#b8e5f5,#86cce6);height:100%}  /* 2000 / 2000 */

.cap{
	position:absolute;
	left:0;right:0;
	bottom:-45px;
	text-align:center;
	color:#555;
	font-size:14px
}

.price{
	position:absolute;
	left:0;right:0;
	bottom:-95px;
	text-align:center;
	color: #0D0B2B;
	font-size:10px;
}

.s::after,.s::before{
	content:"";
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	width:10px;
	height:10px;
	background:#a8e5fb;
	border-radius:50%;
	box-shadow:0 0 0 2px rgba(255,255,255,.18) inset
}

.s::after{
	bottom:calc(100% + 18px)
}

.s::before{
	bottom:calc(100% + 34px)
}

}

.br-sp {
    display: none;
}

@media (max-width: 600px) {
    .br-sp {
        display: block;
    }
}