Notes

<!DOCTTYPE html>
<h1>here</h1>

<header>
<div class="h-menu">
<input id="h-menu_checkbox" class="h-menuCheckbox" type="checkbox">
<label class="h-menu_icon" for="h-menu_checkbox"><span class="hamburger-icon"></span></label>
<label id="h-menu_black" class="h-menuCheckbox" for="h-menu_checkbox"></label>
<div id="h-menu_content">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Concept</a></li>
> <li><a href="#">Menu</a></li>
<li><a href="#">Shop Info</a></li>
</div>
</div>
</header>
<div class="flex">
<p><img src="https://resizer2.myct.jp/img/19854867757/B098338036_419-314.jpg"></p>
<p>hereではお客様一人一人を大切に、心を込めて、カウンセリングからセットまでマンツーマンで丁寧に行います。年齢、性別を問わず、様々なお客様との出会いを大切にしていきます。開放感がありつつも、他のお客様を気にすることのない優しい空間でのんびりお過ごしください。</p>
</div>

<style type="text/css">


h2 {font-size: 30}
header {
padding: 16px;
background: #ffffff;
}

.h-menu{
position: relative;
}

/*inputのcheckboxは非表示に*/
.h-menuCheckbox {
display:none;
}

/*ハンバーガーメニュー*/
.h-menu_icon {
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
}

/*3本線*/
.hamburger-icon, .hamburger-icon::before, .hamburger-icon::after {
content: '';
display: block;
position: absolute;
z-index: 100;
top:0;
bottom:0;
width: 32px;
height: 3px;
background: black;
cursor: pointer;
}
.hamburger-icon:before {
top: 10px;
}
.hamburger-icon:after {
top: 20px;
}

/*メニュー以外を暗くする*/
#h-menu_black {
display: none;
position: fixed;
z-index: 98;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
opacity: 0;
transition: .7s ease-in-out;
}

/*中身*/
#h-menu_content {
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
max-width: 320px;
height: 100vh;
padding: 53px 16px 16px;
background: #1f2c37;
overflow: auto;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}

/*チェックボックスにチェックが入ったら表示*/
input:checked ~ .h-menu_icon .hamburger-icon{
background: transparent;
}
input:checked ~ .h-menu_icon .hamburger-icon::before{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top:10px;
z-index:999;
}
input:checked ~ .h-menu_icon .hamburger-icon::after{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top:10px;
z-index:999;
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .8;
}
#h-menu_checkbox:checked ~ #h-menu_content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
.h-menu_icon .hamburger-icon, .h-menu_icon .hamburger-icon::before, .h-menu_icon .hamburger-icon::after, #h-menu_black, #h-menu_content{
-webkit-transition: all .3s ;
transition: all .3s ;}

#h-menu_content ul{
list-style: none;
margin: 0;
padding: 0;
}
#h-menu_content ul li{
border-bottom: solid 1px white;
}
#h-menu_content li a {
display: block;
color: white;
font-size: 14px;
padding: 24px;
text-decoration: none;
transition-duration: 0.2s;
}
#h-menu_content li a:hover {
background: #455b6d;
}
</style>


</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d208742.56364985448!2d136.8024874283505!3d35.16653156153492!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6003a0d2e412e8c9%3A0x6b74defdbc95862!2shere!5e0!3m2!1sja!2sjp!4v1639610981049!5m2!1sja!2sjp" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>