body {
		font-size:clamp(0.75rem,0.70rem + 0.4vw,1rem);
	}
	
	* {
		box-sizing:border-box;
	}


	.topic-sentence {
		text-indent:1em;
		font-size:1.2rem;
		font-weight:400;
	}

	audio::-webkit-media-controls-panel {background-color: rgba(70,130,180,.2);}
	audio::-webkit-media-controls-play-button {background-color: rgba(255,255,255,.8);  border-radius:50%;}
	audio::-webkit-media-controls-current-time-display {color: #4c2b0b;}

	.radio_item-header {
		display:none;
	}

	.radio_item {
		display:grid;
		grid-template-columns:1fr;
		grid-template-rows:auto;
		grid-template-areas:"date"
					"themes";		
		margin:10px auto 10px;
		gap:0;
		padding:1em 1em 1.5em;
		border-bottom: 1px solid #0017c1;
		box-sizing:border-box;
	}
	.radio_item .themes-item {
		display:grid;
		grid-template-columns:max-content 1fr;
		grid-template-rows:auto;
		grid-template-areas:"title_sp title"
					  ". description"
					  "program_name_sp program_name"
					  "audio-bar audio-bar";
		margin:0 auto 1rem;
		padding-bottom: 10px;
		gap:10px;
	}

	.radio_item .date {
		grid-area:date;
		margin-bottom:10px;
		padding:.5em;
		text-align:center;
		font-weight:600;
		color:white;
		color:rgba(255,255,255,1);
		background-image: linear-gradient(-225deg, #0c3483 0%, #87A7D9 100%, #DEF3F8 100%);		
		border-radius:3px;
	}
	.radio_item .themes {
		grid-area:themes;
		padding-top: 0.5em;
	}
	.radio_item .themes-item {
		grid-area:themes-item;
	}
	.radio_item .title {
		grid-area:title;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}
	.radio_item .title_sp {
		grid-area:title_sp;
		font-weight:600;
	}
	.radio_item .description {
		display:grid;
		grid-area:description;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap:10px;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}
	.radio_item .program_name {
		grid-area:program_name;
	}
	.radio_item .program_name_sp {
		grid-area:program_name_sp;
		font-weight:600;
	}

	.radio_item .audio_wma {
		grid-area:audio_wma;
	}
	.radio_item .audio-bar {
		grid-area:audio-bar;
		display:grid;
		grid-template-columns:1fr;
	}
	.themes-item .title {
		font-weight:600;
	}
	.themes-item > a:link {
		color:blue;
	}
	.themes-item > a:visited {
		color:purple;
	}
	.themes-item .audio-bar .audio {
		width:100%;
		padding:0 10px;
	}
	.themes .themes-item:not(:last-child) {
		border-bottom:1px dotted steelblue;
	}

	.themes-item .audio_wma.button {
		width:100%;
		min-width: 300px;
		max-width: 370px;
		margin:auto;
	}
	.themes-item .audio_wma.button a {
		display:block;
		width:100%;
		box-sizing: border-box;
		margin:0.5em auto 0.5em auto;
		padding:0.5rem;
		background-color:steelblue;
		border-radius:5px;
		text-align:center;
		text-decoration:none;
		color:#fff;
	}
	.themes-item .audio_wma.button a:hover,
	.themes-item .audio_wma.button a:active {
		background-color:steelblue;
		filter:brightness(120%);
	}
	.themes-item .audio_wma.button a,
	.themes-item .audio.button a {
		display:block;
		width:100%;
		margin:auto;
	}


	#contents .title_xs_chara {
		border-left: .5em solid steelblue;
		border-bottom: 2px solid steelblue;
		box-shadow: 0 2px 0 #4682b43f;
		background: #fff; 
		letter-spacing: .2em;
		font-weight: 600;
	}

	#contents .inner_width h3.title_xs_chara {
		letter-spacing: .3em;
	}



/*	@media screen and (min-width:768px),print {	*/

	#contents .radio_table {
		container-type:inline-size;
		container-name:contain-radio;
	}

	@container contain-radio (min-width:768px) {

		#contents .inner_width {
			padding:0 40px;
			max-width:1051px;
			margin:0 auto;
		}

		.radio_item-header {
			display:grid;
			grid-template-columns:125px 1fr 1.3fr;
			grid-template-rows:auto;
			grid-template-areas:"h_date h_title h_program_name";
			padding:.5em .5em;
			font-weight:600;
			text-align:center;
			border-bottom:2px solid #0017c1;
		}
		.radio_item-header .h_date {
			grid-area:h_date;			
		}
		.radio_item-header .h_title {
			grid-area:h_title;
		}
		.radio_item-header .h_program_name {
			grid-area:h_program_name;
		}
		
		.radio_item {
			display:grid;
			grid-template-columns:125px repeat(1,1fr);
			grid-template-rows:auto;
			grid-template-areas:"date themes";
			gap:30px;
			padding:.5em .5em 1.5em;
			border-bottom:1px solid #0017c1;
		}
		.radio_item .themes-item {
			display:grid;
			grid-template-columns:1fr 1.3fr;
			grid-template-rows:auto 1fr;
			grid-template-areas:"title program_name"
						"description audio-bar";
			gap:10px;
		}
		.radio_item .date {
			text-align:center;
			padding:.5em;
			font-weight:400;
		}
		.themes-item .title,
		.themes-item .program_name {
			margin:0 auto 1em 0;
			padding-left: 0;
			text-indent:0;
		}

		.radio_item .description {
			font-size:0.9em;
		}	

		.themes-item .audio_wma.button a {
			display:block;
			width:100%;
		}
		.themes-item .audio-bar .audio {
			width:100%;
			min-width: 250px;
			height:45px;
			padding:0 10px;
		}
		.themes-item > .title_sp {
			display:none;
		}
		.themes-item > .program_name_sp {
			display:none;
		}

	}


/*
	.audio-bar::before {
		display:inline;
		content:url(./radio_28dp_434343_FILL0_wght400_GRAD0_opsz24.png);
		padding:0.5em 1em 0.5em 0;
	}
*/




	@media print {
			body {
			width: 1000px;
			zoom: 0.68;
			-webkit-print-color-adjust: exact;
			}
	}