<style>#responsive-btn {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	/* 他の要素の上に表示するため */
	/* 必要に応じて、ボタンのサイズやパディングも調整してください */
}

/* containerに画像をタイル状に埋め込む */
.header {
	/*background-image: url("wp-content/uploads/2025/06/title_tile.png");*/
	background-image: url("../img/title_tile_base.svg");
	*/ background-repeat: repeat;
	/* 画像をタイル状に繰り返す */
}


/* .header の直下にある .container を Flexbox コンテナにする */
/* これにより、子要素（#responsive-btn と .header__content）を横並びに配置し、中央寄せが可能になります */
.header .container {
	display: flex;
	/* Flexboxを有効化 */
	align-items: center;
	/* 子要素を垂直方向の中央に配置 */
	width: 100%;
	/* 親要素の幅いっぱいに広げる */
	/* 必要に応じて、container自体の最大幅と中央寄せを追加することもできます */
	/* max-width: 1200px; */
	/* margin: 0 auto; */
}

/* header__content の表示調整 */
.header__content {
	position: relative;
	/* 子要素（img, span）の絶対配置の基準にするため、これは維持 */
	/* left: auto; はFlexboxのautoマージンを使用するため不要 */
	/* left: auto; */
	/* この行は削除 */

	/* Flexboxコンテナ内でheader__contentを水平方向中央に配置 */
	margin-left: auto;
	/* 左側の利用可能なスペースを全て占有 */
	margin-right: auto;
	/* 右側の利用可能なスペースを全て占有 */
}

/* title_back.png のスタイル設定 */
.header__content>img {
	margin-top: 40px;
	display: block;
	/* 余分な下マージンをなくす */
	max-width: 800px;
	/* 親要素の幅いっぱいに広げる */
	height: auto;
	/* 縦横比を維持 */
	max-width: 100%;
	/* レスポンシブ対応 */
	/* 必要に応じて、画像の高さやオブジェクトフィットを調整 */
	max-height: 380px;
	/* object-fit: cover; */
}

/* 「あちゃまWEB」ラベルの表示 */
.main-title-text {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translateX(-50%);   /* ② 自分の幅の半分だけ左に引き戻して完全中央にする */

	width:100%;
	max-width:1200px;
	height: auto;

	z-index: 2;
	display: block;
}

/* 背景の位置を左から右へ動かす定義 */
@keyframes main-title-flow {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

/* 「ホームページは完成してから始まります」ラベルの表示 */
.subtitle-text {
	position: absolute;
	bottom: 25%;
	left: 50%;
	transform: translateX(-50%);

	/* 文字の中身：元の色を維持 */
	color: #A00080;

	/* 1. 枠線のベース（明るいシルバー） */
	-webkit-text-stroke: 1px #E0E0E0;

	font-size: 1.6em;
	font-weight: 900;
	letter-spacing: 0.15em;
	z-index: 2;
	white-space: nowrap;

	/* 2. 枠線に「厚み」と「光沢」を与える多重影 */
	text-shadow:
		/* 金属枠のハイライト（右上） */
		1px -1px 0 #FFFFFF,
		/* 金属枠の奥行き（左下へ階段状に配置） */
		-1px 1px 0 #B0B0B0,
		-2px 2px 0 #808080,
		-3px 3px 0 #606060,
		/* 全体が浮き上がるための暗い影 */
		4px 4px 8px rgba(0, 0, 0, 0.7);

	/* 3. 枠がキラリと光るアニメーション */
	animation: frame-shine 4s ease-in-out infinite;
}

@keyframes frame-shine {

	0%,
	100% {
		transform: translateX(-50%) translateY(0) scale(1);
		filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
	}

	50% {
		transform: translateX(-50%) translateY(-10px) scale(1.05);
		/* 枠線が発光するようなエフェクト */
		filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
		-webkit-text-stroke: 1px #FFFFFF;
	}
}

@media screen and (max-width: 768px) {
	.subtitle-text {
		font-size: 1.5em;
		/* フォントサイズを調整 */
	}
}

@media screen and (max-width: 580px) {
	.subtitle-text {
		font-size: 1.1em;
		/* フォントサイズを調整 */
	}
}

</style>