@charset "utf-8";

/* SECTION NOWSTATUS ////////////////////////////////////////////////////////////////////////////////////////////////////*/

#nowstatus .nowstatus-body {

	.fwrap {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 10px;
		padding: 0;
		background: none;
	}

	.date span {
		display: inline-block;
		font-size: 16px;
		line-height: 130%;
	}
	.date span:nth-of-type(2)::before {
		content: "／";
	}

	.stat {
		font-size: 20px;
		line-height: 130%;
	}

	.face {
		width: 35%;
		position: relative;
		border-radius: 50%;
		background-color: #fff;
		img {
			padding: 7px;
			border-radius: 50%;
			border: 1px solid rgb(var(--bc-fwrap));
		}
	}

	.cmnt {
		padding-bottom: 10px;
	}

	/*~~*/

	.icon {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		border: 1px solid rgb(var(--bc-fwrap));
		border-radius: 50%;
		background: #fff;
		font-size: 26px;
	}

	.-sat {
		.icon {
			color: #33f;
		}
		.date span:first-child {
			color: #33f;
		}
	}
	.-sun {
		.icon {
			color: #f33;
		}
		.date span:first-child {
			color: #f33;
		}
	}

	/*~~*/

	.crayon {
		position: relative;
		display: inline-block;
	}

	.crayon::after {
		content: "";
		position: absolute;
		left: -2%;
		bottom: -5%;
		width: 100%;
		height: 5px;

		background:
			linear-gradient(177deg,
			transparent 0 20%,
			#666 22% 42%,
			transparent 45% 49%,
			#666 52% 78%,
			transparent 82%
		),
		linear-gradient(181deg,
			transparent 0 30%,
			#666 33% 55%,
			transparent 58% 63%,
			#666 66% 84%,
			transparent 87%
		),
		linear-gradient(179deg,
			transparent 0 38%,
			#666 40% 67%,
			transparent 70%
		);

		opacity: .7;
		transform: rotate(0deg) skewX(-3deg);
	}

	.-sat .crayon::after {
		background:
			linear-gradient(177deg,
			transparent 0 20%,
			#33f 22% 42%,
			transparent 45% 49%,
			#33f 52% 78%,
			transparent 82%
		),
		linear-gradient(181deg,
			transparent 0 30%,
			#33f 33% 55%,
			transparent 58% 63%,
			#33f 66% 84%,
			transparent 87%
		),
		linear-gradient(179deg,
			transparent 0 38%,
			#33f 40% 67%,
			transparent 70%
		);
	}

	.-sun .crayon::after {
		background:
			linear-gradient(177deg,
			transparent 0 20%,
			#f33 22% 42%,
			transparent 45% 49%,
			#f33 52% 78%,
			transparent 82%
		),
		linear-gradient(181deg,
			transparent 0 30%,
			#f33 33% 55%,
			transparent 58% 63%,
			#f33 66% 84%,
			transparent 87%
		),
		linear-gradient(179deg,
			transparent 0 38%,
			#f33 40% 67%,
			transparent 70%
		);
	}

}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:768px){
/************************************************************************************************************************/

#nowstatus .nowstatus-body {


}

/************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width:769px){
/************************************************************************************************************************/

#nowstatus .nowstatus-body {

	.fwrap {
		display: flex;
	}

	.face {
		width: 200px;
		height: 200px;
		.icon {
			width: 46px;
			height: 46px;
			font-size: 36px;
		}
	}

	.date span {
		display: block;
		font-size: 32px;
		line-height: 130%;
	}
	.date span:nth-of-type(2)::before {
		content: "";
	}

	.stat {
		font-size: 48px;
		line-height: 130%;
	}

	/*~~*/

	.crayon::after {
		height: 10px;
	}

}

/************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/