@charset "UTF-8";
/* CSS Document */

html, body {
  font-family: "Shippori Mincho", serif;
  font-style: normal;
  font-weight: 400; /* デフォルトはレギュラー */
}

/* 太さを変えたいときだけクラスを付与 */
.fw-500 { font-weight: 500; }  /* Medium */
.fw-600 { font-weight: 600; }  /* Semi-bold */
.fw-700 { font-weight: 700; }  /* Bold */

/* コンテナ */
.container {
  max-width: 1100px;
  width: calc(100% - (20px * 2));
  margin: 0 auto;
}

/* ヘッダー */
.header {
  position: absolute; /* 固定配置 */
  top: 0; /* 上部に固定 */
  right: 0; /* 右側に固定 */
  width: 300px; /* 固定幅 */
  height: 768px; /* 高さを200vhに設定 */
  background-color: #282D4B; /* 背景色 */
  text-align: center; /* 横方向中央揃え */
}
@media (max-width:820px) {
  .header {
    width: 50px;
    height: 50px;
  }
}

/* ハンバーガーボタン */
.header_hamburger {
  display: none;
}
@media (max-width:820px) {
  .header_hamburger {
    display: block;
    width: 50px;
    height: 50px;
    background: #7E0D0B;
    position: fixed;
    z-index: 1001; /* メニューより上に */
    border: none;      /* 白枠を消す */
    outline: none;     /* クリック時の青枠を消す */
    appearance: none;  /* ブラウザ標準の装飾を無効化 */
  }
  .header_hamburger span {
    display: block;
    width: 20px;
    height: 1px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .header_hamburger span:nth-child(1) {
    background: #ffffff;
    top: -16px;
    transition: opacity .3s;
  }
  .header_hamburger span:nth-child(3) {
    background: #ffffff;
    bottom: -16px;
    transition: opacity .3s;
  }
  .header_hamburger span:nth-child(2)::before,
  .header_hamburger span:nth-child(2)::after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transition: transform .3s;
    transform-origin: center;
  }
}

/* ヘッダーメニュー */
@media (max-width:820px) {
  .header_menu { 
    display: none;
  }
}

/* ヘッダーロゴ */
.header_logo {
  margin-top: 28px;
  margin-bottom: 10px;
}

/* ヘッダーメニュー */
.header_nav ul {
  padding: 0;/* ulの余白をリセット */
  margin: 0;/* ulの余白をリセット */
}
.header_nav li {
  margin-bottom: 35px;/* ナビ同士の縦間隔 */
}
.header_nav li a {
  font-weight: 600;/* セミボールド */
  font-size: 25px;/* フォントサイズ */
  color: #ffffff;/* 文字色 */
  text-decoration: none;/* 下線を消す */
}
.header_nav li a:hover {
  opacity: 0.4; /* ホバー時の軽いアニメーション */
}

/* ヘッダーアイコン */
.header_sns {
  display: flex;/* 横並びにする */
  gap: 40px; 
  justify-content: center;/* 横方向の中央揃え */
}
.header_sns a:hover {
  opacity: 0.4; /* ホバー時の軽いアニメーション */
}

 /* ヘッダー電話リンク */
.header_tel p {
  font-weight: 500;/* ミディアム */
  font-size: 20px;/* フォントサイズ */
  color: #ffffff;
  padding-top: 35px;
}
.header_tel p:last-child {
  font-weight: 500; /* ミディアム */
  font-size: 27px; /* 電話番号の大きさ */
  color: #ffffff;
  padding-top: 3px;
}
.header_tel-label {
  font-weight: 400;/* レギュラー */
  font-size: 19px; /* Tel の部分だけ小さめ */
}

/* ヘッダー営業時間 */
.header_info-pc {
  color: #ffffff;
  padding-top: 30px;
}

.header_info-title {
  font-weight: 500;/* ミディアム */
  font-size: 20px;/* フォントサイズ */
}
.header_info-time {
  font-weight: 500;/* ミディアム */
  font-size: 27px;/* フォントサイズ */
  padding-top: 3px;
}
.header_info-lo {
  font-weight: 400;/* レギュラー */
  font-size: 19px; /* L.O.だけ小さめ */
}
.header_info-notes {
  font-weight: 400;/* レギュラー */
  font-size: 18px;/* フォントサイズ */
}

/* ▼スマホメニュー全画面化 */
@media (max-width:820px) {
  .header_menu {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 と同じ */
    background: #282D4B;
    padding-top: 50px; /* メニューの上に余白 */
    padding-bottom: 40px;
    display: none;
    z-index: 999;
    overflow-y: auto;
  }
}

/* 開いた時に表示 */
body.is-spMenuOpen .header_menu {
  display: block;
}

/* スマホメニューを開いた時の設定 */
@media (max-width: 820px) {
  .is-spMenuOpen .header_menu {
    display: block;
  }
  .is-spMenuOpen .header_hamburger span:nth-child(1),
  .is-spMenuOpen .header_hamburger span:nth-child(3) {
    display: none; 
  }
  .is-spMenuOpen .header_hamburger span:nth-child(2)::before {
    transform: rotate(45deg);
  }
  .is-spMenuOpen .header_hamburger span:nth-child(2)::after {
    transform: rotate(-45deg);
  }
}
  

/* フッター */
.footer {
  background: #272E4B;
  color: #ffffff;
  padding-top: 85px;
  padding-bottom: 20px;
}
@media (max-width: 820px) {
  .footer {
    padding-top: 55px;
    padding-bottom: 15px;
  }
}

.footer_nav ul {
  display: flex;            /* 横並び */
  justify-content: center;  /* 中央配置 */
  gap: 80px;                /* 各項目の間隔（お好みで調整） */
  list-style: none;         /* リストの黒丸を消す */
  flex-wrap: wrap;
}
@media (max-width: 820px) {
  .footer_nav ul {
    gap: 45px;
  }
}
@media (max-width: 390px) {
  .footer_nav ul {
    gap: 20px;           /* 隙間を小さく */
  }
}

@media (max-width: 390px) {
  .footer_nav li {
    flex-basis: 40%;     /* 2列に分かれるように調整 */
    text-align: center;  /* 中央揃え */
  }
}

.footer_nav a {
  text-decoration: none;  /* 下線を消す */
  font-size: 25px;        /* お好みで調整 */
  color: #ffffff;         /* 文字色 */
}
.footer_nav a:hover {
  opacity: 0.4; /* ホバー時の軽いアニメーション */
}
@media (max-width: 820px) {
  .footer_nav a {
    font-size: 18px;
  }
}

.copyright {
  display: block;          /* 中央揃えのためブロック化 */
  margin-top: 75px;        /* navとの間隔 */
  text-align: center;      /* 中央揃え */
  font-size: 18px;         /* フォントサイズ */
}
@media (max-width: 820px) {
  .copyright {
    margin-top: 55px;
    font-size: 14px;
  }
}