@charset "UTF-8";
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: "Noto Sans JP"; 
	letter-spacing: 0.05em/*サイト全体のフォント指定*/
}
p {
	passing: 0;
	margin: 0;
}
a {		/*リンクの飾り付け*/
	text-decoration: none;
	color: #0400FF;
}
a:hover {	/*リンクのマウスオーバー時の飾り付け*/
	text-decoration: underline;
}

/*背景*/
#bg {
	top: 2vh;
	left: 2%;
	width: 96%;
	position: fixed;
	z-index: -1;
	font-size: 15vw;	/*背景の文字サイズ*/
	line-height: 1.2em;		/*背景の行の高さ*/
	pointer-events: none;
	touch-action: none;
}

/*インタビューテキスト（スクロール可）*/
.text {
	width: 75%;
	overflow: auto;
	margin: 10% 0 10% 5%;
	font-size: 13px; /*フォントサイズ*/
	line-height: 2em; /*行の高さ*/
}

/*蛍光ペン*/
.keiko {
	background:linear-gradient(transparent 60%, #FFFF00 60%);
}




/* デバイスのスクリーン横幅が769px以下の場合の設定 */
@media screen and (max-width:770px) {

	/* ① 背景の「contact」が右にはみ出すのを防ぎ、下の隙間を詰める */
	#bg {
		font-size: 20vw;    /* 文字サイズをスマホ向けに少し縮小 */
		line-height: 1.0em; /* 行の高さを詰めて間伸びを解消 */
		width: auto;        /* 幅の固定を解除 */
	}

	/* ② 本文の幅を広げて右側のガバッとした空きを無くす */
	.text {
		width: 90%;         /* スマホでは画面の9割を使って広く見せる */
		margin: 5% auto;    /* 上下の余白を減らし、左右を自動で中央寄せに */
	}

	/* ③ スマホのときは画像を大きく、中央寄りにする */
	.contact-img, .responsive-img {
		display: block !important;
		width: 100% !important;     /* 枠いっぱいに広げる */
		max-width: 450px !important; /* 大きくなりすぎない上限 */
		margin: 20px auto !important; /* 上下に余白を作り、左右は中央寄せ */
	}

}
}