room.html-height

by take0844

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>石井花壇|温海温泉旅館【公式サイト】</title>
	<meta content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。" name="description">
	<link href="./css/destyle.css" rel="stylesheet" type="text/css">
	<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"><!--flatpicker-->
	<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/flatpickr">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js">
	</script>
	<link href="./css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="body-wrapper">
		<header class="header">
			<div class="header-inner">
				<div class="header-left">
					<h1 class="logo"><a href="../index.html"><img alt="" class="header-logo" src="/img/top-header-logo.png"></a></h1>
					<nav class="nav nav-open drawer-nav">
						<ul class="header-list">
							<li class="header-item">
								<a href="#">お部屋</a>
							</li><!-- /.header-item -->
							<li class="header-item">
								<a href="../Menu/menu.html">お料理</a>
							</li><!-- /.header-item -->
							<li class="header-item">
								<a href="../Onsen/onsen.html">温泉</a>
							</li><!-- /.header-item -->
						</ul><!-- /.header-list -->
					</nav><!-- /.nav -->
				</div>
				<div class="header-right">
					<div class="header-link" id="js-modal">
						<a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> -->
						 宿泊予約</a>
					</div><!-- /.header-link -->
					 <button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
				</div><!-- /.header-right -->
			</div><!-- /.header-inner...

CSS

@charset "UTF-8";
/* body-wrapper */
.body-wrapper {
  overflow: hidden;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  color: #000000;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.inner {
  max-width: 1180px;
  margin: 0 auto;
}

.wrapper {
  width: 100%;
  margin: 0 auto;
}

/* .sec-theme{
    margin: 0 auto;
    >img{
        display: block;
        width: 3.3%;
        height: 5.1%;
        margin: 0 auto;
        padding-top: 60px;
        padding-bottom: 20px;
    }

    .cmn-ttl{
        display: block;
        font-size: 3.6rem;
        color: $word-color;
        text-align: center;
        margin: 0 auto;
    }
}

//共通リンク
.cmn-link{
    background-color: $bg-white;
    width: 22%;
    height: calc(54px/545px*100%);
    border: 1px solid #707070;
    font-size: 1.6rem;
    text-align: center;
    @include mr {
        margin: 0 auto;
    //}
} */
.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  max-height: 80px;
  background-color: transparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 20px;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .header {
    position: fixed;
    top: 0;
    padding: 15px 20px;
  }
}

@media screen and (max-width: 599px) {
  .header {
    position: fixed;
    top: 0;
    padding: 8px 10px;
    max-height: 60px;
  }
}

.header-inner {
  max-width: 1880px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.header-left {
  display:...