@charset "utf-8";
/* CSS Document */
.first-view-area {
  position: relative;
  background-image: url("../img/pc-sasimi-big.jpg");
  background-repeat: no-repeat no-repeat;
  background-position: center;
  background-size: cover;
  margin-bottom: 160px;
  aspect-ratio: 1920 / 650; /*縦横比固定*/
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width:800px) {
  .first-view-area {
    margin-bottom: 80px;
  }
}
  .breadcrumb {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
  }
  .breadcrumb ul {
    display: flex;
    margin: 0 5px;
    padding: 0;
  }
  .breadcrumb li {
    margin-left: 13px;
    padding: 10px 5px;
    color: #000;
    font-size: 20px;
  }
  .breadcrumb li:not(:last-child)::after {
    content: '>';
    color: #000;
  }
  .breadcrumb li a {
    padding-right: 10px;
  }
  @media (max-width:800px) {
    .breadcrumb li {
      font-size: 10px;
    }
  }
  .first-view-text h1 {
    font-size: 56px;
    padding-bottom: 5px;
  }
  .first-view-text p {
    font-size: 24px;
    text-align: center;
  }
  @media (max-width:800px) {
    .first-view-text h1 {
      font-size: 28px;
    }
    .first-view-text p {
      font-size: 13px;
    }
  }
  /*料理intro*/
  .cuisine-intro {
    margin-bottom: 160px;
  }
  .cuisine-intro-text {
    width: calc(668 / 1920 * 100%);
    margin-left: calc(80 / 1920 * 100%);
    margin-bottom: 50px;
  }
  /*指定する際は必ず.rightの前はスペースを空けない*/
  .cuisine-intro-text.right {
    margin: 50px calc(80 / 1920 * 100%) 0 auto;
    /*autoで反対側に向けて押し出すことで余白を生み出す*/
  }
  .cuisine-intro-text h2 {
	  font-size: 24px;
    margin-bottom: 20px;
  }
  .cuisine-intro-text p {
	   font-size: 16px;
    line-height: 25px;
  }
  @media (max-width:800px) {
	  .cuisine-intro {
    margin-bottom: 80px;
  }
  .cuisine-intro-text {
    width: calc(500 / 800 * 100%);
    margin-left: calc(80 / 1920 * 100%);
    margin-bottom: 10px;
  }
  /*指定する際は必ず.rightの前はスペースを空けない*/
    .cuisine-intro-text h2 {
		font-size: 16px;
    }
    .cuisine-intro-text p {
      font-size: 13px;
		line-height: 20px;
    }
	 .cuisine-intro-text.right{
		  margin-top: 20px;
	  }
  }
  .cuisine-intro-img {
    aspect-ratio: 1920 / 500; /*縦横比固定*/
    overflow: hidden; /*はみ出た分を隠す*/
  }
  .cuisine-intro-img img {
    object-fit: cover; /*画像を目一杯広げる→画像が潰れないようにするため*/
  }
	@media (max-width:800px){
		.cuisine-intro-img img {
			margin-top:10px; 
		}
	}
  .cuisine,.cuisine-reverse {
    display: flex;
    width: calc(1200 / 1920 * 100%);
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
  }


  /* デフォルト：PC表示で横並び */
.cuisine-reverse {
  display: flex;
  flex-direction: row-reverse; 
  width: calc(1200 / 1920 * 100%);
  justify-content: center;
align-items: flex-start;
  margin: 0 auto 80px;     /* 上下マージン、左右はautoで中央寄せ */
  padding: 0 20px;          /* 余白を左右に少し */
  box-sizing: border-box;   
}
@media (max-width: 800px) {
	.cuisine-reverse {
    display: block;/* 縦並びに */
    max-width: 100%;
    margin: 0 auto 40px;/*上下マージン縮小 */
    padding: 0 10px;
    text-align: center;
  }
  .cuisine-img {
    margin-top: 20px;
  }
  .cuisine-text, .cuisine-img {
    max-width: 100%;         /* 子要素も画面幅いっぱいに */
    margin-left: auto;
    margin-right: auto;
  }

  .cuisine-img img {
    display: inline-block;
    max-width: 100%;
    height: auto;
  }
}



@media (max-width: 800px) {
  .cuisine,.cuisine-reverse {
    display: block; /* ブロックにして縦並びにする→画像をカラム落ちさせる */
    width: 100%; /* 幅も100%に */

  }
  .cuisine-img {
    margin-top: 20px;
  }
}
  .cuisine-text {
    width: calc(480 / 1198 * 100%);
    margin-top: 50px;
  }
.cuisine-text, .cuisine-img {
  /* 適宜幅を調整 */
  max-width: 600px;  /* 片側の最大幅 */
}
  .cuisine-text h2 {
    font-size: 32px;
    padding-bottom: 5px;
  }
  .cuisine-text_en {
    font-size: 20px;
  }
  .cuisine-text h3 {
    font-size: 24px;
    padding-top: 50px;
  }


  .cuisine-text h2 {
    font-size: 24px;
    padding-bottom: 5px;
  }
  .cuisine-text_en {
    font-size: 16px;
  }
  .cuisine-text h3 {
    font-size: 16px;
    padding-top: 50px;
  }
@media (max-width:800px){
	.cuisine-text {
    width: calc(1000 / 1198 * 100%);
    margin-top: 50px;
		text-align: left;
  }
	.cuisine-text h2 {
    font-size: 20px;
  }
  .cuisine-text_en {
    font-size: 12px;
  }
  .cuisine-text h3 {
    font-size: 16px;
    padding-top: 50px;
  }
}
 
  .list p {
    padding-bottom: 10px;
    font-size: 13px;
  }
  .list li {
    font-size: 16px;
    line-height: 50px;
  }
  .list {
    padding-top: 10px;
    list-style: circle;
    padding-left: 30px;
    padding-right: 30px;
  }
@media (max-width:800px){
  .list p {
    font-size: 13px;
  }
  .list li {
    font-size: 13px;
    line-height: 25px;
	padding-bottom: 10px;
  }

}
 .link-button {
    width: 150px;
    height: 50px;
    font-size: 18px;
    display: block;
    margin: 50px 85px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px dotted #5D2F00;
    border-radius: 5px;
    color: #5D2F00;
    font-family: "Shippori Mincho B1", serif;
    font-weight: 800;
	  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: box-shadow 0.3s ease;	
  }
@media (max-width:800px){
	.link-button{
    width: 120px;
    height: 40px;
    font-size: 13px;
	}}
  .link-button:hover {
    background-color: #FDFFD4;
    color: #5D2F00;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
/* モバイル時だけ表示されるボタン */
.cuisine-button-mobile {
  display: none; /* 初期状態では非表示 */
}

@media (max-width: 800px) {
  .cuisine-button-mobile {
    display: flex;
    justify-content: center;

	}
	.link-button{
		display: none; /* 初期状態では非表示 */
	}
}

  .cuisine-img {
    width: calc(664 / 1198 * 100%);
	  height: calc(364 / 1198 * 100%);
	  /* background-color: rgba(198, 75, 54, 0.3);*/
  }
  .cuisine-img1, .cuisine-img3, .cuisine-img5, .cuisine-img7 {
    width: calc(514 / 664 * 100%);
    padding-top: 120px;
  }
  .cuisine-img2, .cuisine-img6 {
    width: calc(307 / 664 * 100%);
    margin-top: -50px;
    margin-left: -50px;
    position: relative;
    z-index: 1; /*z-indexを指定するためにはposition指定が必要*/
  }
  .cuisine-img4, .cuisine-img8 {
    width: calc(307 / 664 * 100%);
    margin-top: -50px;
    margin-left: 350px;
    position: relative;
    z-index: 1; /*z-indexを指定するためにはposition指定が必要*/
  }
@media (max-width:800px){
	.cuisine-img1, .cuisine-img3, .cuisine-img5, .cuisine-img7 {
    padding-top: 0;
  }
	.cuisine-img4, .cuisine-img8 {
    width: calc(307 / 664 * 100%);
    margin-top: -50px;
    margin-left: 150px;
    position: relative;
    z-index: 1; /*z-indexを指定するためにはposition指定が必要*/
  }
}