body{
font-weight: 400;
font-family: "IBM Plex Sans JP", sans-serif;
}

main{
padding: 50px;
}

nav{
display: block;
width: 280px;
position: fixed;
background-color: rgb(255,244,222);
top: 0;
right: -220px;
left: auto;
bottom: 0;
transition: all 0.5s;
z-index: 3;
opacity: 0;
}

.open nav {
right: 0;
opacity: 1;
}

nav .inner{
padding: 25px;
}

nav .inner ul{
list-style: none;
margin: 0;
padding: 0;
}

nav .inner ul li{
margin: 0;
border-bottom:1px solid rgb(231,149,6);
}

nav .inner ul li a {
display: block;
text-decoration: none;
color: rgb(231,149,6);
font-size: 20px;
padding: 1rem;
transition-duration: 0.2s;
}

nav .inner ul li a:hover {
background-color: #e4e4e4;
}

.toggle-btn{
display: block;
position: fixed;
top: 30px;
right: 30px;
width: 30px;
height: 30px;
z-index: 3;
cursor: pointer;
}

.toggle-btn span{
position: absolute;
display: block;
left: 0;
width: 30px;
height: 2px;
background-color: rgb(231,149,6);
transition: all 0.3s;
border-radius: 4px;
}


.toggle-btn span:nth-child(1){
top: 4px;
}

.toggle-btn span:nth-child(2){
top: 14px;
}

.toggle-btn span:nth-child(3){
bottom: 4px;
}

.open .toggle-btn span:nth-child(1){
    transform: translateY(10px) rotate(-315deg);
}

.open .toggle-btn span:nth-child(2){
    opacity: 0;
}

.open .toggle-btn span:nth-child(3){
    transform: translateY(-10px) rotate(315deg);
}



#mask{
display: none;
transition: all 0.2s;
}

.open #mask{
display: block;
background-color: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 0.6;
cursor: pointer;
}

body{
   background-color: #fff; 
   background-repeat: no-repeat;
   background-size: cover;
}

.hero {
  width: 100%;                 
  height: 100vh;                
  background-image: url('ryebatake.jpg');
  background-size: cover;        
  background-position: center; 
  background-repeat: no-repeat;  
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width <= 640px) {
  .hero {
    height: 250px;            
    background-position: left center; 
  }
}








main{
padding: 50px;
}

nav{
display: block;
width: 280px;
position: fixed;
background-color: rgb(255,244,222);
top: 0;
right: -220px;
left: auto;
bottom: 0;
transition: all 0.5s;
z-index: 3;
opacity: 0;
}

.open nav {
right: 0;
opacity: 1;
}

nav .inner{
padding: 25px;
}

nav .inner ul{
list-style: none;
margin: 0;
padding: 0;
}

nav .inner ul li{
margin: 0;
border-bottom:1px solid rgb(231,149,6);
}

nav .inner ul li a {
display: block;
text-decoration: none;
color: rgb(231,149,6);
font-size: 20px;
padding: 1rem;
transition-duration: 0.2s;
}

nav .inner ul li a:hover {
background-color: #e4e4e4;
}

.toggle-btn{
display: block;
position: fixed;
top: 30px;
right: 30px;
width: 30px;
height: 30px;
z-index: 3;
cursor: pointer;
}

.toggle-btn span{
position: absolute;
display: block;
left: 0;
width: 30px;
height: 2px;
background-color: rgb(231,149,6);
transition: all 0.3s;
border-radius: 4px;
}


.toggle-btn span:nth-child(1){
top: 4px;
}

.toggle-btn span:nth-child(2){
top: 14px;
}

.toggle-btn span:nth-child(3){
bottom: 4px;
}

.open .toggle-btn span:nth-child(1){
    transform: translateY(10px) rotate(-315deg);
}

.open .toggle-btn span:nth-child(2){
    opacity: 0;
}

.open .toggle-btn span:nth-child(3){
    transform: translateY(-10px) rotate(315deg);
}



#mask{
display: none;
transition: all 0.2s;
}

.open #mask{
display: block;
background-color: #000;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 0.6;
cursor: pointer;
}

body{
   background-color: #fff; 
   background-repeat: no-repeat;
   background-size: cover;
}

.hero {
  width: 100%;                 
  min-height: 100vh;                
  background-image: url('ryebatake.jpg');
  background-size: cover;        
  background-position: center; 
  background-repeat: no-repeat;  
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width <= 640px) {
  .hero {          
    background-position: left center; 
  margin: 0;
    padding: 0;
    min-height: 100dvh;
    overflow-x: hidden;
  }
}