@charset "utf-8";

/* 共通 */
html, body {
  font-family: '游明朝体', serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
  color: #000;
  background: url("./images/HP-背景.jpg") repeat center center / cover;
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

.l-contents {
  width: 100%;
  display: flex;
  justify-content: center;
}

.single {
  width: 100%;
  max-width: 1200px;
  padding: 20px; /* 余白で“パンパン”回避 */
}

.logo-wrap {
  text-align: center;
  margin: 10px 0 8px;
}
.logo {
  width: 80%;
  max-width: 500px;
  height: auto;
}

/* 見出しは段差が出ないように統一 */
h2 {
  font-family: 'ヒラギノ角ゴシック', 'Meiryo', sans-serif;
  color: #fff;
  background-color: #e6703e;
  padding: 6px 10px;
  margin: 0 0 8px 0;
  line-height: 1.3;
  font-size: 18px;
  text-align: left;
}

.under { border-bottom: dashed 1px #e6703e; }

/* メイン2カラム（PC） */
.content-area {
  display: flex;
  gap: 20px;
}

/* 左：アクセス（2/3） */
.left-side {
  flex: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.address {
  text-align: left;
  margin: 6px 0 10px;
}

/* アクセス全体を縦flex化 */
#b-box {
  display: flex;
  flex-direction: column;
}

/* 上部（見出し＋住所）は通常フロー */
#b-box h2,
#b-box .address {
  flex: 0 0 auto;
}

/* 地図＋画像を残り領域で「縦方向のみ中央」 */
.map-photo-row {
  flex: 1;                  
  display: flex;
  align-items: center;      /* 縦だけ中央 */
  gap: 16px;
}

/* A4比の箱（JSで幅・高さをPC時に上書き） */
.ar-box {
  position: relative;
  background: #fff;
  overflow: hidden;
}
.ar-box iframe,
.ar-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover; /* 画像は切れずに“いっぱい” */
}

/* 右：問い合わせ＋メニュー（1/3） */
.right-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.contact-box,
.menu-box {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 問い合わせ */
.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 店主は左寄せ */
  gap: 14px;
  padding: 6px 10px 0;
}
.contact-inner .qr-wrap {
  width: 100%;
  display: flex;
  justify-content: center; /* 横中央 */
}

.contact-inner .qr-wrap img {
  display: block;     /* 画像をブロックに */
  margin: 0 auto;     /* 中央に */
  max-width: 70%;
  height: auto;
}


/* お品書き */
.menu-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上寄せ */
  padding: 20% 0; /* 上下20% */
}
.menu-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.menu-btn img {
  max-width: 80%;
  height: auto;
}

/* PDFモーダル */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
  justify-content: center;
  align-items: center;
}
.modal-content {
  position: relative;
  background: #fff;
  width: 90%;
  max-width: 900px;
  height: 90%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.modal-content iframe {
  flex: 1;
  width: 100%;
  border: none;
}
.close {
  position: absolute;
  bottom: 16px;   /* ←右下に配置 */
  right: 16px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background: #000;   /* 背景で見やすく */
  border-radius: 50%;
  width: 36px;
  height: 36px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.3); /* 見やすさアップ */
}

/* --- スマホ --- */
@media (max-width: 768px) {
  .content-area {                /* 縦並びに戻す */
    flex-direction: column;
  }

  .map-photo-row {
    flex-direction: column;
    gap: 10px;
  }

  .ar-box {
    width: 100%;
    aspect-ratio: 210 / 297;    /* SPはCSSでA4比キープ */
    position: relative;
    height: auto;               /* JSはSPでは何もしない */
  }
  .ar-box iframe,
  .ar-box img {
    position: absolute;
  }

  .qr-wrap img {
    max-width: 60%;
  }

  .menu-btn img {
    max-width: 60%;
  }
}