@charset "utf-8";

/* SECTION NOWVOICE ////////////////////////////////////////////////////////////////////////////////////////////////////*/

#nowvoice .nowvoice-body {

	.face {
		border-radius: 50%;
		img {
			padding: 10px;
			border-radius: 50%;
			border: 1px solid rgb(var(--bc-fwrap));
		}
	}

	.prof {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.name {
		font-size: 2.0rem;
		font-weight: 500;
	}
	.name.-pc {
		display: none;
	}

	.fwrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 10px;

		.body {
			display: inline-block;
		}

	}

	.fwrap.awrap a:hover {
		border-radius: 4px;
	}

	li .date span {
		padding: 5px 5px 5px 12px;
	}

	li .date span:after {
		margin-left: 5px;
		padding: 0 7px;
		font-size: 10px;
		color: #fff;
		background-color: #666;
		border-radius: 9999px;
	}

	li.-sun .date span:after {
		content: "SUN";
		background-color: #f33;
	}
	li.-mon .date span:after {
		content: "MON";
	}
	li.-tue .date span:after {
		content: "TUE";
	}
	li.-wed .date span:after {
		content: "WED";
	}
	li.-thu .date span:after {
		content: "THE";
	}
	li.-fri .date span:after {
		content: "FRI";
	}
	li.-sat .date span:after {
		content: "SAT";
		background-color: #33f;
	}

}

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

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

#nowvoice .nowvoice-body {

	display: flex;
	flex-direction: column;
	gap: 10px;

	.prof {
		order: 1;
	}

	.face {
		order: 2;
	}

	.name {
		order: 3;
		text-align: center;
	}

	.voice {
		margin-top: 15px;
		order: 4;
		display: flex;
		flex-direction: column;
		gap: 15px;

		li {
			position: relative;
		}

		.fwrap {
			width: 100%;
			padding: 10px;
		}

		.fkdas {
			padding-right: 15px;
			position: absolute;
			right: 0;
			bottom: 5px;
			z-index: 100;
			align-items: flex-end;
			justify-content: center;
			color: #000;
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				width: 0;
				height: 0;
				border-top: 12px solid transparent;
				border-bottom: 12px solid transparent;
				border-right: 15px solid #000;
			}
			span {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 34px;
				height: 34px;
				margin: -2px auto 0;
				border: 1px solid #000;
				border-radius: 50%;
				background: #fff;
				font-size: 2.8rem;
			}
		}

	}

}

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

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

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

#nowvoice .nowvoice-body {

	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 15px;
	grid-template-areas:
		"voice1 face voice2 voice3"
		"prof   face voice4 voice4"
		"voice5 face voice6 voice7";
	.face {
		grid-area: face;
		display: flex;
		align-items: center;
		img {
			padding: 5px;
			border-radius: 50%;
			transform: scale(1.8);
		}
	}
	.prof {
		grid-area: prof;
		width: 75%;
	}
	.name.-pc {
		font-size: 3.2rem;
		grid-area: prof;
		display: block;
	}
	.name.-sp {
		display: none;
	}
	.voice {
		display: contents;
		li:nth-of-type(1) {
			grid-area: voice1;
			width: 50%;
			margin-left:auto;
		}
		li:nth-of-type(2) {
			grid-area: voice2;
		}
		li:nth-of-type(3) {
			grid-area: voice3;
		}
		li:nth-of-type(4) {
			grid-area: voice4;
			width: 50%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		li:nth-of-type(5) {
			grid-area: voice5;
			width: 50%;
			margin-left: auto;
		}
		li:nth-of-type(6) {
			grid-area: voice6;
		}
		li:nth-of-type(7) {
			grid-area: voice7;
		}
	}

	.fkdas {
		position: relative;
		margin-top: 18px;
		text-align: center;
		&::before {
			content: "";
			position: absolute;
			top: -18px;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 0;
			border-left: 12px solid transparent;
			border-right: 12px solid transparent;
			border-top: 15px solid rgba(var(--bc-fwrap), var(--ac-fwrap));
		}
		span {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 34px;
			height: 34px;
			margin: -2px auto 0;
			border: 1px solid #000;
			border-radius: 50%;
			background: #fff;
			font-size: 2.8rem;
		}
	}


}

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

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