/*PC用*/


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

#suifeel-graph{
	background:#fff; 
	color:#e8f0f7;
	max-width:95%; 
	margin:0 auto; 
	padding:0 16px 80px;
	text-align:left; 
	line-height:0.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: table-cell;
	width: 10%;
	vertical-align: middle;
}

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


.sg-badgeTitleArea{
	display: table-cell;
	width:85%;
	vertical-align: middle;
	text-align: right;
	box-sizing: border-box;
	padding: 2%;
}

.sg-badgeTitleArea h1{
	margin: 30px auto 0;
	text-align: left;
	font-size: clamp(25px, 2.5vw, 30px);
	font-weight: 800;
	line-height: 1.5;
}

.sg-badgeTitleArea p{
	margin: 25px auto 0;
	text-align: left;
	font-size: 18px;
	color: #7fcbea;
}

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

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

.sg-grid{
	position:absolute;
	left:120px;
	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:110px;display:flex;
	flex-direction:column;
	justify-content:space-between;
	color:#0D0B2B;
	font-size:14px
}

.sg-y span{
	text-align:right
}

.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: 140px;
	margin: 0 auto;
//	border-radius: 10px;
//	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
	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:105%}  /* 2000 / 2000 */

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

.price{
	position:absolute;
	left:0;right:0;
	bottom:-105px;
	text-align:center;
	font-weight:700;
	color: #0D0B2B;
}

.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)
}

@media (max-width:720px){
  .sg-grid,.sg-y,.sg-bars{height:380px
}
}

.br-sp {
    display: none;
}

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