@charset "utf-8";
/* CSS Document */
body {
 width: auto;
 background-image: url("images/下層背景 1.png");
 background-size: cover;
 color: #575757;
}
.header_logo {
 max-width: 200px;
 position: absolute;
 top: 5%;
 left: 5%;
}

header h1{
  font-size: 90px;
  font-family: "Zen Old Mincho", serif;
 font-weight: bold;
 font-style: normal;
  color: #FFFFFF;
  right: 5%;
  position: absolute;
	top: 75%;
 left: 55%;
	letter-spacing: 0.2em;
	text-align: right;
}

#FV img {
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
/*#top {
 width: auto;
 height: 100vh;
 background-image: url("images/istockphoto-484669180-1024x1024.jpg");
 background-size: cover;
 padding-left: 80px;
 padding-right: 80px;
}*/
section h3 {
 font-family: "Zen Old Mincho", serif;
 font-weight: bold;
 font-style: normal;
 font-size: 36px;
  text-align: center;}
  

body p{
 font-family: "Noto Sans JP", serif;
 font-optical-sizing: auto;
 font-weight: normal;
 font-style: normal;
 font-size: 16px;
}
.header_nav {
 width: auto;
 height: 70px;
 background-color: #F8F1E4;
 font-family: "Zen Old Mincho", serif;
 font-weight: medium;
 font-style: normal;
 font-size: 20px;
}
.header_nav ul {
 display: flex;
align-items: center;
 justify-content: space-around;
 max-width: 900px;
 margin: 0 auto;
  height: 70px;
}
.header_nav a {
 text-decoration: none;
  color: #575757;
	padding: 35px;
}
nav ul li a:hover {
  color: #ffa318;
  transition: color ease 0.3s;
}
.restaurant{
  margin-top: 100px;
   background-image: url("../images/レストラン_bg.jpg");
  background-size: cover;
  width: 100%;
  height: 250px;
  position: relative;
  
}
.bancarella{
  
   background-image: url("../images/ドルチェ_bg.jpg");
  background-size: cover;
  width: auto;
  height: 250px;
  position: relative;
  clear: both;
}
.Wine{
   background-image: url("../images/wine_bg.jpg");
  background-size: cover;
  width: auto;
  height: 250px;
  position: relative;
  clear: both;
}
.restaurant h2,.bancarella h2,.Wine h2{
    color: #fff;
  opacity: 0.5;
  font-family: "Bodoni Moda", serif;
  font-optical-sizing: auto;
  font-weight: medium;
  font-style: normal;
 font-size: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  letter-spacing: 0.1em;
  pointer-events: none;
}
.title{
    color: #fff;
 font-family: "Zen Old Mincho", serif;
 font-weight: bold;
 font-style: normal;
 font-size: 64px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  letter-spacing: 0.5em;
}
.flex{
	display: flex;
	justify-content: center;
	align-items: center;
	/*background-color: orange;*/
	margin: 200px 160px;
}
.text{
	width: 600px;
	height: 400px;
	/*background-color: aqua;*/
padding: 0 50px;
	line-height: 30px;
	
}
.text h3{
	/*background-color: aqua;*/
	margin-bottom: 80px;
}
.img{
	width: 600px;
	/*background-color: palevioletred;*/
	margin-right: 80px;
}
/*.float{
  float: left;
  width: 522px;
  height: 522px;
  margin-right: 360px;
  margin-bottom: 150px;
	display: inline-block;
}
.float_left{
  float: left;
  width: 522px;;
  height: 522px;
  margin-left: 360px;
}*/
.text{
  margin-right: 30px;
}
footer{
  width: auto;
  height: 349px;
  background-image: url("images/フッター.jpg");
	display: flex;
	flex-direction: column;
	text-align: center;
	background-size: cover;
  margin-top: 100px;
}
/* グリッドスタイル */
  .image-grid {
      display: flex; /* フレックスボックスを使用して画像を横並びに */
      justify-content: space-around; /* 画像間のスペースを均等に */
      gap: 20px; /* 画像間の余白 */
  }
  
  /* サムネイル画像のスタイル */
  .thumbnail {
      
      cursor: pointer;  /* カーソルをポインターにしてクリック可能に */
      transition: transform 0.3s; /* ホバー時の変化を滑らかに */
  }

  .thumbnail:hover {
      transform: scale(1.05); /* ホバー時に少し拡大 */
  }

  /* モーダルのスタイル */
  .modal {
      display: none; /* 初期状態は非表示 */
      position: fixed; /* スクロールしても位置が固定 */
      z-index: 1; /* 他の要素の上に表示 */
      left: 0;
      top: 0;
      width: 100%; /* 幅は全体 */
      height: 100%; /* 高さも全体 */
      overflow: auto; /* コンテンツが多い場合はスクロール */
      background-color: rgba(0, 0, 0, 0.7); /* 背景の透明度 */
  }

  .modal-content {
      margin: 15% auto; /* 中央寄せ */
      display: block; /* ブロック要素 */
      width: 80%; /* 幅は80% */
      max-width: 700px; /* 最大幅を設定 */
  }

  .close {
      position: absolute; /* 絶対位置に配置 */
      top: 10px; /* 上から10pxの位置 */
      right: 25px; /* 右から25pxの位置 */
      color: white; /* 色を白に */
      font-size: 35px; /* フォントサイズを35pxに */
      font-weight: bold; /* 太字 */
      cursor: pointer;  /* カーソルをポインターにしてクリック可能に */
  }



.instagram{
  display: flex;
  justify-content: space-around;
  margin: 50px 150px;
}
#instagram p{
	text-align: center;
	margin-top: 20px;
}
footer ul{
  display: flex;
  text-align: center;
  justify-content: space-around;
 max-width: 900px;
 margin: 0 auto;
  margin-top: 50px;
}
.footer{
  padding-top: 50px;
}
.SNS{
  max-width: 100px;
}
footer a{
  text-decoration: none;
  align-items: center;
  color: #575757;
	
}
.compass {
  position: absolute;
  right: 50px;
	
}