body, .container {
    font-size: 20px;
}
.title {
    text-align: right;   			/* 画像を右寄せ */
    margin-bottom: 0;    			/* h3との隙間をなくす */
}
.title img {
    height: auto;
}
.container h3{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2em;
  	font-weight: 700;
	border-bottom: 2px solid #333;	
	text-align: left; 
    margin-top: 0px;     			/* titleとの隙間をなくす */
}
.card-container {
    display: flex;
	flex-direction: column;   		/* 一人ずつ縦に表示 */
    gap: 20px;                		/* カード間の隙間 */
    padding: 10px;
    width: 100%;             		/* 画面幅に合わせる */
	box-sizing: border-box;
    margin: 0 auto;           		/* ページ中央 */
}
.card {
    display: flex;
    flex-direction: row;      		/* 横並びにする */
    width: 100%;
	max-width: 850px;         		/* 最大幅を制限 */
    border: 1px solid #333;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
	margin: 0 auto;
	align-items: center;  /* 横並びのアイテムを縦方向中央 */ 
}
.photo {
    width: 250px;
    flex: 0 0 250px;
    border-right: 1px solid #ccc;
    padding-right: 10px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.photo img {
    max-width: 200px;        		/* スマホでも画像幅を制限 */
    width: 100%;
    height: auto;
    margin: 0 auto;					/* 中央寄せ */
    border: 1px solid #333;		/* 枠線の太さと色 */
    border-radius: 10px;     		/* 角を丸める場合 */
	margin-bottom: 5px; 
}
.photo .info-shop {
	font-size: 1em;          		/* 少し大きめ */
    font-weight: 700;        		/* 太文字 */
    color: #333;
    text-align: center;
}
.photo .info-name {
	font-size: 1.5em;          		/* 少し大きめ */
    font-weight: 700;        		/* 太文字 */
    color: #333;
    text-align: center;
	margin-bottom: 5px; 
}
.photo .info-addr {
	font-size: 0.7em;          		/* 少し小さく */
    color: #333;
    text-align: center;
}
.content {
    flex: 1;                  		/* 残り幅を PR に割り当てる */
    display: flex;
    flex-direction: column;   		/* PR文章・再生ボタン縦並び */
	justify-content: center; /* 上下中央 */
}
.controls {
    display: flex;
    flex-direction: column;   		/* 音声・動画縦に並べる */
	align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.controls audio,
.controls video {
	width: 90%;
	max-height: 500px;
}
.pr-text {
	flex: 1;
	margin-bottom: 10px;
	overflow-wrap: break-word;
}
.info {
	font-size: 0.9em;
	color: #555;
}

/* -------------------------------------------------- */

@media screen and (min-width:800px) {
	.container {
		max-width: 1000px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 600px) {
	.card {
		flex-direction: column;		/* 横並び → 縦並び */
		max-width: 100%;          	/* スマホでは画面幅に合わせる */
	}
	.photo {
		width: 100%;
		flex: none;               	/* 固定幅を解除 */
		border-right: none;       	/* 右の線を消す */
		border-bottom: 1px solid #ccc;	/* 下に区切り線を追加 */
		padding-right: 0;
		margin-right: 0;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.photo img {
		max-width: 200px;        	/* スマホでも画像幅を制限 */
		width: 100%;
		height: auto;
		margin: 0 auto;          	/* 中央寄せ */
		border: 1px solid #333;  	/* 枠線の太さと色 */
		border-radius: 10px;     	/* 角を丸める場合 */
		margin-bottom: 5px; 
	}
	.content {
		width: 100%;
	}
	.controls audio,
	.controls video {
		width: 90%;
		max-height: 500px;
	}
}