/* ==========================================
   PC用のheaderのタイトル (min-width: 1025px内)
   ========================================== */
@media (min-width: 1025px) {

    .h1 {
      font-size: calc(1.1rem + 1.1vw); 
      margin-top: 0;
      margin-bottom: 1rem; 
      padding: 0;                      /* 親のpaddingと干渉を防ぐため0に */
      font-weight: 500;
      line-height: 1.4;
      letter-spacing: 0.03rem;
      text-shadow: 0 0 12px rgba(26, 15, 8, 0.85), 0 0 25px rgba(26, 15, 8, 0.6);
      text-align: center;
      word-break: break-word;
    }

    /* タイトル内のリンクの色と装飾 */
    .h1 a {
      color: #EAD09E;
      text-decoration: none; 
    }
    .h1 a:hover {
      color: #FFF8ED;
    }

    .h5 {
      font-size: calc(0.9rem + 0.3vw);  /* 少しだけPCでの見え方をシャープに */
      margin-top: 0;
      margin-bottom: 2rem;
      font-weight: 500;
      line-height: 1.4;
      text-shadow: 0 0 12px rgba(26, 15, 8, 0.85), 0 0 25px rgba(26, 15, 8, 0.6);
      text-align: center;
      color: #F0EAE1;
    }
}

/*------ Webサイトの構成 ------*/

/*------ スマホ ヘッダー（バーガーメニュー）------*/
/*.header-sp
 ├─ nav.navbar
 │    ├─ button（≡）
 │    └─ logo
 │
 └─ #navbarMobile（スライドメニュー）
*/

/*------ container  ------*/
/*
CSSとの対応
display: grid;  // PC
display: block; // SP
┌──────────────────────────────┐
│ container                    │
│                              │
│ ┌──────────┬───────────────┐ │
│ │ aside    │ header        │ │
│ │ (PC only)│ (PC only)     │ │
│ │          ├───────────────┤ │
│ │          │ main          │ │
│ │          │ (all devices) │ │
│ │          ├───────────────┤ │
│ │          │ footer        │ │
│ │          │ (all devices) │ │
│ └──────────┴───────────────┘ │
└──────────────────────────────┘

スマホの振る舞い
- container → block layout
- aside / header → hidden
- main / footer → stacked

*/
/* ==========================================
   スマホ・タブレット用 (max-width: 1024px内)
   ========================================== */
@media (max-width: 1024px) {

    /*スマホタイトル*/
    .title-sp {
        padding: 1rem 0.75rem; 
    }

    .h1 {
        font-size: calc(0.9rem + 0.5vw);
        line-height: 1.4;
        margin: 0 0 0.6rem 0; 
        word-break: break-word;
        text-shadow: 0 0 12px rgba(26, 15, 8, 0.85), 0 0 25px rgba(26, 15, 8, 0.6);
        text-align: center;
    }

    .h1 a {
      color: #EAD09E;
      text-decoration: none;
    }

    .h5 {
        /* スマホでのサブタイトルサイズ */
        font-size: calc(0.75rem + 0.3vw);
        margin: 0 0 0.5rem 0; 
        text-shadow: 0 0 12px rgba(26, 15, 8, 0.85), 0 0 25px rgba(26, 15, 8, 0.6);
        text-align: center;
        color: #F0EAE1;
    }

  /* ナビバー */
  .navbar {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;

    height: 56px;
    padding: 0 0.75rem;

    position: relative;
    z-index: 1100;
  }

  /* ハンバーガーメニュー */
  .hamburger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 24px;
  }

  .hamburger span {
      display: block;
      height: 3px;
      margin: 3px 0;
      background: #F0EAE1;
  }

  .logo {
    grid-column: 3;
    justify-self: end;
  }

  .logo img {
    height: 52px;
    object-fit: contain;
    margin-top: 4px;
  }

  /* トグラー（ハンバーガーメニュー）関連 */
  #toggleButton {
    grid-column: 1;
    justify-self: start;

    /* デフォルトのボタンスタイル無効 */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  #toggleButton:focus {
    outline: none;
  }

  /* 横から出てくるメニュー*/
  #navbarMobile {
      position: fixed;
      top: 56px; 
      transform: translateX(-100%);
      transition: transform 0.3s ease, opacity 0.3s ease;
      width: 75%;
      max-width: 300px;
      height: calc(100vh - 56px);
      background: rgba(26, 15, 8, 0.98);
      box-shadow: 3px 0 15px rgba(245, 235, 215, 0.1);
      padding: 1rem 0.5rem 1rem 1rem;
      z-index: 1000;
      overflow-y: auto;
  }

  #navbarMobile.active {   
      transform: translateX(0);
  }

  /*横か出てくるメニューの「×」*/
  #closeButton {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      width: 32px;         /* ボタン自体の横幅 */
      height: 32px;        /* ボタン自体の縦幅 */
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
  }

  #closeButton::before,
  #closeButton::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;         /* 線の長さ */
      height: 1px;         /* 線の太さ */
      background-color: #eee; /* 線の色 */
  }

  #closeButton::before {
      transform: translate(-50%, -50%) rotate(45deg);
  }

  #closeButton::after {
      transform: translate(-50%, -50%) rotate(-45deg);
  }

}