JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="jp">
<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>
	
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <!--flatpicker-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
	<link href="../Room/asset/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="../asserts/img/top-header-logo.png"></a></h1>
					<nav class="nav  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 -->
		</header><!-- /.header -->
		<div class="overlay"></div><!-- /.overlay -->
		<!-- </div>/.nav-wrapper -->
		<!--modal  -->
		<div...

CSS

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

html {
  font-size: 62.5%;
  font-family: “Times New Roman”, “游明朝”, “Yu Mincho”, “游明朝体”, “YuMincho”, “ヒラギノ明朝 Pro W3”, “Hiragino Mincho Pro”, “HiraMinProN-W3”, “HGS明朝E”, “ＭＳ Ｐ明朝”, “MS PMincho”, serif;
}

.scroll-prevent {
  /*動き固定*/
  position: fixed;
  /*奥行きを管理*/
  z-index: -1;
  /*下2つで背景を元のサイズのまま表示することができる*/
  width: 100%;
  height: 100%;
}

body {
  font-size: 1.6rem;
  color: #000000;
  min-width: 100vw;
}

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

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.inner {
  max-width: 1180px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .inner {
    padding: 0 25px;
  }
}

@media screen and (max-width: 599px) {
  .inner {
    padding: 0 15px;
  }
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  /*  -webkit-box-sizing: content-box;
    box-sizing: content-box; */
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .wrapper {
    padding: 0px 20px;
  }
}

@media screen and (max-width: 599px) {
  .wrapper {
    padding: 0 20px;
  }
}

.content-wrapper {
  margin: auto 20px;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .content-wrapper {
    padding: 0 25px;
  }
}

@media screen and (max-width: 599px) {
  .content-wrapper {
    padding: 0 15px;
  }
}

.sec-theme {
  margin: 0 auto;
}

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

.sec-theme .cmn-ttl {
  display: block;
  font-size: 3.6rem;
  color: #000000;
  text-align: center;
  margin: 0 auto;
}

.cmn-link {
  background-color: #ffffff;
  width: 40%;
  height: calc(54px/545px*100%);
  border: 1px solid #707070;
  font-size: 1.6rem;
  text-align: center;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .cmn-link {
    margin-top: 50px;
   ...

JavaScript

$(function(){
 
  $(".humburger, .overlay").on('click', function(){
    
 if($("this").hasClass('_active')){
  $(this).removeClass('_active');
  $(".line").removeClass('_open');

  $(".nav").removeClass("nav-open");
  // $(".drawer-nav").removeClass('_active');
  $('.overlay').removeClass('_open');
  $('html').removeClass('scroll-prevent') // 背景固定　解除
}
else{
      $(this).addClass('_active');
      $('.line').addClass('_open');

      $(".nav").addClass("nav-open");
      $('.drawer-nav').addClass('_open');
      $('.overlay').addClass('_open');
      $('html').toggleClass('scroll-prevent') // 背景を固定
       
}
  
});