a:link { color: #950013; }
a:visited { color: #950013; }
a:hover { color: #950013; }
a:active { color: #950013; }
a {text-decoration: none; }

.hs00{font-size:5px;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs0{font-size:15px;line-height:20px;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs1{font-size:22px;line-height:30px;font-weight:bold;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs2{font-size:20px;line-height:32px; font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs3{font-size:31px;line-height:43px;font-weight:bold; font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs4{font-size:31px;line-height:43px;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs5{font-size:10px;line-height:20px;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs6{font-size:13px;line-height:14px;font-weight:bold; font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;list-style: none;}
.hs6 a{color: #000;text-decoration: none;}
.hs6 a:hover{color: #a0a0a0;}
.hs7{font-size:14px;line-height:26px;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs8{font-size:8px;line-height:12px;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs9{font-size:15px;line-height:20px;font-weight:bold;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.hs10{font-size:25px;line-height:30px;font-weight:bold;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}
.sh0{font-size:12px;line-height:15px;font-family: 'Hiragino Kaku Gothic Pro',' ヒラギノ角ゴ Pro W3',' メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;}

:root {
  --header-h: 60px;
  --pcnav-h: 48px;
  --footer-h: 56px;
}

/* reset */
html, body {
  margin: 0;
  padding: 0;
overflow-x: hidden;
}

/* ===== HEADER ===== */
.header {
  display: flex;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #950013;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
}

.logo {
  font-weight: bold;
}

/* hamburger */
.menu-btn {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}

.menu-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  margin: 5px 20px;
}

/* ===== PC NAV ===== */
.pc-nav {
  position: auto;
  top: 200px;
  left: 0;
  width: 100%;
  height: auto;
  background: #950013;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  z-index: 999;
}

.pc-nav a {
  color: #fff;
  text-decoration: none;
}

/* ===== SP NAV ===== */
.sp-nav {
  position: fixed;
  top: 200;
  left: 0;
  width: 100%;
  height: calc(100dvh - var(--header-h));
  background: #111;
  display: none;
  flex-direction: column;
  z-index: 998;
}

.sp-nav a {
  color: #fff;
  padding: 16px;
  text-decoration: none;
  border-bottom: 1px solid #333;
}

/* open state */
.sp-nav.is-open {
  display: flex;
}

/* ===== CONTENT ===== */
.content {
  padding-top: auto;
  padding-bottom: var(--footer-h);
}

.content p {
  padding: 16px;
}

/* ===== FOOTER ===== */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #950013;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* ===== RESPONSIVE ===== */
 .pc-cont {
    display: block;
  }
.sp-cont {
    display: none;
  }

@media (max-width: 768px) {
  .pc-nav {
    display: none;
  }
  .pc-cont {
    display: none;
  }
 .sp-cont {
    display: block;
  }
  .menu-btn {
    display: block;
  }

  .content {
    padding-top: var(--header-h);
  }
}