/* ============================================
   Reset CSS
   ============================================ */

@scope (.yourjourney-content) {

:scope {
  --color-primary: #745b3d;
  --color-primary-dark: #5a4530;
  --color-navy: #00146e;
  --color-text: #333333;
  --color-text-light: #555555;
  --color-accent-brown: #aa9279;
  --color-accent-gray: #7b939b;
  --color-border: #e5e5e5;
  --color-dot-inactive: #d3cbcb;

  --bg-hero: #eaeaea;
  --bg-air: #edf0f1;
  --bg-place: #f1eeec;
  --bg-comfort: #f1efed;
  --bg-stay: #f2f1f1;
  --bg-experience: #eff4f3;
  --bg-quality: #ebeff4;
  --bg-journey: #fbfbfb;
  --bg-tokutabi: #eeeeee;
  --bg-miles-grow: #e9eaee;
  --bg-miles: #faf9f6;
  --bg-card: #f3f6fa;

  --font-serif: "Noto Serif JP", serif;
  --font-sans: "Noto Sans JP", sans-serif;

  --content-max: 1040px;
  --page-max: 1400px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:scope {
  scroll-behavior: smooth;
  font-size: 1.6rem;
}

:scope {
  position: relative;
  font-family: var(--font-serif);
  color: var(--color-text);
  background-color: #fff;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}

}