<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>サイトタイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" href="icon.png">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700&display=swap&text=0123456789" rel="stylesheet">
<style>
body {
color: #01293f;
font-family: 'Roboto', "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", Meiryo, sans-serif;
-webkit-font-feature-settings: 'palt' 1;
font-feature-settings: "palt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
letter-spacing: 0.15em;
line-height: 1.4;
background: #e8f3f4;
color: #01293f;
}
::selection {
background: rgba(#01293f, 0.5);
}
html,body,main {
height: 100%;
margin: 0;
}
main {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.maintenance {
width: 50%;
text-align: center;
}
.maintenance > h1 {
font-size: 40px;
}
.maintenance > div {
background: #01293f;
color: #fff;
padding:0.5em 5em;
font-size: 20px;
margin-bottom: 2em;
}
@media only screen and ( max-width: 776px ) {
.maintenance > div {
padding:0.5em 1em;
}
}
.maintenance__contact {
margin-top: 3em;
}
.maintenance__contact > h1, .maintenance__contact > div {
font-size: 20px;
}
</style>
</head>
<body>
<main>
<section class="maintenance">
<h1>只今メンテナンス中です。</h1>
<div>
メンテナンス終了予定：9月26日(木)17:00
</div>
<p>
ご不便お掛けしますがメンテナンス作業終了まで今しばらくお待ちください。
</p>
<section class="maintenance__contact">
<h2>
サイトタイトル
</h2>
<div>
TEL. 096-000-0000
</div>
</section>
</section>
</main>
</html>
