@charset "utf-8";

/* =========================
共通設定
========================= */

/* =========
フォント
========= */
/*楷書*/
h1,
h2,
h3,
.yuji-syuku-regular {
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
}

/*太字明朝*/
.noto-serif-jp-bold {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

/*=======
button
=======*/
.toggle-menu-button {
  display: none;
}

.button {
  background-color: #b6854f;
  color: #fffef3;
  border:solid 4px #b6854f;
  padding: 4px 30px;
  border-radius: 30px;  
  text-decoration: none;
  font-size: 24px;
  display: block; 
    margin: 0 auto;
    width: fit-content;
  }

.button:hover { 
  background-color: #fffef3;
  color: #b6854f;
}

/* ================================
動画
================================= */
.video-container {
  display: block;
  min-width: calc(100vw - 40%);
  height: 100vh;
  overflow: hidden;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sticky{  
  position: sticky;
  top: 0;
  left: 0;
}
/* ======================================
トップページ
====================================== */
/* 全体 */
.content{
  display: flex;
  width: 100%;
}
.main{
  margin-top: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.toptext .maincopy{
  font-size: 56px;
  font-weight: bold;
  margin: 24px 0;
}

.toptext p{ 
  line-height: 1.6em;
  font-size: 24px;
}

/* お品書き */   
h1{
  font-size: 40px;
  color: #b6854f; 
  margin-top: 8px;
}

.top-menu-card{
  display: flex;
justify-content: space-around;
padding-top: 16px;    
}     

.top-menu a img{
  width: 240px;
  height: 240px;
  object-fit: cover;
}

.top-menu-card p{
  font-size: 32px;
}

.for-menu{
  margin-top: 16px;
}

/* ==========================
こだわり
========================== */


.kodawari .pride{
  width: 480px;
margin-top: 54px;
}
.for-pride{
  margin-top: 16px;
}

/* ==========================
アクセス
========================== */
.access{
margin-top: 54px;
}
.map iframe{
  min-height: 300px;
  width: 60%;
}
.map img{
width: calc(440px - 10% )
}

/* ==================================================
  スマホ・タブレット対応 (768px以下)
================================================== */
@media (max-width: 768px) {
  /* --- 全体調整 --- */
  .content {
    flex-direction: column; 
    width: 100%;
  }

  /* --- 動画エリア） --- */
  .video-container {
    width: 100%;
    min-width: 100%;
    height: 35vh; 
  }

  /* --- メインコンテンツ --- */
  .main {
    margin-top: 0; 
    padding: 40px 24px;
    width: 100%;
  }

  .toptext .maincopy {
    font-size: 32px; 
    line-height: 1.4;
    margin: 24px 0;
  }

  .toptext p {
    font-size: 18px;
    line-height: 1.8;
  }

  h1 {
    font-size: 28px;
    margin-top: 48px;
    margin-bottom: 16px;
  }

  /* --- お品書き --- */
  .top-menu-card {
    flex-direction: column; 
    align-items: center;
    gap: 32px;
    padding-top: 16px;
  }

  .top-menu-card a {
    display: block;
    width: 100%;
    max-width: 280px; 
  }

  .top-menu a img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; 
    border-radius: 8px; 
  }

  .top-menu-card p {
    font-size: 22px;
    margin-top: 12px;
  }

  /* --- ボタン--- */
  .button {
    font-size: 18px;
    padding: 12px 40px; 
    margin: 32px auto 0;
  }

  /* --- こだわり --- */
  .kodawari .pride {
    width: 100%;
    max-width: 360px; 
    margin-top: 48px;
  }

  /* --- アクセス・地図 --- */
  .access p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
  }

  .map {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .map iframe {
    width: 100%;
    min-height: 280px;
  }

  .map img {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }

  /* --- フッターの調整 --- */
  .footer {
    padding: 40px 24px;
    width: 100%;
  }

  .footer-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .footer-logo {
    width: 100%;
    max-width: 240px;
  }

  .open-time h2 {
    font-size: 22px;
  }

  .open-time p {
    font-size: 16px;
    line-height: 1.6;
  }

  .footer-item2 {
    margin: 0;
  }

  .footer-item2 h2 {
    font-size: 18px;
    line-height: 1.6;
  }

  .tel {
    font-size: 26px;
    margin-top: 16px;
    justify-content: center;
  }

  .tellephone {
    width: 24px;
    margin-right: 12px;
  }

  .footer-menu {
    margin-top: 32px;
  }

  .footer-menu ul {
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
  }

  .footer-menu li {
    font-size: 18px;
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
  }

  .footer-menu span {
    padding: 8px 32px;
    display: inline-block;
  }
}