:root {
	--default-text-color:#2a3ab2;
	--box-width: 1200px;
	--box-height:800px;
	--box-top: calc(1% + 50px + 20px);
	--var-top: calc(1% + 180px);
}
body {
	background-color:#000;
}
.container {
        background: url(../img/okushizu_list_back.png) center top no-repeat;
        background-size: cover;
        width: 100vw;
        overflow: hidden;
        position: relative;
        aspect-ratio: 2048 / 1365;
}
.text {
	font-size: 70px;
	position: absolute;
	top: 170px;
	left: 250px;
	color:#fff;
	line-height: 1em;
}
.sitename {
	position: relative;
	font-size: 40px;
	text-align: center;
	color:#FFF;
	margin-top: 1%;
	z-index: 100;
	height: 60px;
	line-height: 60px;
	font-family: "orbitron", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: nornal;
}
.logo {
	background: url(../img/logo-okushizu.png) center center no-repeat;
	background-size: contain;
	position: absolute;
	top: 85px;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 80px;
	animation: rotateAction 3s linear infinite normal;
}
@keyframes rotateAction {
	0% { transform: translateX(-50%) rotateY(0deg);}
	40% {transform: translateX(-50%) rotateY(0deg);}
	60% { transform: translateX(-50%) rotateY(360deg); }
	100% { transform: translateX(-50%) rotateY(360deg); }
}
/*@media only screen and (max-width: 760px) {
	height: 40px;
}*/

/* lineGraph */
.lineGraph {
        display: flex;
        align-items: flex-end;
	background-color:rgba(0,0,0,0.8);
	padding: 5px;
}
.lineGraph > div {
        height: 1%;
        margin: 0;
        background-color:var(--default-text-color);
        border-radius: 10px 10px 0 0;
        animation: barAction 0.5s linear infinite alternate;
}
.lineGraph.graph02 > div {
	animation: barAction 2.5s linear infinite alternate;
}
@keyframes barAction {
        0% {
                height: 1%;
        }
        100% {
                height: 100%;
        }
}

/* textGraph */
.textGraph {
        overflow: hidden;
        word-break: break-all;
        font-size: 6px;
        line-height: 6px;
        color: var(--default-text-color);
color:tranaprent;
	text-shadow: 0 0 10px var(--default-text-color);
}
/*.leftbox {
	width: 200px;
	height: 400px;
	position: absolute;
	top: calc(var(--var-top) + ((100% - var(--var-top)) * 0.4));
	left: calc(50% - 493px);
	transform: translate(-50%, -50%);
	background: url(../img/lbox.png) center center no-repeat;
	background-size: cover;
}*/
.leftbox {
	position: absolute;
	width: 15%;
	height: 35%;
	left: 9%;
	top: 26%;
}
/*.rightbox {
	width: 200px;
	height: 400px;
	position: absolute;
	top: calc(var(--var-top) + ((100% - var(--var-top)) * 0.4));
	left: calc(50% + 500px);
	transform: translate(-50%, -50%);
        background: url(../img/rbox.png) center center no-repeat;
        background-size: cover;
}*/
.rightbox {
	position: absolute;
	width: 15.5%;
	height: 35%;
	left: 72.5%;
	top: 26%;
}
.rightbox .line1 {
	width: 140px;
	height: 50px;
	margin-top: 30px;
	left: 28px;
	background-color:rgba(0,0,0,0.8);
}
.leftbox2 {
	width:170px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-100% - 150px),-50%);
}
.rightbox2 {
	width: 250px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(150px,-50%);
}

.graph01 {
	width: 73%;
	height: 20%;
	position: absolute;
	left: 15%;
	top: 56.5%;
}
.graph01 img {
	width: 100%;
	height: 100%;
}
.graph02 {
	width: 100px;
	height:80px;
	border: 3px solid var(--default-text-color);
	border-left:none;
	border-top: none;
	position: absolute;
	bottom: 92px;
	right: 40px;
}
.text01 {
	width: 165px;
	height: 300px;
/*	border: 1px solid #ccc;*/
	font-size: 6px;
	line-height:6px;
}
.text02 {
	width: 250px;
	height: 150px;
/*	border: 1px solid #ccc;*/
	font-size: 5px;
	line-height: 5px;
	bottom: 0;
	position: absolute;
}

.border {
	width: calc(100vw * 1.5);
	height: calc(100vh * 1.5);
	margin-left: calc(100vw * 0.5 / 2 * -1);
	transform: perspective(1000px) rotateX(60deg);
	border-top: 2px solid #6a6;
/*	margin-top: -400px;*/
	position:absolute;
	background: url(../img/bg1.png) center center repeat;
	bottom: 0;
}
.bg {
/*	background: url(../img/bg_base.png) center 134px no-repeat;
	background-size: 1200px;*/
	z-index: 100;
	width: 100vw;
	height: 100vw;
	position: absolute;
}

.ball {
	width: 104px;
	height: 104px;
	background: url(../img/ball.png) no-repeat center center;
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
        animation: ballAction 10s linear infinite normal;
}
@keyframes ballAction {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
.circle-outer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 210px;
	height: 210px;
	border-radius: 50%;
	overflow: hidden;
}
.circle {
	position: relative;
	width: 100%;
	height: 100%;
}
.circle-item {
	position: absolute;	
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.circle-item > svg {
	position: absolute;
	top: 0;
	left: 0;
}
.circle-item > svg circle {
	transform-origin: center center;
}
.circle-outer .rr {
	animation-name: circleAction1;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}
.circle-outer .lr {
        animation-name: circleAction2;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: normal;
}
@keyframes circleAction1 {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes circleAction2 {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(-360deg); }
}
.circle-inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.circle-inner > div {
	position: absolute;
	border-radius: 50%;
/*	opacity: 0.8;*/

	background-image: repeating-conic-gradient(transparent 0, transparent 13deg, var(--default-text-color) 13deg, var(--default-text-color) 16deg),
		repeating-conic-gradient(transparent 0, transparent 20deg, var(--default-text-color) 20deg, var(--default-text-color) 23deg),
		repeating-conic-gradient(transparent 0, transparent 5deg, var(--default-text-color) 5deg, var(--default-text-color) 8deg),
		repeating-conic-gradient(transparent 0,transparent 2deg, var(--default-text-color) 2deg, var(--default-text-color) 3deg);

        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: normal;
}
.circle-inner .c1 {
        width: 193px;
        height: 193px;
        top: 9px;
        left: 9px;
        mask-image: radial-gradient(transparent 0%, transparent 67%, white 0%, white);
        -webkit-mask-image: radial-gradient(transparent 0%, transparent 67%, white 0%, white);
}
.circle-inner .c2 {
	width: 174px;
	height: 174px;
	top: 18px;
	left: 18px;
	mask-image: radial-gradient(transparent 0%, transparent 68%, white 0%, white);
    	-webkit-mask-image: radial-gradient(transparent 0%, transparent 68%, white 0%, white);
}
.circle-inner .c3 {
        width: 165px;
        height: 165px;
        top: 23px;
        left: 23px;
        mask-image: radial-gradient(transparent 0%, transparent 69%, white 0%, white);
        -webkit-mask-image: radial-gradient(transparent 0%, transparent 69%, white 0%, white);
}
.circle-inner .c4 {
        width: 150px;
        height: 150px;
        top: 30px;
        left: 30px;
        mask-image: radial-gradient(transparent 0%, transparent 66%, white 0%, white);
        -webkit-mask-image: radial-gradient(transparent 0%, transparent 66%, white 0%, white);
}
.circle-inner .c5 {
        width: 138px;
        height: 138px;
        top: 36px;
        left: 36px;
        mask-image: radial-gradient(transparent 0%, transparent 69%, white 0%, white);
        -webkit-mask-image: radial-gradient(transparent 0%, transparent 69%, white 0%, white);
}
.d1 { animation-delay: -15s; }
.d2 { animation-delay: -10s; }
.d3 { animation-delay: -8s; }
.d4 { animation-delay: -5s; }
.d5 { animation-delay: -3s; }
.s30 { animation-duration: 30s; }
.s35 { animation-duration: 35s; }
.s40 { animation-duration: 40s; }
.s45 { animation-duration: 45s; }
.s60 { animation-duration: 60s; }
.s80 { animation-duration: 80s; }

.line1 {
	position: relative;
	height: 80px;
	width: 134px;
	overflow: hidden;
	border: 1px solid var(--default-text-color);
	border-left: none;
	border-top: none;
	left:12px;
}
.line1 svg {

	position: absolute;height: 300px;
	color:#66ff66;
}
.line1 .dot {
	position: absolute;
	font-size:16px;
	color:var(--default-text-color);
	offset-path: path("M -5 33 Q 35 -20, 70 25 T 145 18");
	animation: motionPathAction 2s linear infinite;
}
@keyframes motionPathAction {
	0% { offset-distance: 0%;}
	60% { offset-distance: 100%;}
	100% {offset-distance:100%;}
}

.postext {
	color: #6aa;
	width: 800px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	bottom: calc(10% + 90px + 10px);
}
@media only screen and (max-height:700px) {
	.postext {
		bottom: calc(10% + 50px);
	}
}
.postext >div {
	width: 33%;
	display: inline-block;
	text-align: center;
}

/*.postext,*/
.neontext {
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #6aa,
    0 0 82px #6aa,
    0 0 92px #6aa,
    0 0 102px #6aa,
    0 0 151px #6aa;
}
.postext {
  text-shadow:
    0 0 7px #6aa,
    0 0 10px #6aa,
    0 0 21px #6aa,
    0 0 42px #6aa,
    0 0 82px #6aa,
    0 0 92px #6aa,
    0 0 102px #6aa,
    0 0 151px #6aa;
}
.gradienttext {
display: inline-block;
margin: auto;
    background: linear-gradient(45deg, #DFFFE7, #A5ffff 30%, #0040FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.link {
	position: absolute;	
	top: 76%;
	left: 50%;
	transform: translateX(-50%);
}

.link a {
	display: block;
	text-decoration: none;
	width:300px;
	height: 80px;
	line-height: 40px;
	text-align: center;
	color:#AEFAFB;
	font-size:24px;
/*	border: 3px solid #6aa;
	border-radius: 10px;
        box-shadow: 0 0 .2rem #fff,
                0 0 .2rem #fff,
                0 0 2rem #6aa,
                0 0 0.8rem #6aa,
                0 0 2.8rem #6aa,
                inset 0 0 1.3rem #6aa;*/
	background: url(../img/btn_back1.png) center center no-repeat;
	background-size: cover;

        animation: linkAction1 5s infinite alternate;
}
@keyframes linkAction1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.4;
	}
}
.frame {
	position: absolute;
	top:0 ;
	width: 200px;
	height: 300px;
}
.frame svg {
	width: 100%;
	height: 100%;
}
.rightbox2 .frame {
	width: 250px;
}
.rightbox2 .frame > div {
	position: absolute;
	left: 10px;
	color:#6aa;
}
.frame .txt {
	top: 20px;
}
.frame .txt2 {
	top: 50px;
	font-size: 8px;
}
.frame .date {
	top: 65px;
	font-size: 8px;
}
.lineGraph2 {
	position: relative;
	width: 75%;
	left: 10%;
	top: 6%;
	background-color:rgba(0,0,0,0.6);
	padding: 5px;
}
.lineGraph2 > div {
	height: 5px;
	margin-bottom: 3px;
	position: relative;
	background-color: rgba(50,50,50,0.2);
	border-radius: 3px 0 0 3px;
	box-shadow: inset 1px 1px 1px 0 rgba(35, 35, 35, 0.2), inset -1px -1px 1px 0 rgba(50, 50, 50, 0.2);
}
.lineGraph2 > div > span {
	position: absolute;
	right: 0;
	height: 5px;
	background:linear-gradient(#2a3ab2, #5a6ad2, #2a3ab2);
	border-radius: 2px 0 0 2px;
}
.container {
/*	background: url(../img/bg_base.png) center center no-repeat;
	background-size: 1200px;*/
}


/** list **/
#listBlock {
        position: absolute;
        top: 0;
        left: 9%;
        width: 79%;
        height: 100%;
        z-index: 400;
}
#listBlock > div {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
}
#listBlock ul {
        margin: 0;
        padding: 0;
        width: 3000px;
        height: 100%;
        position: absolute;
}
#listBlock ul li {
        width: calc(var(--box-width)/* - (var(--box-width) * 0.1)*/);
        height: 100%;
        display: inline-block;
        vertical-align: top;
        position: relative;
}
#listBlock li > div {
        text-align: center;
}
#listBlock .date {
        color:#fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #58bc5f,
    0 0 82px #58bc5f,
    0 0 92px #58bc5f,
    0 0 102px #58bc5f,
    0 0 151px #58bc5f;
}
#listBlock .title a {
        color:#fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #58bc5f,
    0 0 82px #58bc5f,
    0 0 92px #58bc5f,
    0 0 102px #58bc5f,
    0 0 151px #58bc5f;
        text-decoration:none;
        margin-top: 20px;
        font-size: 20px;
}
#listBlock .thumb {
        position: absolute;
	top: 19.7%;
	left: 31.3%;
	width: 34.5%;
	height: 26%;
}
@media only screen and (min-width: 760px) {
/*	#listBlock .thumb {
		height: 250px;
	}
	#listBlock .thumb img {
		width: calc(600px - 155px) !important;
	}*/
}
#listBlock .thumb a {
	display: block;
	width:100%;
	height: 100%;
}
#listBlock .thumb img {
/*	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(600px - 67px);*/
	display: block;
width: 100%;
	height: 100%;
}
#listBlock .linkBtn1 {
        margin-top: 100px;
        left: 0;
}
#listBlock > div#prev, #listBlock > div#next {
        position: absolute;
	top: 33.6%;
        left: 23%;
        transform: translateY(-50%);
        margin: 0;
        padding: 0;
        color: #fff;
        width: 50px;
        height: 71px;
        font-size: 25px;
        text-align: center;
        animation: flicker 5s infinite alternate;
        display: none;
        cursor: pointer;
}
#listBlock > div#next {
        left: 70.4%;
}
#listBlock .linkbtn {
	position: absolute;
	width: 20%;
	left: 50%;
	transform: translateX(-50%);
	top: 55%;
}
@media only screen and (max-height:600px) {
	#listBlock .linkbtn {
		bottom: 1%;
	}
}
#listBlock .linkbtn a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-decoration: none;
	color: #fff;
	font-size: 20px;
	text-align: center;
        background: url(../img/btn_back1.png) center center no-repeat;
        background-size: cover;
	margin: auto;
	aspect-ratio: 10 / 3;
}
#listBlock .linkbtn a img {
	width: 100%;
	height: 100%;
}
@keyframes flicker {

    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {

/*        text-shadow:
            -0.1rem -0.1rem 0.5rem #fff,
            0.1rem 0.1rem 0.5rem #fff,
            0 0 1rem var(--neon-color-1),
            0 0 2rem var(--neon-color-1),
            0 0 3rem var(--neon-color-1),
            0 0 4rem var(--neon-color-1),
            0 0 5rem var(--neon-color-1);

        box-shadow:
            0 0 .5rem #fff,
            inset 0 0 .5rem #fff,
            0 0 2rem var(--neon-color-1),
            inset 0 0 2rem var(--neon-color-1),
            0 0 4rem var(--neon-color-1),
            inset 0 0 4rem var(--neon-color-1);*/
	opacity: 1;
    }

    20%, 24%, 55% {
        text-shadow: none;
        box-shadow: none;
opacity: 0.4;
    }
}
.centerbox1 {
	position: absolute;
	height: 90%;
	width: 100%;
	top: 10%;
	left: 50%;
	transform: translateX(-50%);
}
.scball {
	width: 60px;
	height: 60px;
	margin: auto;
	margin-top: 20px;
	opacity: 0.7;
}
.scball img{
	width: 60px;
	height: 60px;
	opacity: 0.7;
}
.score {
	position: absolute;
	top: 25%;
	left: 5.5%;
	width: 9%;
	color:#fff;
	font-size: 30px;
	font-weight: 600;

}
.date {
	position: absolute;
	top: 2%;
	left: 50%;
	transform: translateX(-50%);
}
.title {
	position: absolute;
	top: 5%;
	left: 50%;
	transform: translateX(-50%);
}
.boxgraph {
	height: 29%;
	width: 77%;
	padding: 0 3px;
	position: absolute;
	left: 10%;
	top: 49.6%;
}
.boxgraph .boxgroup {
	width: 16%;
	height: 100%;
	margin: 0 4%;
	display:inline-block;
	position: relative;
}
.boxgraph .boxgroup:last-child {
	margin-right: 0;
}
.boxgraph .boxgroup .boxitem {
	width: 100%;
	background:linear-gradient(to left, #2a3ab2, #7a9ae2, #2a3ab2);
	position:absolute;
}
.boxgraph .boxgroup .boxitem:nth-child(even) {
	background: linear-gradient(to left, #666, #bbb, #666);
}
.boxgraph .boxgroup .boxitem:nth-child(1) {
	background:none;
}
.boxgraph .boxgroup .boxitemtop {
	position: absolute;;
	width: 100%;
	height: 6px;
	border-radius: 50%;
	margin-bottom: -3px;
	z-index: 100;
	background-color:#1a1a62;
}
.boxgraph .boxgroup:nth-child(1) .boxitemtop:nth-child(1) {
	bottom: 50px;
}
.boxgraph .boxgroup:nth-child(1) .boxitem:nth-child(2) {
        height: 0;
	bottom:50%;
}
.boxgraph .boxgroup:nth-child(1) .boxitem:nth-child(3) {
        height: 35%;
	bottom: 15%;
}
.boxgraph .boxgroup:nth-child(1) .boxitem:nth-child(4) {
        height: 10%;
	bottom: 5%;
}
.boxgraph .boxgroup:nth-child(1) .boxitem:nth-child(5) {
        height: 5%;
	bottom: 0;
}
.boxgraph .boxgroup:nth-child(2) .boxitemtop:nth-child(1) {
	bottom: 85%;
}
.boxgraph .boxgroup:nth-child(2) .boxitem:nth-child(2) {
        height: 0;
	bottom: 85%;
}
.boxgraph .boxgroup:nth-child(2) .boxitem:nth-child(3) {
        height: 30%;
	bottom: 55%;
}
.boxgraph .boxgroup:nth-child(2) .boxitem:nth-child(4) {
        height: 5%;
	bottom: 50%;
}
.boxgraph .boxgroup:nth-child(2) .boxitem:nth-child(5) {
        height: 50%;
	bottom:0;
}
.boxgraph .boxgroup:nth-child(3) .boxitemtop:nth-child(1) {
	bottom: 70%;
}
.boxgraph .boxgroup:nth-child(3) .boxitem:nth-child(2) {
        height: 0;
	bottom: 70%;
}
.boxgraph .boxgroup:nth-child(3) .boxitem:nth-child(3) {
        height: 20%;
	bottom: 50%;
}
.boxgraph .boxgroup:nth-child(3) .boxitem:nth-child(4) {
        height: 40%;
	bottom: 10%;
}
.boxgraph .boxgroup:nth-child(3) .boxitem:nth-child(5) {
        height: 10%;
	bottom: 0;
}
.boxgraph .boxgroup:nth-child(4) .boxitemtop:nth-child(1) {
	bottom: 90%;
}
.boxgraph .boxgroup:nth-child(4) .boxitem:nth-child(2) {
        height: 0;
	bottom: 90%;
}
.boxgraph .boxgroup:nth-child(4) .boxitem:nth-child(3) {
        height: 20%;
	bottom: 70%;
}
.boxgraph .boxgroup:nth-child(4) .boxitem:nth-child(4) {
        height: 50%;
	bottom: 20%;
}
.boxgraph .boxgroup:nth-child(4) .boxitem:nth-child(5) {
        height: 20%;
	bottom: 0;
}
.courtimage {
	perspective: 300px;
	margin-top: 5%;
}
.courtimage img{
	width: 60%;
	margin: 0 20%;
	transform: rotateX(50deg);
}
.circle-area {
	position: absolute;
	top: 31%;
	left: 1.5%;
	width: 17%;
	display: inline-block;
}
.circle-wrap {
	width: 23%;
	display: inline-block;
	background-image: radial-gradient(rgb(0,0,0) 30%, transparent 30%), conic-gradient(rgb(42, 58, 178) 67%, rgb(50,50,50) 67%, rgb(50,50,50) 100%);
	border-radius: 50%;
	box-shadow: 2px 2px 3px #000;
	aspect-ratio: 1 / 1;
}
.circle-wrap .innercircle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9.8%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	box-shadow: inset 1px 1px 1px 0 #333, inset -2px -2px 2px 0 #555;
	aspect-ratio: 1 / 1;
}
.circle-area .rcomment {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
}
.circle-area .rcomment .wrap {
	position: absolute;
	width: 0;
	height: 55px;
	left: 0;
	overflow: hidden;
}
.circle-area .rcomment .line {
	position: absolute;
	border: 0 solid #ccc;
	border-width: 1px 0 0 1px;
	top: 6px;
	left: 18px;
	width: 24px;
	height:12px;
	transform: skewX(-30deg);
}
.circle-area .rcomment .txt {
	position: absolute;
	left: 50px;
	color:#fff;
	top: -2px;
	font-size: 10px;
	display: none;
	line-height: 1.2em;
}
.circle-area .lcomment {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
}
.circle-area .lcomment .wrap {
	position: absolute;
	width: 0;
	height: 55px;
	right: 0;
	overflow: hidden;
}
.circle-area .lcomment .line {
	position: absolute;
	border: 0 solid #ccc;
	border-width: 1px 0 0 1px;
	top: 16px;
	right: 23px;
	width: 16px;
	height: 21px;
	transform: skewX(-35deg);
}
.circle-area .lcomment .txt {
	position: absolute;
	top: 38px;
	right: 38px;
	font-size: 10px;
	color:#fff;
	display: none;
	line-height: 1.2em;
}
/*
@media only screen and (max-height: 760px) {
	.logo {
		top: 75px;
		height: 40px;
	}
        .centerbox1 {
                top: calc(1% + 115px);
		height: calc(100% - (1% + 115px));
        }
	#listBlock .thumb {
		top: 45%;
	}
	#listBlock > div#prev, #listBlock > div#next {
		top: calc((1% + 115px) + ((100% - (1% + 115px)) * 0.45) - 80px);
	}
	.score {
		top: calc(45% - 200px + 95px);
	}
	.circle-area {
		top: calc(45% - 200px + 150px);
	}
}
*/