@font-face {
  font-family: "Arial";
  font-style: normal;
  font-weight: normal;
  src: local("Arial"), url("../assets/fonts/Arial/ARIAL.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans JP Variable";
  font-style: normal;
  font-weight: normal;
  src: local("Noto Sans JP Variable"),
    url("../assets/fonts/Noto_Sans_JP/NotoSansJP-VariableFont_wght.woff2")
      format("woff2");
}

:root {
  /* レイアウト */
  --max-base-width: 1210px;
  --padding-x-base-pc: 16px;
  --padding-x-base-sp: 16px;

  /* カラー */
  --color-primary: #c30d23;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text: #707070;

  /* フォントサイズ */
  --font-size-base: 16px;
  --font-size-large: 1px;
  --font-size-small: 12px;

  /* トランジション */
  --transition-base: 0.3s;
  --transition-slow: 0.4s;
}

html {
  overflow-y: scroll;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: "Noto Sans JP Variable", sans-serif;
  color: var(--color-black);
}

.body-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  &[data-type="detail"] {
    overflow: unset;
  }
}

.body-detail {
  flex: 1;
  position: relative;
}

.body-detail-inner {
  overflow: hidden;
}

main {
  flex: 1;
}

.inner {
  width: 100%;
  max-width: var(--max-base-width);
  padding: 60px var(--padding-x-base-pc) 0;
  margin: 0 auto;
  &[data-header-opacity="true"] {
    padding: 0 var(--padding-x-base-pc);
  }
}

/* レイアウト */
.container {
  max-width: var(--max-base-width);
  padding-left: var(--padding-x-base-pc);
  padding-right: var(--padding-x-base-pc);
  margin: 0 auto;
}

.image-fill {
  position: absolute;
  height: auto;
  width: 100%;
  inset: 0px;
  object-fit: cover;
  color: transparent;
}

.visually-hidden {
  display: none;
}

.mobile {
  display: none;
}

.body-scroll-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
  /* スクロール位置を固定するための調整をJSで行います */
}

.yakuhan-style {
  font-family: YakuHanJP, "Noto Sans JP Variable", sans-serif;
}

@media screen and (max-width: 1024px) {
  .inner {
    padding: 65px var(--padding-x-base-sp) 0;
    &[data-header-opacity="true"] {
      padding: 0 var(--padding-x-base-sp);
    }
  }

  .container {
    padding-left: var(--padding-x-base-sp);
    padding-right: var(--padding-x-base-sp);
  }
}

@media screen and (max-width: 769px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
}