<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
	<meta name="description" content="<?=h($description)?>">
	<meta name="theme-color" content="#81bcd8">
	<meta property="og:site_name" content="<?=h($sitename)?>">
	<meta property="og:url" content="<?=h($mysite)?>">
	<meta property="og:type" content="website">
	<meta property="twitter:url" content="<?=h($mysite)?>">
	<title><?=h($title)?></title>
	<link rel="canonical" href="<?=h($mysite)?>">
	<meta name="msapplication-square70x70logo" content="/images/favicons/site-tile-70x70.png?<?=h(date('Ymd-Hi'))?>">
	<meta name="msapplication-square150x150logo" content="/images/favicons/site-tile-150x150.png?<?=h(date('Ymd-Hi'))?>">
	<meta name="msapplication-wide310x150logo" content="/images/favicons/site-tile-310x150.png?<?=h(date('Ymd-Hi'))?>">
	<meta name="msapplication-square310x310logo" content="/images/favicons/site-tile-310x310.png?<?=h(date('Ymd-Hi'))?>">
	<meta name="msapplication-TileColor" content="#fff">
	<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/images/favicons/favicon.ico?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/vnd.microsoft.icon" href="/images/favicons/favicon.ico?<?=h(date('Ymd-Hi'))?>">
	<link rel="apple-touch-icon" sizes="57x57" href="/images/favicons/apple-touch-icon-57x57.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/apple-touch-icon-60x60.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/apple-touch-icon-72x72.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/apple-touch-icon-76x76.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/apple-touch-icon-114x114.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/apple-touch-icon-120x120.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/apple-touch-icon-144x144.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/apple-touch-icon-152x152.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon-180x180.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="36x36" href="/images/favicons/android-chrome-36x36.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="48x48" href="/images/favicons/android-chrome-48x48.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="72x72" href="/images/favicons/android-chrome-72x72.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="96x96" href="/images/favicons/android-chrome-96x96.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="128x128" href="/images/favicons/android-chrome-128x128.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="144x144" href="/images/favicons/android-chrome-144x144.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="152x152" href="/images/favicons/android-chrome-152x152.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/android-chrome-192x192.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="256x256" href="/images/favicons/android-chrome-256x256.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="384x384" href="/images/favicons/android-chrome-384x384.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="512x512" href="/images/favicons/android-chrome-512x512.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="36x36" href="/images/favicons/icon-36x36.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="48x48" href="/images/favicons/icon-48x48.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="72x72" href="/images/favicons/icon-72x72.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="96x96" href="/images/favicons/icon-96x96.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="128x128" href="/images/favicons/icon-128x128.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="144x144" href="/images/favicons/icon-144x144.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="152x152" href="/images/favicons/icon-152x152.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="160x160" href="/images/favicons/icon-160x160.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="192x192" href="/images/favicons/icon-192x192.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="196x196" href="/images/favicons/icon-196x196.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="256x256" href="/images/favicons/icon-256x256.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="384x384" href="/images/favicons/icon-384x384.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="512x512" href="/images/favicons/icon-512x512.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/icon-16x16.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="24x24" href="/images/favicons/icon-24x24.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/icon-32x32.png?<?=h(date('Ymd-Hi'))?>">
	<link rel="manifest" href="/manifest.json">
	<style>
		body {
			margin: 0;
			background-color: #f8f9fa;
			color: #333;
			font-family: "Helvetica Neue",
			Arial,
			"Hiragino Kaku Gothic ProN",
			"Hiragino Sans",
			Meiryo,
			sans-serif;
			font-size: 16px;
			font-weight: normal;
			line-height: 1.5em;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			min-height: 100vh;
			text-align: center;
			width: 100%;
		}

        main {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            justify-content: flex-start;
            align-items: center;
            margin: 12vmax auto auto;
        }

		.container {
			max-width: 600px;
			padding: 20px;
		}

		h1 {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 10px;
			color: #777;
            font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
			font-size: 40px;
			font-weight: normal;
			padding-bottom: 5vh;
		}

		.error {
			color: #666;
			font-size: 32px;
			font-weight: lighter;
		}

		p {
            color: #444;
			line-height: 1.6em;
			padding-bottom: 1vh;

		}

		.top-link {
			margin-top: 5vh;
		}

		a {
			text-decoration: none;
			color: #61abf3;
			font-weight: bold;
			transition: color 0.3s;
		}

		a:hover {
			color: #81bcd8;
		}

		.follow {
			padding-top: 1vh;
		}

        footer {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            background: #333;
            padding: 20px 0;
            width: 100%;
        }

        .copyright {
            color: #fff;
            font-size: 12px;
            margin: 0;
        }
	</style>
</head>
<body>
	<!-- コンテンツ -->
	<main>
		<div class="container">

			<h1><?=h($h1)?>	<span class="error">- error -</span></h1>

			<?php if (!empty($thanks)) : ?>
				<p><?=h($thanks)?></p>
			<?php endif; ?>

			<?php if (!empty($messeage)) : ?>
				<p><?=nl2br(h($messeage))?></p>
			<?php endif; ?>

			<?php if (!empty($follow)) : ?>
				<div class="follow">
					<a href="https://twitter.com/hiboustop?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-screen-name="false" data-lang="ja" data-dnt="true" data-show-count="false">Follow @hiboustop</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
				</div>
			<?php endif; ?>

			<?php if (!empty($home)) : ?>
				<div class="top-link">
					<a href="<?=h($home)?>">ホームに戻る</a>
				</div>
			<?php endif; ?>

		</div>
	</main>
	<!-- フッター -->
	<footer>
		<span class="copyright">&copy; <?= h($year) ?> <?=h($sitename)?></span>
		<a href="https://twitter.com/hiboustop?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-screen-name="false" data-lang="ja" data-dnt="true" data-show-count="false">Follow @hiboustop</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
	</footer>
</body>
</html>