@charset "utf-8";
/* ==========================================================================
   amitie-online.com  表示調整
   2026-09-01 追加

   既存のCSSより後に読み込まれ、必要な箇所だけ上書きする。
   このファイルの読み込みを外せば、元の見た目に戻る。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. スマホのトップ画像：ロゴとキャッチコピーの重なりを解消する

   元のCSSは、ロゴ(h1)とキャッチコピー(p)の両方を position:absolute で
   パーセント指定して置いていた。スマホ幅では文章が3行に折り返して
   上へ伸びるため、ロゴに約13px食い込んでいた。

   ここではスマホ幅のときだけ、絶対配置をやめて上下に並べる方式に変える。
   （パソコン・タブレットの見た目は変更しない）
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.top_keyvisual {
		/* 元は padding-top:66.66% で高さを作っていた。
		   min-height に変えることで、文章が増えても収まるようになる */
		padding: 30px 18px;
		padding-top: 30px;
		min-height: 66.6666vw;
		box-sizing: border-box;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
	}

	/* 写真の上に薄い暗い層を敷き、白文字を確実に読めるようにする */
	.top_keyvisual::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: linear-gradient(180deg,
			rgba(0, 0, 0, .18) 0%,
			rgba(0, 0, 0, .42) 55%,
			rgba(0, 0, 0, .52) 100%);
		pointer-events: none;
	}

	/* 絶対配置を解除して、暗い層より前面に出す */
	.top_keyvisual h1,
	.top_keyvisual p {
		position: relative;
		z-index: 1;
		top: auto;
		left: auto;
		width: auto;
		max-width: 100%;
		margin: 0;
		transform: none;
		-webkit-transform: none;
		-ms-transform: none;
	}

	.top_keyvisual h1 img {
		max-width: 240px;
		height: auto;
	}

	.top_keyvisual p {
		font-size: 1.05rem;
		line-height: 1.85;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	}
}

/* --------------------------------------------------------------------------
   2. 画像の遅延読み込みで、読み込み前に高さが潰れないようにする
   -------------------------------------------------------------------------- */

img[loading="lazy"] {
	background-color: #f4f4f4;
}